User Experience Design

Imprint
Copyright 2012 Smashing Media GmbH, Freiburg, Germany Version 1: February 2012 ISBN: 978-3-943075-23-6
Cover Design: Ricardo Gimenes PR & Press: Stephan Poppe eBook Strategy: Thomas Burkert Technical Editing: Andrew Rogerson Idea & Concept: Smashing Media GmbH
Smashing eBook #15User Experience Design2
ABOUT SMASHING MAGAZINE Smashing Magazine is an online magazine dedicated to Web designers and developers worldwide. Its rigorous quality control and thorough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published article is carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine's own publishing policy. Smashing Magazine publishes articles on a daily basis with topics ranging from business, visual design, typography, front-end as well as back-end development, all the way to usability and user experience design. The magazine is and always has been a professional and independent online publication neither controlled nor inuenced by any third parties, delivering content in the best interest of its readers. These guidelines are continually revised and updated to assure that the quality of the published content is never compromised. ABOUT SMASHING MEDIA GMBH Smashing Media GmbH is one of the world's leading online publishing companies in the eld of Web design. Founded in 2009 by Sven Lennartz and Vitaly Friedman, the company's headquarters is situated in southern Germany, in the sunny city of Freiburg im Breisgau. Smashing Media's lead publication, Smashing Magazine, has gained worldwide attention since its emergence back in 2006, and is supported by the vast, global Smashing community and readership. Smashing Magazine had proven to be a trustworthy online source containing high quality articles on progressive design and coding techniques as well as recent developments in the Web design industry.
About this eBook

User Experience (UX) can be strongly inuenced by behavioral factors such as emotions, beliefs, preferences and even cultural backgrounds. Being aware of this, Web designers keep developing strategies to improve the overall UX with the help of storytelling, tools for problem solving, relationship engineering and costumer service improvement. This Smashing eBook User Experience Design provides you with insights on how to improve your website based on the most important UX principles.
Table of Contents
A Design Is Only As Deep As It Is Usable Why User Experience Cannot Be Designed Design Is About Solving Problems Designing The Well-Tempered Web Better User Experience With Storytelling Part I Better User Experience With Storytelling Part II Taking A Customer From Like To Love: The UX Of Long-Term Relationships Idiots, Drama Queens And Scammers: Improving Customer Service With UX Relationship Engineering: Designing Attraction Part I Relationship Engineering: Designing The Happily Ever After Part II About The Authors
A Design Is Only As Deep As It Is Usable

Louis Lazaris
There are well-known proverbs that imply (or state outright) that beauty is supercial and limited in what it can accomplish. Its whats inside that counts and Beauty is only skin deep are a few simple examples. Because the Web design industry is now ooded with a lot of raw talent, and because virtually anyone can create a beautiful website, recognizing a truly beautiful website experience is becoming increasingly dicult. What appears beautiful to the eye might in fact be more of a hindrance. In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not supercial, but rather improves and enhances the user experience.
Gradients, Drop-Shadows, Reections, Oh My!

A lot of things could fall in the category of beautiful or attractive in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful? If youve been keeping tabs on the Web design industry in the last ve years, youve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and Im sure weve all done
it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS galleryworthy.
Mint.com has everything a client could ask for in a Web 2.0 design. Does that mean its beautiful?
The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benet the user experience and their clients bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; theyre usable, accessible and optimized to benet both the user and website owner.
e Dribbble Syndrome
With the recent popularity of Dribbble, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something theyre working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that its out in the wild, the snippet becomes nothing more than eye candy.
Dribbble shows out-of-context design shots. Is this a bad thing?
Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and oer feedback. But we mustnt lose sight of the fact that every design decision should have signicant reasoning behind it.
e Style-Less Comparison
How do we measure beauty? If a website is dicult to use, then isnt its beauty without purpose? Look at the comparison in the image shown below.
The Nettuts+ logo and navigation bar.
I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the beautiful one.
The Facebook home page.
While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really aect the usability (of course, after you increase the color contrast for the form labels in the right upper corner)? If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldnt outperform the adorned version?
What Makes A Design Usable?

Im not about to make a case for bringing back blue links on a white background on every website. In fact, as Ill explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them. Rather, Im encouraging designers to consider two things when adding beautiful enhancements to their designs. Responsive and intuitive page elements, Branding and consistency of theme. Focusing on these two things will give every pixel in a design a purpose and will contribute to the websites overall usability. Lets consider both of these, with a few simple examples to illustrate their eectiveness.
RESPONSIVE AND INTUITIVE PAGE ELEMENTS MAKE A DESIGN USABLE If a design element makes a website feel more friendly or gives subtle hints as to whats happening, then this adds to its usability. Look at the simple example below from Design Informer:
On the Design Informer website, hover over the search box in the top right, and youll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3. The default look of the search box could be a bit brighter to improve the general usability of the site, but in this specic case the idea counts more than the execution. This very simple eect conveys to the user that this is a usable element, and it makes the search box more inviting. Its a ridiculously simple technique but has a very powerful eect. But just because you can use an animated eect does not mean you should. If, as in the case of Design Informer, the eect makes the UI more intuitive and responsive, then it is justied. This statement by Stuart Thursby sums it up well:
If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then theyre sorely misguided. Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the eort. Decoration only goes so far and often has an eect opposite to the one intended, so consider yours carefully before including it in your design. Another example of an animation that enhances usability is found on Soh Tanakas new website. Look at the screenshot below from this post on his blog:
When you hover over any presentation of code on his website, youll notice that the block expands to the right (probably via jQuery, so it would work in every browser). Again, a simple eect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to t in the highlighter, so the code either wraps or creates ugly scroll bars. Tanakas solution makes the code more inviting and readable, and it decreases the likelihood of wrapping or scroll bars. So whether were talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive eects, we can take a design beyond mere decoration in many ways and truly enhance its usability. BRANDING MAKES A DESIGN USABLE If an element contributes to a websites overall branding, image or reputation, then its safe to say that it contributes to its usability. Properly planned and executed branding is not supercial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.
Look at the screenshot below from 10k Apart:
The laurel wreath in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.
And then we have the beautiful and intuitive design for Launchlist:
This screenshot doesnt do justice to the websites look and feel; youll have to poke around to really experience it for yourself. The design might appear decorative and supercial at rst glance, but its not. The elements work together to create a consistent and inviting atmosphere, extending the launch theme throughout with subtle animations.
Usable Doesnt Have To Mean Ugly

My purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable. Rather, this article is just a reminder that eye candy is important, but it isnt everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the websites intuitiveness, usefulness and branding. All of these things contribute to the overall eect of a design.
Why User Experience Cannot Be Designed

