The Evolution of Fail Pets : Strategic Whimsy and Brand Awareness in Error Messages

Since we've been seeing a lot of Bullseye's face on the "Oops" error messages lately, I thought this was timely:)

Go to article

by Sean Rintel

Traditional usability guidelines propose that error messages should be rationally informative. However, error messages are also inherently brand messages. Branding seeks to create emotional responses to products, and failure evokes emotional responses. Current failure reflects backwards to prior experiences and forward to prospective experiences, and the form of an error message is indicative of the the brand’s sensitivity to the user experience. Error messages are therefore a critical strategic moment in brand awareness and loyalty.

Fred Wenzel refers to error mascots, such as Twitter’s Fail Whale (Figure 1) as fail pets. Fail pets are of particular interest in terms of branding because they can result in brand recognition through earned media. However, that same recognition carries the danger of highlighting service failure. This article discusses the rise of and changes to the depictions of fail pets, from the initial, highly recognizable fail pets, to markedly more cautious error message imagery in later products.

^{Figure 1: Twitter’s Fail Whale: The first fail pet}

A Brief History of Error Message Infamy

As personal computing took hold in consumer markets, error messages became infamous among lay users as terse, jargon-laden, unhelpful, enigmatic, and ugly proof of the inhumanity of computing.

Notable examples include Microsoft Windows’ “blue screen of death” (BSOD) (Figure 2) and Hewlett-Packard’s “PC load letter” (Figure 3). These error messages were so recognizable that they became powerfully associated with perception of the brands and their products. In Microsoft’s case, the BSOD became even more strongly linked to the brand as successive versions of the Windows operating system retained to same ugly and cryptic error message even as the operating system itself was ever more polished. The BSOD highlighted the fact that the interface was a veneer, undermining the company’s claims of innovation.

^{Figure 2: Microsoft Windows XP “Blue Screen of Death”}

^{Figure 3: Hewlett-Packard “PC Load Letter”}

While usability guidelines of the era certainly did point out the problems with such error messages, the Internet era has brought increased appreciation of design and of the social-first nature of modern consumer computing. This is apparent in the changes to the display of HTTP status codes such as “404 Not Found.” As Jesper Tverskov points out, the typical early display of 404 errors literally displayed only the error code (Figure 4).

^{Figure 4: Apache default 404 error message}

However, as web development matured, web browsers began to offer users “friendly” error pages (Figure 5). While this was undoubtedly better for users overall, from a branding point of view users lost not only the technical connection the desired website but were also removed from its branding, which could lead to abandonment of the website.

^{Figure 5: Camino “Friendly” 404 page (Source: en.wikipedia.org)}

Starting around 2001, websites began to offer customized error pages in an attempt to retain branding. The first customized pages simply branded the error with the website logo and perhaps a search field for the site. Yahoo’s error page has remained unchanged in this format since 2004 (Figure 6).

^{Figure 6: Yahoo!’s 404 error page}

Since then, 404 pages have evolved into more geek-oriented humorous messages that promote the website’s brand image. For example, Blippy.com created a sensation when it featured an interactive 404 page that combined its cute hand-drawn drawn style with the double rainbow meme (Figure 7).

^{Figure 7: Blippy’s 404 error page created a sensation using the “double rainbow” meme}

Web 2.0 and the Rise of Fail Pets 1.0

As important as customized 404s were, it was the Fail Whale’s arrival on the shores of Web 2.0 in 2008 that marked a sea change in the adoption of whimsical error messages (Figure 8).

The story of the Fail Whale is well documented. Twitter’s original 503 Service Unavailable message displayed a LOLcat (Figure 8).

^{Figure 8: Twitter’s original 503 LOLcat error page (Source: Paul Downey)}

In 2008, Twitter was getting attention both its unique approach to social sharing, but also for its all-too-frequent scaling problems. As Rob Walker reported, Twitter founder Biz Stone “decided [the LOLcat] was too jokey and turned to iStockPhoto, where he encountered [designer Yiying] Lu’s illustration [“Lifting a Dreamer”], which nicely suggested a team effort to accomplish something difficult. Plus, it was supercute.” (Figure 9).

^{Figure 9: Twitter’s 503 error page showing the Fail Whale}

In terms of branding, the birds in the image bear some resemblance to Twitter’s own logo, which is surely no accident. However, the birds caught users’ attention much less than the cute whale did. On May 30 2008, Nick Quranto dubbed the image “Failwhale”. From that moment on, Twitter users began an unofficial campaign to popularize the concept, depicting it in cartoons, tattoos, art installations, games, and much more. The Fail Whale became earned media of a particularly important stripe, because Twitter users treated it as a badge of membership. Getting members to love your error message rather than revile it is quite an achievement.

When web-comic artist The Oatmeal found Tumblr facing similar scaling issues as Twitter, he proposed that all web services should have cute error mascots. Tumblr listened and officially commissioned The Oatmeal to create their 503 page (Figure 10).

^{Figure 10: Tumblr’s 503 error page showing the Tumbeasts}

Since then, a number of services have used fail pets on their error pages. Github features its Octocat mascot on animated 404 and 500 error pages, but also has an angry unicorn on its 503 error page (Figure 11).

^{Figure 11: Github’s 500 error page featuring Octocat}

The Case Against Fail Pets 1.0

However, fail pets that are as recognizable as the Fail Whale may be on a downswing. Zappos, which was praised for using Dash the Dog as a branding opportunity for its 404 pages (Figure 12), has changed to an unnamed sad penguin image (Figure 13).

^{Figure 12: Zappos.com’s old 404 error page featuring Dash the Dog (Source: Fredericana.com)}

^{Figure 13: Zappos’s current 404 error page featuring the unnamed sad penguin (Source: Zappos.com)}

Indeed, the Fail Whale, Tumbeasts, and Neatorama’s Neatokraken have started to appear less frequently, and not just because the services have largely solved their scaling problems. Tumblr seems to have removed the Tumbeasts, presenting a far more staid, professional error page with no imagery at all (Figure 14).

^{Figure 14: Tumblr’s current Tumbeast-less 503 error page}

When the Firefox 3.1 Crash Reporter was being redesigned, developers on the Mozilla Blog debated the possible use of Foxkeh, the official Firefox Mascot in their error pages. Lead designer Alex Faaborg wrote: “I’m not sure if we want to create something that is too memorable since it will inevitably become the symbol of our failure (blue screen of death). Instead of people saying ‘I’m sick of Firefox crashing’ they will say ‘I’m sick of the [insert metaphor we select here]’”

Evidence for users becoming sick of the metaphor certainly exists for the Ars Techica Moon Shark (Figure 15), used throughout the site for a range or errors. Users have reported being unhappy with seeing Moon Shark so regularly (although that might also be because Moon Shark is not as cute as the Fail Whale).

^{Figure 15: Ars Technica’s somewhat unloved Moonshark}

