The Personality Layer

Advertisement

“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.

Flickr says hi to its users.1
This is how Flickr392 greets its users, changing the language upon every sign-in.

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

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.

The Maslow Equation5
Maslow’s hierarchy of human needs (left) and the hierarchy of emotional design (right). (Image: Aarron Walter6)

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:

  1. You create something unique that transcends your own style and that evokes a positive response in users;
  2. 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

The goal is to connect with users and evoke positive emotions. Positive emotions8 instill positive memories and make users want to interact with your product in the future.

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:

  • Positivity
    See the article “What Are the Top 10 Positive Emotions11.”
  • Surprise
    Do something unexpected and new.
  • Uniqueness
    Differ from other products in an interesting way12.
  • 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 expecting it.

Now, let’s see these principles applied to actual products.

Practical Examples Of Emotional Design

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

Smile

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 Landing Page16
The Highrise17 landing page, with real customers.

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

Smiles seem to work in highly abstract form as well.

Threadless Cart20
Threadless’21 shopping cart shows emotions.

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

Attention

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.

Music

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.

Etsy User Retention22
Etsy23 plays “Every Time You Go Away” by Paul Young when you leave.

Edgy humor

Groupon probably wouldn’t be able to change the mind of someone who is determined to leave its service, but its video24 definitely fits the playful tone25 of Groupon’s copy.

Groupon User Retention26
Groupon27 gets edgy.

Copy

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.

Levity

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.

Everyday Copy28
Everyday’s29 onboarding process

Contrast

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 Copy30
Skitch’s31 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.”

32
“Ahh, Prague”

Microcopy

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.

Hunch Sign Up Copy33
Hunch’s34 way of assuring prospective users of the safety of their data.

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.)

Milk Subscribe Copy
Milk promises infrequent emails and teases with early access.

Microcopy 3

Here is another approach from an as-yet-unreleased project of mine. The branding is lighthearted, so I’ve crafted this microcopy35 to accompany the invitation form. Hopefully, people will be more at ease submitting their address.

36
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 process37.

Error Pages and Downtime

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

Flickr says it’s having a massage. It’s not brilliant, but it’s better than an annoying error message.

Flickr Downtime38
Flickr392 is having a massage (Image: Luke Beard40)

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 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.

Flickr Tubes Are Clogged41
The competition when Flickr’s42 tubes are clogged.

Sorry but…

… 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 Downtime43
Tumblr supports people in need.

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 information, consider doing something on the screen, such as displaying a tip.

Hipmunk Waiting Tips44
Hipmunk45 bridges screens with helpful information.

Humor

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.

Stackoverflow Bots46
Stack Overflow47 explains why it has to annoy 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 personal details.

The landing page of the Thermo48 app detects your location and updates the graphics on the left, telling you the temperature of your location.

Robocat Responsiveness49
Thermo detects your location and turns it into something valuable.

You don’t even need that much information about visitors. 37signals50 demonstrates a simple way to be attentive to visitors, without any knowledge of them whatsoever.

51
37signals wishes you a happy whatever-day-of-the-week-it-is.

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: information, exclusive offers, humor, etc.

Telling a story

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.

Zaarly Newsletter52
Zaarly53 highlights its favorite happenings on the website.

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 recipient’s name to an email’s subject line increases conversions54.

55
Quora56 extends your social graph and suggests reading tailored to you.

Surprise copy

Notification emails are usually all business. But when someone takes time to make something a bit more special57, 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.

CD Baby Notification Email58
The copy for CD Baby’s notification email. (Image: The Shifted Librarian59)

Storytelling

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 down60, telling you that he’ll protect your data soon.

Ben the Bodyguard61
Ben the Bodyguard62 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.

Ben the Bodyguard63
Notifications from Ben

Easter Eggs

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 Google64
Google’s65 “Let it snow” Easter egg

Let it snow

A while back, Google made it snow on its home page. It also let users do a barrel roll66.

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.

Mascots

MailChimp has a distinct personality that deserves all of the attention67 that it has attracted68. A few details are worth pointing out.

The joking mascot

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.