Helge Fredheim
A lot of designers seem to be talking about user experience (UX) these days. Were supposed to delight our users, even provide them with magic, so that they love our websites, apps and start-ups. User experience is a very blurry concept. Consequently, many people use the term incorrectly. Furthermore, many designers seem to have a rm (and often unrealistic) belief in how they can craft the user experience of their product. However, UX depends not only on how something is designed, but also other aspects. In this article, I will try to clarify why UX cannot be designed.
HeterogeneousInterpretations of UX
I recently visited the elegant website of a design agency. The website looked great, and the agency has been showcased several times. I am sure it delivers high-quality products.But when it presents its UX work, the agency talks about UX as if it were equal to information architecture (IA): site maps, wireframes and all that. This may not be fundamentally wrong, but it narrows UX to something less than what it really is. The perception might not be representative of our industry, but it illustrates that UX is perceived in dierent ways and that it is sometimes used as a buzzword for usability (for more, see Hans-Christian Jetter and Jens Gerkens article A simplied model of user experience for practical application). But UX is not only about human-computer interaction (HCI),
usability or IA, albeit usability probably is the most important factor that shapes UX. Some research indicates that perceptions of UX are dierent. Still, everyone tends to agree that UX takes a broaderapproach to communication between computer and human than traditional HCI (see Ee Lai-Chong Law et als article Understanding, scoping and dening user experience: a survey approach).Whereas HCI is concerned with task solution, nal goals and achievements, UX goes beyond these. UX takes other aspects into consideration as well, such as emotional, hedonic, aesthetic, aective and experiential variables. Usability in general can be measured, but many of the other variables integral to UX are not as easy to measure.
Hassenzahls Model Of UX
Hassenzahls Model of User Experience.
Several models of UX have been suggested, some of which are based on Hassenzahls model. This model assumes that each user assigns some attributes to a product or service when using it. As we will see, these attributes are dierent for each individual user. UX is the consequences of these attributes plus the situation in which the product is used. The attributes can all be grouped into four main categories: manipulation, identication, stimulation and evocation. These categories can, on a higher
level, be grouped intopragmatic and hedonic attributes. Whereas the pragmatic attributes relate to the practical usage and functions of the product, the hedonic attributes relate to the users psychological well-being. Understanding the divide can help us to understand how to design products with respect to UX, and the split also claries why UX itself cannot be designed. MANIPULATION
Hassenzahl explains the hedonic and pragmatic qualities with a hammer metaphor. The pragmatic qualities are the function and a way for us to use that function. However, a hammer can also have hedonic qualities; for instance, if it is used to communicate professionalism or toelicit memories.(Image: Velo Steve)
In this model, the pragmatic attributes relate to manipulation of the software. Essentially, manipulation is about the core functionalities of a product and the ways to use those functions. Typically, we relate these attributes to
usability. A consequence of pragmatic qualities is satisfaction. Satisfaction emerges if a user uses a product or service to achieve certain goals and the product or servicefullls those goals. Examples of attributes that are typically assigned to websites (and software in general) are supporting, useful, clear and controllable. The purpose of a product should be clear, and the user should understand how to use it. To this end, manipulation is often considered the most important attribute that contributes to the UX. IDENTIFICATION Although manipulation is important, a product can have other functions as well. The rst of these is called identication. Think about it: many of the items connected to you right now could probably be used to get an idea of who you are and what you care about, even though some of them would be more important or descriptive than others. The secondary function of an object is to communicate your identity to others. Therefore, to fulll this function, objects need to enable users to express themselves. The growth of social media can be explained by this identication function. Previously, we used personal websites to tell the world about our hobbies and pets. Now, we use social media. Facebook, blogs and many other online services help us to communicate who we are and what we do; the products are designed to support this identication need. MySpace, for example, takes advantage of this identication function; it allows users to customize their proles in order to express themselves. WordPress and other platforms let bloggers select themes and express themselves through content, just as users do through status updates on Facebook, Twitter and all the other social platforms out there.
STIMULATION
Gmail noties users when they forget to attach a le to an email.
The Pareto principle, also known as the 80-20 rule, states that 80% of the available resources are typically used by 20% of the operations. It has been suggested, therefore, that in traditional usability engineering, features should have to ght to be included, because the vast majority of them are rarely used anyway. This is necessarily not the case with UX, because rarely used functions can ll a hedonic function called stimulation. Rarely used functions can stimulate the user and satisfy the human urge for personal development and more skills. Certain objects could help us in doing so by providing insights and surprises. From this perspective, unused functions should not be dropped from software merely because they are used once in a blue moon. If they are kept, they could one day be discovered by a user and give them a surprise and positive user experience. As a result, the user might think What a brilliant application this is! and love it even more.
In fact, this is exactly what I thought (andfound myself tweeting) when Gmail notied me that I had forgotten to attach the le Id mentioned in an email. If you do a Twitter search for gmail attachment, youll probably nd many others who feel the same. Furthermore, I think Pretty cool! when YouTube enhances its presence by modifying its logo on Super Bowl Sunday (or Valentines Day). I also discovered something new when MailChimps monkey whispered, Psst, Helge, I heard a rumor and linked me to a Bananarama song on YouTube. There are many examples, but thebest stimulating functions are probably those that are unexpected but still welcome (like the Gmail notication). EVOCATION
Souvenirs tend to have weak manipulative qualities, but they can be evocative when they elicit memories. (Image: meddygarnet)
The fourth function that a product can have, according to Hassenzahls model, is evocation, which is about recalling the past through memory. We enjoy talking and thinking about the good old days (even yesterday), and we want objects to help us with this. Even weird, dusty and practically useless souvenirs (with weak manipulative qualities) have evocative function because they help us to recall the past. In design, we can certainly give a website a vintage look and feel to remind us of our childhood, high school or the 60s or the 30s. But even websites with a modern and minimalist design can have evocative attributes. For instance, dont Facebook and Flickr (by way of their users and your friends) provide you with a huge number of pictures from the past, some of which are highly evocative?
us, UX Cannot Be Designed
The MailChimp monkeys words will probably appeal to some users more than others.
Having said all this, why is it argued that UX cannot be designed? Its because UX depends not only on the product itself, but on the user and the situation in which they use the product.
YOU CANNOT DESIGN THE USER Users are dierent. Some are able to easily use a website to perform their task. Other simply are not. The stimulation that a product provides depends on the individual users experience with similar products. Users compare websites and have dierent expectations. Furthermore, they have dierent goals, and so they use what you have made in dierent modes. Think about it: when judging the food and service at a restaurant, you will always compare what you experience to other restaurants you have been to. They have shaped your experience. Your companions compare it to their previous experiences, which are certainly dierent from yours. The same goes for software, websites and apps. Evocative qualities vary even more, simply because all users have a unique history and unique memories. YOU CANNOT DESIGN THE SITUATION UX also depends on the context in which the product is used. A situation goes beyond what can be designed. It can determine why a product is being used, and it can shape a users expectations. On some occasions, you may want to explore and take advantage of the wealth of features in WordPress. In other situations, the same functions may make things too complex for you. On some occasions, you may nd it totally cool that the MailChimp monkey tells you randomly that, Its ve oclock somewhere, but in other cases it would feel entirely weird and annoying, because you are using the application in a dierent mode. Furthermore, UX evolves over time. The rst time a user tries an application, they may be confused by it and have a slightly negative experience. Later, when they get used to it and discover its wealth of features and potential
and learn how to handle it, they might get emotionally attached to it, and the UX would become more positive.
We Can Design For UX
Areroller coastersfun, thrilling and exciting or just breathtakingly scary? Its hard to tell. (Image: foilman)
Many designers label themselves UX designers. This implies great condence in the capabilities of the designer; it suggests that the user experience can be designed. But as explained, we cannot do this. Instead, we can design for UX. We can design the product or service, and we can have a certain kind of user experience in mind when we design it. However, there is no guarantee that our product will be appreciated the way we want it to be (again, see Hassenzahl).We can shape neither our
usersexpectations nor the situation in which they use what we have designed. Itis certainly possible to have a fairly good idea of the potential ways a user will judge what we make,as Oliver Reichenstein points out.Movies, rhetoric and branding demonstrate as much: they predict certain experiences,andthey often achieve their goals, too. However, a thrilling movie is probably more thrilling in the theater than at home, because the physical environment (i.e. the situation that shapes the UX) is dierent. In the same way, the eectiveness of an advertisement will always depend on the context in which it is consumed and the critical sense and knowledge of the consumer (i.e. the users prior experience). The commercials are designed to elicit certain experiences, but their level of success does not depend solely on the commercials themselves. The dierence between designing UX anddesigningfor UX issubtle but important. It can help us understand and remind us of our limitations. It can help us think of how we want the UX to be. It has been suggested, for instance, that UX is the sum of certain factors, such as fun, emotion, usability, motivation, co-experience, user involvement and user engagement (for more, see Marianna Obrist et als article Evaluating user-generated content creation across contexts and cultures).In turn, we must address some of these factors when we design for UX, depending on how we want our product to be perceived.If we want an application to be fun, then we need to add some features that will entertain; a joke, a challenging quiz, a funny video, a competitive aspect or something else. We should keep in mind, however, that, as designers, we can never really predict that the application will beperceivedas fun by the user. Users have dierent standards, and sometimes they arent even willing to be entertained.
Extra Credit: How To Design For UX
Peter Morvilles Facets of User Experience. (Image: Semantic Studios)
UNDERSTAND UX If we want to design for UX, then we need to understand what UX is all about. For example, knowing which variables make users judge a product might be advantageous, and Hassenzahls UX model is one such model for this. Other models have been suggested as well, such asPeter Morvilles seven facets of user experience. Here, UX is split into useful, usable, desirable, ndable, accessible, credible and valuable.As you may have noticed, these
facets t Hassenzahls model pretty well: useful, usable, ndable, credibleand accessible could all be considered as pragmatic (i.e. utilitarian and usability-related) qualities, while desirable and valuable would qualify as hedonic (well-being-related) qualities. As mentioned, UX has also been viewed as the sum of particular factors.Other models have been suggested as well, some of which are linked to at the bottom of this article. UNDERSTAND USERS Following this, we need to understand our users. Traditional methods are certainly applicable, such as user research with surveys, interviews and observation. Also, personas have been suggested as a means of designing for UX, as have UX patterns. Smashing Magazine has already presented a round-up of methods. EXCEED EXPECTATIONS Finally, give users what they want and a little more. In addition to enabling users to use your service eectively and eciently, make them also think, Wow, this application is genius.Exceed their expectations desirably.If you do so, they will use your website or app not because they have to but because they want to.
Design Is About Solving Problems

James Young
Web design is, and always will be, about problem-solving, and galleries generally cant teach you how to be good at that. You wont nd inspiration in design galleries: just a solution to someone elses problem. Im keen to reiterate this, especially to young designers in the industry who look at the huge number of inspirational galleries and treat them as denitive answers on how to create user interfaces and experiences, rather than just as examples of good visual ourishes in other peoples products.
Other Designs Cant Solve Your Problems

When a project brief is submitted, theres an inherent danger in the designer asking the client what other websites they like. Getting an idea of the sort of thing the client likes and would want to see in their own project is usually considered harmless. But Ive stopped asking this, simply because it plants a seed in their mind of the sort of visual features they like on someone elses website. And once you start down that path, youre in trouble. Clients often focus on what their
competitors are doing, without considering the possibility that the features they see might not even be eective. Theyre not considering their own users or the strengths of their own product. Rather, theyre chasing their competitors. Its amazing how many times youll see this happen in our industry. Not making the same mistake in your work is vital. When you look at an inspiring gallery or attractive website, remember that what youre seeing is merely the result, not the process. You usually have not been party to the process that got to that result, which could include a range of things such as user testing, multiple iterations and prototypes, A/B testing, various stages of client input and so on. Often, even the simple things you see on a website or in a design gallery are the result not only of a process but also of the experience of the designer behind the result.
So, Where Else Can You Look To For Inspiration?

Whenever anyone asks how to get inspired, I always point to people themselves. Watch people as they interact with the things around them and solve problems. Youll learn an immense amount. If you can, study people, and look at their stories. One source of real inspiration for me is National Geographic. Ive had a subscription for years, and seeing how people all around the world solve problems in their lives, on both big and small levels, never fails to inspire me.
The next time you face a design problem and youre wondering how to do solve it, resist the urge to consult a gallery for examples of similar products, because the similarities will mostly be supercial. Learning to look beyond galleries takes a while, but dont forget that you are ultimately designing for people, so drawing your inspiration from them by observing and engaging with them only makes sense.
Once you start thinking more generally about how to solve a problem or x a process through good planning and lateral thinking, then the design layer usually comes quite naturally.
Simple Steps to Problem-Solving

By studying people and how they approach and solve problems, youll see a distinct pattern emerge and some common steps. If you dont already roughly follow these steps in your work, then review your process when you have a chance. These steps arent even specic to design. Theyre almost universal because theyre ecient. 1. Identify or understand your problem. 2. Devise a plan to rectify it. 3. Implement your solution. 4. Review whether it was successful. (If it wasnt, then you missed something in the previous steps!) Once youre able to break something down into simpler steps, youll see that people (and even animals) generally approach problem-solving in the same way, using these or an expanded variation of these steps.
Examples of Inspirational Problem-Solving