Evidence for users becoming sick of the metaphor certainly exists for the Ars Techica Moon Shark (Figure 15), used throughout the site for a range or errors. Users have reported being unhappy with seeing Moon Shark so regularly (although that might also be because Moon Shark is not as cute as the Fail Whale).

Mozilla has gone down a more verbal path for its various error messages. When the Firefox browser crashes and the application attempts to reload the tabs/windows that were open prior to the crash, the title of the error message and restart screen admits embarrassment (Figure 16).

^{Figure 16: Firefox’s crash recovery message} 

Firefox’s designers have chosen to title the window with a human-sounding message—the direct address of one social actor to another. It also admits a problem but without using words such as “error” or “crash,” making it just slightly harder to pin those concepts on the application. The phrasing lightens the sense of trouble for the user while also suggesting that the user and the product have a casual social relationship.

Fail Pets 2.0

Recent error messages from Adobe Flash (Figure 17), Apple iCloud (Figure 18), Google Chrome (Figure 19), and even Microsoft’s new BSOD (Figure 20) seem to have become more restrained while still retaining some element of the value of fail pets. All four companies have retreated from unique and highly recognizable fail pets, returning to a much older Internet tradition of humanizing the computing experience: emoticons. Even though Apple’s iCloud logo is linked by design to their older System 7-9 logo, that logo itself was strongly reminiscent of emoticons. The highly simplified imagery of these new fail pets—if they can still be called that—resist a strong connection to the logo or mascot of the brand.

^{Figure 17: Adobe Flash emoticon-ized brick Flash plugin crash error mascot} 

^{Figure 18: Apple iCloud emoticon-ized iCloud error mascot (one of a series)}

^{Figure 19: Google Chrome browser emoticon-ized folder error mascot} 

^{Figure 20: Microsoft 8 emoticon-ized new Blue Screen of Death}

Another recent restrained version of fail pets 2.0 can be found in Google+ (Figure 21) and, in an interesting twist, Twitter (Figure 22). Both services are currently using images of robots in various states of disrepair to indicate errors. Robots may be very useful as fail pets because unlike animals, robots can suffer technological errors. Further, the more that websites use similar imagery (whether robots, emoticon-ized bricks, clouds, etc.), the less each new fail pet becomes associated with the particular brand and the more fail pets come to indicate service failure generally.

^{Figure 21: Google’s current 404 error page showing their Fail Robot}

^{Figure 22: Twitter’s current 503 error page showing their Fail Robot}

Google uses their Fail Robot for all errors, even when its image of disrepair is not well related to the problem. For example, when a Google+ Hangout is full, the broken robot is shown (Figure 23) even though it is an intentional constraint, not an error. If Google wanted to accurately depict the issue, they might show many robots trying to cram into a telephone box. But to do so would associate the robot with Google’s brand. Not creating a specialized image is both easier and shows savvy brand caution.

^{Figure 23: Google+ Hangout at maximum capacity page}

Pros and Cons of Fail Pets as Strategic Whimsy in Error Messages

McCarthy, Wright, Wallace & Dearden (2005) write that “enchantment is a useful concept to facilitate closer relationships between people and technology.” They characterize enchantment as “including the specific sensuousness of a thing, senses of play, paradox and openness, and the potential for transformation.” Fail pets are a manifestation of the importance of sensuousness, play, and transformation to the relationship between service failure and the brand. That being said, fail pets have both pros and cons and should be used with caution.

Pros

• Fail pets show that a service, and thus a brand, cares, and acknowledges that users experience failure is an emotional and interactional moment.
• Fail pets allow for rapid recognition of the occurrence of error. They are far more easily recognized and likely to be comprehended than words, which people often do not read.
• Fail pets can result in earned media.

Cons

• The more popular the fail pets, especially through earned media, the more strongly associated the service becomes with failure.
• Fail pets may develop more visibility and recognition than brand mascots or logos.
• Fail pets may annoy users because they could be seen as flippant or overly cute.
• Fail pets may annoy users because they may make errors more memorable, leading to an impression that the service is always having problems.
• Fail pets may evoke specific cultural issues.
•  

In The Media Equation, Reeves and Nass (1996) claim that anthropomorphism in UIs provokes anthropomorphic responses. In the preface they express “great pleasure of seeing some of our work included in [Microsoft’s] products.” Paul Dourish’s damning review of The Media Equation points out that the product being referred to was Microsoft Bob, an attempt to simplify the GUI via a combination of domestic metaphors and an early intelligent agent, which ranked number two in the list of ten most hated tech mascots of all time. Number one on the list was Microsoft’s even more disastrous attempt at anthropomorphism: The Microsoft Office Assistant Clippy (Figure 24).

^{Figure 24: Microsoft’s Clippy: The most hated tech mascot of all time}

The failure of Microsoft Bob and Clippy should serve as a warning to those who would deploy fail pets simply because they are cute or funny. Even given the amazing earned media of the Fail Whale, there is not strong empirical evidence that the practice of using fail pets is, in fact, working for users. This may explain the shift from strongly identifiable fail pets 1.0 to the much more cautious fail pets 2.0.

Dourish’s critique of Reeves and Nass is quite similar to Alex Faaborg’s comments on the Mozilla blog. Both provide valuable advice for UX designers considering the use of fail pets. Research carefully what kind of social reaction users will have to the particular failure, and decide whether the evocation of a highly social response is a desirable branding opportunity, or a problematic barrier between failure and resolution.

References

• Dourish, P. (1996) Review of The Media Equation (Cliff Nass and Byron Reeves, 1996). In Apple Labs Review.
• McCarthy, J., Wright, P., Wallace, J. & Dearden, A. (2005) The Experience of Enchantment in Human-Computer Interaction. Personal & Ubiquitous Computing 10(6) 369-378.
• Reeves, B., & Nass, C. (1996). The Media Equation: How People Treat Computers, Television, and New Media Like Real People and Places. Cambridge University Press.

How to Annoy a UX Designer

Go to article

By Peter Hornsby

Published: November 1, 2011

“In this column, I’ll take a look at some of the questions that can arise on a project team—and how they should and should not be answered.”

 

The relationship between client and designer does not always work out as smoothly as we would wish, despite the best efforts of all concerned. In this column, I’ll take a look at some of the questions that can arise on a project team—and how they should and should not be answered. I hope these raise a smile—and possibly help you tackle the next awkward client conversation you encounter.

Questions UX Designers Ask Their Clients

First, let’s look at some some of the challenging questions UX designers often ask—and some answers they might get in response.

UX designer:

Have you got a set of requirements for this project?

Client:

Worst answer—Have we! We figured this stuff was pretty easy, so one of the guys has produced a set of designs using PowerPoint and Paint. They’re really great, just what we want, so you can just put them into Visio or whatever it is you guys do.

Better answer—Well, we have a clear idea about what we want to do as a business, but we’re concerned we don’t understand our users perhaps as well as we should. Can you help us with that?