Mailchimp Speaking69
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

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 pool70.

Mailchimp Login71
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 Login72
Pocket’s log-in screen

Attention to Detail and Surprise

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 Wings73
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 video74, which it posted to Digg as “Google Drive killer coming from MIT startup75.” 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 Houston76.

77
Keira is hot. An “accidental” status message during the Dropbox78 demo.

To get inspired with details, check out the great Tumblog Little Big Details79.

Three Diverse Examples Of Personality

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)

Gidsy80 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 coincidence81 that Facebook, Twitter, LinkedIn82 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 color83.

Gidsy’s personality is defined by a thoughtful use of vintage images, lighthearted copy and surprise elements.

Convey a feeling: Vintage images84 can be found85 all over the website86. They are often used to make a point or emphasize an emotion.

Gidsy Vintage Style87
Its vintage-styled 404 page epitomizes Gidsy’s88 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 Gidsy Rainbow89
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.”

Gidsy Choose Avatar90
The page on which users upload their avatar.

Gidsy Delete Image91
The page on which 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 section92. Handbooks usually are a dull experience — but not this one. It has already generated a lot of buzz and links in the design community, so you might have already seen it. Notice the subtle nod to iA’s Writer app93?

The Gidsy Handbook94
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.

95
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, please-reply@gidsy.com, a friendly reminder that the company is listening and attends to the smallest of details. (I noticed that another Berlin-based startup96 started doing it first.)

Example 2: Automattic (General Web Hackery)

Automattic97 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.

Automattic About Us98
Automattic’s99 “About” page, packed with humor.

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.

WP Haiku100
What Automattic101 is all about

Microcopy: People notice tiny details. For example, in the footer of WordPress102’ 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.

Automattic Medley103
WordPress104 is “An Automattic Medley.”

Automattic Airline105
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.

The Jetpacks Moving106
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.

Follow the White Rabbit107
WordPress’s108 self-comparison solution.

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.

TechFleece has a detailed description of how to find WordPress’ Matrix Easter egg109.

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)

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, Clear110. 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.

Anticipation: Realmac published a video111 before the launch that cleverly raises anticipation of the product. The video spread in some parts of the design community112 rather quickly.

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.

Clear App Let Us Play113
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.

Clear App Tweetbot Theme114
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.

Clear App Scorched Theme115
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:

That's what Happened when Clear Launched116
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.

Clear App - Splash Page117

The second time, however, you are shown a motivational quote:

Clear App Quotes118

Final Words On Benefits And Risks

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.”

The Party Pooper119
Switch on “party-pooper mode.”

So, if you really don’t like the chimp, you can disable him. Apparently, not many do120.

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.

121

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

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!

And if you’d like to learn even more about emotional design, here is a good list of further resources122.