Adapting to Rising Sea Levels in Bangladesh The people featured in this great article deal with their extreme environment in many innovative ways. Using hyacinth plants to create oating gardens is one of the best and most innovative solutions to a problem Ive seen in a long time, because it turns what many would consider a huge roadblock into a benet. The Classic This Truck is Too Tall for This Tunnel Problem Ive seen countless variations of this over the years, but avoiding a costly and potentially damaging process by stepping back and thinking laterally is a lesson that should never be forgotten. What a Chef Can Teach You About Web Design World-class chef Heston Blumenthal took one of the toughest project briefs Ive ever seen and, through clever thinking and innovative processes, delivered something truly astonishing. GALLERIES ARENT EVIL I realize that many people browse galleries a lot. And as I said at the start, I still use them a lot myself, but more for nding new designers to follow and talk to, rather than as a reference point for solutions. So, you neednt stop consulting them; just be wary of viewing something in them as a solution to your own problem when working on your next design.
Designing
Rob Flaherty
e Well-Tempered Web
As technology evolves, so does the art and craft of Web design. New technology creates new challenges, which require new solutions. Often were working in uncharted territory, where the solutions demanded really are new. Other times, were faced with problems of a more universal nature, problems that have a history. Given the limited history of Web design, we have to look beyond our immediate domain for answers to the more challenging questions. We do this all the time when we draw on the rich history of graphic design and visual arts. But were not limited to sibling disciplines. If we can identify the abstractions and patterns that constitute our challenges, we can look to any source for guidance. We can look to a seemingly unrelated eld, such as psychology or music. We can even look to an episode from the early 18th century about Johann Sebastian Bach. In this article well look at what Bach has to do with modern Web challenges Particularly the challenge of designing for devices with diverse attributes and capabilities.
Bach And
e Well-Tempered Clavier
In 1722, Bach put together a book of solo keyboard works intended as a collection of educational pieces for young musicians. The book contained 48 pieces a prelude and fugue in every major and minor key. Now a staple of the Western canon, its regarded as one of the most important
works in the history of Western music. He named the book The WellTempered Clavier. To appreciate the historical signicance of the work, you have to understand that in Bachs day the notion that one might play keyboard music in all keys was unorthodox. It was a matter not of philosophy, but of physics: a xedpitch keyboard instrument could be in tune only with a selection of keys at a time. In the tuning systems of the era, playing in tune in all 12 major keys was simply not possible. While the laws of physics can be tough to bend, human perception moves fairly easily. The solution was to redene what it meant to be in tune. By adjusting certain intervals so that they deviated just slightly from perfect intonation, a tuning system was produced that allowed one to play reasonably in tune in all keys. This practice of compromising granular qualities for the greater good of the system is called temperament.
Opening measures of the rst Prelude of Bachs Well-Tempered Clavier. (Image credit: Wikipedia)
The name of the alternative tuning system made famous by Bach and The Well-Tempered Clavier is, unsurprisingly, well temperament. Today, most intonation in Western music is based on equal temperament. The methods are dierent, but the goal is the same: to make each of the keys slightly imperfect so that all of the keys can be used. Its like utilitarianism for acoustics.
What
is Has To Do With UI Design
Probably the most exciting development in Web design in the last few years has been the shift to designing for multiple devices. Its no longer just about how a website functions in two dierent browsers, but about how it functions on various devices with completely dierent characteristics:
dierent screen sizes, dierent capabilities, dierent use contexts, dierent interfaces. Although responsive design and device-specic websites enable us to tailor designs for diverse experiences, there will still be times when we have to make universal decisions and when we do, the metaphor of well temperament can be helpful. The application of this concept to UI design is straightforward: in order to deliver a good experience for a range of devices, we have to allow for occasional imperfections in individual interfaces. We have to make little compromises here and there to make sure that our design travels well to other environments. TOUCH-FIRST DESIGN A common example of well temperament in action is the eect that touch interfaces have had on recent desktop website designs. As a pointing device, a nger, being much larger than a mouse, requires a larger touch target than whats required by a mouse cursor. So, to ensure usability, interactive elements need to be bigger. As interactive elements increase in size, other things need to increase in size to maintain balance. This leads to an aesthetic characterized by generous margins and padding.
The new Gmail design has a lot of white space and extra padding on buttons and is very touch-friendly, even though its a desktop design.
The rise in popularity of the iPad, which bridged the gap between touch interfaces and desktop screen sizes, is what accelerated the inuence of touchscreens on desktop interface design. If you look at recent redesigns of major products such as Gmail and Twitter or browse CSS galleries, youll see that design on the Web is starting to look a little dierent. Things look more plumpish. Theres more white space, buttons have more padding, things in general feel bigger. Of course, other factors are at play, such as the steady increase in desktop screen sizes. What we end up with is a design that might aord too much space for a mouse but an appropriate amount of space for a nger. We allow for a slight
deviation from the norm in one experience in order to better support all possible experiences. Its important to note that making a UI touch-friendly in this way also results in a UI that might be more useable for mouse-and-desktop users. A button thats easier to touch is often easier to click. By erring in the direction of usability, we get the bonus of improved performance of the design in its original desktop context.
Microsofts Metro design language is inspired by a touch-rst approach to interaction design.
UNIVERSAL DESIGN VIA RESPONSIVE DESIGN Although much of the discussion on responsive design tends to focus on techniques of responsiveness, responsiveness itself is never the goal. Its a means to an end. The design responds in order to do something else. That something else might be to supply dierent content, to serve low-bandwidth images, or to adapt the layout for better presentation on smaller screens.
That something else might also be a goal of providing a universal experience to a large number of dierent devices. Riding the responsive design train to arrive at universal experience design, were likely to pass through some form of well temperament. A great example of this and an excellent example of responsive design in general is the Boston Globes website.
The Boston Globe is a shining example of responsive design on a large-scale website.
This responsive strategy enabled a single design to adapt to any device that a reader might use to read The Boston Globe (even the Apple Newton!). But this wasnt just a feat of front-end engineering. Accompanying the media queries and JavaScript wizardry was a simple malleable design that lent itself to adaptation.
This is a tempered design. While the minimalism might be purely stylistic, I suspect that if it had been a desktop-only design, wed have seen more gloss and embellishment. There would have been a longer runway on which to perfect the experience for a single-use context. But instead, the designers made little trade-os to produce something that could be transposed to all possible environments something that could play in all 12 keys. MOBILE-FIRST DESIGN The preceding examples were concerned more with graphic design, but the concept of temperament can be applied to product design, user experience, information architecture almost any other area of design. Lets look at product design and the idea of designing for mobile rst. If youre designing for mobile rst, then youre already working with tempered design. By starting the design process with mobile and building a product around the demanding constraints of the mobile environment, youre obligated to focus on the most essential elements of the product. As Luke Wroblewski writes: So, when a team designs mobile rst, the end result is an experience focused on the key tasks users want to accomplish, without the extraneous detours and general interface debris that litter todays desktop-accessed websites. Thats good [for the] user experience and good for business. When these design decisions extend beyond the mobile experience to dene the overall product, then the design takes on a form of temperament. The latest redesign of Twitter (i.e. New Twitter or New new Twitter) demonstrates some of these principles.
New Twitter has a simplied design and a consistent experience across devices.
One of the objectives of the Twitter redesign was to give users a consistent experience across computers and mobile phones. Achieving a consistent look and feel is a UI challenge, but achieving a consistent overall product experience is a deeper challenge. In both cases, designing for mobile rst puts us on the right path. Something I found interesting about the Twitter redesign was the inuence that the mobile experience had on the products overall design. For example, aside from the tweet button, all of the actions have been
organized under four tabs: Home, Connect, Discover and Me. Its a simplication that plays wonderfully on a small screen. Four items t perfectly in the tab bar. On the desktop website, other features have been added, but the simplicity established in the mobile version carries over. Although the desktop version has plenty of room both pixel-wise and guratively for more complexity, the design is restrained, tempered, to ensure a universal multi-device experience.
Beware Of Wolves
In the natural tuning systems that predated the standardization of well and equal temperament, notes of the out-of-tune intervals that were played simultaneously produced a harsh and howling sound. Musicians had a great name for this: they called it a wolf. Applying this idea to interface design, we can think of a wolf as a visual or interactive element designed for one experience that breaks down to some degree when transposed to another. Think of the times youve struggled to nger-tap a small link that was made for a mouse cursor, or had to read tiny text on a mobile screen, or, on a touch device, used an interface that relied on hover states. Wolves in the UI.
These article present links that are designed for interaction with a mouse. When viewing on a touchscreen mobile device, their usability is greatly impaired.
New York Magazine provides useful and well-designed drop-down navigation menus but only if youre using a mouse.
Closing
oughts And Practical Tips
Again, its true that responsive design and device-specic experiences can oer us a way around many of these problems. If we can tune the size of a button to a particular environment, then we dont have to accept blunt, across-the-board treatment. But the number of devices we have to support will only increase, and customizing for every possible scenario could quickly become unreasonable. Even if we are able to provide perfectly tailored design at the execution level, there is still value in thinking about tempered, universally accessible design at the conceptual level. Additionally, just because we can tailor design to particular experiences doesnt mean that users will not carry expectations over from one experience to another. The boundaries might blur whether we like it or not. TIPS AND THINGS TO KEEP IN MIND Think responsively. Even if youre not implementing a full responsive design, simply thinking in responsive terms goes a long way to achieving usable universal design. Think touch-rst. A button sized for a ngertip will always work for a mouse cursor. But a button sized for a mouse cursor will often be too small for a ngertip. Designing for touch rst ensures that your website or application translates well to other contexts. Think universally. Test early, test often the saying goes. In your design process, think early and often about how your design will function on various devices.
Think mobile-rst. Starting your design with mobile focuses you on what really matters to your users. By maintaining focus on the essential features, achieving a consistent experience across devices will be much easier. Be careful with interaction behavior that is not supported universally across interfaces. Hover states dont function the same on touch devices. Touch gestures cant be performed with a mouse. It doesnt mean we cant use these things, but we have to be aware of their limitations.
In
e End
Bach believed that people should be able to write and play in any key they wish. He argued for it by writing beautiful music that compelled the world to agree. He designed for the system he wanted. We want our users to have great experiences with our websites and applications on any device they choose. We want our work to be as usable and accessible as possible. What will you design?
Be er User Experience With Storytelling Part I

Francisco Inchauste
Stories have dened our world. They have been with us since the dawn of communication, from cave walls to the tall tales recounted around res. They have continued to evolve with their purpose remaining the same; To entertain, to share common experiences, to teach, and to pass on traditions. Today we communicate a bit dierently. Our information is fragmented across various mass-media channels and delivered through ever-changing technology. It has become watered down, cloned, and is churned out quickly in 140-character blurbs. Weve lost that personal touch where we nd an emotional connection that makes us care. Using storytelling, however, we can pull these fragments together into a common thread. We can connect as real people, not just computers. In this article well explore how user experience professionals and designers are using storytelling to create compelling experiences that build human connections.
It Begins with a Story

In 1977, a simple story set the lm industry on its side. The special eects technology used to create this story had not been created or used in lmmaking at the time of its writing. The author disregarded what was popular and marketable at the time (apocalyptic and disaster movies) to create his own vision. The lm starred unknown actors and the genre had
mainly been seen in 1930s serial movies. It was turned down by many lm studios and at one point was almost shelved.
Image credit: Wired (Courtesy of Ballantine Books)
The movie, if you havent guessed, was Star Wars. The author was George Lucas. Star Wars went on to become one of the most successful lms of all time and turned into a pop culture phenomenon. It gave birth to the blockbuster and the trilogy, and completely changed the way movies with special eects were made. Many of todays most inuential lm companies were spawned from the success of these movies: LucasFilm, THX, Industrial Light & Magic (ILM), and Pixar. Star Wars wasnt a new story though. It drew from mythic archetypes of stories told over thousands of years.
Revealing the Design in Stories

The creation of a story is often viewed as an almost magical or random process. The author sits in front of their canvas, the blank word processor, and begins to type whatever inspires them at the moment. Great stories, though, dont just happen randomly; they are designed. There is a pattern at work here. In order to be entertaining, have the right dramatic cues, and tap deep into our collective psyche, a specic method is used to build the story. A story that fails to pull the audience emotionally and keep their attention may not have used enough of these patterns as a guide, as shown in the typical story arc below.
The story arc is widely used in screenwriting and novels.
The structure of the story has been around since long before screenwriting was taught. There was a point that it remained simply an unnoticed rhythm in the background of every story. Some aspects of this structure like the heros journey and comparative mythology were rst popularized by Joseph Campbell. He wrote about his discovery in the book The Hero with a Thousand Faces. Campbell was a student of Swiss Psychiatrist Carl Jung, who believed that we are all born with a subconscious idea of what a hero, a mentor, and a quest should be. Campbell studied the structure of religion and myths across many cultures. What he discovered is that, consciously or not, every story (or myth) told had been created with the same basic formula. This is why great stories transcend even language barriers. It was this conclusion made by Campbell through his research that created large ripples in the waters of myth and religion.
We nd the blueprint for The Heros Journey in lms like Star Wars and The Matrix (via Star Wars Origins, Unocial Site)
The stories we have seen on the silver screen or read about in novels have been able to captivate us by continuing to use these patterns. We talk about dialogue and certain scenes at the water cooler as if they had happened to a mutual friend, rather than some ctional character. All because we became emotionally invested in the characters and the story. This type of emotional investment is something that brands strive for every day. Starbucks doesnt want to just sell us a cup of coee; they want customers to become invested in their story the ambience, the aromas, the community. The goal is to become the third place for people (work, home, and Starbucks). They say, for them, Its really about human connection.
e Power of Emotion
When speaking about stories, we describe the experience in a certain way. It tends to be more of an emotional experience, sometimes aecting us more on a personal level in how we relate to the story. This is much dierent from the way we traditionally describe the experience with products like websites or applications. Those are seen as more utilitarian and taskoriented. If we are able to accomplish what we came to do, say transfer some money in a banking application, then it has been a good user experience. In order to achieve our goals, the interface should be usable and function the way we expect. This view is preached by many usability experts including Donald Norman, a professor of cognitive science and usability consultant for the Nielsen Norman Group.
After hearing that if people followed his rules everything would be ugly, Norman decided to explore peoples relationship to design. The result was the book Emotional Design. Through his research, Norman found that design aects how people experience products, which happens at three dierent levels, and translates into three types of design: Visceral Design This design is from a subconscious and biologically pre-wired programmed level of thinking. We might automatically dislike certain things (spiders, rotten smells, etc.) and automatically like others (attractive people, symmetrical objects, etc). This is our initial reaction to the appearance. Behavioral Design This is how the product/application functions, the look and feel, the usability, our total experience with using the product/ application.
Reective Design This is how it makes us feel after the initial impact and interacting with the product/application, where we associate products with our broader life experience and associate meaning and value to them.
Image credit: D.livepage.apple.com Alan Harris Photography
There is a lot more to emotion than can be covered here, but understanding those basic levels of processing gives us some insight into why storytelling is so powerful. Consider how the levels of thinking play o each other in an amusement park: People pay to be scared. At the Visceral Level we have a fear of heights and danger. At the Reective Level we trust that it is safe to go on the ride, and we seek that emotionally charged rush and sense of accomplishment (overcoming that fear of heights) after the ride is nished. Knowing that emotion is so vital to how we think makes it more important to
create not just a functional and usable experience, but to seek and make a meaningful connection.
e Basics of Storytelling for User Experience