Best answer—Sure, here you go. (Handing over a set of clear, objective requirements that show an understanding of what the business is trying to achieve and what users are trying to achieve.) We’d appreciate your thoughts if you feel we’re missing any opportunities.

UX designer:

What do we know about our users?

Client:

Worst answer—Oh, I’ve been working in this business for 20 years now, and so has Dave our sales guy, so yeah, we know these schmucks. They’re people like us, basically. Only not so smart—I mean, hey! They buy our products, right? Right!

Better answer—Well, we think we have a pretty good understanding, but it would help to check. Can you help us get that sort of insight?

Best answer—Sure, we regularly have interviews and focus groups with our users, plus regular surveys on our sites. What do you want to know?

UX designer:

I’ve produced a first set of wireframes using Visio, and I’d really like your input on the design at this early stage.

Client:

Worst answer—Uh … I’m not trying to criticize your design vision here, but shouldn’t there be some colors in this? And maybe pictures rather than those boxes with Xs in them? Hey! What’s this Lorem Ipsum? Have you been outsourcing this work? We’re not paying you to do that!

Better answer—I love the minimalist style! And this kooky language! Can you do this in Klingon, too? We’re targeting the site at nerds, and they’ll really love this stuff.

Best answer—I like the page layout, but I’m concerned there isn’t going to be enough room for the promotional material we’ll need to put there. Can you take a look at that?

UX designer:

You obviously sell to a wide range of people. Who are your main customers?

Client:

Worst answer—Everybody. This site has to sell to everybody equally. You’re the designer. Make it happen.

Better answer—I’m not sure. I can dig out any information we have if that would help?

Best answer—We have a number of key target customers. Our marketing team has worked up some profiles if you’d like to see them? I can talk you through them and highlight who we sell to most at the moment and the customers we want to develop.

“Clients … ask their fair share of questions that demonstrate less understanding of a UX designer’s role than we might like.”

 

Questions Clients Ask UX Designers

Of course, it’s not only UX designers who ask difficult questions. I’ve also known some clients to ask their fair share of questions that demonstrate less understanding of a UX designer’s role than we might like.

Client:

I’ve shown your design to my wife, and she doesn’t like it. I need you to change everything. Can you still hit the deadline?

UX designer:

Worst answer—Seriously? Your wife? You sell a lot to her?

Better answer—I think it would be useful to test the design with customers and refine the design based on that feedback.

Best answer—It’s great to have input from your wife. May I speak to her so I can better understand her concerns? That way, I can focus my attention on the areas that will make the most impact first.

Client:

Can you also do all of the coding for this project?

UX designer:

Worst answer—You’re kidding, right? You’re employing me as a UX designer, and you want me to code? Sure, I’ll hack something together. Perhaps we should discuss my hourly rate?

Better answer—I’m sorry, that’s not really my area of expertise.

Best answer—I’m afraid that’s a specialized job, but if you have someone who can do the coding, I’ll be happy to work closely with him to make sure we deliver a product that meets your expectations.

Client:

I need you to make sure we come top of Google’s results page every time someone searches for any of our 1,000 products. I don’t want to pay for advertising though.

UX designer:

Worst answer—Sure, no problem. I’m afraid that’s quite an expensive undertaking and could take some time. Perhaps we should discuss my hourly rate?

Better answer—I’m afraid that’s not possible given the proprietary nature of the Google search algorithm.

Best answer—I’m afraid Google uses a very complex search algorithm that they’ve designed to prevent that, but if we could focus on a few key offerings, I think I should be able to help you.

Client:

We’ve already designed and coded the application. Could you just come in at the end of the project and fix the user interface? It shouldn’t take too much effort.

UX designer:

Worst answer—BWAHAHAHA! Sure, I’ll do that. You might want to allocate some budget to making changes once I’ve ripped this thing apart. Perhaps we should discuss my hourly rate?

Better answer—If you’ve already coded it, I’m not sure that I’ll be able to help, but I’m happy to review what you’ve done.

Best answer—I’m happy to take a look and make some recommendations. Once we’ve tackled this project, I’d like to speak to you about how I could add more value by getting involved earlier in your project process.

I’d like to hear from you about what kinds of questions you’ve asked your clients and they’ve asked you—and what you answered and would have liked to have said. Please post your comments below!

Bridging User Research into Design

Go to article

By Janet M. Six

Published: October 17, 2011

Send your questions to Ask UXmatters and get answers from some of the top professionals in UX.

In this edition of Ask UXmatters, our experts discuss how to bridge user research into design.

Every month in Ask UXmatters, our panel of UX experts answers our readers’ questions about a broad range of user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your question to us at: ask.uxmatters@uxmatters.com.

The following experts have contributed answers to this edition of Ask UXmatters:

• Carol Barnum—Director and Cofounder, Usability Center at Southern Polytechnic State University; author of Usability Testing Essentials: Ready, Set. . . Test!
• Dana Chisnell—Principal Consultant at UsabilityWorks; coauthor of Handbook of Usability Testing
• Leo Frishberg—Principal Architect, User Experience at Tektronix Inc.
• Gerry Gaffney—Founder and Lead Consultant at Information & Design
• Adrian Howard—Generalising Specialist in Agile/UX
• Mike Hughes—User Assistance Architect at IBM Internet Security Systems; UXmatters columnist
• Jordan Julien—Independent Experience Strategy Consultant
• Tobias Komischke—Director of User Experience, Infragistics
• Whitney Quesenbery—Principal Consultant at Whitney Interactive Design; Past-President, Usability Professionals’ Association (UPA); Fellow, Society for Technical Communications (STC); UXmatters columnist
• Daniel Szuc—Principal and Cofounder of Apogee Usability Asia Ltd.
• Jo Wong—Principal and Cofounder of Apogee Usability Asia Ltd

Q: How do you bridge user research into design?—from a UXmatters reader

“In a non-UX process, we so often see business, marketing, and technical needs represented in design decisions, while the perspectives of actual users are completely absent. UX research brings those perspectives into the process….”—Whitney Quesenbery

 

“I hardly know where to begin with such a big question,” exclaims Whitney. “The metaphor I used years ago is that starting a design is like reading fortune-telling cards. If you took some of the cards out of the deck, you wouldn’t get the right answer.

“In a non-UX process, we so often see business, marketing, and technical needs represented in design decisions, while the perspectives of actual users are completely absent. UX research brings those perspectives into the process, completing the deck. Design is not a mechanical process. UX design takes all the insights and skills of a good designer or design team. But what makes it UX is ensuring that design focuses on the user experience—context, activities, goals, and emotions.”

If you want to learn more about bridging user research into design, Whitney recommends that you read the works of Steve Portigal, Josh Seiden, and Indi Young. She also recommends Tomer Sharon’s upcoming book, It’s Our Research, “which stresses engaging the whole team in the research process.”

“[A] User insight framework … should focus on a single important insight … [and] insight should be the guiding principle for all ideation sessions.”—Jordan Julien

 

