Imprint © 2013 Smashing Media GmbH, Freiburg, Germany ISBN 978-3-943075-574 (Version: Janua Cover Des ign Ricardo Gimence PR& Press Stephan Poppe ‘eBook Strategy Andrew Rogerson, Talita Telma St ‘Technical Baiting: Tata Telma Stackle ashing Medis Gmbtt About This Book Whether you're creating a game or a website, a lasting bond with users ‘is more often than not the result of emotional attachment. Knowing the ‘ns and outs of emotional design will enable you to imbue your creation ‘with personality and to shape the user’s perception. Find out how to in: tegrate emotional appeal into your website, and how to turn your game into more than a cold, flawless, technical challenge. A personal touch. can make all the difference, if you know how to design it. TABLE OF CONTENTS: Inclusive DeSig@ ccnnnnnnnn ‘The Personality Layet cnn so Give Your Website Soul With Emotionally Intelligent Interactions... 52 Not Just Pretty: Building Emotion Into Your Websites. Playful UX Design: Building A Better Game... Gamafication And UX: Where Users Win Or Lose ... ‘Adding.A Personal Touch To Your Web Design. About The AuthorsInclusive Design BY FARUK ATES » ‘We've come a long way sitice the days of the fitst Macintosh and the introduction of graphical user interfaces, going from monochrome col- ors to millions, from estranged mice to intuitive touchscreens, from scroll bars to pinch, zoom, flick and pan. But while hardware, software and the people who use technology have all advanced dramatically over the past two decades, our approach to designing interfaces has not. Ad- vanced technology is not just indistinguishable from magic (as Arthur C Clarke said); it also empowers us and becomes a transparent part of our lives. While our software products have definitely empowered us tremendously, the ways by which we let interfaces integrate with our lives has remained stagnant for all these years, In the accessibility industry, the word “inclusive” is relatively com ‘monplace; but inclusive design principles should not be reserved for the realm of accessibility alone, because they apply to many more peo- ple than “just” the lesser-abled. Interface designers frequently think in binary terms: either all of the interface is in front of you or none of itis, But people are not binary. People aren't either fully disabled or not at all, just ike they aren’t merely old or young, dumb or smart, tal or short, People sit along a vast spectrum of who they areand what they are like; the same is true when they use interfaces, except that this, spectrum is of expertise, familiarity, skill, expectations and so on. So, why do we keep creating interfaces that ignore al of this? Its time for us to get rid of these binary propositions! What Is “Inclusive” In The World At Large? In the world at large—meaning not one particular industry, country or demographic—the term “inclusive” applies to cultures in which, for ex- ample, women are as welcome to contribute their opinion as men are; in which a person’ race or sexual orientation has no bearing on theit acceptance by a group; in which everyone feels safe and comfortable, and no one feels suppressed, stymied or silenced: in other words, a cul ture of equal opportunity. But when we apply the term tointerfaces, it doesn’t mean that interfaces should be equal for everyone; rather, it ‘means that they should be equally accessible to everyone, and equally empowering no matter what the user's skill evel or familiarity. When these two aspects are combined, the product gets the best of both ‘worlds: itis accessible to more people, without being, compromised for advanced users‘Super Marto Bros. was accessible to play for anyone, ana fun (and sometimes rustrat: ing forall ‘An excellent example of software that has done this well isin the video ‘game genre, going back as far as 1985 with Nintendo's Super Mario Bros. Itwas a game that truly anyone could pick up and play, with an invisible interface that taught you everything you needed to know to get started and become good at it, The screen would only scroll right, so ‘you couldn't walk left: You could jump, but standing on top of special bricks did nothing, so you would try to jump against them from below. Pipes visibly led down, so you'd try your luck with the down arrow on the direction pad. And at the end of the level, the bonus flag was raised high, encouraging competitive players to jump to the very peak for top, points, All of the game's mechanics were explained in one level, without a single instruction, tutorial or guiding word. ‘Many games since 1985 have not featured this principle to any sig, nificant degree. Super Mario Bros. truly was a game whose interface ‘was equally empowering; meaning, the interface and product magni: fied the results of your efforts based on the (skill) level of your input, Put differently, beginners would see good results from their efforts, ‘while advanced users would see far greater results from theirs. These principles aren't limited to video game design either, they apply just as ‘much to software applications and productivity tools, even websites! So, let’s start with some simple inclusive design concepts. Language And Aesthetics Language has an impact on everything, because it is the primary way ‘we communicate as.a species. Its significances also frequently over-looked; a Duke University study revealed that gendered langage in job listings affects a job's appeal’, independent of the type of job. There's snore: while nota single participant in the study picked up on the gen. deved language, each of them did find the listings more ot less appeal: ing as a result. This raises the question: how much of an impact does the language chosen for our designs have on the number of new users ‘who sign up or the number of customers we convince to purchase out products? No good study in this area seems to exist or be readily avail able, but one study (of a sort) that is available is the W3C’s own re source on people's names around the world? andits effect on form de sign. Le’s call ita good start and do more research into how language shapes the Web. But language is just one metric that we don't take into consideration as often as we should, Aesthetics play a significant role as well, yet there is alot more to aesthetics than taste and general appeal The placement of elements, whether shapes are angular or rounded, and our use of color al affect how different genders, demographics and cut tures respond? to interfaces. Because no one color scheme will please everyone all the world over, the more international out (targeted) audi ences are, the more fully designed our localizations will need to be. INTERFACE DESIGN LEGACIES In the world of interface design, being inclusive means being accepting and welcoming of the many different cognitive skills and levels of ex: pettise among users. Historically, we have striven for the perfect mid. dle ground between approachable and empowering, Making interfaces ‘more intuitive plays a significant role in that process, butt often de- ‘mands that we dumb interfaces down (ie. remove features), which can be undesirable for the advanced user who wants more functionality or control. With more comprehensive interfaces, a frequent “solution” to this problem is to allow users to customize the interface to theit needs. But is this truly empowering? When research shows that less than 5% of people adjust default settings itis highly questionable whether cus- tomization and settings are truly empowering in interfaces. Earlier, I mentioned how most interfaces offer a binary proposition: either the application is open or it isn't. When it’s open, the entire user interface (UI) is typically available to you, whether or not you need all of it This makes sense from a historical perspective—when all we had 1. heap/fwww fare og/top-storieawanted gender free ja 2 hnpivnwewe3org/interational queeriona/gs personal name 3 hupifsnew.netmagaaine com/fextures!fnd-perfectcolouryourwebsite 4p fevew ne convbroinaparkalzouatialdo-a2cr-change thew ettings!were physical interfaces—but it makes little sense with our modern software ones, especially since most software interfaces are far more comprehensive than a typical hardware interface. When Steve Jobs announced the iPhone at MacWorld in 2007, he compared the yet to be-revealed iPhone to popular smartphones of the time, noting their main problem as being “the bottom 40% ie. the hardware buttons on all of those devices. The buttons were there “whether you need them or not” The solution, according to Apple, was a large touchscreen with fully software-based UI controls. That way, each application's interface could be optimally designed for its particu lar purpose. The point Apple made along the way was that sticking,to convention, isa bad idea if you want to move an industry forward. Hardware but: tons used to be all a phone had. Then, they were used to supplement a tiny screen. The iPhone showed that, when it comes to innovation in in terfaces, the screen should be the full surface, a blank canvas onto which software could paint any interface. The unparalleled success of the iPhone suggests that Apple has proven their point well. But as fantastic as the iPhone may have been compared to the smartphones before it it still suffered from this same binary UI prob- Jem. The iPhone merely shifted the problem from being device wide to being specific to individual applications, and then it masked the re ‘maining issues by removing features or hiding them in drill-down, views, until one very elegant, simplified UI remained for each app—one that lacked the ability to become more sophisticated for users who ‘wanted, or needed, mote. isa familiar view. To others itis a snéngdshord of buttons. Image Source: Julien Haters‘To be clear, removing features is notin itself a negative. Most faces get better from the process, because every visible feature, every Ul control adds to the overall cognitive load of the user. Think, for in stance, of an airplane cockpit and its countless little contuols, dials and meters covering every surface. If you are nota pilot, the mete sight of it ‘would overwhelm you. To an experienced pilot, however, itis simply ‘what they need in order to fly the plane. Is this really the best we can do, though? Super Mario Bros. showed us we can do better. In software, we have a situation that calls for the kind of innovation Tm talking about As itis, more complicated, advanced and powerful applications feature more complex interfaces, and some can be down: tight overwhelming to first-time users. But not everyone wants to fly a plane—some of us ate st trying, to get some simple work done. Appli cation developers try to alleviate this problem with tutorials, guided touts, help screens and overlays that explain each aspect of the Ul; a ‘great solution these things ate not. What we need are better interfaces, interfaces that understand that we are human beings with different needs. What we need are. ter Adaptive Interfaces For interface designers with an eye on accessibility, most of their ef forts have long focused on the tecnica! challenges faced by users, Many commentators have encouraged us to consider cognitive (or learning) disabilities as one partof the broader area of (Web) accessibility, but rarely has anyone explained how to do this. Additionally, when some- cone sees the term “cognitive disability,” they understandably think of the mentally handicapped. But there is a huge range of cognitively able people, and they exist not on a linear scale: a quantum physicist might havea tough time figuring, out how to use a feature phone, whereas the average teenager would have no problem with it, People invest in an application (and, thus, its interface) in varying, degrees, depending on how important the product is to their daily lives. ‘This means that your interface should cater to varying degrees of in- -vestment in addition to differing levels of expertise and familiarity Inan interface, each additional UI element increases complexity and asks fora deeper investment on the user's part. This is why invisible in terfaces (like the one in Super Matio) are so powerful: an interface that appears only when needed reduces the cognitive load, reduces the in- -vestment required to understand the product, and makes it easier for 5: herp fevew Pickr com/photoattap!22970903901the user to focus on the task at hand. A button that is relevant only in certain contexts should be visible only in those contexts. But we can take this principle toa level even beyond that. An inter face that is truly inclusive of all kinds of userstis one that begins with only the fundamentals and then evolves and adapts alongside the user During this process, the interface can both grow and decay, acquiring, more features and controls as the user becomes more fluent in using it and dropping or reducing the prominence of UI controls that the user does not use much, if at all. Doing this automatically also makes more sense than offering the user a large number of options to customize the UI, for two reasons: first, users shouldn't be expected to spend a lot of time making an inter face usable to them; secondly, people might not always know exactly what they wart, but their behavior might make clear what they need. A system that intelligently measures what the user needs in order to de liver the most efficient, effective yet still understandable interface could allow sucha thing, 4 highly effective interface is one that can be changed not to how each user wants it, but to how each user needs it. Of course, measuring the cognitive skill ofa user is difficult, and even then it can only be approximated. Certain aspects of the user's be havior can be measured, which helps to inform us about how familiar the user is with the interface overall and how fluent they arein using it. ‘The speed with which a user navigates an interface and uses or ex plotes its features isa good metric for how comfortable they are with the interface. The fiequency of their use of “Help” and “Undo” features suggests a certain confidence level, Users of keyboard shortcuts areal ‘most certainly looking for mote powerful features, and someone who uses quotes and AND and OF in their search quetiesiis likely technically minded. These and many other measurable aspects of people's behavior can help shape your application's interface, which can then be adapted tobetter suit theneeds of users.th ‘This is not the end of the story; rather, itis only the beginning, Tony Fadell's new product, Hest, is a great example of an adaptive interface The Nest thentastatlearnsfrom you in the real world. The Nest Thermostat® learns from your behavior pat terns as you go about your daily and weekly routines, and it becomes predictive, 90 that you need to adjust the thermostat less frequently the more you eit ‘That's but one example. The possibilities open up even more with in- clusive and adaptive interfaces. One type of user might need Feature A very frequently, whereas another might need Feature B instead; a truly inclusive interface would adapt to these needs and be equally powerful for these two different types of users. Conclusion We've overcome the various technical challenges of interfaces and de signs through Web standards, accessibility and ARIA, responsive Web design principles and touchscreen devices. But we have focused so ‘much on these technical challenges that we've almost lost sight of inno vating, the human aspects of interface and design. The next stage of evolution for our industry is to explore how to make our applications and products mote inclusive, taking into account the vast spectrum of differences in our audience, and to make our interfaces smarter so that they serve a wider range of people more effectively. Let our exploration, of inclusive design begin! © 6. herpstwvew:nest comThe Personality Layer BY SIMON SCHMID » “oh hai Smashing Magazine!” That's one of the dozen ways that Flickr ‘welcomes its usets upon signing, in every time. It's an easily overlooked detail, one that the service would work without flawlessly. Yet this de tail is a big part of Flickr’s particular design character that would be missed if it wasn't there. flickr’... Sige Yad ~ acaba. Richi (Serst~ ial = = OHHAI Smashing Magazine! » Your Photostream Rocont Uploads | Racantactvy Thisis hou iho” greets its users ging the language upon ev ‘These easily overlooked details ate the ones that 'm particularly inter- ested in because of the reaction they are capable of causing in users. ‘These details trigger an emotional response, and if used purposeful ly and fittingly, they will help to form a personality that people will re spond to positively when interacting with the product. This positive a titude will often lead to people sharing and even advocating for your product with their peers. This technique of connecting with users on a personal levelis also referred to as “emotional design” Alittle Theory ‘The term “emotional design” was defined by (among others) Aarron Walter’. In his book Designing for Emotion, he describes emotional de- sign by building on Maslow’s famous hierarchy of human needs?, which posits that humans need to achieve elementary states of being, suchas health and safety, before they can start thinking about higher ‘pneu Fiske com! 8 hp 9 hp wikipedia orgfwiley Maslow hierarchy of needslevel needs, such as self-actualization. People who are seriously ill o lack safety would find it difficult to think about self-actualization as ex- pressed, for example, in morality, creativity and problem-solving, poor on Masta erarchy of hurman needs (ef) ana the hierarchy of emotional design (ight) lrmage:Aarran Welee?®) According,to this theory, a product has to be functional, reliable and ‘usable (in that order) before a layer of pleasure can be applied. Emo- tional design, then, is the pleasurable layer that you put on top of a functional, reliable and usable product. An effective emotional design strategy has two aspects: You create something unique that transcends your own style and that evokes a positive response in users, You consistently use that style until it becomes a body of work, a per sonality layer In this atticle, we will look at some strategies you can follow, as well as, some examples found in the wild, plus a few projects in which the con- sistent use of emotional design results in a great personality. Tolearn more about the theory of emotion in d inthe artcle'Not Just Pre ign, you might be interested Building Emotion Into Your Websites” to. hepifsarrane 1. hep uxdesign smashingmagszin omo1afoa/ suingThe Elements Of Emotional Design ‘The goal is to connect with users and evoke positive emotions. Positive emotions" instill positive memories and make users want to interact, with your product in the future ‘There's an additional benefit, though. In pleasant, positive situa tions, people are much more likely to tolerate minor difficulties and ir- relevance’, While poor design is never excusable, when people are re laxed, the pleasant and pleasurable aspects of a design will make them ‘more forgiving of problems within the interface Below is a non-exhaustive list (based on personal observation") of ways to induce these positive emotions. OF course, people will respond to things differently depending on their background, knowledge, etc., but these psychological factors should work in general Positivity See the article “What Are the Top 10 Positive Emotions!” Surprise Do something unexpected and new. Uniqueness Differ from other products in an interesting way'®, Attention Offer incentives, or offer help even if you're not obliged to. Attraction ‘We all like attractive people, so build an attractive product. Anticipation ‘Leak something ahead of the launch. Exclusivity Offer something exclusive to a select group. Be responsive Show a reaction to your audience, especially when they're not expect ingit ows, let see these principles applied to actual products. fenwikipediaorgivikPleacure 1 hesp/fwwjnd.org/ da meafemation_ design attactve thing» work betterhrml 14 hepifthegodfoundercom 15 hupifnewhuffingtonport sonvkar-henleyfwhatare-thetop1e-pocit b-20377htm] 16 hupifwbitdoidea comblog/ie your start-up dex akeady-okenPractical Examples Of Emotional Design Below are some details of emotional design on the Web. We cannot al- ‘ways attribute a particular strategy to it, such as “surprise” or “anticipa: tion.” Sometimes more factors are at play, and people vill perceive some things differently ‘Remember that just blindly copying these examples will not give your product the personality it needs. Rather, infusing emotional traits into the product thoughtfully will ensure that the personality sticks. Here's a little test: browse Built With Bootstrap’? and see which ones ‘you like best. Mimicking Emotions SMILE People who enjoy each other's company tend to mimic each other's be hhavior'®? When someone you like smiles, you generally smile back. ‘This can work on websites, oo. The emotional brain is affected by pic: tures, especially of people, and by stories. Let's look at one design that tells a story and shows pictures of people. index phpfnewsfeeloasea/people mis ther bute seont cham 1 hp 20. hep sxmag comlattled iowofurdesignHightise shows happy people, along with stories of them using the product The smiles and testimonials from existing customers are a powerful combination (for proof, read about the A/B testing” done on Hightise) Oh, and don't forget to cultivate your ou personality GENERAL HAPPINESS Smiles seem to work in highly abstract form as well. Engich Hop Login Join Ust them Cost before shipping = $20.00 Cantina channina Rata nhaokaut ‘Threadless’ shopping cartis sad when it's empty, but when you feed it, it becomes happy. This detail will probably make you smile; even if you don't end up buying anything, you'll eemember it for making you look twice. User retention ATTENTION ‘User retention is another area that requites a lot of attention, coab-teoting: pare finalAwhile ago, if you had tried to unsubscribe from Audible and stated that your device wasn't compatible with its service, you would be given. a code worth $100 to buy a compatible device on Amazon, That's a pow exful surprise that you'll remember, even if you end up leaving, Music Etsy just plays “Every Time You Go Away” by Paul Youngif you at tempt to unsubscribe from its email newsletter. The song might not stop you from unsubscribing, but you will probably remember it the next time you come across a product on Etsy’s plattform. Or you might think of Etsy whenever you hear Paul Young, Sea ee aon) ‘You Have Successfully Uneubseried messages rom tay. 3 you unstseraea by mite, you ean resubtorte by jisina hare x57 plays'Every Time You Co Asay” by Pau! Young whenyou ea EDGY HUMOR nupon probably wouldn't be able to change the mind of someone ‘who is determined to leave its service, but its video" definitely fits the playful tone® of Groupon’s copy. 24 hupihsneetey com 25. huplivwnw 236, hesp/fwnw.ne comfbrainepark‘We're sorry to 800 you got How sorry? a ne nari een ys Gee erate ve yer ers pn a unipennck. Groxpor? gets edgy Copy Copy is the easiest way to introduce and play with personality. Your website probably has text everywhere, and words communicate a per sonality very well. Do you want your brand to be playful, stem, comical, hip? Copy can goa long way in defining, who you are and who you ap- pealto. LEVITY In the Everyday app, if you haven't put images in the library (which are needed in order to play a video), yon will get this friendly reminder to take some pictures of your “beautiful” face—one word that completely changes the tone of the message. ar hepag Sr Peete ee unc Peery Cieces ‘OK Eveday’s* onboardng process CONTRAST “The “Pssst.” here says it really well—not only visually with all of the “ses and the contrasting, color, but also aurally when read.days ago 0 notes HTML - Large: Copy) in cls-Mhare HTML - Full Co We have the Mario coin” seund [Forum eode | Gap/f]brntyasate hen people upgrade to a @bute aid plan” gel Gascon . Privacy ‘Tags quote butfer coin mario Pest. Tis page ls Seeret- Itean ony be seen i yeu give poopie ta ink (days ago 0 notes Skies privacy copy We find the same nice detail on OK Cupid’s website when you specify your location. “Ahh” could mean both “How wonderful” and “Yes, we understand now. Welcome” Location Cczoch Rapuble : Your Gy in Czech Republi ‘Akh, Prague MICROCOPY Hunch says something you are probably not used to reading, This dif ference alone could persuade you to go along, with them. First, it com- municates that the email will be of interest to the user; secondly, it rec cognizes that spam is evil 29. hupifokitch comyCreate a new account Ifyou already hava a Hunch aecount, eign in. Hunch Username — Userane aoa ton, Pease costo eno Ems yum ovtantyout nvr Soe instintoting@arai com pans Password Confirm Password Passwords do rt ato, & cet periodic Hunch updatse iy bo an omal work ead. Aa ¢ wen con 09 ftn. OL agrae to Hunchis Terms of Service Hunch's8 way of assuring prospective uses ofthe safety oftheir daa, MICROCOPY 2 Milk’s detail here makes you much more open to subscribing to the newsletter. The approach is the same as the one above; assuring people that they will be contacted only when it really matters, (Note that Milk ‘was recently acquired by Google and so has been shut down) 39. hupithanch «[Mik promises infrequent ematls and teases with earl access, MICROCOPY 3, Here is another approach from an as-yet unreleased project of mine, The branding is lighthearted, s0 I've crafted this microcopy® to accom- ‘pany the invitation form. Hopefully, people will be more at ease sub- ‘mitting their address. ‘thanks for stopping by. This is just litle something | want you ta see 't you leave your emall address for me to reach you when you can be rst to try this out. Here's a very rouch implementation of what we have Success! You're on the list. aera a arty wary weneve span fete gery sn ys et HM seoSo ct Ses ne an sts mnate nye es, era rarer vat or stony ane usd Onc Paros ‘This saysthat your email addressissecurewith us 3 hepifearentAlso, note how the button doesn’t just say “Submit,” but rather “Request an Invite” This adds a touch of exclusivity to the sign-up form. If you're interested in this sort of thing, read about Pinterest’s sign-up process*, Error Pages and Downtime Not many situations are more annoying for a Web user than down time. It can make users rather upset, especially if they depend on your product. Emotional design helps you steer clear of such offenses. Below are some examples. SIMPLE CHANGE IN COPY Flickr says it's having a massage. It’s not brilliant, but it's better than an annoying error message. Aickr-com ax b Clae Cirasdy Claookmaries Civsm E- Oi» flickr: Flickr is having a massage. For updates, please check the Flickr Blog and our Twitter account. Hicks having a massage image: Luke Beard) SAY SORRY AND OFFER A TREAT Here's a better approach from Flickr. When it experiences more serious problems, it puts up this splash page saying thatits tubes ate cloggedand that itis sorry. But instead of leaving it at that, itset users to a task and offers the winning contestant.a valuable pro account. flickr Arrggh! Our tubes are clogged! cata ts nuh’ we th yourgh te eneren res (Sngeion wn FREE PRONECOUNT ust tna page an eget na ot non na ee oct, ip hrnst syartumonaeccontcrise woneewes Seba Toe scant nn cic atti = Sereuey ne apoegin tet vntrareed ew Vevo ‘erg tata near ucrcon oa one on atet oe Fo Bea Thecompetition when Fickrs rubes are caged. SORRY BUT... there are more important things in life. When Tumblr went down re- cently, it told users that it was already hard at work on resolving the problem. In the next paragraph, it reminded users that there are bigger problems ont there than a brief outage and that you could actually do something about them. 5, hepitwwew. flicks comtMaron a ay Tumblr supports peopie inneed, Annoyances Other online annoyances include waiting for a screen to load. But some screens just need time to load. When your app is busy gathering infor- mation, consider doing something on the screen, such as displaying a tip. VNC teins op cies ah vd etd ed ob he tenes 35 Loading... ‘Tot: O10 tec angle eh Hlipmar®® bridges screens with helpful information.HUMOR CAPTCHA are a eality in many places today, but that doesn’t mean users have to like them, Heck, they're an incredible annoyance. Stack Overflow at east explains with a fanny graphic why ithas to annoy visitors, Sesctevertion EXE Ka Em = Human Verfetion Stack Overfiow3? explains why thas toannoy you with a CAPTCHA Personalization Another emotional strategy is to respond to the user’s input. I love ‘when something responds to me without my having to disclose person- al details. ‘The landing page of the Thermo*® app detects yout location and up- dates the graphics on the left, telling you the temperature of you loca tion, 36. hnpiuneehipmunkcom! 37, htpifetackoveflovecom! 38. hupifthermomet‘Sweating Like a Pig. You don't even n d that much information about visitors. 37signals® demonstrates ple way to be attentive to visitors, without any knowledge of them whatsoever 2° BTsignal: Web-based colboratior 37signals Highrise remembers tk about people you'd 1 Keep a permanent record of people you do business with.» what was said, and when to fellow up next. Over 20,6 Email Design Newsletters can be a great tool, but most people want to cut down on noise and get only the most informative and well-produced ones.‘Newsletters can be worth subscribing to for various reasons: informa tion, exclusive offers, humor, etc. ‘TELLING A STORY Zaaly highlights the most interesting, “classifieds” in its newsletter. If make you wonder what people come up with on the website and chal lenge you to use the service more often. Most Creative Zaarly: Weird and Cool Apartment Furnishings Apartment defibrillation: A necessary service, now ‘apparently available on Zaarly. "Roommate moved out and took my apartment's soul with him, He took the essence of what made MY ‘apanmont have @ heartbeat. Thinge like @ majestic cheetah papor- ‘mache head and a weird glass bubble lantem that hung from the calling. They're gone. m sad he took all these great things. My apartment lost its heart and it needs a defibrillator. Please help me ddefib my apartment” Like @ majestic cheetah head, you are the soul of our company. We don't know what we'd do if yu left us! Se stick arcund, and let us know whatideas you have for Zaarly by replying lo this e-mail, We lave hearing from you ‘Your friends, Ae Zao Tan Zoar'y*?highlightsitsfavorite happenings on the websie 4p. apf zaarly com)PERSONALIZATION Not that this is especially innovative, but Quora has enough data to show me stuff that I would enjoy reading, If you have the data, then do your users a service. Speaking of personalization, check out how adding, the recipients name to an emait's subject line increases conversions* (eliwe-W Your Quora Weekly Digest People You May Know on Quora co Following 16 topics: Nusio, Food, Restawants. ‘Angwered Which speakers have spoken at both TED ‘re TeDx corferencae? wered How di Tim Van Damme get cnt 16 owala? —— ‘Rosuered How cana web developer got tart with Photoahon? Any books/aoral/rescurees to reoommord? — ‘Answered What isthe pecect startup team? ‘Top Content For You This Weok Why did Twitter have Quoret many problems if its made with Ruby? a extends your social graph and suggests reading talored to you SURPRISE COPY Notification emails are usually all business. But when someone takes time to make something a bit more special*3, as the notification email below from CD Baby shows, people will go to great lengths to tell others «4. mpifestomberg.com/ poet 7147394 42. hnpilsnawe.quoracom! 45 hap fw foushourworkwweek comlblog/soafos! a/the-mort-succeetfuke-maibrever wrote! pailengagement 2about it. The string “private CD Baby jet” yields over 20,000 results on Google. That's powerful word of mouth for just a tiny detail. ‘Your CD has been gently taken fiem our CD Baby shelves with sterilzed contamination-free gloves and placed onto 2 sain plow. A team of $0 employees inspected your CD and polished it to make sure it was inthe best possible condition before mailing (Que packing specials fom Japan lit a candle and a Ish fell over the crowd as he put your CD into the finest goki-lined box that money can buy. ‘We all had a wonderful celebration afterwards and the whole party arched down the strect tothe post office where the entre tov of | Portland waved “Bon Voyage!” ta your package, on its way ta you, ia ‘or private CD Baby jet on this day. Thursday, July Sth hope yout had a wondestl ime shopping at CD Baby. We sure did ‘Yoor pichae ison our wall as "Customer ofthe Year.” We're all exhausted but can't wait for you to come back to CDBABY.COM!! ‘Thank you, thank you, thank you! Sigh Derek Sivers, president, CD Baby the Kee store with the best now independent mosic tp: /edbaby. com cdbabyZedbabv. com (503)595-3000 The copy for CD Baby's notification ercal image: The Shifted Librarian Storytelling Weall know that stories get people to listen. Some compelling exam ples are out there of product stories, one of which is Ben the Body. guard. Its an iPhone app that protects the personal data on your phone. ‘The app is designed around the character of Ben. Way before it launched, the developer put up a website on which Ben walked the streets as you scrolled down*5, telling you that he'll protect your data soon.Peery & PHOTOS Cy Sen the Bodyguard on the taser page This character of Ben, the French bodyguard, is weaved into every bit of the application consistently. It’s almost as if you were entrusting yout data to a personal bodyguard,ross] Ea ER Te) Easter Eggs Easter eggs in general are meant to delight users. Even Google, a rela tively serious character among online personalities, adds an Easter egg ‘or two to its search engine every now and then Google Lot it snowLET IT SNOW Awhile back, Google made it snow on its home page. It also let users do abarrel roll’, Easter eggs are usually unrelated to the service. They exist metely to delight or surprise users, to give them a treat just to make them happy. ‘And happy users share. Mascots ‘MailChimp has a distinct personality that deserves all of the atten: tion® that it has attracted>®, A few details are worth pointing out, THE JOKING MASCOT distinctive part in MailChimp's emotional design is its chimp, which ‘g0es by the name of Freddie. Freddie cheers you up when your profile ‘page loads. And every time you reload, a random joke or link is shown. ‘One of Freddie the Chirp'srandom remarks. (Click on the image to see what he'srefer ring to) But note that emotional design like this can be done wrong, Remen ber the Microsoft Office paperclip helper that got in the way every time ‘you tried to do something? Freddie the Chimp does not get involved; he stays out of your workflow. 47 expel wwrw google com 48, hep//imgty com/gndovastarrelerole 49, hespifvime com 4081566 50. hupi/blog thegodioundercomviagged/maiehimp aLog-In Pages Even log-in pages can be made interesting, MailChimp's changes on special days, like Google's doodle. Check out some of the designs in the dedicated Flickr pool. You don't even have todo much to be special. Pocket greets you on the log-in screen with a huge background image instead of a dull color be comphotoalfreddiovonchimpfesta7.g7625ts87s044s/withAttention to Detail and Surprise Many of the things covered above demonstrate some attention to de tail, which is essentially what it all comes down to. The level of atten tion to detail shows how much you love the product and how much you respect your customers, Check out this spinner in Quip’s recently re leased app.‘There is no need for the wings to flap, but I keep reloading just to see it. Remember, though, such details should never be at the expense of us ability Surprises and attention to detail are eve Dropbox’s early buzz was its video here, One big reason for which it posted to Diggas “Google Drive killer coming from MIT startuy Itwas carefully crafted for that audience, witha lot of things left to he discovered (including jokes that Diggers would understand and appreciate). More about that period in Dropbox's growth can be heard in a talk by cofounder Drew Hous: tonak Wew History Reokmarks Wado He TO ‘ropbox Trade Secrets ‘To get inspired with details, check out the great Tumblog Little Big De tails Three Diverse Examples Of Personality Up tonow, we have looked at various aspects and examples of emotion- al design. Below are instances of emotional design in different areas: ‘two from websites and one from the app economy. EXAMPLE 1: GIDSY (A MARKETPLACE FOR THE PUBLIC) Gidsy57 is a marketplace for activities run by users. As such, its develop- ers have to worry about broad appeal. Gidsy’s main color palette is blue and white, a combination known to be liked and trusted. Itis no coincidence that Facebook, Twitter, Linkedin’? and countless other brands use some shade of blue, While ‘you're at it, havea look at BaseKit’s infographic about the psychology of color. Gidsy’s personality is defined by a thoughtful use of vintage images, lighthearted copy and surprise elements, 855, httpedieww drophox som! 6, hpi litlebigdetil com, 57. hitpigday cmd 58. hupislarenbllercauk/blogoocial media-brandi 59. hupJtewwcolourlovers conY/usincelblog 2010/oghisthe-mose powrerfulcolorin- theworld 60, hrp/fuww base g thocolosr poychology of bls comtthe-paycholagy-of colour infographicConvey a feeling: Vintage images* can be found® all over the web: site®S, They are often used to make a point or emphasize an emotion. Ahoy there, sailor 4 Sorry, we could fin the page you were locking fat jg «vt ce Irsvintage-styled 404 page epitomizes Gidsy's4 design personality. Surprise: On reaching the footer, you'll find a call to action, urging you to create a listing for free. Hovering over the wand will launch a rain- bow, pointing you in the right direction and surprising you. Measuring how well that particular detail converts visitors into users would be in teresting, 6. p/giday.com/pree 62: hep 63 hep 64 hp gray com 404brbes br bios, Holp bow playfully quidesyou ro.@*Learn more buttor Copy: Simple copy with a bit of humor: “Well, hello gorgeous!” and “Booooom. Your photo was deleted” idsy ) Dashboard Inbox Booking Hosting Edit profile Account settings MEMES onc: wt tacetook to import your prot fom Select an image on your computer ((Chsone ie] Noe chosen Wel hello gorgeous! ‘Youve scesfily uploaded your photo Thepage on which users upload their avatar:Booking Hosting —Editprofile. Account settings ys Eventsagenda Bookings overview amisu Hotness ’ 3 Comoked- Description hs ts be longer then 209 charter | fai ‘A 2000000M Yourshotowseettes EE Upload your photos. 2 photos minimum listings. etait x Once Onss The page on\ahich users delete images ‘These details go a long way to giving a product.a friendly personality. But you can also rethink large chunks of text, such as handbooks and. manuals, Gidsy has done this in its handbooks section®S, Handbooks usually are a dull experience—but not this one. It has already generated alot of buzz and links in the design community, so you might have ak ready seen it. Notice the subtle nod to ia’s Writer app®? 65, hitpilgday comhancbooke/making-the-perfec 66, he: istingChoosing a Title | ‘The title for your listing should be short, sweet and to the point. You have a limited number of characters that you can use, so make it catchy. Using special characters, e.g. @!"£$%A8e"*(), can interfere with your message. You're better off avoiding these and sticking to good old letters, spaces and numbers where needed. No need to pur dates or times into your title - these will be dealt with in other sections. Make sure you choose a title that will help people find your listing. One thing you can ask yourself ig which words you would use if you were searching for a similar activity. id's handbook has made it around the Web, Newsletter: Well finish off our look at Gidsy with its recent newslet ter, which just hit my inbox as I was about to finish writing this article ty psc ny a eet wemomae = mE ee eae See theiny ‘please reply" emai address?Gidsy has used another vintage shot to emphasize its message. Also, notice the tiny detail of the sender’s email address, ploase—ro~ ply@gidsy. con,a friendly reminder that the company is listening and attends to the smallest of details (I noticed that another Berlin- based startup’ started doing it first) EXAMPLE 2: AUTOMATTIC (GENERAL WEB HACKERY) Automattic®® needs no introduction to this audience It is a perfect ex ample of how to integrate humor into a generally humorless environ. ment: coding, It espouses Matt Mullenweg’s eatly manta of “Code is, poetry” anywhere it can, Let's look at what it has done with its Web properties. About Us AutomatticIne. isa startup from a handful of people passionate about making he we ‘Open Source and the vast majority of our worki available undeclicenses like the GP. world, Automattic fist got started around August of 2005, and has since grown tone Abr fj ams amson_ Adams motareace — eT i, PE ee Riacaentmatane sunecartonaentss Doincrisacemtecries’” lictonenomentaees while tying ret i gettoc muchBBQ ssueeon _Catectojointhe rel wot orasclose ase Nskayooad and atrghtok.wellhe's doing gett the al moved aundhee inbetween iesame 9 hen hero! enAMICO, NBS, caus taces, ecause apparent tees IRC ocreaingabutthelutest and greatest good BBQ in Sonar Calfor Me haceson MySQL optnaaton. Bary erinjstveing and bbPressandhejaateotybteof WerePres, ay ate larosse Antomatics" Abou" page, packet ure ‘Humor: Automattic’ “About” page isa collection of good-natured bios. ‘Mullenweg's bio is this: 6 hep thogodfounder compoot 58 ylemail-readmill-eadmill akes anatherap-As the Chief BBQ Taste Tester of Automattic, Matt travels theworld sampling cuisine and comparing it to thegold standard of Texas BO. Although he originally aspired tobe ajazz saxophonist, Matt sore how wound wp studying economics which took hirt to Washington Decl.) Sounds like a fun place towork Isn't that exactly what most people reading the page would like? Slogan: Automattics slogan is, “We're much better at writing code than haiku.” This humorous line is what Automatticis all about, and it sets the tone for everything it does. pgraues orowae nappy ane num wr ay. “We are much better at writing code than haiku.” — Matt Mullenweg, founder of Automattic CONTACT Us PRIVACY oLIcY Whar Automattic? is all about ‘Microcopy: People notice tiny details. For example, in the footer of WordPress” home page is a signature that changes every time the page reloads. It says, alternately, that WordPress is “An Automattic [Production] “An Automattic [Medly], etc. This little change to the de- scription shows the company's love for its product. tomatic comsbout! rordprees comyfooterNew Theme: Reto-fitted ‘Comment Netiieationa! New Themes: Splendio and Suburbia Pat Videoo from Your Phone er Pa New Themes: Custer ar Debut Titer MAUTOMATTIC Medey Wordess?is"An Automattic Medley 2 Jetpack updates via email, Join 18,151 other followers, an AUTOMATTIC aiauing Pruacy Policy Terns efSeniee Suppor etpack's*An Automartcairline, Surprise: On Automattic’s Jetpack website, thee jetpacks soar actos the screen whenever the page loads, reinforcing the product’s name and exhibiting. a love of detail 17 hespifwardpreea com)Jetpack super “harges J Worcs eireeaea Cann Colclson moar tpack Easter egg: One lovely detail is WordPress’ “self-comparison” Easter egg, Instead of removing the possibility of comparing a post's version with itself, Automattic has builtin a little mechanism that turns the page into a gray and white canvas, creating a Matris-like effect. Initiating infinite 1o0p eschews! protocol. Self destruct 19... 3So, when you hit that button, accidentally or not, the whole page turns ray and simulates self-destruction mode, Matrix-style. In the end, ‘WordPress reminds you not tolet that happen again. “TechFleece has a detailed description of how to find WordPress! Ma tix Easter egg” Antomattic isa great example of how to show personality ina hacker-heavy environment. EXAMPLE 3: CLEAR APP (TO-DO APP FOR DESIGN-SAVVY USERS) Emotional design can turn users into evangelists who share their posi tive experience with others, People love sharing interesting stories; you just have to give them one. Consider the recent success of Realmac Software's to-do app for the iPhone, Cleat”. It sure isn't the fist to-do app out there, but it cleverly targets iPhone users and designers with a sleek, minimal interface and afew interaction and transition patterns that have not been done yet. It’s the kind of thing that we iOS geeks just drool over. Anticipation: Realmac published a video” before the launch that cleverly raises anticipation of the product. The video spread in some parts of the design community” rather quickly People's attention was captured not only by the design, but by some creative treats and suprises. Playful: The app sets the tone for playing around and having fun. 7 hupitwordoress 74 hetpttechleece com! preset 45: heplinevnessslmacsofaware comicleae 75. hespvirweo com 5593267 ‘77 hespifabbblecomJecarchi”qnclear osiisihowtoringehohiddon-matricastersgesn-wordeae eee a ces Coe eo nnd Surprise: On opening the theme settings page, people who have in stalled the Tweetbot app are greeted with this message and ate given an extra Clear theme. Chances ate high that people who use Tweetbot love mes itand would find this to be a welcome surprise.ease Cee ee eae ec rire) era Ifyou have nstalted the popular Tweetbot app, youl get abonus theme ‘Treat 2: If you follow the Twitter account of one of Clear’s developers, you'll be awarded another theme for your social behavior. It was a clev: erly engineered Faster egg hunt, resulting in an outburst of positive re sponse by people on ‘Twitter who shared their enthusiasm and com pared which themes they had acquired and missed.Bm CR you follow one of lear’screators you are rewarded\with atheme, ‘This is one ofthe best effects of emotional design. Not only will people enjoy using your product more, but they will share their excitement And here isthe proof on Twitter(Chris De Jabet © )isss00 Sree) To unlock @UseCiear's Sociaite theme, make, complete, and clear 1100 items in a ist. Prompt will haw to weet, dot. solearbonus E47 Ben Kendall ©ooncai = Aso you rave Tweetbt instal, you get a tre Tweetbt theme for Guseclear. Nice touch! Hg 54 Manik Rathee ovens ‘Wow - seriously ove gestures and aueso feedback in UseClear ‘Also, tweetbot Bonus theme s a... wel, bonus. cv/EEF2 49 Jaison De Mentalegre “Js20°0%" 2 Pleacanty auroreed when | unlocked the Tweetbot theme n UseCiear Very cool ptwiter.convigadPreZ foc Stapoot paul en pote HIQ41_ Bas van der Ploeg sbavardploeg (4p es swosora en Sneetstbanss home in seCtenr Love it serps sian Hg 44 Tom Amfold oni Fon ‘OMG OTWEETEOT BONUS THEME FOR GUSECLEAR :0 // Gtapbat paul Sore of te buzz that the borus there dlonegenerated on Twitter Surprise detail: When your to-do list is empty, Clear offers a tip on how to fill it up.The second time, however, you are shown a motivational quoteFinal Words On Benefits And Risks Emotional design is risky. Adopting a lighthearted tone when apologiz- ‘ng for something going wrong might not sit well with everyone. Don't be afraid, though, to show your personality, as long as it's geared to the right people. You can't and don’t want to be everything to everyone. ‘We haven't covered instances of emotional design gone bad, but here's a word of advice: if you do attempt to be funny or quirky, the ‘most important thing is to listen and monitor your users’ reactions. If something doesn't work, you need to be proactive, apologize and im- prove. Showing that you're listening and ready to learn exposes your humanity —putting you tight back in emotional territory again. ‘MailChimp handles the tisk of turning people off with an off switch, which it calls “party-pooper mode.” party pooper mode © enable Maichimp humor! daable MaiChimp humor - because | am a pay pooper itch on party pooper made So, if you really don't like the chimp, you can disable him. Apparently, not many do’ Or you could doit the other way and make some quirky behavior the nnon-default state. Facebook has an Easter egg of its own, letting you change the UT's language to pirate talk. It actually makes me enjoy Facebook a little more. 78. hitpifspeakerdeck con/u/aavronipleorning-t-kovehumane-emotionabinterfacesde signal‘This is really what it’s all about: helping users to enjoy something. more—so much that they'll share with friends and strangers. And if you'd like to learn even more about emotional design, check out a good list of further resources on Smashing Magazine”. 79. swew smashingmaguaine com|the personality ayer claredsea0Give Your Website Soul With Emotionally Intelligent Interactions BY CHUCK LONGANECKER » What isit that makes us loyal fans of the websites and apps we love? ‘When we sat down to answer this question for ourselves, we found that the websites and apps we truly love have one thing in common: soul. They're humanized. They have emotional intelligence designed in to the user experience. And this emotional intelligenceis crafted through thoughtful interaction design and feedback mechanisms built into the website. ‘These elements give the website ot app personality and earn a spot in our heatts.In our opinion, it's not going too far to say that giving your website or app soul isthe key to earning loyal fans.In this atticle, ‘well look at some of the best examples of these emotionally intelligent interactions and haw they infuse personality and soul into the websites and apps where they/re found. What Are Emotionally Intelligent Interactions? ‘An emotionally intelligent interaction is any state (or change in state) of a website/app where the messaging or functionality includes atten: tion to details that create a user experience that feels organic and hn ‘man. These interactions can bea big experience (like when an entire ‘website is down), ora very small experience (such as when an error state ona form element appears). They can be derived from different el- cements, including messaging and copy, color and design, and respon: siveness to user inputs and system outputs. Combining each of these crafted experiences creates soul and per sonality fora website. And it’s that emotional connection with users that builds lasting loyalty, and raving fans EXAMPLES OF EMOTIONALLY INTELLIGENT INTERAC- TIONS Note: Several of the examples and iriages are from this brilliant website: Litle Big Detais®.Ir’s one of the many mustreads and I recommienc adding ito ‘your favertesif you haven't dare so alread.Bottlenose® Anew Web-based Twitter client that gives users a new way to explore and use Twitter. The app does a great job of walking users through the first run with the application, explaining the features in a way that is clear and humorous. The confirmation buttons use phrases like “Makes sense” and “Got it” which create a sense of personality and confidence with the user, a far better choice than the typical “Next” Search You can search messages by just ‘the people you follow, or by anyone You can save searches and track them as streams. Wutoo! Wutoo uses a combination of smart messaging and subtle touches on Ut elements to create a mote friendly and personable experience when creating Web forms. Here are just a few: + Each page title is accompanied by a line of poetry. While it may seem random, the poetry actually reinforces the elegance of the Wufoo solu- tion. It's a unique way to bring personality to an otherwise tedious task (creating forms). 80, hrpilsninelisbied 81 htpifbotienFl Forms Form Manager 0, what men dare do! ou Since You've Been Gone. Ge ‘Automatically Rate Leads with aur InboundScore Inte leads. Howeves ane hard work often stats after collection wt poritize whic leads to tackle first. Our new InboundSeore it + The new report button’s punctuation. Think of the word “teport’, and you're next thought is most likely “TPS.” But Wufoo adds an exclama- tion point to the button. This gives it an element of energy and fun, 1e- inforcing its value as a reporting feature. EG New Form! | ublic + The reports screen with no reports. Instead of a blank screen, Wufoo takes the opportunity to deliver some true personality through its mes: saging, and gets you on your way towards building your first report. ¥wr MailChimp®s ‘As one of the best examples of emotional intelligence baked into a user experience, MailChimp takes every opportunity to infuse soul intoits application, as well as giving you a pitch perfect way to make it all dis- appear. 404 Page MailChimp's 404 pages brilliant: excellent copy, empathetic design, and a prominent call to action to get users on their way. It's clever, functional, and takes the sting out of 404'ing, Current MailChimp 404 Page®. Sen Campaigns MailChimp celebrates and encourages the user just as they send out an ernail campaign. The capy “This is your moment of glory" is a perfect encapsulation of the fear and anticipation that goes into deploying this. 83 http/fenilchimp com 84. hopifonedia emachingmagasine com/wp-contenvaploadesousfoy/maehimp 4944p 5Ea ka fendaees This is your moment of glory. + TuttterPage: Recently when MailChimp went down, they deployed a special back: ‘ground on their Twitter page that showed a sad chimp working furi- ously to fix the problem. Because people naturally turn to Twitter to earn about why things are broken, the background extended the per sonality of that service to their Twitter account, creating an emotional: ly intelligent experience for the user Pinterest®s ‘This red-hot social network infuses personality into its website with a thoughtful interaction during account creation. Instead of using the typical password confirmation patterns, the app responds with “Looks good!” as passwords meet their reqtirements and match. It's small touch, but one that humanizes the sign-up experience, and empathizes ‘with the user who is creating their account. Pinteres Create Pinterest Account Path® On Path’s original website, the icon for the sign-up button arrow changed to a smiley face when it was clicked on. This small change cre ated a personal and welcoming moment during one of the first interac 85. hep: 6 hpi pinterestcomd pxtheomtions a user had with the application. Its a thoughtful detail added to a step thatiis often overlooked by designers and users alike, and it set the tone for the rest of the user’s onboarding experience De) ou ED ‘hare life with olaoe frignde & family fF shar ite with ologo trionde & family Hootsuite®? ‘The friendly owl mascot for Hootsuite is more than a cute face—the ‘mascot is the representation of the service itself, much like the chimp from MailChimp. Hootsuite taps the Twitter API to pull data into its app, and because Twitter has API limits, Hootsuite intelligently stops making requests after long periods of user inactivity. When this occurs, the Owl lets you know that he has taken a nap, and will wake up when you need him again. It's a clever way to tum a potential negative expe- rience (non-continuous updates) into a positive one that brands the company, while providing the app with personality and soul ‘You have been inactive far ever anour. was bored, s0 | decides ta take a nap Lelme know when you get ack, Feedburner’? For newly created RSS feeds in Feedburner, the stats page takes the lack of stats to create a personal interaction with the user. Many websites miss these opportunities because they feel this state isn’t core to the ex: perience. But Feedburner knows that most new users are interested inseeing their stats right off the bat—stats that don’t exist yet. Sowhen a user visits the page Feedburner has fun letting them know that stats aren’t quite ready yet, while creating an emotional connection with the user in this process. It a huge win for the company in light of the al: ternative: lifeless, blank page with no data. Feed Stats Dashboard ‘Your feed is so new, we're still playing with the bubble wrap. ‘Gheck back soon for @ full dose of stats. 6,82, +426 individuals See iv jewed oF clicked items ibscriber Information » ‘VisualHub ‘VisualHub takes advantage of the Mac installation screen for user int teraction, encouraging users to get acquainted with their user manual ‘Move the app to the Applications folder, and move the manual to your brain, So often this install process is written, anecessary evil to get to the application. But as we've seen, smart developers leverage these ini- tial interactions to set the tone with the user experience moving things forward.osx Apple has long been about attention to details, but typically the details are in refinement (not necessarily emotional intelligence) But the Text Edit icon contains a small Easter Egg,for Apple fans—the words of the “Think Different” manifesto are inscribed on the notepad. It pays, homage to their legendary founder, and reminds people why they love Apple. It's a small touch that makes Apple what itis.Highrise ios During the install of 37Signals Highrise iOS app, you can play agame of Tic Tac Toe against the computer. Not only is this a thoughtful way togive users something to do while the app undergoes the necessary evil of being installed, but it’s also an homage to the film War Games, a lassic. It’s a simple and effective way to display emotional intel ligence during a typically “dead” point of an app's user experience. hacIt’s your turn XO XOX O 'm all done playing, thanks. Download Complete —_—_—_— Mint com®® Mint’s website maintenance page creates a charming experience for users during what could be a stressful time. Not being able to access your finances can create anxiety, and Mint uses that opportunity to create a fun yet effective notice that lets you know that your money and information is safe, even if the website isn't accessible, Sq, hped/www minecom!well be Bight Back! say MINT’S ENGINEERS “Keeping your money safe?™ “OF course Mints engineering team — working hard and 1 improventents. The site is down for maintenance and will be back shortly. Sorry for the inconvenience Risking mony mango ad pernal Grane hat ks hit Seen, Soe. ve se az Sean Percival®, Deviant Art Deviant Art uses the portrait metaphor as part of the interaction in set- ting up your Deviant Art profile. Not only does it tie in with the theme of the website (and connect with its artist community), but it also is a compelling metaphor and mechanic that encourages new users to com: plete their profile. 0. ht ot hp srw eeampersival comWelcome to dewontart 1 ‘Help us paint a better picture of you. Tumble ‘When listening, to an audio file on'Tambl, the URL is appended with an appeal to its users not to download the audio file, so that they can continue to offer this type of content on their website. It’sa clever way for communicating to its users without the typical JavaScxipt pop-up warning, Adding Soul To Your Website Giving your website soul comes down to the interactions and the inten: tional craft you putinto the design of those interactions. By being in- tentional about user experience in those small moments that ate typi: cally neglected, you can showcase the personality of your app, as well as building loyalty among users. Taking cues ftom websites and appli cations like those mentioned above will help you look for ways to in- fuse your project with emotional intelligence. These services and developers have created loyal user bases due to their willingness to sweat out the details, and infuse their projects with, emotional intelligence, The smal things can really make a difference in the success of your website or application. Taking the time to create 92 hepeifveww tumble comthese well-crafted experiences is one of the most potent ways we know of tocteate fans, and bring yout website to life with soul. = &Not Just Pretty: Building Emotion Into Your Websites BY SABINA IDLER » Emotional design has become a powerful tool in creating, exceptional user experiences for websites. However, emotions did not use to play such an important role on the Web, Actually, they did not use to play any role ata; rather, they were drowned by a flood of rational func- tionality and efficiency. ‘We were so busy trying to adapt to the World Wide Web as a new ‘medium that we lost sight of its full potential. Instead of using the In ternet on our terms, we adapted toits technical and, at first, impersonal nature, If it wasn't for visionary contemporaries such as Don Norman or Aarron Walter, we might still be focusing on improving processes, neglecting the potential of emotional design, In his book Errotional Design, Norman describes why “attractive things work better.” He explains how attractive products trigger our creativity and ultimately expand our mental processes, making us more tolerant of minor difficulties, What he is saying is that attractive prod: ucts make problem-solving easier, which makes them absolutely essen: tial. Frotional Design is Norman's reaction to crities who said that if they followed his rules, their designs would be only functional but ugly. So, he conducted the necessary research and came up with three levels, of visual design that all need to be considered in order for a design to be both usable and pretty User experience designer Aaron Walter contributed another great ‘book to this new eta of design: Designing for Emotion. In this book, he de- fines emotions as the “lingua franca of humanity,” the native tongue that every human is born with. He describes how important emotion- al experiences are because they make a profound imprint on our long, term memory and create “an experience for usets that makes them feel like thete'sa person, not a machine, at the other end of the connection”, Norman and Walter have recognized that emotions are key to the full potential of contemporary Web design. Let's follow their example and learn how we can contribute to a more personal, more targeted and mote emotional World Wide Web. In this article, we'll recap the foundation of a good design, take a look at Norman's three levels of visual design and introduce practical ‘ways to build emotion into a website.age reds perpetulpivr 93. and gishaboy5o0%) Foundation Of Good Design A couple of things form the foundation of any good design, whether the design is emotional or not. Why are we talking about the foundation of a design here? Think of the construction of a house. Fitst, you need a solid foundation; then, you can start to plan the division of space and build walls. In Web design it's the same; you need to know your inter nal design goals, who your users are and in what context they will use your website. Once this groundwork is done, you can get started on the design, INTERNAL DESIGN GOALS Before you get started on anything, ask yourself what your own goals are. This does not mean you should put yourself at the center of atten- tion for the rest of the process, but itis important to know what image you want to communicate, what your values and visions are, and how you want others to see you. With this knowledge at hand, you are armed to be very clear and consistent not only in your actions, but also in your appearance. A certain amount of continuity and predictability adds to your reliability, which is important for getting people to com- mit toa relationship with you. toe perpetualplun/sg9sa10073sizefin ‘om phatoa/geishahoysa0|959738Sofeiesfin photPROSPECTIVE USERS Know who you are designing, for. Your future users will be the people ‘who purchase and use your product or website, so make sure you know what they want: General demographics will give you a rough picture of ‘who you are targeting, By drawing a clear picture of their goals, how they are going, to use your website, and what matters and doesn't mat ter to them, you will learn how to target your users. Without knowing your prospective users, designing something relevant that is both us- able and pleasurable will be quite tricky CONTEXT OF USE Finally, think about the context of use. Knowing the situations and cir cumstances in which users will be visiting your website is valuable Consider possible emotions that might be involved, and find out which role you and your users play. Be aware that knowing the context of use will make it easier for you to understand your users the moment they visit your website. Itwill help you reach out to your customers and to communicate with them mote effectively. Norman's Three Levels Of Visual Design ‘Norman has identified three levels of visual design that designers can apply to build emotions into their products. These three levels are based on the way our brains function and can be seen as guide to a more ap. pealing, effective, pleasurable and memorable design. Inastudy on emotion that Norman conducted together with two colleagues from Northwestern University, they were able to show that different levels in our brain result in very specific and advanced human attributes, Those levels are the reason why we are able to accomplish and create things; why we can be artists, musicians and writers; why ‘we have culture with language, art, humor and music; why we ate con scious of our role in the world, a consciousness that enables us to re flect on out experiences, The three cognitive levels Norman has de- fined and applied to visual design are the visceral, behavioral and re- fective levels. Let’s look at them one by one. ‘VISCERAL LEVEL ‘The first and also lowest level is visceral This is the level of precon- sciousness, where emotional signals from our envitonment get inter preted automatically. The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something, Impressions at this level have an immediate emotional im-pact on us, Norman calls activities that are initiated from the visceral level “bottom-up behavior.” Fora visual design, this means that the visceral level has to do with, the initial impact of the appearance, touch and feel. The visceral quality ofa design can be studied by observing people's first impression. A ‘good visceral design makes us feel at least something, hopefully mak ing us happy and ideally getting us excited. Vireo hasan appealing footer. The design has no other function than tocaich people's artention. (Image: BEHAVIORAL LEVEL ‘The behavioral level is all about how things work and how we use and experience them, What matters on this level is function, performance and the physical feel of something, A visual design would need to feature relevant functions that ful- fill actual needs. Behavioral design needs to be understandable and us able. While confusion and frustration lead to negative emotions, fun, case of use and effectiveness trigger positive emotions. To ensure a ‘good behavioral design, you have to really know your user's needs—for example, by observing how they interact with the design in the field. 95. hei every 4fg78e4B0a1807952bo0000¢board has phantom: butt yf you are used to typing the letter Ywith your left har, you can stil da it (Image: Finer Things in 10598) REFLECTIVE LEVEL ‘The reflective level represents the highest level of our cognitive thought processes, Norman calls activities that come from this level “top-down behavior.” This level is conscious and capable of a high level of feelings, emotions and cognition, On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves. The reflective level sets in after having been exercised, and it dominates the other two levels, which means that through extensive reasoning, we can overvule both automated behavior and emotional im- pact. In visual design, expertise enables us to respond differently to a de sign than if we had no idea what we are looking, at. The reflective de- sign defines our overall impression of a product, since we reflect on all aspects of it messages sent, cultural aspects, the meaning of the product and whether it’s worth remembering, psd keyboard phantom-burtonUs highways mapped ike asubisay systan. This infographic as agrea reflective de sign. (Image: Cameron Booth? Inevery good design, all three levels work together. The need not be equally weighted, but because we perceive a visual design on all three cognitive levels, they should all a least be addressed. These different levels of visual design might conflict, though. For example, our opinion ofa design after having thought about it might diverge from our initial impression of it. Also, people interpret designs differently and have dif ferent preferences for the visceral, behavioral and reflective qualities of adesign, So, the appearance of a design makes up only one level of visual de- sign—the visceral design. The behavioral level relates to how the prod- uct works, and the reflective level relates to the long,term impact of the design, Combining these three levels in the right way, you can make a design. Appealing Grab the user’s attention and influence their perception. Effective Guide the user’s attention and make sure they find what they are look ing for. a7. hetpstwwwfastcodeeign.coms6sanosfingeniourinfographic-uchighwayemapped- like a-sebway.system »+ Pleasurable Allow the user to appreciate your website and have fun. + Memorable Build a relationship with the user and ensure a positive memory of you. Implement Emotion In Your Visual Design How: can Web designers apply this knowledge? And how can we build emotions into our designs? A website usually includes several clements that can make a design more personal and that can be regarded as “emotion carriers” Some of these are obvious, such as colors, images and shapes. Others are not so obvious, such as humor, recognition, dis- sonance, tone of voice and engagement. Let’ look at the less obvious: HUMOR Humor isan effective way to connect with people. A good laugh or even alittle smile can break the ice and make people feel comfortable, ‘whether its on the street, in the company of friends or on your website. However, humor is also a delicate matter because itis extremely diff cult to generalize. What's hilarious for one person might be ridiculous, embattassing or even insulting to someone else ‘When using humor on your website, think a couple of things through before launching, The foundation of design that was discussed earlier is important here. Knowing your users and the context of use will help you determine whether people will actually share your sense of funny. Also, keep in mind that you will probably not manage to make everyone stile, but avoid making people feel uncomfortable and espe cially offending them by any means. And don't forget that the extent of humor on yout website will influence the way users perceive you. In Designing for Emotion Walter discusses an illustrative example of humor on the Web: Freddie von Chimpenheimer, the cartoon mascot of MailChimp®®. Walter describes Freddie as a friendly mascot who “wel comes users and makes them feel at home” Freddie perfectly mitrors the brand's traits, such as trustworthiness, simplicity and informality, ‘without making the whole website look goofy, The mascot works be- cause Freddie cracks jokes that “you can share with your mama” bat at the same time he never gets in the way of your workflow. This is im 98, hepifmaichimp com!portant. Humor can get people involved, but it should never annoy visi tors. & | i o i { Freddie, the cartoon mascot of MailChimp,isagreat emotion carrer for humor RECOGNITION ‘By nature, we constantly seek emotional connections with others. ‘That’s why we like to see images of faces on websites, and why we ap: preciate somehow recognizing ourselves. When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website—such as a problem, dilem- sma, habit or whatever else—we feel connected and understood. ‘Walter explains in his book that we know ourselves so well that we try to relate everything we see to ourselves. We can even relate to a Web design that does not directly show human features. The recogni tion of our body's proportions in a design is enough for us to perceive the design as being familiar and harmonic. This reason for thisis the ‘golden ratio, which helps us feel connected toa design because we kink the abstract concept of proportion to our own body. By recognizing ourselves in a design, we sense that there is more than just a scteen witha bunch of code and images. We perceive hut ‘man presence, which makes us feel comfortable and connected. Walter describes the personality of a website as the key to makinga design more human.Twitter based itsredesign entirely on thegolden rato. (Image: Doug Bouman®9) DISSONANCE Another trait that characterizes usas humans is that we try to fit the ‘world into patterns. Patterns help us understand and learn how things work, and they give us an idea of what to expect—and we love to know what to expect, because it makes us feel comfortable. In his atti cle “Brains Agree: The Case for Website Usability Guidelines!°°, Todd Follansbee offers a great explanation of why we love patterns so much and of how we look for them on the Web just like everywhere else. Usability guidelines are based on a deep understanding of how in- formation is processed in our brains. Following these guidelines in ‘Web design helps us offer users a consistent structure that they can fit into their mental models. As long,as users recognize patterns on a web- site and find that everything matches their expectations, they can focus: on the content and quickly achieve their goals. However, if we build a website that doesn't fit these pattems, we can expect two things to happen. Either users will become irritated because they can’t find what they are looking for; this might lead to frustration, ‘which you want to avoid by any means. Or else users won't mind being pulled ont of their habits and would welcome some distraction; they ‘might see the dissonance with their expectations asa positive or fun experience ‘Again, how people react depends strongly on who they are and the context in which they use your website. If you know that visitors in tend to find certain information, make sure to meet their expectations 98 http licks comfphototwiterffice/sos4S1768 190. hetpifwww wilson web com deaignfollancbee-brae-woabliy hmand stick with patterns they are familiar with. If you expect users to have the time and desire to explore, you can definitely play with some dissonance to get their attention and get them involved. branding firm Subplot has aclear layout for its website bur the navigation is fu and out ofthe ordinary it engages people, hile stl being e TONE OF VOICE ‘The tone of voice you use on your website is an important emotional factor. How you communicate with users says a lot about your rela- tionship with them. While you communicate certain messages through words, your tone of voice reveals what you think of them and also what you want them to think of you. The psychologist Friedemann Schulz-von Thun illustrated these different layers of a message in his, “four-sides’ model of communication'® Your tone of voice strongly determines your first impression. If you wrap a serious message in a humorous story, users might not take you setiously. On the other hand, if you try to sell something fun and your tone of voice is too serious, users might not take you seriously either For your own website, know what you are selling, who is buying it and the context in which you are delivering the message. 101, hespilsnww.eubplotcomfeplant log uadills convbetter cantent with communicaion-theary-modelsLi oem Wrufoo!S creates a distinctive environment for conducting surveys through its tone of ice ENGAGEMENT A perfectly usable and accessible website could still have a high bounce rate, a low number of sign-ups, ot no characteristics worth remember ing, In his presentation on “The Art and Science of Seductive Interac: tions!°*, Stephen Anderson shows how engaging people helps us build relationships and positive user experiences. The World Wide Web has been around long enough that we take it for granted; we don't notice ‘good usability, and we are hardly surprised to find the content we are looking for ‘Now is the time for something more than passive consumption of the expected. We want to be engaged, have fun and be entertained. ‘This engagement could take the form of playing, interaction or person- alization of content We love customizing things we can spend hours playing social games online; and we welcome any entertaining video that crosses our path, right? Of course, as with all of the above, your users and their context, should determine how you engage them. If users are simply looking for the most efficient way to interact with your website, then make that in- teraction as straightforward as possible. ‘The more time your users have and the more curious they are, the more you will be able to draw them 103 httpifwufoo com’ 1g, hrpifwww sideshate neverephenpaftheart-science-of seductive interactionstm Qome cay onten OD carrer avery Footprint®5, userscanteam about tel impact on Slavery in an interactive and ergagirg way Conclusion Emotional design turns casual usersinto fanatics, ready to tel others about their positive experience, ~ Aarron Walter Emotional design has many qualities. We become more creative if we are confronted with something attractive. This creativity helps us solve problems more easily. Emotions also give us positive experiences, ‘making us happier and giving us better recall. Norman came up with three levels of visual design based on different levels of our cognitive processing: the visceral level (appearance), the behavioral level (asabili- ty), and the reflective level (personal satisfaction, self-image and re- ‘membrance), Internal design goals as well as the needs, expectations and context of users will determine how the designer should balance those three levels and what to emphasize in order to get the most out of the design.» RECOMMENDED READING + Emotional Desigr?®6, Don Norman + Designing for Emotion”, Aarron Walter 295, hepifalaveryfoorprinrorg/ourvoy/ewhars ander your roof 106, hese amazon com/Emotional Deagn-Love-Bveryday-Thinge/ap! 0465051559 107, tp wwe amazon comvDesigning-Emotion-Aarou-Waltedapt937s57008/re 1 YorbgokasiesUTFES3 id= 536579568Playful UX Design: Building A Better Game BY JOHN FERRARA » sincerely believe that the user experience community should add ‘game design to its toolbox of competencies. If we're truly committed to cxeating satisfying user experiences, then there's no reason why games, which can satisfy people so richly, should be exchuded. Operating, successfully in the games domain means learning a new set of competencies, and I don't want to oversimplify the challenges of designing high-quality game experiences. However, if you'te in a posi tion to jump in and start designing, then I can atleast offer a primer to help you steer clear of some of the most common mistakes. 1. Games Should Be Games First ‘Trading off the quality of the player experience in favor of some real: ‘world objective is ahvays self defeating, This isthe recurring problem with “gamified” designs, which too often just cynically tack points and leaderboards onto a product that is fundamentally gameless. First and foremost, a game needs to be enjoyed. Schwab MoneyWise's It's Your Life® pame has a noble mission: to convince people to save more money for retirement and other long- term objectives. I's Your Life presents players with a number of choices between spending and saving money over the course of a simulated lifetime. At the end, players get a letter grade on how well they did. 108, hep new echwobmoneywise con/public/moneywitefparents edu jor lfe.game 3Poy Again teach step in Schwel/s Its YourLyf2°% gare, thechoicethatwil ead to a.inning cutcorseisprety obvious. ‘The problem is that the designers were much more interested in ham: ‘mering home their message than creating an actual game experience. If ‘you want to win the game, then the tight choice each step of the way is tosave your money and not spend any of it Ever, On anything, You can, carn an A+, the highest possible score, if you: Skip college, Never move out of your parents’ house, Never get married, Never have children, Never travel or take any vacations, ‘Work indefinitely past the age of 65, Die alone with a lot of money and no one to leave it to. ‘Tm sure the designers reasoned that someone playing through the sce- narios would elect to do meaningful things with their life, but they set up the scenarios so that doing nothing with one's life while saving vig, orously would be the surest way towin. Even though I's Your Lifeis packaged as a game, the designers didn't commit to it being experi enced as a game. 109. http/fwww echwsbmoneywite com/publicimoneywie/parents_educstorelactivities! ita your life game B2. Play Test, Play Test, Play Test Games are highly dynamic experiences. The flow of events changes from moment to moment, and each decision a player makes can lead to a multiplicity of outcomes. Most games are also programmed with an clement of randomness, 90 a player never has quite the same experi ence twice. Multiplayer games throw even more unpredictability into the mix. Asa result, the designer directly controls not the gameplay, but rather the underlying system in which play unfolds. Without actually seeing the game in action, you cannot reliably anticipate how it will work. Mike Ambinder, an experimental psychologist at game developer Valve, puts it in scientific terms: ‘Every gamedesignis a hypothesis, and every instance of play isan ex periment “Interview with Mike Ambinder of Valve Sofware®® Be prepared to put your game under the microscope again and again, and to adapt the design to make it more enjoyable. 3. Games Don't Have To Be For Kids With a large market catering to them, kids have the latitude to be very discerning consumers of games. Marketing campaigns pushing big- budget titles already crowd out one another, so you'll find that just get- ting a young gamer’s attention is a tremendous challenge. You can't as sume that kids will want to play your game just because it's a game. And these days, kids ate the minority of people who play video ‘games. Fighty-two percent of gamers are over the age of 18, and 29% are ‘50 and older. Grown-ups are sometimes more receptive to playing ‘games outside of the mainstream, and they have more disposable in- come to spend on games (ie. if you plan to sell your game). tua, hspifsoeafeldmedia afbookelgame-deeign/blog/ interview with mike ambinderofVideo game players the U.S., by age 18% 29% under 18 50+ yeors eon 53% 18-49 yoors Kids urder 18 represent a small rinority of goon players ‘Thisis not to say that kids cannot make up a portion of your audience. But if your gameis clearly intended for young,children—as announced in breathless starbursts, reading “Hey, kids!” and “Super-cool”—then you will tur off the larger segment of gamers. So, consider targeting your game to an older age group while keeping it accessible to a broad range of ages. 4.Action Can Be Boring Call of Duty: Modem Warfare 3 is an amazing action game_It also took ‘years tomake and a team comprising dozens of designers, artists and engineers at a cost of many millions of dollars. You're probably not ‘making Call of Duty. Its very difficult to sustain adrenaline-pumping excitement for long, If you do choose to make an action-based game on a small scale, ‘you'll find that you're limited to very simple and short-lived scenarios, suchas racing.a car, throwing a basketball or shooting.a spaceship. Tak- enon their own, these types of experiences tend to grow tiresome quickly, ‘You'll find a lot of creative opportunity in games that make the play: ex think through interesting choices instead of executing twitch re sponses ‘The card game Hear‘s, for example, is all about choices. Which three cards should I pass to my opponent? Should I play a high card or a low card? If play clubs one more time, will someone else stick me with, the queen of spades? Should I shoot for the moon, or will that prove self-destructive?iii Hearts creates exciterent by presenting playersilth alot of ineresting choices Each choice is evaluated from one trick to the next, depending on the changing conditions of your hand and on new information about what other players have done. Even though Hears can be a fairly long game, ‘itholds the players interest without any laser blasters or lava levels. 5. Fit The Game Into The Player's Lifestyle ‘Think about the real-life contexts in which people will play the game. Start the design process by asking: ‘Who are your players? How much time do players have to give to the game, and how much of that time will your players actually be willing to give? Will your players need to take a break from the game and continue it later? ‘Where will your players be when they're playing the game? What kind of hardware, software and Internet access will be available toyour players? Unisys developed a series of ontine games for the company’s sales team. to send to customers as holiday greetings. A customer would receive a link by email to an online holiday card with a personal message from the salesperson, The card would then open into the game, branded with Unisys’ loge,mini-golf golf game™ was designed tobe aguick, nonintrusive divers workday Because the players were receiving these emails at work, the games couldn't require a significant investment of time to reach the end, so all, of them were designed to last less than five minutes, And because ‘many players would be accessing the game while sitting. in a cubicle, ‘with their computer speakers probably turned off, the few sounds in the games were not made essential to the experience. Farmville cleverly makes itself adaptable to the player's lifestyle. Players need to dedicate only a few minutes ata time, during which they can plant seeds for crops that take different amounts of real-world time to harvest. Raspberries take just two hours, so they're useful when the player is able to check in several times a day. Fight-hour pumpkins fit in well just before and after a workday. Artichokes take four days to harvest—better for playets who are able to check in only now and then, ‘These staggered growth rates allow the time commitment to be made on the player's own terms, 1, hp dexbtm! ign/2002 holiday_cardin‘Strawberries Sell for: 35 Coins Harvest ins d Hours 1X? Goined: 1 Cranberries ep Sal foe: 98 Coin Sell fS7210 Caine Havas ins 10 Hours Hervoe ins 20 Hours X° Geined: 1 XP Gained: 2 The staggered harvest times or cropsin Farm Ville alow playersto decide how muck 6. Create Meaningful Experience Players have to invest their time, concentration and problem-solving abilities to the challenges that a game throws at them. There should be a point to these efforts, a payoff for their investment, When the game ends, players should come away feeling that the experience was mean- ingful ‘Agreat exampleis the card game Killer Bunnies", in which success is ultimately determined by a card picked randomly from the deck. The player who holds the match for that card (the “magic carrot’) is declared the winner. No player has any control over which card is picked: the se- lection is completely random, But the gameplay does give players some control over which matching cards they hold, as hip ais hip neve famicom lesbunnieacom/Playersexercisesomecontrol over the outcome of Killer Sunnieshy acquiring carrot cards, nereasing the probability that they TI capture herandomly selected magiccarrot. Players compete for carrot cards over the course of the game, and shrewd players will work to hold the greatest number of them before the game is over. The game says a lot about the players’ mastery of the strategy, tolerance for tisk and skill at reading other people. Players, come aviay from the game knowing that they had control over their chances of success, which makes the experience meaningful. 7. Don't Cheat Because video game rules are enforced inside the black box of the com- ‘pater’s circuitry, there's a temptation among, designers to take short- cuts by letting the game cheat, Don’t give in to that temptation. Players ‘will be able to tell when a game is cheating, and they will resent it. Suppose you're designing a blackjack game that matches a player against a computerized dealer. As the designer, you need to write a script to control the dealer's actions. You want the dealer to be alittle hard to beat but not impossible, One easy way to create challenge ‘would be to let the script choose which card from the deck is drawn next. You would then program the dealer to picka card that either wins or loses, and put in a randomizing function so that two out of every three times it picks a winning card, This also creates an easy way to al- low players to change the difficulty, so that on a harder setting the deal- exwill pick a winning card four out of every five times, while on an eas- ier setting it will win just one out of every three, How would anyone even know you're cheating? &After playing the game a few times, you'll see how. The dealer will do seemingly irrational things, such as hitting on 20 and magically drawing an ace, The deck will not seem random, because certain cards will tend to show up early and others will show up only after those pre ferred cards have b en drawn, After several play-thronghs, these pat terns will become obvious, When players realize that a game is cheat ing, they'll make the ultimate winning move by turning it off 8. Skip The Manual ‘The best way to convince people that a game is worth playing is by let ting them jump in and try it out for themselves, Presenting written instructions at the beginning of every new game merely cteates a batt er to entry at the very time when you want to be most accommodating, of players. Instructions can also become crutch, used to justify uncon: ventional and unintuitive choices in the interface The best place to teach people how to play a game is right there in the game itself, Tutorials have become one of the most familiar pat terns in games. Ask yourself, “What's the smallest amount of informa tion the player needs to make the first move?” Then provide nothing, ‘more than that; you can get to the second move when the time comes Playingiis learning, If people are interested in the game, theyll be moti vated to fill in the blanks themselves by playing it9. Make The Game Make Sense Players need to understand winy things happen in the game in order to feel that they’re in control. In game design, a sensible experience relies on some mutual understanding between the designer and the player: + When the player loses, the reason they lost should be clear. If it’s not, then the player won't be able to get better at the game by avoiding the same mistake in future + When the player wins, the reason they won should be clear. If not, then, replicating the victory will be hard. + Every effect should have a clear cause. When something happens, the player should be able to see why it happened. + The object of the game should be clear. The player needs to know what they're working toward. + The player should always know what actions may be performed. At every moment, visible or aural cues should be provided to let the player know what they can do. 10, Make It Easy To Try Again Step back and think about the game as a discontinuous and iterative ex- perience. When a player loses, cycling, back into the game to try again should be instant and effortless. Even large commercial games with ‘multimillion -dollar development budgets make the mistake of forcing a lengthy loading screen into that anxious period between a player’s loss, and a second attempt. Stretching that space of time to the second, thitd or twentieth go- round inevitably tries the player’s patience. Games such as Braid! and Prince of Persia: The Sands of Time” take a clever route around this problem by allowing players to rewind time to a safe point before their losing moment. Playing To Your Strengths ‘These 10 guidelines will help you get started, but plenty of challenges lie ahead as you set about designing and developing, your game, and ‘you'll need to learn how to manage them as they come up. One last hep aise aidkgame com! rw. youtuhe combat XaqiHPPVQpiece of advice isto play to your strengths. If you havea background in designing conventional user interfaces, by all means use the skills and techniques that you gained from it. Wireframing, user testing, rapid prototyping, storyboatding, flow diagramming and other core skills all translate well to game design and. can help you pull through the inevitable rough patches. When a game design isswe confounds yon, trust your instincts and ask how you ‘would handle a similar problem outside of the context of the game More often than not, you'll point yourself in the right direction. » 87Gamification And UX: Where Users Win Or Lose BY PETER STEEN HOGENHAUG » ‘The gaming industry is huge, and it can keep its audience consumed for hours, days and even weeks. Some play the same game over and over again—and occasionally, they even get out their 15-year-old Nin- tendo 64 to play some Zelda. Now, am not a game designer. I actually don't even play games that often. Iam, though, very interested in finding out why agame can keep people occupied for a long period of time, often without their even, noticing that they've been sitting in front of the screen for hours. ‘want my apps and products to affect my visitors in the same way. mage credit: Axel Bfaende™®) So, what do games have that we miss in UX and Web design? Games have stunning graphics, missions, high scores, ete. But adding any of, those to our designs does not necessarily provide a better user experi- ence—in many cases they'te frippery. What we ate teally looking for is, ‘what those elements bring to the games. 186. hep/feew axelpfaendercomUsing game theories in areas not otherwise associated with games is often referred to as gamification. This term, however, has gotten a sather negative air recently, because people tend to use it for the wrong, purposes. A common issue with gamification is that itis used in mar keting with no other goal than to sell products. I don't think gamifica tion should be used this way—in the long ran, it does nothing good for the company trying to sell. Instead, gamification should be used toim- prove the experience of buying and using a product. In this article, welll explore how and when to use gamification to im. prove the user experience of websites and apps, and also when not to seit Definition Of AGame Sid Meier, creator of the Civilization series, once said that game is “a series of interesting choices!" I believe there's more toa game than that For me, the interesting part of a game is what happens in between, the choices: exploring new areas, learning how to control your charac ter, pulling people out cats for fun, etc In their book Andrew Rollings and Ernest Adams on Gamne Design, Rollings and Adams speak of four actions related to games: play, pre- tending, rules and goals. PLAY Playing usually a ecreational activity, and your actions are often nonessential to the game. A game is mote of a patticipatory form of en tertainment, whereas books and movies, for example, are mainly pre sentational. Ina game, you decide the storyline. In Danish and many other languages, the word “play” can be trans- lated as two words, “lege” and “spille” Legeis like when children are playing, Spilleis like when you'te playing a game. The difference is small but present. When childien ate playing, there are usually no ini tial goals or rules—they are playing simply because they want to play. Originally introduced in the Amsterdam International Airport, the urinal fly isa great example of a usable yet fun product Its intentis to keep the bathroom floor clean; when you aim for the fly, you'te less likely to spill. You can urinate without trying to hit the fly, but for alot of people trying to hit itis a better and more fun experience, 1u7-hep/feww half real neydictonaryfaintrestingehoiceeThe urinal fly is proven to reduce spitage. (Image: Sustainable Sanitarion Atiance™§) Another example is Danish gas station F24.In December 2on, it intro duced new multimedia pumps at its stations. Customers can play ‘games while filling gas, with a 10% chance of winning.a prize. They don’t have to play the game while filling their cars, but the chance of be- ing able to drive away without having to pay for the gas is enticing, It's a great idea because people talk about the game with their friends, and. the next time theit friends need to fill up, they will go to Fag to try it for themselves. ‘The iPhone app Clear"9 was extremely populat when it launched 1e- cently. The app has a simple concept: keeping lists of tasks. But the way you interact with the tasks is different from what we've seen before Some people even said they made up tasks just to be able to mark them as complete. Very few products are able to make their users do that, but we should try to accomplish it with everything we create. ‘With websites, a recent trend is parallax scrolling, Mike showed ‘what single page designs could be with its Better World!” and We Run “Mexico websites. lot of people scrolled up and down those websites just to watch the effects over and over again. We were intrigued be cause they were different from other single page websites. 1n8, hepifwsww flickr comphorow2316228aNo7 11g, hepuhewwrealmacsofewareconvclead! 220, htpifwwew nikebetterworld com sat hepifewew weranmeniceconyPRETENDING Games often allow a player to be another person. They give the player a different reality. People tend to behave differently if no one knows who they are ‘This could very well be the reason why people love social networks, forums and chat rooms. You get to create your own identity, or at least choose which parts of you others get to see. RULES Any game has tules—rules that define what players can and cannot do. ‘Adams and Rollings refer to six functions defined by game rules: semi otics, gameplay, sequence of play, goal(s) of the game, termination con- dition and meta rules ‘The semiotics of a game are the symbols that are used and how those symbols are interpreted. In Web design, we can look at icons as semi otics. Our users need to understand the icons that we use, otherwise the icons have no reason for being, Always consider whether to use an icon, text or both—you wouldn't want to frustrate users just by choos, ing the wrong visual representation of a function Gameplay is a combination of challenges (ie what the player has to overcome) and actions (i.e. what the player has to do in order to over come the challenges). The challenges have to suit the player, which is, why games often let players choose the difficulty level. This, however, probably wouldn't work on a website ‘The sequence of play can be thought of as the progression of the ‘game In Super Mario Bros, the simple sequence of play is, “Run through the level, collect stuff, defeat enemies and hit the flag.” On the next level, the same (or a slightly different) sequence starts anew. On a shopping website, the sequence of play could be Search for product Reac. reviews —+ Click Buy” —> Check out. If you have a good experience, you are likely to return to the website to buy again. While a game often has a main goal (in Angry Birds, its to defeat the pigs), players are often motivated to set their own goals as well (such as, to get thee stars in al levels). We'll come back to goals shottly. ‘The termination condition defines when the game ends. In terms of ‘Web design, the termination condition could define when the user has completed a task; for instance, checking out of a store. We have to en- sure that the visitor has had a great expetience up to this point, other ‘wise they will not come back o+ We should be careful about meta rules in Web design. They are excep: tions to the rules, defining when the rules do not apply. On websites, ‘we need to stick to the rules to ensure that we don’t confuse users GOALS Everyone loves completing a task. Achieving a goal is one of my fa vorite things—whether its to deliver a website to a client, running a certain distance or learning something new. Even a small goal can bring great satisfaction. A while back, Ryan Carson of Carsonified posted a screenshot! of one of the steps in Twit ter’s incredibly clever sign-up process. It has changed a bit since, but the concept is the same: while teaching you how to use the service, ‘Twitter makes you feel like you're accomplishing a goal by reaching the end of the progress bar amd Find Lady Gaga, football, news Cwoinaworecs) | 9 rotow (CaroWorniacks Tap Pet Hotol TapPat-ota tuboien, ® Follow cation to teack vse how to use the service ‘When I (very occasionally) pall myself together to go for a run, and T'm almost at my goal, the lady on the Nike+ app on my iPhone says, “You're almost at your goal. Keep it up!” This always pushes mea little harder. In its app, Nike takes advantage of our desire to compete—be it hinkvitamin com/user-sciencltwitterusing': followeragainst friends or ourselves. Most importantly, Nike motivates and encourages its users. ‘When you encourage users to complete a task, they are more likely totry to doit On websites, such a task could be registering, filling out a profile, signing up for a newsletter or simply buying a product. Give the tusera sense of success; again, the good experience will satisfy cus: tomers and, thus, make them return, Not all games havea quantifiable outcome or an achievable goal, though. Take Sin City, Space Invaders and flOw'™* If you haven't tried {Ow,1 encourage you to do so. Inthe game, “players with differing skill levels can intuitively customize their experiences in the zone and enjoy the game at their own pace” ‘The process is often a goal in itself. A goal on a website is often to find information or to buy a product, and so the user has to be able to actually find this information—and enjoy doing it ‘These are, according to Adams and Rollings, the four main compe nents of a game. Let's ty to expand on them. COOPERATION AND COMPETITION Games are more fun when you have someone to play them with. You can fight against an opponent or collaborate on completing a task. Re ‘member when you could connect two Game Boys to trade Pokémons? In these days of social networking, we have the ideal conditions for cooperating with friends, Social networking is probably way more about marketing than we realize. Companies know that if they show us products that our friends are buying, we'te more likely to buy them, too. Take Spotify; your Facebook stream is filled with music being lis tened to by your friends. You can listen to it yourself, comment, like and so on. Spotify engages you in its product—even if you don't even use Spotify, Services such as FourSquare and Facebook Places ely heavily on so- al relationships. When your friend ousts you as mayor of Starbucks, ‘you of course have to go to Starbucks to reclaim the title. The processis simple, but itactually involves three of the four actions mentioned above. You're playing. game with your friend with the goal of being the mayor of Starbucks, and the game is more or less defined by rules, a set of steps you have to go through to complete your turn. 134, hupifwww jenovachen conyflowingames(flowing hemHow To Use Gamification In UX Design ‘Why should we make our websites usable? Why even spend time on UX? It’s rather simple, actually. Usability expert Jakob Nielsen explains it well, On the Web, usability is @ necessary condition for survival If aweb- siveis difficult to use, peopl eave. Ifthe homepage fi'stociearly state what acompary offers and what userscan coon thesite, people leave. If usersgetlost on awebsite, they leave. If awvebsite's informa tions hard toread or doesi* answer users keyquestions, they leave Note a pattern here? There's no such thing as auser reading a website marwal or otherwise spenting much tine trying to figure out ani terface. Thereare plenty of other websites availabe; leaving is thefirst ine of defense when users encounter a difficulty ‘Thisis why we spend so much time on usability and UX design. If we scare off our visitors before they have even had a chance to look at what we're selling, then we won't sell anything, We arenot looking to transform our products into games. Instead, ‘weare trying to learn ftom an industry with an extremely engaged audience. We shouldn't blindly use these theories; rather, we should adapt them to our needs and to the platforms on which we deliver our products, without compromising with the quality of our products. Gamification shouldn't be something you apply after designing and building your product. Gamification is a part of the design process it self. But how do we put this into practice? While the process will be shaped by your product and andience, here are some ateas to consider ‘when applying game theories to your product or website, along with, some good resources on implementing them. TANGIBLE USER INTERFACES Since the bitth of the personal computer, we've been accustomed to us- ing a mouse and keyboard. However, in the world of games, the physi cal controls change with the platform. On a PlayStation, you have the ‘geometric buttons and a couple of jogs. On an iPhone, you havea touchscreen and an accelerometer. You might have a tennis racket for the Wii, One game can be controlled differently on two platforms; for example, you might steer a car with the keyboard arrows on a PC but tilton an iPhone, bial 94With the bile market ever expanding, we need to make sure that our users have a good experience, whatever platform they use to visit our websites. We need to adapt our products to the platform they are being served on. If you own an iPhone, try visiting Google Images", and compare the mobile to the desktop version. Swiping through the result pages is a great experience because you're used to that gesture on the i0S plat form. Visit YouTube from a PlayStation 3, and you will be greeted by a design suited to a media center ‘When I got my first iPhone, I spent a lot of time playing with the in terface. But the interface was stil limited to a set of predefined ges tures. With the iPhone 4$ came Siti, which enabled us to interact with the device in a completely new way, and it took mobile devices to the next level in accessibility ae cere esr wre sing Guy Armost Runs in For further reading, make sure to check the following resources: + “Responsive Web Design8," Ethan Marcotte + “Redirect Mobile Devices'*2," Chris Coyier + “List of User Agent Strings'>°," UserAgentString comLOCATION-BASED WEBSITES Popular games are often location-based —i.e. the location of the player affects the game. Can we benefit from thisin Web and UX design? Heck, yeah! I liven Denmark. I recently visited Amazon's US website and was greeted with this message: SS siping tomdenmask? Vie AMAZONCOLK con Amazor!5! uses location to divectyou tothe stre for your area Amazon detects where! live and points me to Amazon UK. Checking iy location may bea simple technical task, but it makes it feel almost asif they know me. Social networks are taking advantage of our urge to play and the fact that we almost always have a GPS-enabled gadget with us. To get a discount, someone can check in at H&M, and at the same time tell the entire world that they're shopping at HSM. Thatis extremely cheap ad vertising, For further reading, make sure to check the following resources: *Geolocation'" Mark Pilgrim Geolocation'# HTML Demos and Examples CONSTRUCTIVE AND HELPFUL FEEDBACK In games, we often see direct feedback to our actions. For instance, ‘your guide might interrupt a game that’s not going, so well to help you remember how to use some skills that you learned earlier in the game. Providing feedback to your usets, especially when something goes ‘wrong, is crucial. Be honest with your users, and help them move on, ‘There are many ways to give users direct viswal feedback in a de- sign: show them what page they are on, use consistent colors for links, create a helpful 404 page, give useful information when afield isn’t filled in correctly ina contact form, One of my favorite features of Google ists “Did you mean” sugges: tions, Many people are poor spellets, but that shouldn't prevent them, from buying your product. Adding a “Did you mean?” feature to your 130: hpyfwww woeragentoering 131 hep/fevewamazon com 152, htepifdiveintohtnls.infalgeolocation html lsd slpageswserageatocring php ecomlgeo é‘Web store's search engine can help these users find the product they've looking for. Feedback is not only about responding to the visitor's actions, but al so about foreseeing their actions. Olark’* is a great example. Olatkis a customer-support service that puts chat functionality on your web site, When you visit Olark’s website and you've been there for 10 sec onds doing nothing but scrolling, the chat window appears with the message, “Thanks for stopping by! May I help you?” Even though the ‘message is automated for all users, it gives them the impression that they're chatting with areal person. When a visitor replies to the auto ‘mated message, they're connected to an Olark employee, who then an: swers their questions, Be cateful not to annoy visitors, though. Remember Clippy? Respect ‘your users—if they close the chat window, don't reopen it when they visit another page on your website For fusther reading, make sure to check the following resources: “Did you mean... in PHP*S} Alejandro Urbano AutoSuggest jQuery plugin, Drew Wilson DON'T IGNORE THE CONTENT I won't get into this argument—I'm simply stating that I believe that content is still the most important part of any product. Your candy ‘might be wrapped in pretty paper, but people won't buy it twice if it tastes like junk. This, of course, doesn’t mean that we shouldn't wrap it nicely; pretty paper certainly has its advantages. ‘As Katie Salen and Eric Zimmerman assert in Rules of May*?, “Con: text shapes interpretation” (pages 44~46). Visiting a business website for which the designer chose Comic Sans as the font really takes the fo- cus off of the content. Make sure that your design represents the con- tent—use the design to substantiate your message In “Gamification Is Not Game Design’ Adam Loving has this to say: You cannot increase the intrinsicualue of something by adding game mechanics. You CAN make the value more visible. You CAN charge 134 hepifolask com 155, httpifurbanoalvaezceblog/2008/05/30/didyourmean-in-phph 156, hespifcade drewwilon conventeylantaeaggee query plugin 157, herpfbooks google comfboskeid-UM ay 212uQCSpg=PPishl-endipg=PT28ev=onepagrSigh 138. hupy/adamlovingcom/internt-programming/gamification ”theparadigmn and context of our site visitor from user to play er increasing their engagement. Gamafication is just a tool to serve content mote digestibly. Don't overuse it; your website or app will not improve from the application of, ‘game theories. The product needs to be great, otherwise it won't matter. Gamiification can improve the user experience, but by no means can it create it alone—the user experience is also created by logical structure, ‘good writing, motivation, flow, ete. In his much debated blog post “Design Is Horseshit'*, yongfook tells us: “Focus on value creation. Design enhances value, it does not create it” And as Joshna Porter mentions in his response post" this statement is entitely true “when you believe that design is just making things look good” ‘The same could be said of gamification. A point system and badges are not what make a product good, but rather the experience they pro vide combined with the productitself. Gamification really can create val uue—it depends entirely on the user. School teachers know this; to be effective, they have to look at the student, not the class. Not everyone learns the same way. Two times two might equal four, but there ate a snillion ways to learn that. For instance, Treehouse’ has a great prod- uct not because you can earn badges; that’s fun and all, but the value lies in the high quality of the teaching material, ren oer theta voce aes TH On Trechouse'4, you can urdock badges by taking ¢uizzes and completing codechal STORYTELLING Vitaly Friedman, editor in chief of this very magazine, said at the Fron- tend conference (video) in Oslo in 2011 that we should be better at 159. hepifyongfook com/poat 42951244271 designis horses, go. hepibakardocom/aichives deni ip-nothorsspoop! 38storytelling in Web design. The Web is not a static medium—why don’t we embrace that? The possibilities for creating beautiful, useful and helpful interfaces and products are endless, but we rarely take ad vantage of them. We need to experiment in order to create better inter faces. As Vitaly said, we need to tailor our designs to the particular needs of the client, We need to stop focusing on selling products; we don’t have to trick people into buying, No one will buy a product that they don’t know something about; tell the user what your product does and why it does it the best before even attempting to sell it In October 20n,, ZURB posted an article advocating for hiding the sign-up button in order to get more sign-ups, On the home page of a client's website, ZURB replaced the sign-up button with a“Let’s go" but ton, inviting the visitor to learn more about the product, before even ‘mentioning anything about signing up or buying a product Sign-ups ac tually increased by —wait for it—350%! ENGAGE YOUR USERS. In Angry Birds you can earn badges for completing various tasks throughout the game. I don't know about you, but I've played the same levels over and over again untill got three stars, We want to be best Other than getting badges for ranking high, you also get badges for playing longer, hitting a certain number of pigs, ete. ‘When I visit one of my local bakeries to buy bread, | get a stamp on a card. The next time! visit the bakery, get another stamp, When I have 10 stamps, I get free bread, Simple but effective. I would never visit an other bakery. Research by Joseph Nunes and Xavier Dréze'*S shows that prestamping such cardsis effective. Irmakes customers feel as if they have begun collecting stamps, asa result, they feel more moti- vated to complete the card than those whose cards are not prestamped. Ina Web store, you could give customers double the value on their first purchase or increase the discount they get according to how often they buy from you. ‘There are many ways to engage users. Ask them for feedback—and listen. Create a Facebook page or Twitter profile, and be active. If you can afford it, giving away free stuff also helps to spread the word about your company. Competitions are often a great way to engage users. This Easter, WOW HD'® held a competition in which users had to browse its Web store to find Easter eggs. For each egg, found, the visitor 143 hupifww frontendson conivideoitaly-friadman hem! 4g hepilees aac \huy burying -sign-upbuttonshhelpe-get mor 1, hupifmachod bylsdintdevign 148. hepyfwwww wavs com 9‘got a coupon code. In the process, the visitor would come upon a lot of products on which they could spend their coupons. Create fun compet tions instead of asking basic questions. BE PERSONAL AND FUN My wife and I visited Las Vegas a couple of years ago. I handed a wait ress my credit card to pay for our dinner, and she handed it back to me and said, “Thank you, Peter.” I thought to myself, “How does she know my name?” only to realize that she'd seen my name on the exedit card. Butit felt like she knew me. It feltlike she cared. Merhaba pshoeg! Now you know how ta greet aoopl Fr Turké Fickr*4 greetsyou in different languages ‘This is easy to do when the user has registered an account on your web- site, Whenever they're logged in, address them by name to make them feel like you're speaking directly to them. When you log into Flickr, you're greeted with the word “Hi” in one of many languages, followed by your name. On Amazon, you get personalized recommendations ‘when you're logged in, based on items recently bought and viewed EASTER EGGS Ever sincel got my first computer, I've loved Easter eggs—hidden de tails like the “Here's to the crazy ones” speech in the TextEdit icon on ‘Macs X, and even hidden games like Snake in Terminal. Many web: sites also have Faster eggs. Most of the time, they're just developers having fun, bat why not let your users have some fun, too. ‘There are several ways to include Easter eggs in your application or website One of my favorites is the Konami Code'*®, The Konami Code appeared by mistake in the 1985 arcade game Gradius. Itis entered by pressing certain buttons in acertain order: up, up, down, down, left, right, left, right, B, A, Start,anditisproba- bly relevant only to websites related to games and technology. 1a http 48 hep few licks som? -nwkipedia orgflcyKonami CodeSeveral websites, including, Geek & Hype? and the website of Paul Irish’S® (which you just have to try) use the Konami Code. You could use it to give users a discount orjust to show them something fun. Another way to use Easter eggsis by placing them on your 404 page Of course, you don’t want visitors to end up there, but having some- thing fun there might lighten the mood, Check out Fabgog* for great 4404 inspiration. em eV i S's 404 page!®* features avideo inshich atear of ex special forceshunts dou the missing page. For further reading, make sure to check the following resources: + KonamiJs3, George Mandis 4g hp skandhype com! ago hep m asi hepilfsbgoa com 153. hespifoosh mel4o4! sss hep mnaptortoeeWhen Not To Use Gamification In UX design Don't rush out to add badges and point systems to your designs, though. Gamification certainly has its limits SELL THE PRODUCT, NOT THE EXPERIENCE Of course, we all know that we're selling a product. When you visit a physical store, you get an experience. Music comes out of the speakers, and pictures are hung with beautiful people wearing clothes that you're _20ing to buy because you want to look like them, The store assistant of: fers your gitlfriend or boyfriend a cup of coffee, telling them that they look gorgeous in that sweater. And you leave the store with a good ex perience. ‘We want to give out visitors a good experience. But our product is still the website, with all ts content, be ita Web store, a restaurant ‘ment or out own portfolio. A great experience doesn't give visitors much if that’s all there is. Focus on creating.a great product before ‘making it look pretty. ‘As mentioned earlier, gamification doesn't sell the product It can make the experience more fun, which will hopefully bring the cus tomer back, But to be honest, if you don’t have a great product, you should probably be spending your time on that instead. WEBSITES SHOULDN'T HAVE DIFFICULTY LEVELS Games always have to have difficulty levels; completing a game with out at least failing.a couple of times is no fun. On a website, however, users should find what they're looking for as quickly as possible; if they ‘get annoyed, they will hit the “Back" button and you won't sell any- thing, This doesn’t mean you can't experiment with navigation and ef fects. But, to quote Steve Krug, just don’t make your users think—at least not too much, DON'T SPAM. EVER. So, you want to promote this shiny new product of yours. What do you do? Perhaps you think to offer a discount if customers tell at least 150 of their friends on Facebook aboutit. The problem is that everyone hates spam, and the saying “Bad publicity is beter than no publicity” is not really true Your Twitter followers probably don’t care that you've checked into ‘MeDonald’s for the fourth time this week on Foursquare—and if they do, they/ll follow you on Foursquare. The main reason I don't use location based social networks such as Facebook Places and Foursquareis that they were introduced to me as spam in my Twitter stream. Even though users can opt out of sharing their location, consider whether ‘you should give them the option at all. Doing so could come back to haunt you. NEVER FORCE VISITORS TO PLAY Don't make it arequirement to play your game. Not everyone wants to collect badges, and you should respect that. Giving discounts to those who want to play is one thing, but don'texclude anyone from buying, GAMIFICATION IS A BALANCE Before even thinking about using gamification, consider how it might affect your reputation. For instance, websites for law firms and banks probably shouldn't be “fun” to use. Some aspects of gamification just aren't suitable for companies that want to be taken seriously. Imagine getting a 10% discount from your lawyer for liking them on Facebook, T ‘would havea hard time taking that lawyer seriously ors. By contrast, helping visitors find the closest branch when visiting your bank website on a mobile device will show them that you care, Figure ‘out how you want your company to he seen before using gamification. Conclusion Gamification is here to stay, and unfortunately many people will con: tinue to use it the wrong way. We've covered a few ways to use gamifi 154. hupijyokcbank come omycation wisely. The goal is to enhance the experience of using your prod: uct, without punishing users who just want to buy the product and People love having unique experiences. Experiences are what brings people back. But don't let the experience get in theit way of buy- ing your product Reading List GAMIFICATION To learn mote about gamification, have a look at these articles and books: + *Gamification Is Bullshit'557 Ian Bogost + *Gamification Is(n't) Bull*hit®5 Adena DeMonte, Badgeville + ‘Gamification Is Not Game Design’ Adam Loving + *Gamification: Hype or Game Changer'"5 Nicholas Lovell, Wall Street Journal + *Gamification'®97 Jon Radoff + “How Gamification Plays a Role in Social Media?™,’Profileness + “The ‘Gamification’ of Education'®” Elizabeth Corcoran, Forbes + Gamfication by Design: Lmplementing Gare Mechanics in Web ard Mobile ‘Apps'®, Gabe Zichermann and Christopher Cunningham + Andrew Rollings and Ernest Adamson Game Design! Emest dams Andrew Rollings and 15, hupifnawrbogoet comyblagigamficn: 156, hep flog badgeville comlindex phap/20u/08/u/gamificaton-ient bully 157, hepifadamloving comdinternet programming)gamification 18. hpfbloge ws} com/tech-europel20u/05/04/gamificanon-hype-orgame-changer| 169, hepfeadoff.comblog/so1l0ah6lesmiticationy 10, hpiptofleneescomlhowe gamficationplaye vole am eoctal media 16, hsp forbes com 20/0 25feducation-intesnetacratch-technology-gamifica tion htmPhexeasHomepagechannel 162, epee amazon com/Gamifiation-Derign-Ipplementing-Mechanice Mbilldp! 1449307670 163 hrtpi/www amazon comyAndeewRollings Ernest Adame Deaign/dpisg2730019REFERENCES AND RESOURCES Inaddition to the above, be sure to check out these articles and books. “Design Is Horseshit!17 yongfook “Design Is Not Horsepoop'®37 Joshua Porter “Why You Should Bury Your Sign-Up Button,” Joshua Porter “Why Burying Sign-Up Buttons Helps Get More Sign Ups?” Dmitry at ZURBlog, Seductive rteraction Design: Creating Payful, Fun, ard Effective User Exper erces'®®, Stephen P. Andersen 164, httpfyonsfook com/post4295124427\design-inhoroechit 165, hepfbokardo comyarchivea/design-ie noc harsepoopt 16 hep fbokardo com/archiveahhy-you-ahoulbury-yoursign-up button! 167, htp/Awwew2urb comdarticllSi6hehy burying-sign-upbuttonchelpeget-mor 268, hupifamashed bylsedetdoeignAdding A Personal Touch To Your Web Design BY SABINA IDLER » ‘The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwo- ven, encrypted information—data that is accessible only through tech: nical interfaces, such as Web browsers, or applications. Yet, Web pro- fessionals have made it their calling to tame the “wild” Web and turn it into an accessible, user-friendly and, most ofall, personal medium. Personality will set your brand apart frame competiters and help you connect with « passionate audience ~ Aaron Walter*®9 Designers can do plenty of things to counteract the technical appearan: ce of the Web One very effective way is simply to make it look less technical, by using a more human, personal style. In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experi ence of your website. Identity And Authenticity Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting, aletter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way mote per- sonal than a computer-written one, right? On the Web, it's similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let's look at three examples of how freehand drawings can help you create an iden: tity and stay authentic 269, hepifww smashingmmagazine com) 20103)27redeoigning with personality)LOOK AND FEEL First of all, hand-drawn content has a unique look and feel. Compare it to handwriting, Creating a personality and unique appearance for your brand or product is important, Mockups reproduces the experience of interfaces on a whiteboard but Using your computer so they're easier to share, moiy, and get honest feedback on, Wireframes made with Mockups look ike skeiches, so stakeholders won't get “distracted by litle details, and can focus ‘onwhat'sreally important instead. Thre [ook and fee! of B ‘sauthentic ond distinctive Balsamig’” does a great job here. It offers a mockup and wireftaming, tool. While its features are quite advanced, its look and feel is basic, re calling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product au- thentic and distinctive RECOGNITION Freehand drawings have character. Through the touch of human im perfection, they gain a certain tension thatiis hard to recreate digitally This special touch draws attention and allows people to pause to ap- preciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image. fltepads logo's distinctive and easy toremember a7. hepwwewbalaamigc‘The source-code editor Notepad» has a distinctive hand-drawn logo, ‘The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools. PERSONALITY Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn con: tent confirms that real people are behind the content, people v:ho have put thought and effort into the design to make it usable and trust worthy. Mathboard looks personal and easy to use ‘MathBoard” is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. ‘The personal appearance of the app makes it easy and attractive to use. an. hipifootepad-plurplasInformation And Content ‘The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user's visit to your website. The content should look attractive and promising enough to involve the visitor. In formation must be clear, relevant and actionable in order to be effec tive, Below are three examples of ways in which frechand styles can ‘make the presentation of your content more effective EXPLAIN FEATURES You can use freehand drawings to explain your product, such as its fea~ tures, Creatives often use simple sketches to explain a concept ot pre- sent an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You'll have a product, concept or idea that you want to get actoss to visitors. By using hand- drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly. Over-The-Air Team Management Seoctecranenct yon Senne Sin ervbaarour os Feedback Reports nen. ite ne Se berg reHope Sepowndent carat tecewitteneaa tn ‘Soennyon dcr ‘ee oning ent eet te Imerys ah atreati Stickiesconjures the idea of presentations. (rage: Test Fight Online service TestFlight!73 makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accom panied only by a few brief lines of text. This conjures the idea of pre sentations, drawing attention to the features one by one to make them ‘more clear ‘VISUALIZE WORKFLOWS. Frechand style isalso a great way to familiarize visitors with your ‘workflows. No one expects you to come up with the perfect solution 17s huspe/teetfightapp om 109out of thin air. The fact that you admit that a process is involved and. that this process can be rough and bumpy only makes you human and likeable, Itdemonstrates that you try out different directions before deciding on the right track. A Thishand drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure'74) Designer and front-end developer Alex Faure'™5 demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust He seems to not only know what he is doing, but also thinks things through and involves his clients in the process GUIDE USERS ‘Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is, always important. Hand-drawn icons can be a good way to doo. It's no secret that icons are helpful when navigating a website or app. Why ‘would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine. 174 tp 1 hep recom Jekofaure com=, 8 ‘SUMED Introducing Stamped 2.0 $B hiss na ane Filicssnr : FOR iP e mamas FPN See Ee ‘The iPhone app Stamped"? uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, suchas places, books and movies, The hand-drawn style perfectly ‘matches the personal nature of the app, encouraging users to keep stamping Team Presentation ‘The importance of team pages increases continually. While we used to accept certain level of anonymity on the Web, we are now eager to know whois behind a website, service or product. Also, having the hy pothetical option to contact someone is not enough we want to know exactly who we would be contacting, The more personal your team pre sentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand- drawn elements BE LIKEABLE Being perceived as likeable is important. Even if you offera ton of in: formation on yourself, if people think you are arrogant or too extrava ‘gant, it will dono good. We are much more willing to trust someone wwe lilce than someone whose character we cannot assess. Hand-drawnelements can make you more likeable by making you look creative, spontaneous and easy-going, eed ‘The Knock Knock Factory? welcomes its visitors with a personal and likeable presentati board in the background say a lot about Keith, the of its tea The pictograms sketched on the chalk: fearless leader.” The company obviously considers it important to give visitors a clear pic: ture of who they are about to deal with. It's catchy and gives visitors a positive feeling, before they have even looked around the rest of the website, Itcreates an immediate personal connection and makes the visitor feel welcome to the website. BE TRUSTWORTHY Besides likability, trustworthiness i also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing auther icity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desited actions, such as buy ing the product. Hand-drawn elements are usually not the easiest con- tent to produce for a design; they requil passion—skills we associate with honest and trustworthy people. e skills such as creativity and 7 pifkackknoskfactary.cWefee! norecomfortabte around people we trust. mage: Pleca The software agency Polecat has found a trustworthy way tointro- duce itself. Instead of realistic photographs, it has put thought and pas sion in its team presentation, using abstract yet creative illustrations, ‘The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy: ‘going, familiar feeling, BE REAL ‘An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be ascary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handvvtiting and hand-drawn elements reveal something about your person, making you look more real 178. hepYuu! max The authentletty ofa reams important. mage: Grove the people at Grove’? found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names look ing handwritten. It looks as if someone walked through their work space, taking Polatoids of everyone, including the team’s dog, Does it _get more real than that? Storytelling Freehand drawings are a great way to tell stories. Storytelling is ex- tremely personal, an ancient means of communication, mediated at ‘most (back then) by a cave wall. This basic method of exchanging infor ‘mation transcends all technical advances and gives us a comforting, human feeling, Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it ENTERTAIN Entertainment entails emotional involvement—something that is much easier to achieve when humans are involved, rather than mindless ma- chines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves. 279, hepBonar =D Drawingsereatea failiay and hursan experience. (image: Axuré) ‘The prototyping tool Axure!* welcomes visitors to its home page with, an amusing yet informative story about UX Man, who is ‘accused of having superhuman powers” The freehand style of the drawing is eye catching, There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page EXPLAIN Hand-drawn stories grab our attention because we like to recognize In ‘man elements on the Web, Whereas a too-clean Photoshopped image ‘might not gain our rust, hand drawings appeal directly to our emo- tions, making us more attentive and receptive to information. Sign documents anywhere. Hand drawings appeal divecty t@ our emotions. @rage:slgnNow| 18o hepy/fwwwaxure com)‘The app Signtlow* uses hand-drawn images to explain its main bene- fits right on the home page. The way it ines up the benefits, connected by the “flying” documents, creates a narrative. You can almost hear someone explaining the images as you tead the descriptions below. The story draws visitors in, making it easy to follow. ENGAGE Personalized elements such as freehand drawings also engage visitors ‘Along with user experience, “user engagement” has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So,a website that manages to engage us has already made a big step towards a positive user ex- perience The easiest and most powerful travel guide ever Awebsite that manages to engage ushas made aig step towards a postive user exper ‘Travel app TouristEye** engages effectively with a good story. The step-by-step introduction to ts product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a nip, Attention-Grabbers Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and. symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directlyINVITE You can use this personal method of communication for different things. First, you could easily te visitors to perform certain actions, suchas liking you on various social media platforms or sharing your content, We are mote likely to respond to messages that appear to con- cem only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connect- edness by addressing visitors directly. (OTS A boutique: en ligne pain cpearey \) Sree oy Weerbe ‘se a handwritten message on its landing page, together witha happy smiley and an arrow that guides the visitor's eye to the green button. The header is simple yet effective, drawing, attention to the cal-to-action button without being intrusive or annoying, MAKE CURIOUS You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. aie a great way to guide the attention of visitors. The creative agency Radley Yeldar'® shaws a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “Thisis not just a footer.” The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This isa ‘great subtle way to bring the footer to the visitor's attention. POINT OUT DETAILS Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’ all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to high: light content in a book or other offline medium, these elements work {great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out No MoRE oVERELOw: HIDDEN Hightighted elements are expected oe treportant, (mage: Orb Orbit!*S uses hand-drawn arrows to point out adjustable elements ofits image slider plugin. The hand-drawn quality of the arrows draws atten tion to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself, Don’t Overdo It Sometimes, freehand drawing doesn't suit the nature of a website. ‘Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don't hesitate to ask visitors if you are not sure how far to go; for example, by conductinga live survey!®® on your web- site. While certainly many examples are out there of how not to use hand-drawings on a website let's look at only one. The aim of this att neve zurb comiplayground/sbitjquesyimage-shder ill.comy producto 285, http 285. hpcle is to point out positive examples and offer ideas on how a freehand. style can improve the user experience, but itis also important to be aware that it's not always effective and that you should use hand- drawn elements within reason. SOY oan The overdone hand drawings make the buttons look obtrusive and pushy. image Joshua Keene For example, designer Joshua Keenes"*? uses hand-drawings to draw at- tention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects, First, so much is going on that your attention gets lost before even getting to the actual target, ‘making you lose focus before taking any action, Secondly, the invita- tion to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcorning them to the social commu nity. Conclusion Having a personal experience on the Web is becoming increasingly im- portant. We no longer want to visit cold, formal and anonymous web- sites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are ‘willing to interact with their website. Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today. = 287 hap sw johuakeenceco kfAbout The Authors Chuck Longanecker Chuck Longanecker is the CEO and co-founder of cigitel-eepat user-expetience design company'** passionate about creating products, like SlideDeck*, Hello Bar'®° and Impress, that make the Web more intuitive and compelling, Faruk Ates Faruk Ates does creative things on the Web, like Modemnizr®. He is a designer, developer and an entreprenerd. Faruk previously worked as Product Designer at Apture and Ul Engineer at Apple, and is currently working on an exciting new venture of his own. Read more on his site, farukat.es'??. John Ferrara John Ferrara isa user experience designer at Vanguard and the author of the new book, "Playful Design: Creating Game Experiences in Every: day Interfaces!" published by Rosenfeld Media'®5.John has worked in UX design for over thirteen years, designing web sites, desktop soft ware, and video games, In 2010 he co-founded Megazoid Games, which, focuses on cteating mobile, social, and educational player experiences. John’s nutrition education game “Fitter Critters” was a top prizewinner in the 2010 Apps for Healthy Kids contest, awarded by Michelle Oba- a's ‘Let's Move!” campaign. He lives in the Philadelphia area with his wonderful wife and supethero daughter 188, hepa dielepathy com! 189 hsp sided go. hepifahellbar com! 1g hepa thy com wvew modernize com 193 herpfarakat eo! 154 hupifrorenfeldmedia com/booke/game-devign! 195, hrp/ftoseneldmediacomybookstPeter Steen Hogenhaug Peter isa webfinterface designer based in Aalborg Denmark. He studied Medialogy at Aalborg, University, and is currently working at FlexDan- ‘mark'®®, You can connect with him on Twitter: @pshoeg!7 Sabina Idler Sabina is community and content manager, technical writer, and UXer @ Usabilla'®®, Her education focussed on usability, her passion is, the user experience and design is her key to both of them. For the de- signers among you, check out Usabilla’s new tool at discov e.usabilla.com*° and collect, rate, and share design elements on the entire web. Simon Schmid Simon is the editor of the Ul/marketing blog TheGodfounder""! with a not so secret love for bootstrapping, Personal Site”, Twitter>°5, Tum: bes, 196. hep flexdanmnark dd 17 Anpifsvattencomle'ipchoes on olts496883129962593450 ila com hegodfoundercomy 202. hepifsimonechmid mel Ihupifewitercomvizimonet »monschmid eur eomyAbout Smashing Magazine Smashing Magazine’ is an online magazine dedicated to Web design: ers and developers worldwide. Its rigorous quality control and thor- ough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published arti- leis carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine's own publishing pol icy 298 ‘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 de- sign, The magazine is—and always has been—a professional and inde pendent online publication neither controlled nor influenced by any third patties, delivering content in the best interest ofits readers. These ‘guidelines are continually revised and updated to assure that the quali- ty of the published content is never compromised, About Smashing Media GmbH Smashing Media GmbH" is one of the world’s leading online publish: ing companies in the field 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. 295, htpiasvnw.emashinemagarine com 208, http/fveww.smashingmagazine comlpubliching policy! 207-hetpifwew smashing:mediacom