At a basic level, storytelling and user experience have common elements like planning, research, and content creation that can be utilized for eectively developing an experience. Storytelling oers a way for the team to really understand what they are building and the audience that they are creating it for. Stories allow for the most complex of ideas to be eectively conveyed to a variety of people. This designed product/experience can then oer meaning and emotion for its users. The professionals that are currently using the power of narrative in their projects are doing it in vastly dierent ways. The following sections attempt to outline some of the current usage and benets of modern storytelling. BRING TEAMS TOGETHER User experience professionals typically have to work with people from many dierent backgrounds. Depending on the type of experience, it might require the eort of everyone from an engineer to a user interface designer. Also, in many cases, the approach in creating websites or applications is to consider the technology, or limitations of that technology, rst. Finally, to make matters more complex, larger teams tend be split with concerns regarding their domain. For example, the marketing person is going to focus on their directives and motivations based on their initiatives. This is not always in the end-users best interest and results in a diluted and poor experience.
The Disciplines of User Experience by Dan Saer
The infographic above depicts the many dierent elds that make up the disciplines of user experience. The user experience team selected to create an iPhone application for the masses would be quite dierent from one that is developing a medical device used by doctors. As described earlier, the individuals that have been involved in crafting stories have been successful in tapping into a way of communicating that has been around for thousands of years. Utilizing storytelling, user experience teams can also inject emotion and value into the end product for users.
USER-CENTERED GOAL In reading through the storytelling approach, it might seem that the story is just another way of saying strategy. With storytelling, though, tied to the story the interactions should communicate is a more user-centered goal. Companies like Apple have used similar methods in their design process to really dene what they are building. Cindy Chastain refers to it as an Experience Theme. She says this theme is the core value of the experience being created. Christian Saylor refers to it as nding the Lead Character. Without this user-centered goal, he states, we are just designing for the sake of designing.
By centering around a specic theme, or character, the uncoordinated elements of an experience all have a clear goal and purpose. With storytelling, a diverse team creating a website or application can collectively link together the tangible elements and create something that is a meaningful experience and is more than just bits and bytes. DEFINING THE USER There is a lot of discussion and articles about usability and functionality of websites and applications. Functionality, of course, is important. For example, what good is an airplane if the engine isnt powerful enough to get it o the ground? If you take a step back though, the more important question should be: How far does the user need to go? If its only a few miles down the road, then it really doesnt matter if the plane is functional, its the wrong solution altogether. So, discovering what we really need to build is a key in the initial phase of building the user experience.
Image source: Mishka
When research is nished, we typically move on to create personas as a way of understanding the user and can be looked at as part of creating the story. By building a ctional representation of the user that is based on real research and observation, we are able to empathize with them and really understand their needs. Using the created personas and then creating stories about them, we are able to cast a more meaningful vision of the project.
Persona Sample by Fuzzy Math
The storytelling approach allows us to transfer this research in an anecdotal way. This has shown to have a better recall rate of information. In addition, being able to empathize with users through stories allows for better understanding of the emotional side of the experience. Films and video games deliver successful experiences that impact people on an emotional level. This is something people will begin to expect more from websites and applications that they use everyday. We can evolve the focus of creating a simple task-driven and functional website/application into a valuable human connection. We are, after all, a global campre as Curt Cloninger refers to it. He goes on to say, But the web is not a global network of connected computers. The web is a global network of connected people. And storytelling is still the most eective way to emotionally impact people.
THE BENEFITS Most projects have a lot of documentation outlining their goal and strategy. These come in a set of business requirements, functional documentation, and any other pieces of supporting research/information. Using storytelling can help improve the overall product/experience: Puts a human face on dry data Can simplify complex ideas for a team More ecient team collaboration and purpose Insight into the key users Setting a project direction faster Better communication within large agencies/organizations Experience delivers meaning and value to users
Storytelling can help teams focus their eorts on everything from the content on the website to understanding the business problem in a new way. For example, you can dene the scope of a project quickly without designing or wireframing screens. Dorelle Rabinowitz shows how The UX team for Yahoo Personals created a story around how a ctional dating couple would go through some specic scenarios. Using this, the team was able to come to a better understanding of what the website should do and the type of experience the users go through. It opened it up from very taskand strategy-based steps to the more real and emotional experience of dating. It is a powerful way to really get the team talking directly to the experience rather than creating documentation that only talks around it.
Happily Ever A er:
e Reality
Image source: Fallen Princesses by Dina Goldstein
There are many dierent opinions on what the ideal user experience process should be. Many of them stem from the fundamental approaches developed by Alan Cooper, a pioneer in building software with user-driven experiences. But as technology evolves, so do the approaches and processes to create solutions that meet users needs. The variety of approaches in UX are akin to the number of frameworks available for developing software. Much of the time it comes down to what is best for the type of projects a team typically works on.
Your ability to adhere to a process is dependent on many things, like timeline, budget, and business goals. In reality, its not always possible to do everything as specically outlined. Storytelling is a way to connect teams quickly, and gain insight and understanding. The experiences we create communicate with those elements through the design, content, and user interaction. Storytellers have successfully been communicating for much longer than websites have been around which makes it a valuable tool from the business side of design.
To Be Continued
In the next part of Better User Experience Using Storytelling we will hear from creative professionals leading the way in this relatively new world of combining the craft of storytelling with user experience. Well also look at how storytelling can be applied to more than just interactive experiences we nd it in everything from packaging to architecture.
Be er User Experience With Storytelling Part II

Francisco Inchauste
In the rst part of this Better User Experience With Storytelling series, we explored some of the basic structures and story patterns found in myths and religions. We saw how these patterns continued into modern stories such as The Matrix and Star Wars. We also explored some of the basics of bringing storytelling into the user experience process and some places to get started. Concluding this two-part article, we hear from creative professionals who are leading the way in this relatively new world of combining the craft of storytelling with user experience. Well also see how storytelling can be applied to more than just interactive experiences: we nd it in everything from packaging to architecture.
A Few Modern-Day Storytellers

Although the idea of using storytelling within the user experience process is fairly new, a few professionals are using it in their projects. I spoke with some of these modern-day storytellers to get their perspective and see how they are applying storytelling to their work. DORELLE RABINOWITZ Dorelle is a storyteller who designs, illustrates and tells stories in a variety of media and contexts. Mostly she tells stories.
Question: How do you approach storytelling in UX? Dorelle: I see it as another tool we can use as a catalyst for communicating during our design activities. For me as a designer, its about putting a human face on the design process and bringing people together. You can get designers, engineers, product managers, strategists and execs jazzed about a proposed feature because of a story, and it can be extremely fullling. As a person, its all about the emotional connection. Back in the day, Id worked on an Oxygen media site called Our Stories, where we created short online digital stories with our audience. We called it co-creation, and when I moved more into designing user experiences I realized that stories helped me understand my users better. As I did more and more work, I realized that storytelling facilitates communication, that
people respond emotionally to stories, bond over stories and share stories again and again, and that the more I integrated storytelling into my work the better the work was. So much of what we do isnt only about the design but about how we deal with people, negotiate and plan. Storytelling can be eective in all of these situations as well as in driving towards our solutions. I think the value of using stories is independent of the type of experience. Question: In the end, business goals (i.e. prot) rules the day. How does storytelling tie into this? Dorelle: Stories help bridge understanding, so storytelling can help teams get on the same page and speak the same languageleading to expected results. Stories can help people work more collaboratively and thus help teams get it done fasterfaster time to market. Stories can help reframe business problems so that projects solve the right problems and come to a better solution. Question: Where is the best place to learn more? Dorelle: Cindy Chastains article in Boxes and Arrows on Experience Themes is a great read. CURT CLONINGER Curt is an artist and writer. He says his art doesnt really tell a standard narrative with a climax and resolution but rather tries to create a kind of event experience.
Question: How do you approach storytelling in UX? Curt: Design, particularly graphic design, can be understood as a visual form of communication, and storytelling is a historically tested form of communication. Storytelling or narrative design is more like something to keep in mind when considering the users experience. To me, narrative design just means having a consistent voice and having every design element contributing to the same goal or conclusion. It also means allowing for an arc in the user experience. And it means allowing the user to have some kind of personal say in completing her experience. This is the dierence between a novel (where the user mentally lls in lots of visual blanks) and a Hollywood action lm (where all the blanks are lled in for the user). A novel is arguably more engaging.
Question: In the end, business goals (i.e. prot) rules the day. How does storytelling tie into this? Curt: Hollywood tells stories, and they seem to make a lot of money. Politicians, journalists and large corporations often tell stories (i.e. lies), and they make money. The evolution of any brand over time is a kind of narrative. Corporations spend all sorts of money trying to convince us that their main character (Ronald McDonald) is the good guy. Narrative and capitalism have always enjoyed a fruitful relationship. Question: Where is the best place to learn more? Curt: I like Nathan Shedros Experience Design book. Its more about XD than UX, but it addresses narrative at several points throughout. Richard Schechners Performance Theory is good. It has nothing to do with user experience design per se, but it is about theater, tribal ritual and the cultural interfaces that people construct to give meaning to their worlds. CHRISTIAN SAYLOR Christian is a storyteller who designs user experiences. He believes that the things around us have very powerful stories to tell. Question: How do you approach storytelling in UX? Christian: Storytelling gives us purpose and a sense of place. So, it hasnt been so much a discovery of storytelling as a natural progression towards uncovering an experience buried deep within a narrative that wants to be told. So this idea of adopting storytelling as a means to uncover a rich experience for the end user, whoever they may be, just makes sense. At the end of the day, the job of the (UX) designer is to help tell a story that is relevant and meaningful, regardless of time, device or even location. We
use personas (characters in our story) and scenarios (narratives that tell a story about the persona) in order to fully understand not only the target audience but also their goals and desires, which will ultimately help to create a meaningful experience for them.
I strongly believe that everything has a story associated with it. Every business, social group, concept, methodology and relationship is desperately seeking out better ways to engage with its audience. Some just happen to do it on a large scale (Apple), while others quietly create a pattern of life that goes unnoticed until it disappears (the remote control). From packaging that sits on the store shelf to the applications that follow us throughout our days, story inuences just about every aspect of our lives. Story is all around us. It gives us a sense of understanding and knowledge of the people and things that are important to us. I think the most important aspect of storytelling for me is that it has the ability to change the way we view and interact with our world.
Question: In the end, business goals (i.e. prot) rules the day. How does storytelling tie into this? Christian: If youre telling the right story to the wrong audience, or even telling the right story the wrong way, then your business or product will ultimately fade away. Design and technology are the catalysts of change in the experience economy. And if we dont seek out better ways to tell our story, then our business, product or service will be in jeopardy of losing its vitality. And as we all know, the business world is constantly looking at the bottom line. We live in a world saturated by products and services that vie for our attention, and the experiencethe way in which a story is unfolded will be the dierence between a companys success and failure. Question: Where is the best place to learn more? Christian: Lovemarks (the future beyond brands) by Saatchi & Saatchi. It has unbelievable insight into the way we fall in love with the companies and products that surround us. (Disclosure: Both Christian and the author are employees of Universal Mind.) CINDY CHASTAIN Cindy is a trained lmmaker and screenwriter. She continues to make lms and write scripts and considers herself a visual and dramatic storyteller. Question: How do you approach storytelling in UX? Cindy: Storytelling is another discipline that can be used in the context of design as 1) a device, 2) a framework and/or 3) a craft to draw upon. In other words, we can use story as a way to capture and sell an idea; we can use it as a way to frame an approach to the design of a product or service; or we
can use narrative techniques to craft an interaction and, hence, a variety of behavioral and emotional responses to a story.
We tell stories that seek to order chaos, provide meaning and engage the emotions of our listeners. We design experiences that hopefully do something similar. But in the context of design, meaning is also about what this experience, product or service will do for a person. Its about how something ts into or enhances his life. Its about understanding how something is supposed to function. As designers we do well at facilitating the dialogue between people and the interactive products they use. But we often neglect to consider the more intangible layer of experience, the stories that evolve dynamically through interactions that people have with the things we make. We also lack an approach to holistic design. If we can learn to approach design more like writers approach stories, we will not only build richer experiences but start to develop a craft in our work that knows how and when certain narrative
techniques can be used to engage the minds, emotions and imaginations of users. Knowing the craft of narrative will help us build better stories, which will help us turn a set of lifeless features and functions into a whole experience that engages the minds and emotions of customers. Question: In the end, business goals (i.e. prot) rules the day. How does storytelling tie into this? Cindy: Brand message is no longer the thing that sells. Experience sells. If the intangible pleasure, emotion or meaning we seek can be made tangible through the use of story and narrative techniques, we will build more compelling product experiences. And if the experience is more compelling, businesses will prot from droves of loyal, experience-discerning customers. Without this understanding, choices about what features should be included and how they should behave seem both uninspired and disconnected. Sure, we have business goals, user needs, design principles and best practices to draw on, but these things wont get us to a place where a team is collaborating in the same conceptual space, let alone designing for emotion and meaning. Question: Where is the best place to learn more? Cindy: Start with the discipline itself, like Story, Robert McKees book about screenwriting. For a dive into theory, I recommend Narration in the Fiction Film, by David Bordwell and the classic Computers as Theatre by Brenda Laurel. And for the rst word on storytelling read The Poetics by Aristotle.
e Storytelling Experiences Around Us