“This is a very broad question,” answers Jordan, “and the answer comes down to the type of user research and the type of design. I’ll assume we’re talking about designing a digital platform or program and will quickly explain how to use initial user research, goal-based user research, and on-going user research.

Initial User Research—Discovery

Platform—User personas, journeys, and scenarios
Use—These personas, user journeys, and scenarios should inform what feature sets and platform requirements get defined. It’s these feature sets and specifications that define what gets designed.
Program—User insight framework
Use—This framework should focus on a single important insight and expand on how it influences behavior. This insight should be the guiding principle for all ideation sessions. Ideation, of course, should lead to the design solution.

Goal-Based User Research—Testing

Platform—Card sorts, usability testing, focus groups, and surveys

Use—This type of research is helpful in defining design options, during the design process. It is often useful in getting user feedback on different design options, but also in gathering up-front insights.

Program—Heuristic testing and informal testing

Use—Generally, programs require a more emotional response than platforms. In this case, testing should focus on documenting users’ emotional state and emotional response to different design options.

On-Going User Research—Multivariate Testing / Goal Tracking

Platform—A/B testing, multivariate testing, and goal tracking

Use—This research can help you adapt your designs to how users are actually interacting with your platform. It’s best to plan what elements you want to test and what insights you’d like to get from the tests.

Program—A/B testing, multivariate testing, and goal tracking

Use—Often, programs don’t have a long enough lifespan to perform meaningful A/B or multivariate testing. That said, you should perform these types of tests and compare the results across multiple programs whenever possible. These learnings can help you optimize and refine designs.”—Jordan Julien

“Just start with the first design alternative that comes to mind…. Don’t constrain yourself, just sketch out as many ideas as you have. You can eliminate those that don’t make sense later.”—Tobias Komischke

 

“I think this is a great question,” replies Tobias. “There’s nothing worse for a UX professional than standing in front of an empty, white wall. You have all your inputs, all the contextual knowledge, but yet, there are so many design alternatives! How do you start?

“Well, I just start with the first design alternative that comes to mind: think brainstorming with a pencil. Don’t constrain yourself, just sketch out as many ideas as you have. You can eliminate those that don’t make sense later. If you can show many design alternatives to your stakeholders, they can identify the good and not-so-good characteristics of each of them. Then in the next iteration, you can try to incorporate all of the good aspects into just one or two designs alternatives and take it from there.”

The Boundary Between Research and Design

“Research that doesn’t bridge into design is useless.”
—Whitney Quesenbery

 

“Research that doesn’t bridge into design is useless,” asserts Whitney. “The research team may have learned a lot, but unless the whole product team gets immersed in the research findings—even if they don’t become deeply engaged in the whole research process—it remains siloed knowledge.”

Leo agrees: “In my process, there is no difference between research and design. Good design begins with good research—it is all part of one continuum. When designers are on your research team, the diversity of the questions and insights you can glean from interactions with users increases substantially, leading to a very rich understanding of the problem space. When you have designers on your research team, the way they frame the questions and interpret, or code, the answers already sets the stage for actionable results.

“When designers are on your research team, the diversity of the questions and insights you can glean from interactions with users increases substantially, leading to a very rich understanding of the problem space.”—Leo Frishberg

 

“Because design is inherently a rapid, iterative process, designers with a sensitivity to user-centered processes not only expect to participate in the initial research, they expect to continue the process of research even as design artifacts are emerging.” 

“If the challenge is to have the right inputs for the design—that is, the right outputs from research—I advise you to be conscious of the fact that your research methods pretty much determine how easy or hard it will be to start designing seamlessly,” says Tobias. “At a minimum, you need the following four inputs for design:

1. data elements—the objects users refer to, present, manipulate, and act upon—for example, records, stocks, or photos
2. functional elements—the operations users can execute on the data elements—for example, create, edit, or copy
3. a taxonomy—the basis for organizing the data elements and functional elements and relating them to each other—for example, users need to be able to delete a photo
4. scenarios, use cases, or user stories—the paths through the taxonomy that users follow when accomplishing a task—for example, users first upload a photo, then map it to a customer record

“Your research methods pretty much determine how easy or hard it will be to start designing seamlessly.”—Tobias Komischke

 

“Your research must unveil all four of these inputs. If you look at taxonomy, it becomes clear that there’s no clear distinction between research and design. A taxonomy can be the result of research—for example, when you use card sorting to understand how the users of a Web site envision the distribution of content across Web pages. But the taxonomy can also be the result of design. For example, you might change the taxonomy that resulted from your research by consolidating the content on two pages into one page.

“Let’s assume that you have all four of these inputs,” Tobias continues. “What’s next? I strongly believe in breadth before depth—meaning that you need to design for the full functional breadth of your product before you design for functional depth. If you don’t, you may learn about the need for some crucial parts of the system too late in the game and find that your already established design framework doesn’t accommodate those parts. It’s like building a house: You want to plan out all of the floors and rooms before you worry about the pictures on the walls. Oh, you want to add another room on the second floor without changing the existing rooms on the first floor? Not a good idea.

“You need to design for the full functional breadth of your product before you design for functional depth. If you don’t, you may learn about the need for some crucial parts of the system too late in the game….”
—Tobias Komischke

 

“The taxonomy should allow you to determine what data elements and functional elements should go together on one screen—or page or window—
based on the scenarios. With that knowledge, you can create a map on a whiteboard that includes all of those screens. The taxonomy and scenarios should also allow you to understand which screens should be close to others in terms of navigation—to support users’ various workflows. You can draw lines with arrows between screens to show those paths. The result might look similar to the map in Figure 1. (I had to remove the screen names. DE = data element; FE = functional element. The color coding of screens represents different user groups.)

Figure 1—Mapping a taxonomy

“You should validate your map with stakeholders and users. Once this map is stable, you have the equivalent of a floor plan for a new house. The next step is to work within the rooms—your screens—to make sure that it’s clear how to get in, how to get out, and what to do within them.

“What’s the interplay between users and the product on any specific screen or within any area of a screen? To determine that, I recommend that you check whether there are already existing ways of doing that. The magic word is patterns—generic, reusable solutions to user-interface design challenges. You can buy Jenifer Tidwell’s book, Designing Interfaces, or you can use Quince, Infragistics’ free pattern explorer. All other user-centered design methods apply, including screen design best practices such as alignments, contrasts, and grid-based design, as well as formative usability testing.”

The Problem Space

“User research findings can come in a lot of different forms. Generally, they describe a current state, but in some cases, a desired state.”—Mike Hughes

 

“User research findings can come in a lot of different forms. Generally, they describe a current state, but in some cases, a desired state,” offers Mike. “Findings from contextual inquiries take this form: Users act this way when they are engaged in such and such a task. Findings from interviews might look like this: Users say they want.... Survey results might take this form: x% of the users prefer y. And so on. So the most important thing is to extrapolate problem statements from these statements. Designs are solutions, so research needs to illuminate the problem. I use scenarios that start with a context paragraph that compiles the facts that I’ve gathered into a description of what’s wrong, as in the following example:

Context—Mary is the Chief Security Officer for ABC bank, a large account. She meets weekly with Frank, the Security Analyst who is assigned to that account. Although she finds many of the standard reports useful, she feels that, on the one hand, she is lacking a concise look at her operations, but also lacks very focused reports that target her specific needs. Frank tries his best to mash up data by exporting and combining them outside our product, but this is time consuming, and he doesn’t always have access to the data he knows is in our system. He has asked that we issue some of ABC’s reports as standard reports and has made a credible case that other customers would benefit from them. In one case, he got what he wanted, but it took three months for his request to get into a development cycle, three months to develop, and three months to test. By the time the report was available, it was no longer as relevant to ABC as when he originally made the request.

“Then, I then write a single imperative sentence, defining the goal from a user’s perspective—for example:

“The important step is using research to understand the problem space, then letting that drive the design.”—Mike Hughes

 

Goal—Produce ad hoc or customer-specific reports—from scratch and by combining elements of existing reports—without having to go through Engineering.

“Finally, I describe the solution through a narrative that describes how using the solution might play out in a realistic example. I iterate and expand on that description with subject-matter experts and developers, and usually end up with some illustrative wireframes. So, for me, the important step is using research to understand the problem space, then letting that drive the design.”

Look at the Big Picture

“Take a step back and look at the bigger picture. If there are problems bridging user research into design, the business doesn’t value the research. If the business doesn’t value the research, it’s not seeing its connection to the bottom line.”—Adrian Howard

 

“There’s a lot that might be bundled up into that question,” replies Adrian. “Are the researchers having problems getting their research results integrated into the product? Are the designers having problems understanding the research? Is the business owner pushing the design in another direction, because he doesn’t value the research? Are implementation constraints causing the design to veer away from the design direction the research indicates would meet users’ needs? It is something else? Well, just for the fun of it, I won’t answer, It depends!

“The best bit of general advice I can give is to take a step back and look at the bigger picture. If there are problems bridging user research into design, the business doesn’t value the research. If the business doesn’t value the research, it’s not seeing its connection to the bottom line. Focusing just on the bridge between research and design won’t solve the larger problem.

“Unfortunately, the connection between user research and the bottom line is a distant and tortuous one in many organizations. Fixing that is a two-stage process:

1. Take ownership of the feedback. Your research doesn’t end when you hand over the conclusions to the design team. Your research ends when the product the research has shaped is in the hands of customers and you have evidence that it’s doing what you said it would.
2. Tighten the feedback loop. The shorter the period between doing the research and getting the feedback that the results were useful, the better. This makes it easier to demonstrate that it was the research that was significant—rather than some random change in the economy, the latest set of TV advertisements, or the phase of the moon.

“Once you have a solid, repeatable feedback loop, you can demonstrate the value of your research to the company. Once you can do that, you’ve solved your biggest problem.”

The Entire Design Team Should Take Part in Research

“Make sure that everyone who has any input to design decisions is part of the user research. When everyone on the team understands the experiences of the users, it’s much easier to generate good design decisions.”—Dana Chisnell

 

Dana recommends the following process for bridging research into design:

1. “Make sure that everyone who has any input to design decisions is part of the user research. When everyone on the team understands the experiences of the users, it’s much easier to generate good design decisions.
2. “Work on analyzing observations together with everyone who attended user research sessions.
3. “Step through a deliberate process, collaboratively looking at observations. An approach that has worked well with teams I’ve worked with has been to run a KJ (Kawakita Jiro) analysis first—also known as affinity diagramming—to identify the priority observations to work on. Once you have the top three to five things, hold a workshop with all the team observers. In the workshop:
   1. Start by having everyone offer what they heard and what they saw relating to the first priority item. No interpreting, yet. Just put the observations out there.
   2. Next step, everyone brainstorms inferences from those observations
      —it’s a game of Guess the Reason. Why did those things happen? What’s the gap between what the user interface was designed to do and what the users were doing?
   3. Then, look at the weight of the evidence. If you’re doing exploratory field research, what happened during the session to support or refute any of the inferences or reasons that you brainstormed? If you did usability testing, what performance measures support or refute the inferences from your brainstorm?
   4. From this, the team should be able to develop theories about what to do to solve the observed issues, creating a design direction that the team can then prototype and test. And the cycle starts again.

“Teams tell me they love this process because it gets them out of the opinion wars, creates a solution collaboratively, and there’s no need for a written report.”—Dana Chisnell

 

“Teams tell me they love this process because it gets them out of the opinion wars, creates a solution collaboratively, and there’s no need for a written report.”

Dan and Jo suggest sharing the following:

• “videos—Get the users to show you how they use products or services and record it.
• photos—Show photos to get a deeper understanding of users’ context—
  home, city, neighborhoods, friends, and family to name a few.
• stories—Tell stories, along with the videos, about how users use products or services.
• observation and insights—As the designers watch the videos, look at the photos, and listen to the stories, get them to write down observations and insights that they can bridge into the design.

“An important component of success in designing meaningful experiences is inviting teams into environments that foster a culture of collaboration, creativity, and openness, in which it’s safe to critique….”
—Dan Szuc & Jo Wong

 

“Overall, it’s about involving designers in the research and making them own the insights. An important component of success in designing meaningful experiences is inviting teams into environments that foster a culture of collaboration, creativity, and openness, in which it’s safe to critique, there are good energies, and team thinking helps you to move beyond your product of today toward a road map of possibilities.” For further discussion, see Dan and Jo’s UXmatters article “The Design Workshop: Bringing It All Together.” Dan and Whitney also cover some of these ideas in their forthcoming book, Global UX: Design and Research in a Connected World.

“Design activities aim not only to make collaborative design fun—and by doing so to free up our minds to be creative—but also to bring research insights into the design process in an organic way.”—Whitney Quesenbery

 

“By the way,” adds Whitney, “this question also ties into making design sessions fun by

• acting out or embodying research results
• writing stories
• using design studio and rapid sketching methods

“These and all the other design activities aim not only to make collaborative design fun—and by doing so to free up our minds to be creative—but also to bring research insights into the design process in an organic way.”

Involve Stakeholders

“Involve your stakeholders in the research,” recommends Carol. “If it’s usability testing, get buy in from at least one key stakeholder or designer on every aspect of planning, testing, and analysis of the findings. While delivering a report about the results from a usability study documents what you have discovered, it doesn’t make the results come alive. Nothing beats seeing users in action. And if you can get your key stakeholders to help plan a study, you will rule out there being any questions about the test protocol that might otherwise come up later.

“If you can get your key stakeholders to help plan a study, you will rule out there being any questions about the test protocol that might otherwise come up later.”—Carol Barnum

 

“I find that involving stakeholders in the process—from start to finish—
means I have the chance to educate them as we move through the steps. This education process ensures that they understand and are committed to all aspects of the study—from the screener for recruiting participants to the task scenarios to the post-test questions.  