Footnotes

  1. 1 http://www.flickr.com/
  2. 2 http://www.flickr.com/
  3. 3 http://aarronwalter.com/
  4. 4 http://en.wikipedia.org/wiki/Maslow's_hierarchy_of_needs
  5. 5 http://speakerdeck.com/u/aarron/p/learning-to-love-humans-emotional-interface-design?slide=6
  6. 6 http://aarronwalter.com/
  7. 7 http://www.smashingmagazine.com/2012/04/12/building-emotion-into-your-websites/
  8. 8 http://en.wikipedia.org/wiki/Pleasure
  9. 9 http://www.jnd.org/dn.mss/emotion_design_attractive_things_work_better.html
  10. 10 http://thegodfounder.com
  11. 11 http://www.huffingtonpost.com/kari-henley/what-are-the-top-10-posit_b_203797.html
  12. 12 http://whittleidea.com/blog/is-your-start-up-idea-already-taken
  13. 13 http://builtwithbootstrap.com/
  14. 14 http://www.psychologicalscience.org/index.php/news/releases/people-mimic-each-other-but-we-arent-chameleons.html
  15. 15 http://uxmag.com/articles/the-psychologists-view-of-ux-design
  16. 16 http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final
  17. 17 http://highrisehq.com/
  18. 18 http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final
  19. 19 http://venturebeat.com/2012/01/28/cant-look-away/
  20. 20 http://www.threadless.com/
  21. 21 http://www.threadless.com/
  22. 22 http://www.etsy.com/
  23. 23 http://www.etsy.com/
  24. 24 http://www.groupon.com/unsubscribe
  25. 25 http://www.uie.com/brainsparks/2011/01/25/the-public-groupon-voice-guide/
  26. 26 http://www.groupon.com/
  27. 27 http://www.groupon.com/
  28. 28 http://everyday-app.com/
  29. 29 http://everyday-app.com/
  30. 30 http://skitch.com/
  31. 31 http://skitch.com/
  32. 32 http://www.okcupid.com/
  33. 33 http://hunch.com/
  34. 34 http://hunch.com/
  35. 35 http://current.li/
  36. 36 http://current.li/
  37. 37 http://www.businessinsider.com/the-secret-to-pinterests-astounding-success-a-brilliant-sign-up-process-you-should-copy-2012-1?op=1
  38. 38 http://www.flickr.com/
  39. 39 http://www.flickr.com/
  40. 40 http://twitter.com/#!/LukesBeard/status/120071272397934592
  41. 41 http://www.flickr.com/
  42. 42 http://www.flickr.com/
  43. 43 http://www.tumblr.com/
  44. 44 http://www.hipmunk.com/
  45. 45 http://www.hipmunk.com/
  46. 46 http://stackoverflow.com/
  47. 47 http://stackoverflow.com/
  48. 48 http://thermo.me/
  49. 49 http://thermo.me/
  50. 50 http://37signals.com/
  51. 51 http://37signals.com/
  52. 52 http://www.zaarly.com/
  53. 53 http://www.zaarly.com/
  54. 54 http://estromberg.com/post/17714739482/emailengagement
  55. 55 http://www.quora.com/
  56. 56 http://www.quora.com/
  57. 57 http://www.fourhourworkweek.com/blog/2012/05/31/the-most-successful-e-mail-i-ever-wrote/
  58. 58 http://www.cdbaby.com/
  59. 59 http://www.flickr.com/photos/shifted/732312273/
  60. 60 http://benthebodyguard.com/index.php
  61. 61 http://benthebodyguard.com/index.php
  62. 62 http://benthebodyguard.com/index.php
  63. 63 http://benthebodyguard.com/index.php
  64. 64 https://www.google.com/
  65. 65 https://www.google.com/
  66. 66 http://lmgtfy.com/?q=do+a+barrel+roll#
  67. 67 http://vimeo.com/34081566
  68. 68 http://blog.thegodfounder.com/tagged/mailchimp
  69. 69 http://www.youtube.com/watch?v=C-PkQRh3QXA
  70. 70 www.flickr.com/photos/freddievonchimp/sets/72157623138750445/with/4541691544/
  71. 71 www.flickr.com/photos/freddievonchimp/sets/72157623138750445/with/4541691544/
  72. 72 http://getpocket.com/l/
  73. 73 http://www.glasshouseapps.com/quip/
  74. 74 http://www.youtube.com/watch?feature=player_embedded&v=7QmCUDHpNzE#!
  75. 75 http://digg.com/news/story/Google_Drive_killer_coming_from_MIT_Startup
  76. 76 http://ecorner.stanford.edu/authorMaterialInfo.html?mid=2983
  77. 77 https://www.dropbox.com/
  78. 78 https://www.dropbox.com/
  79. 79 http://littlebigdetails.com
  80. 80 http://gidsy.com/
  81. 81 http://karenhaller.co.uk/blog/social-media-branding-the-colour-psychology-of-blue/
  82. 82 http://www.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-world
  83. 83 http://www.basekit.com/the-psychology-of-colour-infographic
  84. 84 http://gidsy.com/press/
  85. 85 http://gidsy.com/404
  86. 86 http://gidsy.com/jobs/
  87. 87 http://gidsy.com/404
  88. 88 http://gidsy.com/
  89. 89 http://gidsy.com/#footer
  90. 90 http://gidsy.com/
  91. 91 http://gidsy.com/
  92. 92 http://gidsy.com/handbooks/making-the-perfect-listing/
  93. 93 http://www.iawriter.com/
  94. 94 http://gidsy.com/handbooks/
  95. 95 http://gidsy.com/
  96. 96 http://thegodfounder.com/post/14263587635/email-readmill-readmill-takes-another-approach
  97. 97 http://automattic.com/
  98. 98 http://automattic.com/about/
  99. 99 http://automattic.com/
  100. 100 http://automattic.com/
  101. 101 http://automattic.com/about/
  102. 102 http://wordpress.com/#footer
  103. 103 http://wordpress.com/#footer
  104. 104 http://wordpress.com/
  105. 105 http://jetpack.me/#jp-footer
  106. 106 http://jetpack.me
  107. 107 http://wordpress.org/
  108. 108 http://wordpress.org/
  109. 109 http://techfleece.com/2011/08/15/how-to-find-the-hidden-matrix-easter-egg-in-wordpress/
  110. 110 http://www.realmacsoftware.com/clear/
  111. 111 http://vimeo.com/35693267
  112. 112 http://dribbble.com/search?q=clear
  113. 113 http://www.realmacsoftware.com/clear/
  114. 114 http://www.realmacsoftware.com/clear/
  115. 115 http://www.realmacsoftware.com/clear/
  116. 116 https://twitter.com/#!/search/useclear%20theme
  117. 117 http://www.realmacsoftware.com/clear/
  118. 118 http://www.realmacsoftware.com/clear/
  119. 119 http://mailchimp.com/
  120. 120 http://speakerdeck.com/u/aarron/p/learning-to-love-humans-emotional-interface-design?slide=81
  121. 121 http://www.facebook.com/
  122. 122 http://www.smashingmagazine.com/the-personality-layer-related-resources/