There are many experiences in which storytelling is used to create a compelling message that draws users in. The stories are not always visible or apparent right away, but underneath many good experiences we can nd great stories. They may appear in a series of interactions that tie into a larger story or simply in an emotional connection that we form with a product or brand. IN PACKAGING: APPLE
Image source: Re.Mo and Typical Story Arc.
One company the excels at delivering a powerful story is Apple. Laid over the image of the iPhone box above is the story arc (introduced in part 1) that most screenplays and novels follow. Purchasing an Apple product and opening the many beautiful layers of the packaging follow a similar story arc
in building anticipation. As you move through the process, you nd compelling photography and clever writing. These build a sort of satisfying tension until you nally arrive at the climax of the experience and uncover the iPhone. A more common anti-climactic approach would be to wrap the iPhone in bubble plastic, reducing the story to a mere Buy me. IN TECHNOLOGY: MICROSOFT COURIER
The Microsoft Courier device is in the late prototype stage of development. This is more of a booklet than Apples iPad, with dual multitouch screens. This video uses storytelling to take you through the user experience of the booklet. Instead of simply running through some of its cool features, it tells us the compelling story of a project in which the potential of the Courier is exploited.
IN MARKETING: SIX SCENTS PERFUME
The Six Scents range of fragrances is created annually by pairing six prominent artists with six celebrated perfumers. The goal is to help raise awareness for a specic charitable cause. For the second series, each bottle comes with a DVD that contains a lm and photography. The lm and imagery create a story around each scent to evoke a certain feeling and theme.
IN ARCHITECTURE: HBO STORE
The HBO Store (in mid-town Manhattan) is designed with storytelling built seamlessly into an immersive experience. The architecture and technology allow the space to become a new way to experience the props and merchandise for the HBO-based shows. The goal of the store (designed in part by design and branding studio Imaginary Forces) was to create an intelligent and memorable experience for visitors.
IN DATA: TAXI07:ROADS FORWARD
In her comments on storytelling, Dorelle Rabinowitz shows how storytelling can be used to communicate otherwise boring data and turn it into a more accessible experience. One example of this was Taxi07:Roads Forward. It was a report for the New York City Taxi & Limousine Commission on the current state of the taxi cab industry in New York. The information was presented through stories in comic book form and beautiful infographics.
IN WEBSITES: SHOWTIME SPORTS
In a project for Showtime Sports, Cindy Chastain and the team at Interactive Partners created an engaging experience for fans using experience themes. Fans would be able to follow and learn about the full ght story online interactively through video. The experience themes guided not just the content but the functional requirements and website architecture.
e End Is
e Beginning Of
is Story
Many aspects of storytelling and user experience could not be covered in a few articles. This series is meant to give you a starting point to explore and learn more. The end of this story hasnt been written. This is just the beginning of using storytelling in new ways.
Taking A Customer From Like To Love: e UX Of Long-Term Relationships

Des Traynor
What do you mean improve? I charged him correctly, didnt I?. My manager looked at me, disappointed: Yes, Des, you charged him correctly. But a vending machine can do that, too. They show up on time; theyre more accurate; I dont pay them by the hour; and theyre never hungover. Your job is to do something that a vending machine cant do. Your job is to make our customers happy; give them a good experience; bring them back here again. Get it? I started to wonder. This was a gas station; how could I deliver a good experience? Surely, customers just want to get in and get out. Nonetheless, if I wanted to keep the job, Id have to try. I started chatting to customers and casually asking questions. Did they nd everything they needed. Could we order in a particular newspaper for them? Do they have our phone number in case they need to check whether we carry something? Why did they stop buying from the bakery? Customers regard gasoline as a cost that they have no say about. They enter the store annoyed at having to spend fty bucks. My job was to change that. I got it. MBAs call this customer experience, although when its spelled out so plainly, it sounds more like common sense. And like most common sense,
its rarely that commonespecially in the world of subscription software, where we need customers to stick around. User experience designers are great at making software friendly and usable for new customers. We design clean, clear sign-up forms, smooth onboarding experiences, and even helpful blank slates once users are inside the app. Once customers have used the software for some time and have integrated it in their workow, their relationship with the software becomes more complex. UX designers have no stencils for designing how the customer feels about the software after six months. This matters because the software-as-a-service (SaaS) model depends on loyalty, on the idea that customers wont inch when they see your monthly charge.
Competing On Service
Initially, all markets compete on price. However, competing on price simply isnt relevant with Web apps, because they are all in the same $0 to $99 per month bracket. Think about it: what sane person would switch project management tools just to shave ten bucks o their monthly costs? We have reached the point where the service part of SaaS is most relevant, the point where the experience your customers have with your company will determine whether they stick or switch. Say youve been paying $50 a month for your time-tracker for the last three years. Have you enjoyed the service? Have you ever been personally thanked for your loyalty? Do you feel that the provider values your $1,800? CUSTOMERS WHO DONT FEEL VALUED LEAVE The Rockefeller Corporation studied why customers leave one company for a competitor and found the following:
Look at whats not here. No mention of price or quality. How you make customers feel is what drives their loyalty, and its here where website owners are in trouble. Website owners are disconnected from their customers, save for a conference party or survey each year. If you asked them to introduce you to 10 of their customers, most would struggle, grimace and then get a developer to break out the SQL. Imagine trying to run a bar, convenience store, hair salonheck, any servicewith that level of apathy towards the folks who pay your wages. It shouldnt be surprising that your customers are willing to jump ship the second a competitor launches a sexy iPhone app. If youve never cared about your customers, why would they care about you? Warren Buett talks about building a moat around your business to make it untouchable. The strongest moat you can build is one based on strong relationships. Low prices can always be beaten. Stunning design ages
quickly and can easily be copied. Impeccable uptime can be matched, and your features copied. However, a good customer relationship is unique, and loyal customers are hard to steal.
Some
ings You Cant Wireframe
Wireframes and mock-ups are excellent for guring out and discussing screen layout. You can follow all the rules of wireframing to create a compelling user experience, but you cant wireframe how a customer feels after 15 months of using your software. To deliver a compelling experience, you need to also consider touchpoints and timepoints. TOUCHPOINTS MAKE IT HOLISTIC
Touchpoint diagrams help you see the various ways in which customers come into contact with your software. The diagram above from a holiday home website shows that the mobile experience is bad for non-iPhone
customers, and that email and phone support should be improved. An amazing website is of no use if your call-center sta is rude or your developer is a jerk to customers on Twitter. Great experiences are about getting everything right; it goes well beyond fancy sign-up forms, cute mails and game-ied tutorials. Sure, all those things help, but the customer experience has to be comprehensive. Quality is fractal. Your customers will judge your company based on all of the experiences they have with it, not just those dripping with CSS3 eects. Using a touchpoint matrix such as the one above will help ensure that youre considering all of the experiences your customers will have. TIMEPOINTS MAKE IT LONG TERM
Anyone who has relied on metrics for customer acquisition will be familiar with some variant of the funnel above. We start with a lot of visitors, and convert a small few of them into customers. While this scenario is rather contrived and rosy, it does provide a way to measure dierent parts of your Web app. It does not, however, look at what happens next. If you ignore your paying customers, and they hear from you only through their invoices, then you can expect the relationship to deteriorate over time. Heres how that goes:
We need it to go more like this:
Improving Your Customer Experience