“In addition to helping get a study plan that will produce the results that match the stakeholders’ goals, their involvement in the process gives them the results as soon as the study ends. Whether you meet at breaks throughout the day or at the end of each day, a quick meeting to discuss findings turns research into actions without delay. There’s no need to wait for a report. The results of a findings meeting go out the door with the designers. If you don’t have the designers involved in the research, they are left waiting days or even weeks for your report, which they will then need to discuss to decide what actions to take. By then, it may be too late to make changes.”

Personas, Scenarios, and Stories

“At this point, you are trying to make the switch from knowing to doing.”—Gerry Gaffney

 

“The answer to your question depends on several factors,” responds Gerry. “I think of the process as operationalizing the user research data. It’s a horrible word, but it does capture the fact that, at this point, you are trying to make the switch from knowing to doing. Personas and scenarios, in their various formats, can be particularly useful, because they enable you to tell stories about what you’ve found and the implications for the product you’re designing.

“To get to the stories, you need to conduct some data analysis. I still find that the best way to do this, with any large set of data, is to use index cards or Post-it notes and conduct an affinity diagramming exercise—grouping related items and content. This allows you and your team to clearly identify key themes and issues, which, in turn, lets you create the personas and scenarios that will drive the design.

“Run design workshops, during which you can both present your findings and begin to discuss and get agreement on their implications. … Share the journey with your project team—getting their buy-in will have a profound effect on both the design process and the final product.”—Gerry Gaffney

 

“Once you’ve got some solid data—and perhaps draft personas and scenarios—it’s a good idea to run design workshops, during which you can both present your findings and begin to discuss and get agreement on their implications. A very important factor is the need to share the journey with your project team—getting their buy-in will have a profound effect on both the design process and the final product.”

Whitney also recommends “using personas and stories to explore different experiences. Then, experience maps or other models like Indi Young’s mental models are a good way of getting from the messiness of specific stories to a broader—or higher—view.”

When You Are Tight on Time

“If you’re on a really tight development schedule and have got the commitment of your designers to participate in a study, your project is a candidate for the RITE method,” suggests Carol. “Developed by the usability testing team at Microsoft’s Games Studios, RITE stands for Rapid Iterative Testing and Evaluation. The process provides a way to make fast design changes as soon as you identify a problem.

“RITE stands for Rapid Iterative Testing and Evaluation. The process provides a way to make fast design changes as soon as you identify a problem.”—Carol Barnum

 

“Using the RITE method, you can schedule a participant—or a few participants—then debrief to diagnose whatever problems the design team has observed. As soon as the team reaches agreement that the problem exists, it gets fixed. You can test your change with the next one or two participants. Testing and changing the design so often requires the full commitment of the design team, but the beauty of this commitment is that either the next participants immediately confirm the strength of the design changes, or you continue to make more changes and do more testing until the design is right for users.”

* Magazine * * Network * Shop * Job Board * Smashing Directory * Coding * UXDesign * Wordpress * Designinformer * RSS * Facebook * Twitter * Newsletter All categories * Coding * Design * Graphics * Inspiration * CSS * Freebies * HTML5 * JavaScript * Photoshop * Typography * Usability * Wallpapers * WordPress Smashing Magazine Idiots, Drama Queens and Scammers: Improving Customer Service with UX

Go to article

User experience design isn’t just about building wireframes and Photoshop mock-ups. It extends to areas that you wouldn’t necessarily think are part of the discipline.

For example, your customer service department can have a huge impact on your website’s overall user experience. Similarly, the design of your user experience could have an awfully big effect on your customer service department. Of course, not all of your users will interact with the customer service department, but for those who do, their experience can improve or destroy the customer relationship.

Improving Customer Behavior

Consider the difference in customer perception between Zappos and Comcast. Customers routinely rave about one, while the other was attacked with a hammer. Clearly, there’s a difference in the way they deal with their users.

An excellent customer experience is a core value for Zappos

One of the biggest differences between the two is that Zappos appears to go out of its way to deliver great customer service long before a user ever has to deal with a representative. The differences aren’t just in the way they treat unhappy customers. Zappos makes a concerted effort to prevent customers from ever being unhappy in the first place. And that’s a good policy, because unhappy customers are expensive.

I spend a lot of time talking to customers, customer support reps and community managers. I’ve learned that there are three types of users who take up an inordinate amount of time and energy for customer service departments and cost far more money than they should. The great thing is that the behavior of many of these users can be improved or corrected with the right set of features and a proactive interaction design.

Let’s look at some of the folks who are costing you money and time. I’ll call them idiots, drama queens and scammers.

The Idiots

Customer service representatives spend a lot of time explaining obvious things to users.
Recently, I spoke with a community manager for a web-based marketplace where users can sell things to other users. The community manager was annoyed because he routinely had to explain to the sellers, “If you ship something to an overseas army base, it will take longer than it does to ship within the country.” He couldn’t believe that people didn’t know this. He thought they were idiots.

(Image: JD Hancock)

But are these sellers really idiots? Of course not! They might be geniuses who just don’t ship things on a regular basis, so they don’t know that an APO address indicates an army base that might be overseas. As far as the seller is concerned, they’re shipping to a regular domestic address and now have to wait almost a month to get paid.

In fact, a huge proportion of the time, the “stupid questions” that customer service representatives get over and over aren’t stupid at all. They’re opportunities to improve the user experience design.
If you’re getting the same question, it probably means you’ve made an incorrect assumption about information that a typical user is likely to have. In our example, the company was mistakenly assuming that everyone knows what an APO address is and that delivering a product to one could take up to a month.

How to Turn Idiots Into Geniuses

Spend some time with your customer service people, and find out what questions are being asked repeatedly. Figure out a way to answer those questions within the interface so that someone doesn’t get to the point of having to contact support.

In our example, the company could add a small note to all APO addresses, pointing out to sellers before they ship that the address is for an army base and warning that delivery could be significantly delayed. It probably won’t stop every inquiry they get about this problem, but it should help just by letting people know what to expect.

The Drama Queens

Too often, interactions with certain customers blow up far more quickly than service reps expect. As soon as their special requests are denied, some users will rant and rave and threaten legal action, while others calmly accept the fact that rules apply to everyone equally.

(Image: F. C. Photography)

If you talk to customer service reps or community managers, they could probably name a dozen drama queens off the top of their heads. And they won’t look happy doing it either. You’ll see eye rolling and head shaking.

One client complained that every time they released a new feature or a significant change, their power users would blow up and start screaming and yelling about how the company was trying to ruin their lives. It got to the point that the product manager was terrified of releasing anything new for fear of angering customers.

The saddest part of all of this is that the people who cared the most about the product were the ones who were complaining the loudest when things didn’t go their way.

How to Turn Drama Queens Into Advocates

You might think that you couldn’t do much as a user experience designer to calm drama queens, but you’d be wrong.