↑ Back to topShare on Twitter

Simon works on iubenda, obsesses over details at The Godfounder, and tweets at s2imon.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Flickr used to have a lot more personality before Yahoo started micromanaging them. Flickr used to say that it loved you, when so many web services were in perpetual “beta” for a while Flickr said it was in “gamma”, and I think there was a message that said “Take me back to the kittens!”. I think messages like that tell your customers that you enjoy your job, and people like to support companies that have happy employees. Most of those employees are long gone now, and people store their photos on Facebook. Sad.

    • 2

      I agree with what you’re saying, that’s partly the reason why I compiled this article. Also isn’t Flickr the best example of Emotional Design’s power? Now with Marissa as Yahoo’s CEO “the Internet” wants Flickr back, meaning the old awesome it was for many. People appreciate the love that goes into a product and they don’t forget.

    • 3

      I think the problem for many corporations is they want to appeal to the broadest base possible. Not all people speak good English. If you add humor to the site to give it emotional value, your users not only have to know basic English, but also understand English language nuances which are pop culture derived. Corporations don’t trust that their English speaking users from China, for example, will comprehend what “take me back to the kittens” means.

  2. 4

    @simon very nice article full of vivid examples!

    I would like to invite all readers that find this topic interesting and would like to learn even more to join us at the 8th International Conference on Design & Emotion in London this 11-14 september (we’ll make sure there is some of the Olympic vibe left to surf on). Get to know lots of people that have been fascinated by or studying this topic for many years and share knowledge, insights and of course the conference experience.

    The full program is available as of today: http://www.dande2012.com/programme_and_dates

    One of the workshops I will be facilitating is about emotional design in interactive visual interfaces (workshop 7: A digital love story)

    Hope to see you all there!
    Marco

  3. 5

    Wow! I think this is one the best articles that i read.

    I like the originality of some 404 pages.

  4. 6

    Rad article, Simon!
    I’m interested in websites that use storytelling to build memorable user experiences, particularly through a blog format. New businesses can establish a “narrative” through their company blogs or online features, to connect with users on an emotional level, and compel them to visit the site again and again.
    Starting a small business is a heroic tale in itself- why not use this to appeal to an audience online?
    A coffee shop in Vancouver, BC started logging photos and stories about starting their shop, six months before they opened to the public. Matchstick Coffee Roasters (www.matchstickcoffee.com) built a tale for readers to follow, and in the process, constructed an emotional connection to the business.
    I wanted to pass that along as a great example of storytelling online.
    Thanks again for the engaging read,

    Cheers,
    Sarah Bauer
    Navigator Multimedia

  5. 7

    Whoa – epic post, Simon! Thanks so much for sharing your insights… ty :)

  6. 8

    Awesome and informative article for sure! Thanks for the practical examples and case studies – those go a long way to making things more relevant.

    On a side note, in the book “Universal Principles of Design” the authors posit that there are two other levels in the design “Hierarchy of Needs.” After Functionality, Reliability, and Usability comes:

    “Proficiency – empowering people to do things better than they could previously”

    and finally

    “Creativity – the design after satisfying all other needs, is now used to create and explore areas that extend both the design and the person using the design.”

    Thought you might find that interesting!

    -J Cole Morrison

  7. 9

    This is one of the best articles from Smashing Magazine in a long time. Absolutely amazing! As a coder I get fed up of handling designs that are “unique”, “individual”, “fresh” and all the other buzzwords that many design companies feel they’re creating. But nothing makes my work more satisfying than applying some character and personality to a website. And being human!

  8. 10

    Thanks for the lovely comments everyone. Not much to say, I’m humbled.

  9. 11

    Great informative article and some beautiful examples. It’s all too easy for pleasure to be forgotten sometimes in the drive for functional usability. Getting a user to smile is a noble endeavour!

    – Jess

  10. 12

    I love the to the point listing of elements that make up emotional design and the thorough selection of examples. Very inspiring, thanks for sharing!

  11. 13

    John Surdakowski

    July 19, 2012 5:52 am

    It’s a shame that most major companies do not embrace emotional design. I worked in pharma for a few months last year, and they were so cold with every interaction. You would think in a field where you are trying to help people, they would wanted to connect on a human and emotional level.

    But I guess they don’t want to risk a change in that bottom line.

    • 14

      ^ “It’s a shame that most major companies do not embrace emotional design. ”

      How “emotional” does a frying pan have to be?
      Furthermore, ‘cold’ is an emotional state, albeit not the most immediately attractive one.

      One person’s “cheery greeting” is another person’s “Do you not see the gravity of the situation? We’re at a funeral man!”

      Social and cultural differences make these attempts even more of a minefield.
      Companies are best suited to NOT attempt to engage clients and customers in those areas, and focus instead on application stability and security.

      Sometimes you just want to FRY AN EGG, not find a new buddy.

  12. 15

    This is a great post Simon. Especially relevant as we develop the first iteration of our product. We believe that personality and UX are our keys to helping users battle overconsumption and information overload at Skim.Me. Personality and emotional design are differentiators and competitive advantages that most companies don’t think about – they don’t get past functionality and usability. Your product/service must add value to a user but beyond that baseline the personality layer is what makes it sticky.

  13. 16

    I think some of these so-called personalities can get a bit naval gazing, narcissistic at times. The challenge (or the wisdom, if you will) is when and where to use “cheery greetings” and Easter eggs, and when to get to point in a honest, direct way.

    Packaging designers have know the value of “emotional design” for decades. Don Norman’s book on Emotional Design is a great resource for those interested in this subject at broader design level.

    Nice article, thank you.

  14. 17

    Great roundup of examples! I agree with Tushar that there’s a right balance in terms of personality and how it reflects your brand. I see some great examples of product voice that sound great for a young product, but you have to wonder, for example, how Tumblr’s voice will age as the product evolves. You don’t want to be accused of not acting your age or trying too hard. But I also love when a product really builds an emotional connection through these small, simple messages.

  15. 18

    Just a short one – the term Emotional Design was coined only Donald Norman (not among others) and not from Aarron Walter. He just applied it to web design. But a brilliant read nevertheless, bring more of that stuff please :)

  16. 19

    Genius ! thanks thats really clever.

  17. 20

    great post with super ideeas!

  18. 21

    Great articles require simple option to print / save as pdf!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top