“Oh hai Smashing Magazine!” That’s one of the dozen ways that Flickr welcomes its users upon signing in every time. It’s an easily overlooked detail, one that the service would work without flawlessly. Yet this detail is a big part of Flickr’s particular design character that would be missed if it wasn’t there.
These easily overlooked details are the ones that I’m particularly interested in because of the reaction they are capable of causing in users. These details trigger an emotional response, and if used purposefully and fittingly, they will help to form a personality that people will respond to positively when interacting with the product. This positive attitude will often lead to people sharing and even advocating for your product with their peers. This technique of connecting with users on a personal level is also referred to as “emotional design.”
A Little Theory Link
The term “emotional design” was defined by (among others) Aarron Walter3. In his book Designing for Emotion, he describes emotional design by building on Maslow’s famous hierarchy of human needs4, which posits that humans need to achieve elementary states of being, such as health and safety, before they can start thinking about higher-level needs, such as self-actualization. People who are seriously ill or lack safety would find it difficult to think about self-actualization as expressed, for example, in morality, creativity and problem-solving.
According to this theory, a product has to be functional, reliable and usable (in that order) before a layer of pleasure can be applied. Emotional 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 personality layer.
In this article, 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 consistent use of emotional design results in a great personality.
To learn more about the theory of emotion in design, you might be interested in the article “Not Just Pretty: Building Emotion Into Your Websites7.”
The Elements Of Emotional Design Link
There’s an additional benefit, though. In pleasant, positive situations, people are much more likely to tolerate minor difficulties and irrelevance9. While poor design is never excusable, when people are relaxed, 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 observation10) 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:
See the article “What Are the Top 10 Positive Emotions11.”
Do something unexpected and new.
Differ from other products in an interesting way12.
Offer incentives, or offer help even if you’re not obliged to.
We all like attractive people, so build an attractive product.
Leak something ahead of the launch.
Offer something exclusive to a select group.
- Be responsive
Show a reaction to your audience, especially when they’re not expecting it.
Now, let’s see these principles applied to actual products.
Practical Examples Of Emotional Design Link
Below are some details of emotional design on the Web. We cannot always attribute a particular strategy to it, such as “surprise” or “anticipation.” Sometimes more factors are at play, and people will 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 Bootstrap13 and see which ones you like best.
Mimicking Emotions Link
People who enjoy each other’s company tend to mimic each other’s behavior14? When someone you like smiles, you generally smile back. This can work on websites, too. The emotional brain is affected by pictures15, especially of people, and by stories. Let’s look at one design that tells a story and shows pictures of people.
Highrise 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 testing18 done on Highrise.) Oh, and don’t forget to cultivate your own personality19.
General happiness Link
Smiles seem to work in highly abstract form as well.
Threadless’ shopping cart is 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 remember it for making you look twice.
User retention Link
User retention is another area that requires a lot of attention.
A while 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 powerful surprise that you’ll remember, even if you end up leaving.
Etsy just plays “Every Time You Go Away” by Paul Young if you attempt 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.
Edgy humor Link
Copy is the easiest way to introduce and play with personality. Your website probably has text everywhere, and words communicate a personality very well. Do you want your brand to be playful, stern, comical, hip? Copy can go a long way in defining who you are and who you appeal to.
In the Everyday app, if you haven’t put images in the library (which are needed in order to play a video), you will get this friendly reminder to take some pictures of your “beautiful” face — one word that completely changes the tone of the message.
The “Pssst!…” here says it really well — not only visually with all of the “s”-es and the contrasting color, but also aurally when read.
Skitch’s 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.”
Hunch says something you are probably not used to reading. This difference alone could persuade you to go along with them. First, it communicates that the email will be of interest to the user; secondly, it recognizes that spam is evil.
Microcopy 2 Link
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.)
Milk promises infrequent emails and teases with early access.
Microcopy 3 Link
Here is another approach from an as-yet-unreleased project of mine. The branding is lighthearted, so I’ve crafted this microcopy to accompany the invitation form. Hopefully, people will be more at ease submitting their address.
This says that your email address is secure with us.
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 process32.
Error Pages and Downtime Link
Not many situations are more annoying for a Web user than downtime. 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 Link
Flickr says it’s having a massage. It’s not brilliant, but it’s better than an annoying error message.
Say sorry and offer a treat Link
Here’s a better approach from Flickr. When it experiences more serious problems, it puts up this splash page saying that its tubes are clogged and that it is sorry. But instead of leaving it at that, it set users to a task and offers the winning contestant a valuable pro account.
Sorry but… Link
… there are more important things in life. When Tumblr went down recently, 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 out there than a brief outage and that you could actually do something about them.
Tumblr supports people in need.
Other online annoyances include waiting for a screen to load. But some screens just need time to load. When your app is busy gathering information, consider doing something on the screen, such as displaying a tip.
CAPTCHAs are a reality in many places today, but that doesn’t mean users have to like them. Heck, they’re an incredible annoyance. Stack Overflow at least explains with a funny graphic why it has to annoy visitors.
Another emotional strategy is to respond to the user’s input. I love when something responds to me without my having to disclose personal details.
Thermo detects your location and turns it into something valuable.
37signals wishes you a happy whatever-day-of-the-week-it-is.
Email Design Link
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: information, exclusive offers, humor, etc.
Telling a story Link
Zaarly highlights the most interesting “classifieds” in its newsletter. It’ll make you wonder what people come up with on the website and challenge you to use the service more often.
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 recipient’s name to an email’s subject line increases conversions48.
Surprise copy Link
Notification emails are usually all business. But when someone takes time to make something a bit more special51, as the notification email below from CD Baby shows, people will go to great lengths to tell others 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.
We all know that stories get people to listen. Some compelling examples are out there of product stories, one of which is Ben the Bodyguard. It’s 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, telling you that he’ll protect your data soon.
Ben the Bodyguard on the teaser 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 your data to a personal bodyguard.
Notifications from Ben
Easter Eggs Link
Easter eggs in general are meant to delight users. Even Google, a relatively serious character among online personalities, adds an Easter egg or two to its search engine every now and then.
Let it snow Link
Easter eggs are usually unrelated to the service. They exist merely to delight or surprise users, to give them a treat just to make them happy. And happy users share.
The joking mascot Link
A distinctive part in MailChimp’s emotional design is its chimp, which goes 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 Chimp’s random remarks. (Click on the image to see what he’s referring to.)
But note that emotional design like this can be done wrong. Remember 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.
Log-In Pages Link
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.
One of MailChimp’s custom log-in screens
You don’t even have to do much to be special. Pocket greets you on the log-in screen with a huge background image instead of a dull color.
Pocket’s log-in screen
Attention to Detail and Surprise Link
Many of the things covered above demonstrate some attention to detail, which is essentially what it all comes down to. The level of attention to detail shows how much you love the product and how much you respect your customers. Check out this spinner in Quip’s recently released app.
Quip’s loading spinner
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 usability.
Surprises and attention to detail are everywhere. One big reason for Dropbox’s early buzz was its video61, which it posted to Digg as “Google Drive killer coming from MIT startup.” It was carefully crafted for that audience, with a lot of things left to be 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 Houston62.
Three Diverse Examples Of Personality Link
Up to now, we have looked at various aspects and examples of emotional 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) Link
is a marketplace for activities run by users. As such, its developers have to worry about broad appeal.
Gidsy’s main color palette is blue and white, a combination known to be liked and trusted. It is no coincidence66 that Facebook, Twitter, LinkedIn67 and countless other brands use some shade of blue. While you’re at it, have a look at BaseKit’s infographic about the psychology of color68.
Gidsy’s personality is defined by a thoughtful use of vintage images, lighthearted copy and surprise elements.
Convey a feeling:can all . They are often used to make a point or emphasize an emotion.
Its vintage-styled 404 page epitomizes 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 rainbow, pointing you in the right direction and surprising you. Measuring how well that particular detail converts visitors into users would be interesting.
The rainbow playfully guides you to a “Learn more” button.
Copy: Simple copy with a bit of humor: “Well, hello gorgeous!” and “Booooom. Your photo was deleted.”
The page on which users upload their avatar.
The page on which users delete images.
Gidsy’s handbook has made it around the Web.
Newsletter: We’ll finish off our look at Gidsy with its recent newsletter, which just hit my inbox as I was about to finish writing this article.
See the tiny “please-reply” email address?
Gidsy has used another vintage shot to emphasize its message. Also, notice the tiny detail of the sender’s email address,
firstname.lastname@example.org, a friendly reminder that the company is listening and attends to the smallest of details. (I noticed that another Berlin-based startup70 started doing it first.)
Example 2: Automattic (General Web Hackery) Link
Automattic71 needs no introduction to this audience. It is a perfect example of how to integrate humor into a generally humorless environment: coding. It espouses Matt Mullenweg’s early mantra of “Code is poetry” anywhere it can. Let’s look at what it has done with its Web properties.
Humor: Automattic’s “About” page is a collection of good-natured bios. Mullenweg’s bio is this:
As the Chief BBQ Taste Tester of Automattic, Matt travels the world sampling cuisine and comparing it to the gold standard of Texas BBQ. Although he originally aspired to be a jazz saxophonist, Matt somehow wound up studying economics which took him to Washington D.C.[…]
Sounds like a fun place to work. Isn’t that exactly what most people reading the page would like?
Slogan: Automattic’s slogan is, “We’re much better at writing code than haiku.” This humorous line is what Automattic is all about, and it sets the tone for everything it does.
Microcopy: People notice tiny details. For example, in the footer of WordPress76’ 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 description shows the company’s love for its product.
Jetpack is “An Automattic Airline.”
Surprise: On Automattic’s Jetpack website, three jetpacks soar across the screen whenever the page loads, reinforcing the product’s name and exhibiting a love of detail.
Small jetpacks shoot across the background.
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 built in a little mechanism that turns the page into a gray and white canvas, creating a Matrix-like effect.
So, when you hit that button, accidentally or not, the whole page turns gray and simulates self-destruction mode, Matrix-style. In the end, WordPress reminds you not to let that happen again.
Automattic is a great example of how to show personality in a hacker-heavy environment.
Example 3: Clear App (To-Do App for Design-Savvy Users) Link
Emotional design can turn users into evangelists who share their positive 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, Clear84. It sure isn’t the first to-do app out there, but it cleverly targets iPhone users and designers with a sleek, minimal interface and a few interaction and transition patterns that have not been done yet. It’s the kind of thing that we iOS geeks just drool over.
People’s attention was captured not only by the design, but by some creative treats and surprises.
Playful: The app sets the tone for playing around and having fun.
Setting the tone: “Let’s explore.”
Surprise: On opening the theme settings page, people who have installed the Tweetbot app are greeted with this message and are given an extra Clear theme. Chances are high that people who use Tweetbot love it and would find this to be a welcome surprise.
If you have installed the popular Tweetbot app, you’ll get a bonus 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 cleverly engineered Easter egg hunt, resulting in an outburst of positive response by people on Twitter who shared their enthusiasm and compared which themes they had acquired and missed.
If you follow one of Clear’s creators, you are rewarded with a theme.
This is one of the best effects of emotional design. Not only will people enjoy using your product more, but they will share their excitement. And here is the proof on Twitter:
Some of the buzz that the bonus theme alone generated 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 Link
Emotional design is risky. Adopting a lighthearted tone when apologizing 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 improve. Showing that you’re listening and ready to learn exposes your humanity — putting you right back in emotional territory again.
MailChimp handles the risk of turning people off with an off switch, which it calls “party-pooper mode.”
Switch on “party-pooper mode.”
Or you could do it the other way and make some quirky behavior the non-default state. Facebook has an Easter egg of its own, letting you change the UI’s language to pirate talk. It actually makes me enjoy Facebook a little more.
This is really what it’s all about: helping users to enjoy something more — so much that they’ll share with friends and strangers.
Share Your Thoughts Link
Have you shared something lately that you were excited about because it was different, lovely, surprising, attractive or appealing in some way? Have you built something like that? Let us know in the comments section below!
- 1 http://www.flickr.com/
- 2 http://www.flickr.com/
- 3 http://aarronwalter.com/
- 4 http://en.wikipedia.org/wiki/Maslow's_hierarchy_of_needs
- 5 http://speakerdeck.com/u/aarron/p/learning-to-love-humans-emotional-interface-design?slide=6
- 6 http://aarronwalter.com/
- 7 https://www.smashingmagazine.com/2012/04/12/building-emotion-into-your-websites/
- 8 http://en.wikipedia.org/wiki/Pleasure
- 9 http://www.jnd.org/dn.mss/emotion_design_attractive_things_work_better.html
- 10 http://thegodfounder.com
- 11 http://www.huffingtonpost.com/kari-henley/what-are-the-top-10-posit_b_203797.html
- 12 http://whittleidea.com/blog/is-your-start-up-idea-already-taken
- 13 http://builtwithbootstrap.com/
- 14 http://www.psychologicalscience.org/index.php/news/releases/people-mimic-each-other-but-we-arent-chameleons.html
- 15 http://uxmag.com/articles/the-psychologists-view-of-ux-design
- 16 http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final
- 17 http://highrisehq.com/
- 18 http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final
- 19 http://venturebeat.com/2012/01/28/cant-look-away/
- 20 http://www.threadless.com/
- 21 http://www.threadless.com/
- 22 http://www.etsy.com/
- 23 http://www.etsy.com/
- 24 http://www.uie.com/brainsparks/2011/01/25/the-public-groupon-voice-guide/
- 25 http://www.groupon.com/
- 26 http://www.groupon.com/
- 27 http://everyday-app.com/
- 28 http://everyday-app.com/
- 29 http://www.okcupid.com/
- 30 http://hunch.com/
- 31 http://hunch.com/
- 32 http://www.businessinsider.com/the-secret-to-pinterests-astounding-success-a-brilliant-sign-up-process-you-should-copy-2012-1?op=1
- 33 http://www.flickr.com/
- 34 http://www.flickr.com/
- 35 http://www.flickr.com/
- 36 http://www.flickr.com/
- 37 http://www.tumblr.com/
- 38 http://www.hipmunk.com/
- 39 http://www.hipmunk.com/
- 40 http://stackoverflow.com/
- 41 http://stackoverflow.com/
- 42 http://thermo.me/
- 43 http://thermo.me/
- 44 http://37signals.com/
- 45 http://37signals.com/
- 46 http://www.zaarly.com/
- 47 http://www.zaarly.com/
- 48 http://estromberg.com/post/17714739482/emailengagement
- 49 http://www.quora.com/
- 50 http://www.quora.com/
- 51 http://www.fourhourworkweek.com/blog/2012/05/31/the-most-successful-e-mail-i-ever-wrote/
- 52 http://www.cdbaby.com/
- 53 http://www.flickr.com/photos/shifted/732312273/
- 54 https://www.google.com/
- 55 https://www.google.com/
- 56 http://lmgtfy.com/?q=do+a+barrel+roll#
- 57 http://vimeo.com/34081566
- 58 http://www.youtube.com/watch?v=C-PkQRh3QXA
- 59 http://getpocket.com/l/
- 60 http://www.glasshouseapps.com/quip/
- 61 http://www.youtube.com/watch?feature=player_embedded&v=7QmCUDHpNzE#!
- 62 http://ecorner.stanford.edu/authorMaterialInfo.html?mid=2983
- 63 https://www.dropbox.com/
- 64 https://www.dropbox.com/
- 65 http://littlebigdetails.com
- 66 http://karenhaller.co.uk/blog/social-media-branding-the-colour-psychology-of-blue/
- 67 http://www.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-world
- 68 http://www.basekit.com/the-psychology-of-colour-infographic
- 69 http://www.iawriter.com/
- 70 http://thegodfounder.com/post/14263587635/email-readmill-readmill-takes-another-approach
- 71 http://automattic.com/
- 72 http://automattic.com/about/
- 73 http://automattic.com/
- 74 http://automattic.com/
- 75 http://automattic.com/about/
- 76 http://wordpress.com/#footer
- 77 http://wordpress.com/#footer
- 78 http://wordpress.com/
- 79 http://jetpack.me/#jp-footer
- 80 http://jetpack.me
- 81 http://wordpress.org/
- 82 http://wordpress.org/
- 83 http://techfleece.com/2011/08/15/how-to-find-the-hidden-matrix-easter-egg-in-wordpress/
- 84 http://www.realmacsoftware.com/clear/
- 85 http://vimeo.com/35693267
- 86 http://dribbble.com/search?q=clear
- 87 http://www.realmacsoftware.com/clear/
- 88 http://www.realmacsoftware.com/clear/
- 89 http://www.realmacsoftware.com/clear/
- 90 http://www.realmacsoftware.com/clear/
- 91 http://www.realmacsoftware.com/clear/
- 92 http://mailchimp.com/
- 93 http://speakerdeck.com/u/aarron/p/learning-to-love-humans-emotional-interface-design?slide=81
- 94 http://www.facebook.com/
- 95 https://www.smashingmagazine.com/the-personality-layer-related-resources/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.