One of the main reasons why people escalate to that point is that they feel they’re being ignored. In fact, one of the most common reasons that customers leave is that they believe the company doesn’t care about them. Your job is to make them feel that their opinions are important and that they’re being heard.

One way to do this is to provide a good venue for them to express their opinions. Unmoderated or lightly moderated forums where they will talk to other people who are also unhappy are not good venues. One-on-one conversations with staff are the best, but talking to every unhappy customer is obviously not always possible.

A client of mine had a great way to deal with this problem. The company needed to recruit people for user research. Meanwhile, a number of people were writing in with complaints. So, the company frequently asked those people to participate in user research sessions. Two birds!
You’d think that the users’ responses would be skewed because they were already unhappy, but this could be easily controlled in the sessions. The complainers were much easier to book as research participants because they had initiated the contact, and they always ended the sessions much happier for having been asked their opinions.

Another important way to minimize drama is to involve important customers early on in design changes. Sure, power users often push back when you make a major design change, but that push is significantly softer when the change is an obvious improvement and people know what to expect and feel that their opinions have been taken into account.

You can keep the community on your side by getting their feedback during the design process and keeping them in the loop on the progress of changes. Allowing them to opt into changes and to give early feedback can really improve your relationship.

Even more importantly, involving your most important users early on will significantly improve the design of the feature, since you’ll be able to anticipate any complaints and edge cases.

The Scammers

Scammers are both the hardest and the easiest group for customer service reps to deal with.
They’re tough, because determining whether someone is a scammer or just an idiot or drama queen is not always easy. They’re easy, because once you know for sure that someone is a scammer, the correct thing to do is ban them immediately and never let them come back.

The biggest problem is that misidentifying legitimate users as scammers can have an incredibly negative impact on your business. No one likes being accused of something they didn’t do.
Also, in a social environment, the behavior of scammers can have a negative effect on other users. Think of fraudulent buyers and sellers on eBay or the highly publicized assaults by people who advertise on Craigslist.

How to Turn Scammers Into Good Citizens

Sorry, you can’t! What you can do is quickly identify the bad actors and get them off your website as quickly as possible before they negatively affect your good customers.

Enlisting the help of the community in policing can make this process much faster and more effective. Give users tools, such as flagging and comments, to report and protect themselves from scammers. Enlist community moderators to interact regularly with other members and alert you early on when someone seems to be doing something sketchy.

Also, give customer service reps tools to track the behavior of individual users so that they can resolve disputes quickly and appropriately, without a lot of “He said/She said.”

Other Problem Customers

Obviously, these three aren’t the only types of users that your customer service people will deal with. There will be the normal folks who have a genuine problem with your service or who find bugs. There will be people who want to cancel a subscription or ask a question about a policy.

But idiots, drama queens and scammers are the ones who will take up a disproportionate amount of your time and energy. They are the ones who can sap the spirit from your customer service reps and make them less able to deal with other problems.

Luckily, they also have the kinds of problems that you can address in your user interface. By providing the right information at the right time and enabling customers to report bad behavior, you can dramatically lower the amount of time you spend dealing with problem users.
And that means you’ll have a lot more time to deliver fabulous service to your best customers!
(al)(fi)

---

© Laura Klein for Smashing Magazine, 2011.

The Role Of Design In The Kingdom Of Content

Go to article

• By Jason Gross
• October 24th, 2011

If content sits at the top of the food chain, why do we spend so much time talking about the finer points of design? Every day we debate, experiment with and discuss topics that easily fall into the category of aesthetics, enhanced functionality and layout; in fact, relatively rarely do we talk about content. Nevertheless, even though we should concede that content is king in this realm, this doesn’t mean that design should be devalued.

It may seem logical that the user experience lives and dies by how the user relates on an emotional level to the content on a website. But this is not necessarily the case. From a design perspective, our job is to maximize the value of every visitor, whether they love the content or hate it. The role of a UX designer is not always to make everyone feel all warm and fuzzy inside. A rich Web experience could include the emotion of happiness, humor, discontent, sadness, anger or enlightenment. A well-designed website enables us to attribute our emotion to its source and connect us to that environment through a range of senses. A UX designer should understand why and how to utilize the principles and techniques they have learned to support the website’s precious content.

 