Achieving this requires that you put a plan in place and put someone in charge of customer communication. There is no universal method that works for all software; its an iterative process. Your customers need just enough personal communication to feel valued, while not feeling like theyre being nagged constantly. As a start, Ive prepared the simple questions below; someone on your team should be able to answer yes to all of them. TEST YOUR RELATIONSHIPS Do you greet new members, introduce yourself and let them know that they can contact you at any time?
Do you check in with them after theyre settled in to see how theyre doing and to see whether theyre making the most of your app? Do you talk to your users about new features before and after implementing them? Do you send them the right types of messages at the right time? Do you check in with your customers after their rst year to thank them for their loyalty? Can you easily tell the dierence between your most loyal customers and yesterdays sign-ups? Can you tailor your communications to dierent types of users? Can you name 20 of your customers and tell me something about them? There is no shortage of questions you could add to this, but I nd this initial set is enough to distinguish those who genuinely care about their customers.
Cut
e Excuses
There are plenty of reasons why one might believe that this change is too hard to make. App owners will argue that their time is better spent adding features and xing bugs. This is only partially true. Your customers are with you now without those planned features and with those bugs. Im not arguing that you should ignore these tasks, just that those tasks are not the only important ones. Recall why customers leave: its not likely just because your competitor has launched an iPhone app. Thats one straw, but the camels back is already overloaded.
WHAT IF I DONT HAVE TIME? Do you not have time to invest in keeping customers happy? The rule of retention is that you must be willing to spend as much to keep a customer as you did to acquire them. Leaky buckets dont ll up quickly. Software such as Intercom makes this degree of customer insight and communication far more manageable. (Disclaimer: I believe in this so strongly that I now work full time on Intercom.)
Intercom is the rst of a new wave of tools aimed at enabling Web app and website owners to get to know their customers.
TOO MUCH FEEDBACK? No one can aord to ignore their customers. This doesnt mean that you must do everything they say; it means you should listen and respond. Too much feedback is a good problem to have. Rather your customers tell you whats on their mind than silently disengage, forgetting about you until their credit-card bill arrives. By that point, youre already history.
Delivering Customer Experiences

For one year straight, I spent one day every week speaking with customers of one of our apps. Before I started this, they were simply rows in a database. By the time I was nished, I had had a conversation with over a thousand people. I heard about what we got right, what needed improvement, and why we were losing customers. Very useful stu. Users were delighted to hear from us, because it reminded them that were more than a set of pages and a monthly debit. We started a customer blog and featured a few customers each week. We also added their logos to our home page. To customers, this is the business equivalent of being taken home to meet the parents. It shows a real personal commitment. These actions persuaded our customers to give honest regular feedback and to let us know when we disappointed them. Wed rather they say it to us than run into the open arms of a competitor. Wufoo sent all of its customers Christmas cards in its rst year. That was a huge hit. It was hardly surprising that by the following year they had too many customers to do it again. As a start-up, you have to play to your strengths. A small customer base oers you a big opportunity to deliver amazing service. Scaling that experience can be tricky. There is software that will help, but, again, solving this is no small challenge.
START IT TODAY As a simple next step, why not take your rst 10 and most recent 10 users, drop them an email, and ask if theyll take a phone call. Let them know youre there and that youd love to hear their thoughts. Youll be amazed at what you learn, and I doubt youll stop at 20.
Idiots, Drama Queens And Scammers: Improving Customer Service With UX

Laura Klein
User experience design isnt just about building wireframes and Photoshop mock-ups. It extends to areas that you wouldnt necessarily think are part of the discipline. For example, your customer service department can have a huge impact on your websites overall user experience. Similarly, the design of your user experience could have an awfully big eect 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 dierence in customer perception between Zappos and Comcast. Customers routinely rave about one, while the other was attacked with a hammer. Clearly, theres a dierence in the way they deal with their users.
An excellent customer experience is a core value for Zappos
One of the biggest dierences 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 dierences arent just in the way they treat unhappy customers. Zappos makes a concerted eort to prevent customers from ever being unhappy in the rst place. And thats a good policy, because unhappy customers are expensive. I spend a lot of time talking to customers, customer support reps and community managers. Ive 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. Lets look at some of the folks who are costing you money and time. Ill call them idiots, drama queens and scammers.
e 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 couldnt believe that people didnt 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 dont ship things on a regular basis, so they dont know that an APO address indicates an army base that might be overseas. As far as the seller is concerned, theyre 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 arent stupid at all. Theyre opportunities to improve the user experience design. If youre getting the same question, it probably means youve 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 nd out what questions are being asked repeatedly. Figure out a way to answer those questions within the interface so that someone doesnt 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 signicantly delayed. It probably wont stop every inquiry they get about this problem, but it should help just by letting people know what to expect.
e 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 o the top of their heads. And they wont look happy doing it either. Youll see eye rolling and head shaking. One client complained that every time they released a new feature or a signicant 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 terried 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 didnt go their way. HOW TO TURN DRAMA QUEENS INTO ADVOCATES You might think that you couldnt do much as a user experience designer to calm drama queens, but youd be wrong. One of the main reasons why people escalate to that point is that they feel theyre being ignored. In fact, one of the most common reasons that customers leave is that they believe the company doesnt care about them. Your job is to make them feel that their opinions are important and that theyre 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 sta 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! Youd 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 signicantly 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 signicantly improve the design of the feature, since youll be able to anticipate any complaints and edge cases.
e Scammers
Scammers are both the hardest and the easiest group for customer service reps to deal with. Theyre tough, because determining whether someone is a scammer or just an idiot or drama queen is not always easy. Theyre 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 didnt do. Also, in a social environment, the behavior of scammers can have a negative eect 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 cant! What you can do is quickly identify the bad actors and get them o your website as quickly as possible before they negatively aect your good customers. Enlisting the help of the community in policing can make this process much faster and more eective. Give users tools, such as agging 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 arent 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 nd 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 youll have a lot more time to deliver fabulous service to your best customers!
Relationship Engineering: Designing A raction Part I

Thomas Giannattasio
Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, shes young and shes gorgeous. Besides, I can easily try something new if I get bored or something better comes along. No, thats not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Dont bother calling the Special Victims Unit; what were discussing here is not what you think it is. Its the Apple iPad. Apple seems to have entranced people. Its hard to walk down the street without passing someone who is plugged in to those iconic white headphones or to enter a coee shop without hearing someone gabbing on their iPhone. Apples stores are crowded, and its products sell in absurd quantities. Why is this? Apple might be a visionary company with a strong grasp of whats hip. Yet I believe Apples appeal lies in something more than trends, something deeply ingrained in our psyche: relationships. We dont simply own products; we have relationships with them. Intimate ones at that. We are in a state of courtship with every brand in existence. Each of them wants to be a part of our lives, and each wants love in return. Thinking about our relationships with particular products and brands in the
same way that we think about interpersonal relationships yields interesting insights. When we decide to bring a person or product into our lives, we must rst evaluate our options. The criteria we use to decide whether we love, hate or are indierent to another person are the same we use to judge a product or brand.
Psyche Revived by the Kiss of Love, Antonio Canova. (Image: Wikipedia)
There are many types of relationships, but we can put brand-consumer relationships into three categories: acquaintance, friend and lover.
When someone purchases a bag of apples at the grocery store, theyre demonstrating an acquaintanceship with apples. Theyve interacted with apples before, but theres no deep attachment, and there has been very little bonding with the product. The next step up friendship emerges because of branding. For example, I always purchase a certain brand of gum. Ive come to know the brand and its oerings, and I enjoy having its product in my life. Were friends, but thats where the relationship ends. Theres no romance involved, and no longing or desire is felt. Only certain brands manage to take the step from friend to lover. Apple is one of the most valuable companies in the world. It also provides a useful model of consumer courtship. Just about any iPhone user will proudly tell you, like a love-struck teenager on prom night, that they love their phone and would be like, totally lost without it. There are dozens of cell-phone manufacturers, but only one iPhone. Successful visionary companies, such as Apple, have mastered the art of relationship engineering.
Designing A raction
Love is often likened to re. In the early stages of a relationship, things start heating up. As the love grows stronger, the ames grow higher. When a relationship falls apart, we say that the re has gone out. Whether someone lights or douses your re has to do with the two core aspects of their being: how they appear on the outside and who they are on the inside. That is, a persons appeal is based on two things: looks and personality. Lets take a closer look at each of these aspects of appeal and examine how they inuence people into relationships with brands and products.
Looks
Attractiveness spurs lust. Its a simple cause-and-eect paradigm ingrained in our very nature. We all long for the cute guy or girl in class, and that same desire guides us when choosing a product. Since the days of Plato, philosophers and artists have tried to pinpoint exactly what makes something aesthetically pleasing. No universal formula for beauty has ever been agreed upon. Beauty is subjective. The designers job is to appeal to the collective subjective, or the average of personal preferences. Doing so ensures a product appeals to the largest audience possible.
Making your product visually appealing is not supercial. In fact, design is often a products primary competitive advantage. iPod wasnt the rst MP3 player on the market; it didnt have the largest capacity; it didnt have the most features; and it certainly wasnt the cheapest. It was, however, sexy. It was simple and self-explanatory. Its scrolling wheel was as intuitive as it was revolutionary. Perhaps most importantly, it introduced a unique and (now) iconic form factor. The market had been ooded with matte gray devices with black headphones, but this entrant had a clean white front and mirrored back. Even the earbuds were white. Many people tuck their devices into their pockets, which makes the headphones the most visible hardware. Apple exploited this and turned the earbuds into a mnemonic device. Spotting someone with white earbuds, even from afar, immediately told you which brand was on the other end. The iPod now accounts for well over 70% of the audio-device market. Why? I think its because the iPod is just more distinct than its competitors. In a market full of brunettes, the iPod is Marilyn Monroe. FACEBOOK VS. MYSPACE Facebook has more than 500 million users, and that number is growing steadily. MySpace has plateaued at around 125 million. How has MySpace, once the leading social network, fallen behind by such a large margin? There are a number of reasons, but design seems to be one of the most obvious (Newsweek and Mashable seem to think so, too). Much to its detriment, MySpace allows users to apply their own style sheets. I can imagine the brainstorm that led to this decision: Wouldnt it be great to let users customize the look of their page? People love to make things their own and aunt their personalities. This will surely encourage new users and give us the edge on Facebook. Hurrah!
MySpace somehow failed to realize that most peoples design education consists entirely of WordArt tutorials taught by Microsofts Clippy. Perusing MySpace proles is torturous. Hideous background images overshadow content, while animated GIFs and illegible text make for an irritating user experience. Facebook realized that people want to connect with friends more than they want to customize style sheets, so it oered users a clean and uniform interface. Everything was nicely designed; nothing was gaudy or tasteless. The whole experience was much more visually appealing. While MySpace was pushing personalization, Facebook was rening a community to change the way we interact. TO SUM UP People are programmed to judge by appearance, so every interaction they have needs to be groomed to visual perfection. To maximize appeal, designers must be observant of the collective subjective. Design is not supercial. It can be your greatest competitive advantage. Visual distinction becomes a mnemonic device for your product. Incorporate it to increase awareness and encourage recall. Allowing others to control your appearance, while nice in theory, can lead to chaos and brand deterioration.
Personality
As we get to know someone, the novelty of their appearance fades, and something more substantial is required to maintain our interest. We start looking beneath the surface and noticing abstract qualities: intelligence, sense of humor, likes and dislikes, ambitions. These qualities have the power to shape how we see the true person. A persons personality the DNA of their character builds lasting appeal. Character compatibility forms friendship and love. Looks alone might seal the deal for a one-night stand, but acceptance of personality is required for healthy long-term relationships. Were often told to be ourselves. This is good advice. Like a pheromone-ridden glue trap, aunting your personality attracts and ultimately bonds you with like-minded individuals.
Personality has this eect in the commercial realm as well. Aligning yourself with your target audience is critical to success. Im sure this is excruciatingly obvious, and many organizations are already tuned into their demographics, but many others either are too shy to display personality or fail to do so properly. Humor is one of personalitys strongest pheromones. If done right, humor evokes laughter. And yes, laughter is enjoyable in itself, but have you every wondered why we laugh? Anthropologists are discovering that laughing is not necessarily something we do merely for enjoyment, but is actually a subconscious technique that builds rapport. By laughing, we indicate to others that we agree with or accept them. Dr. Robert Provine, who has done extensive research on how, when and why we laugh, likens laughter to a glue: Ha ha has are bits of social glue that bond relationships When we laugh, were often communicating playful intent. So laughter has a bonding function within individuals in a group. Applying a coat of humor to your product or advertising campaign is a great way to spark the subconscious urge to bond. Just make sure people are laughing with you, not at you. Going back to Apple, its Im a Mac; Im a PC ads focus explicitly on personality by actually personifying brands (Apple and Microsoft). The casual dress and easygoing nature of the Mac character exudes fun, simplicity and intelligence, especially when juxtaposed with the conservative, uptight PC character. Also, the subtle dose of geek humor gets you laughing (and thus successfully bonding) with the Mac, and laughing at (disapproving of) the PC.
These ads strengthened Apples reputation as a hip, intelligent, friendly company, while pegging Microsoft as uptight and out of touch with users needs. Microsoft attempted to salvage its reputation by recruiting or shall we say, throwing money at Jerry Seinfeld, who starred in a series of ads alongside Bill Gates. For personality, Jerry Seinfeld is a great candidate. Hes famous, his show had some 75 million viewers, he understands everyday people with everyday problems, and hes funny. In a swing-and-miss attempt at comedy, the ads follow Bill and Jerry as they connect with real people. Is it me, or do these ads actually enhance the perception we have of Microsoft as unhip and out of touch? DIGG VS. REDDIT Have you seen the top story on Digg today? Neither have I. A year ago, I would have been able to recap all of the top stories for you. The website was powered by people like me, so I came to rely on Digg to keep me up to date on topics I was interested in. My personality meshed with those of other Digg users, and visiting the website became part of my daily routine. Yet I rarely visit this social-bookmarking website anymore. Instead, I look to Reddit for my democratically selected links. What has changed? Ever since Digg released version 4, back in August, content quality has dropped signicantly. Front-page stories lack relevance, top stories are now decided by far fewer Diggs, and the sponsored links disguised as genuine articles sour the whole experience. Diggs personality changed. It destroyed the very foundation upon which it was built. Suddenly, publishers could auto-submit content and bypass the users who once acted as a lter to determine whether articles were relevant
to the Digg audience. No longer was Digg a democratic platform. The power shifted from user to publisher. In other words, Digg sold out. This personality switch rightfully pissed o the core user base. Alienated users began ocking to well, an alien. Some stayed to plead with Digg that it revert to its earlier version. Digg refused. In revolt, users began to submit direct links to Reddit. Within months, Digg crumbled and users ocked in hordes to Reddit. Reddit oers a platform similar to Digg and, despite being owned by Cond Nast, lacks the tinge of corporate inuence. Before Diggs redesign, Reddit was serving a respectable 429 million page views per month. Cond Nast has just announced that Reddit now serves more than 1 billion. Thats more than double its pre-Digg-blowout numbers and a 300% increase over its January 2010 gures. Digg has nally pulled some of the features that led to the mutiny, but it might be too little, too late. A valuable lesson can be learned from Digg: stay true to yourself. With followers come expectations. Personality attracted them, and every action that is out of character will push them away. Introduce advancements incrementally, and users might put up with it; change drastically, and theyll leave. TO SUM UP Personality builds rapport. Dont be afraid to aunt it. Laughter is a powerful social glue, but use it with caution. You want people laughing with you, not at you. Dene your personality and stay true to it. Out-of-character actions will be seen as inauthentic and will alienate your audience.
Conclusion
Studying the art of seduction and the rules of relationships can help you craft engaging user experiences and forge strong connections with users. Getting your audience to fall in love with your product is no easy task. It requires a holistic approach involving members of every team. As interactive professionals, our work bridges brand and consumer. We are the cupids of commerce. Sharpen your arrows; its time to spread some love. This has been the rst in a two-part series on relationship engineering. In part two, well explore the art of maintaining a relationship and how to trigger purchase recursion via timely break-ups. Stay tuned!
Relationship Engineering: Designing Happily Ever A er Part II