[Editor's note: Have you already got your copy of the Smashing Book #2? The book shares valuable practical insight into design, usability and coding. Have a look at the contents.]

Justifying User Experience Design

Investing in UX design as an amplifier of good content is not always an easy process. In many industries, a product that fills a demand and that works as it should is good enough. Most of us don’t care how an ink pen or a computer monitor makes us feel, as long as it works. A large portion of the Web still reflects this sentiment, as do clients and project managers who haven’t been educated in the value of UX.

A website is a much more involved product than an ink pen and calls for a different measurement of user satisfaction. A product that merely meets demand and works correctly does not suit a medium that is so highly interactive and saturated. As designers, our task sometimes is to convince other parties of the value of building a user’s personal engagement with the website’s content. Fortunately, we have examples of companies that have done UX right and that have the success to show for it.

As a geek who enjoys building computers, I look to Newegg as a good example of a company that has played to its strengths to deliver a superior user experience. In its early days, Newegg’s fair prices and lightning-fast delivery of computer components made it the place to shop for IT people. This was all great, but the real kicker was that users who loved to share product strengths and weaknesses with each other could do it all on Newegg’s website.

This turned out to be a fantastic benefit for new users, who were inclined to trust the experience and suggestions of people they regarded as peers. As a result, Newegg built a massive army of geeks who generated content and provided an extremely valuable experience to its users. If you had a device or component that was functioning oddly or not at all, chances are that someone had shared the cause and maybe even a solution in a Newegg review.



Newegg acted on this opportunity the right way by using design to highlight its most valuable content. While its design may not be the slickest or most modern, Newegg provides a great experience and has high user satisfaction. Ratings and reviews by peers have become a driving force in Newegg’s design and populate nearly every page. As the design has evolved over the years, product reviews have floated to the surface of nearly every page, and the system for contributing reviews has grown in depth and functionality as well. Newegg even took this to the next level with a recent nationwide ad campaign and design. All of this came about because Newegg identified which of its content made for a strong user experience and built on it, which should be done in every Web project.

Identifying the content that makes you stand out is only the first piece of this puzzle. What we really want to explore is how to take everything we have learned about color theory, lines, shapes and visual movement and apply it to our content in a way that doesn’t just decorate it or even make it pop on the page, but rather that supports the conversion of a goal or delivery of a message. Much like how the primary function of petals on a flower is to attract insects to pollinate, good design ensures that your website will thrive. All of that great design talent needs to be applied not only to the content but to the layer before and after it as well.

The Delicious Design Sandwich

With virtually every website, good UX design can be sectioned into three parts or events: introduction, consumption and reaction. Content is at the core, the meat of what the user is looking for, and on both sides of the content are events that are driven by a well-executed design.

User Introduction

The Web is a world of first impressions, and quick ones at that. Users form an opinion of a website within the first few seconds of loading it. This means that the colors, the layout and the presentation of headings are all evaluated before any content is actually absorbed. Users are inclined to scan content until they zero in on something that piques their interest. Regardless of what your content actually says, the design around it controls what the users see first and how their eyes move across the sections of the page.

In addition to searching for interesting information, users will also be determining how credible this resource is. Despite being constantly taught that we shouldn’t judge a book by its cover, all of us are susceptible to trusting a resource based on our familiarity with it, what our peers think of it and the time and money that we estimate was put into its construction.

Living Social takes advantage of this in its design in multiple ways. A quick scan of the main page after the user has entered an email address and location reveals several techniques that have been implemented to elicit a reaction from the user.



Perhaps most striking is the background image. In every city that Living Social serves, a background picture loads that the visitor can relate to. I immediately connected with this website because I did a double-take at the background image and realized that I pass by this area all the time: it’s just down the road from me!

Living Social has also done the little things right. A clear hierarchy is established on the page through the headings and content modules; the call to action is the most prominent element; and the interactions oriented around engagement are easily accessible. The counters that tell you how many people have bought the deal and how much time you have left generate sufficient peer pressure.



When all is said and done, Living Social has invested in the introduction side of its design, which makes a lot of sense given its content. Living Social and the other daily deal websites thrive on a high volume of quick visits, which means they often live and die on first impressions. The heavy emphasis on the impression portion of this design begins with the content. Instead of fitting content into a design concept, Living Social has wrapped an appropriate design around the content that it wants to feature. But we aren’t done there.

Content Consumption

Even in the process of consuming content that we’ve proposed, design plays a huge role. The crucial rules of typography control the experience that users have when reading articles. The mood of images and video can vary drastically based on their aesthetic setting. If your primary content is user-generated, then the ability of users to interact with the website and each other will be driven by the interface you’ve designed.

More than anything else, content is an opportunity to set the tone of the website. We have all witnessed the untold damage that is done when content that should have a professional tone is set in Comic Sans. The font face, size and color can do an amazing job of controlling how your website says something that leaves an impression on users, which leads to the final piece of our sandwich. Along these lines, the way you frame entire portions of the website gives the audience clues as to what their emotional reaction should be.

We see this naturally develop with websites created by designers for their own peers. Portfolios, design-related apps, and websites for networks and conferences are all designed for tone. Of course, getting too extravagant in an attempt to impress is the opposite of what we are trying to achieve here. However, in the case of a conference about HTML and CSS, a website that experiments with the edges of what’s possible with HTML and CSS is an appropriate setting for the content.



Like many websites for technology and design conferences, The Combine in Bloomington, Indiana, is highly design-driven. In addition to the slick HTML and CSS that will resonate with the professionals being targeted, the aesthetics intentionally reflect the small-town atmosphere of Bloomington. The same features that distinguish the location of this conference also encourage users to identify with the design.

User Reaction

This may be the most understated design-driven activity on a website, but it carries huge value. How the user responds to your content is pivotal to the website’s success. These days, merely delivering content is not enough. The Web has a wealth of information and options. In order for a website to enjoy any success, it must take advantage of referrals, links and maybe a bit of buzz on social networks. If we want to stand out on the Web, our users need to share our content with friends or contribute their own thoughts, reactions and content.

YouTube serves as a practical example of building an experience around the user’s reaction. YouTube kickstarted the concept of viral videos, but getting there required that the website be designed around the content itself. We all know that a massive amount of content is uploaded to YouTube every day, but the degree to which a video goes viral depends on how encouraged the user feels and how easily they are able to share or contribute to the experience.




It doesn’t take a trained eye to see this in action all over any given YouTube page. Suggested and related videos are always available, along with the option to share a video on your favorite social network or embed it anywhere on the Web. Of course, the design was not made to look good on its own and then this functionality shoehorned in. Again, the emphasis is on the content, and the design elements that result in the user’s reaction are all rooted in sharing or exploring that content.

In a world driven by likes, tags, tweets, shares and votes, the follow-through that a website and its content facilitates becomes a massive factor in its success or failure. A user who visits a website, views the content and then leaves generates little value for the business. For this reason, we see blog articles sprinkled and even littered with related content, suggested videos that come up after you watch a clip, and quick and easy share and save buttons everywhere. The follow-through on each of these actions is highly design-driven. The color, shape, size and location of links and buttons determine whether a visitor sees them quickly or not. But, of course, we can’t expect everyone to play the role that we define for them…

Designing For An Experience

As important a role as design plays in the perception of and reaction to your content, people still argue that a user experience cannot truly be designed. Of course, the user ultimately decides how they engage with any design. If the goal of a design is to convert every single user into a customer, then failure is the only outcome. We can, however, design an experience that connects immediately with a target audience, delivers information with a clear tone and purpose, and encourages a response.
We want to design an experience for users who are willing to buy into it. Users come to your website most likely because they already have some interest in digging into the content, which means they are willing to play into the experience that you have designed. If a user stumbles on the website by mistake, then taking them all the way to the reaction stage of the experience becomes more of a bonus than a goal.

Different techniques for driving engagement with content can be found across the Web. If you’ve been to the blog xheight lately, you may have noticed its effort to prioritize the content in its posts. In addition to the minimalist design, the designer further isolates the content by fading elements out of view after your cursor has been idle for a few moments, leaving the article you are reading as the only element on the page.




The jury is still out on whether this makes for a better or more distracting reading experience, but this design decision clearly centers on the content that the designer wants to deliver.

A different technique is apparent on the Livestrong website. When the user hits the browser’s address bar or tries to click away after reading an article, a modal window with related content pops up. It’s interesting that the modal window is enabled only in the blog section of Livestrong, and not by mistake. With a website this rich in content and from so recognizable a brand, the designers could assume that the majority of traffic to these articles would come from search engines. The goal here is to keep users from jumping back to Google for more content and to have them continue engaging with the content here.


Editor’s note: The Live Strong site no longer has this feature since it seems to have been modified right before we published this article.

Keep Designing

Now as much as ever, companies are recognizing the value that good design and a solid user experience can bring to them. UX design is about developing a road map for the user, encouraging certain actions, and developing a user base that wants to engage with your content.

The key to driving this engagement is to ensure that we value design in the right way, not simply as a template, theme or color scheme but as a support system for key content. We can use design to make a website unique and more memorable. We do this by laying the foundation of a good impression, enabling smooth and meaningful consumption, and encouraging engagement with the content. All three of these areas are opportunities to drive a user experience that is in harmony with our content.

Additional Resources

• “In Defense of Eye Candy”
  Dig deeper into how we react emotionally to aesthetically diverse elements.
• Emotional Design: Why We Love (or Hate) Everyday Things
  This book by Donald Norman focuses on how the design of a product plays a huge role in our emotional connection to it.
• “Eye Candy vs. Bare-bones in UI Design”
  This article compare the pros and cons of simplistic design compared to eye candy, and how to find the right balance in your project.

(al)

Jason Gross Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.