Thomas Giannattasio
I remember when we rst met. We hit it o instantly, and it didnt take long before I was in love. I introduced her to my family, and they all loved her, too. Hell, I even convinced my wife that she was perfect. Weve been happily together now for years. I spend a good portion of my day with her and, yes sometimes she joins my wife and I in bed. Although, not much sleeping gets done; Im typically too busy studying curves. Save your scarlet letter. If youve read part one Relationship Engineering: Designing Attraction you know that Im not talking about some aair. Im describing my relationship with Apple and their slew of gadgetry. Even when its not practical, I still nd myself wanting the latest Apple iWhatever. It seems Im not alone in this addiction; according to a recent survey, 74 percent of iPad purchasers already own a Mac and 66 percent of them own iPhones. Not only does Apple engineer marvelous products, they also engineer extremely strong relationships with their audience. In the article before, we explored the ways in which brands spark our proverbial ame and get us interested in their products. Here well delve into what keeps that ame alive and converts our interest into love and possibly even obsession.
The Kiss, Gustav Klimt (Image: Wikipedia)
Momentum
Maintaining a long-term relationship is not easy; things can easily become stale. Looks and personality are crucial in developing attraction, but people need more from a serious relationship. To create a strong and long-lasting bond, two other elements are needed: simplicity and reward.
Simplicity and reward dance a delicate equilibrium. Each inuences the impact of the other. If the relationship is too simple, its rewards are dulled; too dicult, and the relationship might break. Achieving a harmony between the two will build a momentum that keeps the relationship moving. The back and forth of simplicity and reward creates a wave of satisfaction, which people undoubtedly want to ride. Select brands are making huge waves by implementing these principles to create exciting and engaging experiences. Lets examine some of the factors that determine simplicity and reward.
Simplicity
Sophisticated relationships are the product of simplicity. You could begin a relationship with someone on the other side of the world, but its sophistication would remain fairly juvenile; the distance makes it complicated. However, if that person moved across the street, your relationship would have more opportunity to ourish. Diculty is inevitable in relationships, but a bond will rarely survive continuous strife. So, we gravitate towards people who are easy to get
along with. This criteria is dened in dierent regards: geographical proximity, conversation ow, harmony of beliefs and so on. Simplicity is even more important when it comes to the products we choose. Our evaluation of simplicity with a product is often more ckle than with a person. This is especially true on the internet where options are bountiful and only a click away. Its our responsibility as designers to ensure every aspect of the experience has as little friction as possible. Its easy to mistake complexity for sophistication. And quite often, products and interfaces are made unnecessarily complex with extraneous features. As designers, we need to recognize that a truly sophisticated experience is one that transforms complexity instead of accentuating it. APPLE VS. MICROSOFT Lets compare the support pages of Apple and Microsoft and derive a simple friction analysis an evaluation of how easy it is for a user to achieve a goal. Well assume the user has arrived at this page in need of some assistance with their operating system. Areas of the page oering contact with a human have been highlighted in green to indicate low friction as it puts the problem-solving in the hands of the company. Yellow areas indicate self-help mechanisms, which add mild friction. If an area is irrelevant or oers very little help, it has been marked in red.
Apple Support website
Microsoft Support website
Apple oers less friction in their customer support process and, and in doing so, strengthens the relationships with their customers. They oer more selfhelp options and many more ways of contacting an actual person. Its interesting that Microsoft devotes nearly half of their page to push products, social media and news. They ignore the fact that someone is going there for help. Its like trying to conde in a friend, but instead of oering guidance, they ask you to buy some Girl Scout cookies and suggest that Thin Mints taste even better frozen. It makes things dicult and hurts the long-term relationship. NETFLIX VS. BLOCKBUSTER Started in 1985, Blockbuster once ran supreme as the media rental giant. Brick-and-mortar stores across the country oered convenient access to movies. Instead of purchasing a movie, you could simply rent it. It seems trivial today, but the idea was novel at the time.
Blockbuster quickly grew into a multi-billion dollar empire with thousands of stores in the U.S. and seventeen other countries. However, Blockbuster is currently in Chapter 11 bankruptcy. Why? Consumer needs drive the evolution of simplicity, and Blockbuster failed to address the complexities in their business model. Why should we be required to drive to a store to pick up and return movies? Why should movie rentals be so expensive? And why should we be charged late fees? Netix addressed these questions, and took an evolutionary leap by harnessing the power of the web. Netixs rental-by-mail service revolutionized the industry. Browsing movie choices on your home computer is much easier than going to a store only to realize the movie you want is out of stock. Because Netix oered a subscription instead of a pay-as-you-go model, they removed even more complexity from the process by eliminating due dates and late fees. Unlike Blockbuster, Netix did not just change the industry once and ride the wave. They continued to innovate. Realizing the complexities in their own business model, they introduced a new solution to simplify things even further: on-demand streaming. Members can instantly stream a movie to their home computer, cellphone, iPad, gaming console, DVD player or one of many other devices. By removing friction, they built stronger relationships with their audience. Netix and Blockbuster both oer the same experience: entertainment. However, Netix made the process of achieving that experience much simpler. The evolution of an industry is driven by demand, but determined by simplicity. Netix knew this, and became a blockbuster of its own.
TO SUM UP Simple relationships are sophisticated relationships. A friction analysis can be an eective tool in measuring simplicity. Survival relies on eliminating friction from the user experience. Thin Mints taste great out of the freezer.
Reward
Relationships are exciting, especially in the early stages of courtship. We have an entire hierarchy of rewards to achieve. In some relationships, the rewards are purely physical, while others go deeper and oer rewards such as marriage, children and bingo partners. The satisfaction of a reward is driven by desire. The stronger the desire, the greater the satisfaction. In order to build someones desire, there must be something concrete that they lack. Traditional advertising often features a sexy celebrity using their product. In addition to its sex appeal, this
technique also outlines numerous decits which we desire to ll. We may lack the product, but more importantly, we lack celebrity. Fame has been elevated to a virtue within our society, and its perceived to be extremely satisfying.
By paralleling a product with a celebrity, brands aim to raise the perceived satisfaction of their product (for more on this, pick up a copy of Cialdinis Inuence). You may have had no previous desire for the product, but the advertiser unveiled something you lack, and that lacking triggers the emotion of desire.
Another common way of increasing satisfaction is through challenge. We, as humans, love a good challenge. Puzzles, sports, even video games are all unnecessary challenges that we willingly bring into our lives. Defeating an opponent, whether concrete (e.g. an opposing sports team) or more abstract (e.g. solving a puzzle), oers a sense of satisfaction. Challenge must be carefully managed, because it goes against the bonding power of simplicity. Desire will increase as things become more dicult, but only to a point. Once the amount of diculty outweighs the anticipated satisfaction, people become frustrated. And frustration can ip peoples desire for reward into desire for your demise. CALL OF DUTY The video game industry is arguably the most successful implementer of the challenge methodology. Most games set forth a hierarchical reward system, which rewards players for achieving certain objectives the more dicult the objective, the greater the reward. This system builds an extremely strong bond with the player. Activisions Call of Duty is one of the hottest video game franchises on the market. The latest release of Call of Duty: Black Ops set the rst-day sales record not only for a video game, but for the entire entertainment industry. In fact, it pulled in $360 million in North America in one day, which is more than four times what Avatar made in its opening weekend. The game features a compelling story mode, but the real relationshipbuilding aspect of the game is its multiplayer mode. Each player starts o with a limited array of weapons and perks. They are rewarded with in-game currency for achieving dierent objectives, which can be used to unlock new munitions, upgrade weapon attachments, customize camouage and even
modify face paint. Leveling up to the highest rank and unlocking everything requires a signicant amount of gameplay, but thats only the beginning.
Source: Call of Duty icons
After youve been promoted to the highest rank, youre given the option to go Prestige and start from scratch. You sacrice everything youve unlocked in exchange for a new medal next to your name. The medal is nothing more than an icon but, within the community, its a badge of pride. Not only does this set the pros apart from the n00btubers, it builds an obsession that keeps players coming back for each release in the series. GROUPON Being frugal is hip nowadays. Thanks to companies like Groupon and LivingSocial, coupons have been revitalized in a big way. Instead of clipping
them from newspapers circular ads, however, people receive them daily in their email. Leading the pack is Groupon, which oers a deal-a-day from local businesses. What started in Chicago with a half-o pizza coupon has skyrocketed into a worldwide movement with more than thirty-ve million users. So, how has Groupon started such a craze over something as simple as a coupon? Simple by creating a low-friction, high reward system, for both consumer and retailer.
Groupon is capable of oering discounts upwards of 90% o by using a mechanism known as the assurance contract. Each retailer oers a high-
level discount through Groupon, but only honors that discount if a set number of people purchase it. Groupon will then take a 50% cut for facilitating. If the number of purchases isnt met, the deal is o and everyone who purchased the coupon gets their money back. This cant lose system encourages people to take prompt action. Not only does the expiration timer add a sense of urgency, but the fact that a certain number of people must participate adds incentive to share the oer with friends and family. Groupon also oers a $10 reward for referring a friend. They could have simply asked people to refer a friend, but the reward makes it all the more appealing. However, the reward can only be redeemed after the friend makes a purchase on Groupon. This encourages you to constantly annoy your friends about the service, since you now have a stake in their actions. Groupon is an elegant example of reward mechanics in action. Harnessing urgency, assurance contracts, and social incentives is a powerful way to create millions of relationships. Ultimately though, the system relies on the balance of reward and complexity. Oering great rewards yields great rewards. TO SUM UP Rewards increase engagement, but only if the anticipated satisfaction is greater than the diculty required in achieving it. Diculty will raise the anticipated satisfaction to a point. If the threshold is broken, however, satisfaction quickly ips to frustration. Outlining decits invokes the desire to achieve them. Game mechanics build enjoyable diculty and encourage participation.
Fragility
Love is precious. Regardless of how much time and eort is put into a relationship, it remains fragile. We make all eorts to preserve it: we tailor our lives around the other person; we buy them gifts to show we care; we sacrice for their sake. The idea that the relationship could end abruptly keeps us in a state of caring and preservation. We also act with a preservation mentality with the products we love. People love wrapping their mobile devices in sleek, designer cases. They have a close relationship with their phone, and shelling out the extra money for a case helps preserve that relationship. Honestly though, how often has a case actually saved your device from an otherwise irreparable demise? Chances are, not very often. Yet, the mobile accessory market is booming. Apple is cashing in on the must-have-a-case syndrome with its Smart Cover made specically for the iPad 2. Some estimate that the new Smart Cover could ring in $1 Billion for Apple in 2011. Still, you cant help but wonder why such a large market has been built up around the preservation of devices which are only designed to last for a couple of years. I believe it has to do with the design of supercial fragility.
Why does the iPod have a mirrored back? Why not a brushed aluminum case like the iPad? Because the mirrored surface is very fragile. Its hard to even take an iPod out of its box without scratching it. Scratches on the back dont aect the performance of the device, but they do aect our perception of it. This supercial fragility is eective planned obsolescence, which is the lifeblood of the tech industry. Planned obsolescence is essentially the engineering of a product to have a predetermined lifespan. The hope is to hook people into repeat purchases once the product is deemed useless or obsolete. This concept is nothing new. It has been driving prots and innovation in numerous industries from gadgets to fashion since the 1930s. Sometimes this technique actually prevents you from using the product any longer. For example, the lithium batteries in most of our electronic devices utilize integrated circuits to restrict the number of times the battery can be recharged. Even though the battery is capable of a full-recharge, the integrated chip prevents it. Other times obsolescence is all about perception. The fashion industry relies on seasons and fads to dictate when you should purchase new clothing. Software companies use versioning to implement new features, which puts you behind the curve of innovation. Even the Web design industry relies heavily on perceived obsolescence. Web technologies evolve so quickly that using something that was hip last year could render you obsolete this year. Your sites built in XHTML and not HTML5?! Gasp!
Its easy to view planned obsolescence as an unethical practice, and in some cases it may be. However, use of this tactic forces brands to respect the fact that without us, they cannot survive. This urges them to act responsibly and to keep pace with innovation. It all comes back to the balance of simplicity and reward. Upgrading is a diculty, but well do it if the rewards are high enough. ANGRY BIRDS The Angry Birds franchise is a prime example of obsolescence done respectively. Like most games, the product obsoletes when someone has completed every objective. For some, this means nishing every level. For others, it requires earning three stars on every level. Still others will continue to play until theyve acquired all of the hidden bonuses. Eventually, a player will hit their idea of complete and the product becomes obsolete in their mind.
Expansions can rejuvenate an otherwise stale relationship. Angry Birds expansion packs serve as a love-cycle reboot. Rovio (the creators of Angry Birds) could release updates for the game to oer new levels or challenges. Instead, they release separate stand-alone apps, requiring players to make new purchases. This is a small price to maintain a loving relationship. This form of obsolescence puts the power in the hands of the consumer. It doesnt force an upgrade. It simply oers a way to keep the relationship alive. If the brand continues to oer rewarding experiences, theres no need to force obsolescence. People will continue to upgrade out of choice.
TO SUM UP Fragility strengthens relationships and fosters a worship mentality. Obsolescence powers the wheel of innovation. Breakups (planned obsolescence) must be handled respectively to bring your audience back. People should want to upgrade, not be forced to.
Conclusion
Relationships are the puzzle pieces of our lives. Good relationships t into the bigger picture; bad ones are tossed aside. The bonds we make with people run parallel to those with products. Brands that nurture relationships become integral to the human experience and ensure their own survival in the marketplace. The web is the most prolic matchmaker ever. As designers, developers, and digital mavens, we have a responsibility to understand and respect the relationships that we build through our work. People want products that look sexy, and many designers have become really good at sparking that initial interest. However, thats only part of the battle. Long-term relationships require design in a much broader sense than just visuals; theyre interactive and on-going experiences, which need to be nurtured. Would you date your product? Would you marry your brand?
About
e Authors
Des Traynor
Des Traynor is the UX Lead at Intercom, a CRM & Messaging tool for webapps. He speaks regularly at international conferences (such as FOWA, Lessconf, CS Forum, MIX etc) and writes about UX, design and the business of web software on the widely read Contrast blog.
Francisco Inchauste
Francisco Inchauste is a Senior UX Designer for Universal Mind. He is also a writer and the editor for the Smashing UX Design section. You'll nd more of his thoughts on design and user experience on his blog Finch. You can connect with him on Twitter.
Helge Fredheim
Helge Fredheim is a front-end developer at Bekk Consulting. He received his MSc degree in informatics from the University of Oslo, Norway. His thesis on UX patterns was written in Baltimore MD, USA.
James Young
James Young is a Creative Director at Oroadcode and a freelance designer and front-end developer based in Hudderseld, Yorkshire who works with a wide range of clients around the world. You can follow him on Twitter.
Laura Klein
Laura Klein is a user experience and research expert in Silicon Valley, where she teaches startups how to make their products more appealing and easier to use. She blogs about UX, metrics, customer development, and startups at Users Know. You can also follow Laura on Twitter.
Louis Lazaris
Louis Lazaris is a freelance web developer based in Toronto, Canada. He blogs about front-end code on Impressive Webs and is a co-author of HTML5 and CSS3 for the Real World, published by SitePoint. You can follow Louis on Twitter or contact him through his website.
omas Gianna assio

Tom Giannattasio is the Art Director at the creative agency nclud. His personal portfolio can be viewed at attasi.
More Smashing eBooks

You can buy Smashing eBooks from our selected retailers, and for various ereaders. While you can buy Smashing eBook bundles in our Smashing Shop, single eBooks are available from Amazon.com, Apple iBookstore and Google eBooks. The table below illustrates retailer and device compatibility, with the optimal device for each retailer highlighted in blue. Retailer Apple iBookstore Amazon.com Google eBooks Smashing Shop iPad* X X X X X X X X X Kindle Android
*includes devices such as iPhone and iPod Touch.

User Experience Design

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

User Experience Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

User Experience Design

Uploaded by

Copyright:

Available Formats

Imprint

Smashing eBook #15User Experience Design2

Smashing eBook #15User Experience Design3

About this eBook

Smashing eBook #15User Experience Design4

A Design Is Only As Deep As It Is Usable

Gradients, Drop-Shadows, Reections, Oh My!

Smashing eBook #15User Experience Design5

Smashing eBook #15User Experience Design6

Smashing eBook #15User Experience Design7

Dribbble shows out-of-context design shots. Is this a bad thing?

Smashing eBook #15User Experience Design8

The Nettuts+ logo and navigation bar.

Smashing eBook #15User Experience Design9

The Facebook home page.

Smashing eBook #15User Experience Design10

What Makes A Design Usable?

Smashing eBook #15User Experience Design11

Smashing eBook #15User Experience Design12

Smashing eBook #15User Experience Design13

Smashing eBook #15User Experience Design14

Look at the screenshot below from 10k Apart:

Smashing eBook #15User Experience Design15

Smashing eBook #15User Experience Design16

Usable Doesnt Have To Mean Ugly

Smashing eBook #15User Experience Design17

Why User Experience Cannot Be Designed

Smashing eBook #15User Experience Design18

Smashing eBook #15User Experience Design19

Hassenzahls Model of User Experience.

Smashing eBook #15User Experience Design20

Smashing eBook #15User Experience Design22

Gmail noties users when they forget to attach a le to an email.

Smashing eBook #15User Experience Design23

Smashing eBook #15User Experience Design24

us, UX Cannot Be Designed

Smashing eBook #15User Experience Design25

Smashing eBook #15User Experience Design26

We Can Design For UX

Smashing eBook #15User Experience Design27

Smashing eBook #15User Experience Design28

Extra Credit: How To Design For UX

Peter Morvilles Facets of User Experience. (Image: Semantic Studios)

Smashing eBook #15User Experience Design29

Smashing eBook #15User Experience Design30

Design Is About Solving Problems

Other Designs Cant Solve Your Problems

So, Where Else Can You Look To For Inspiration?

Smashing eBook #15User Experience Design32

Smashing eBook #15User Experience Design33

Simple Steps to Problem-Solving

Smashing eBook #15User Experience Design34

Examples of Inspirational Problem-Solving

Smashing eBook #15User Experience Design35

Smashing eBook #15User Experience Design36

Smashing eBook #15User Experience Design37

is Has To Do With UI Design

Smashing eBook #15User Experience Design38

Smashing eBook #15User Experience Design39