Emotions play a crucial role in the way people make decisions. How can we, as web designers, acknowledge that in our practice?

It seems to me the general pattern of the modern man’s decision process goes pretty much like this:

  1. logical assessment of all available options : we identify options through a (mostly) rational information gathering process,
  2. trust the guts : if there is no clear winner between option A and option B (and in our complex world, there rarely is), we “trust our guts”, which is just a metaphorical way of saying that we choose what “feels” right.

But of course, most of the time, let’s admit it, we completely bypass the “logical assessment of all available options” part, because it takes time, and in a sense, choice is a “painful” thing: it means gaining something, but also giving up that other thing. So we ‘d rather not linger too long in the uncomfortable “choice” mental space and rather directly jump to the “trust your guts” part.

A big " Nuke'em all" button

Bypassing the logical assessment part is ok if the choice is about, say, which hamburger you’ll eat. But what about that big red nuke button that could start the ultimate nuclear war? Surely you would not want that the decision triggering the action be based on emotions, but rather on a rationale that will stand against future historical analysis  (not that there would be much of that after hitting that button).

Emotions in web design: examples

Emotions. Is a life worth living without emotions? The digital world is a mediated channel, but what we experience through it is as real as a walk in the forest. There are no such thing as virtual emotions. In fact I sometime wonder if there is anything virtual about the thing that goes on in our screens. Virtual means “possible”, not “unreal”. Never understood how it became an adjective for the things we do digitally. but i’m drifting away.

So I guess my point is : designers of digital worlds, design emotion-centric interaction environments. Every little detail counts. A nice place to start is wherever your product creates frustrations. As in 404 pages for instance.

Here is a collection of emotional bits in web design that i’ve scavaged across the internet.

I’m updating it regularly, so keep visiting, and feel free to share your emotion-related urls in the comments.

Tympanus.net says you ‘re a scientist

Tympanus - 404
One in many examples of funny 404 pages, Tympanus.net 404 Error page turns a usual source of frustration into a (good) joke. (Of course, keep in mind a joke only works once, so you’re not supposed to have too many 404 pages, hu hu hu.)

Mint.com is close to you

mint.com - 404 Error page
Here is another 404 page example, which “dodges the bullet” of your wrath by trying to connect interpersonally. We are hardwired to react to faces, so here goes Justin, which we all assume is a cool guy working at mint.com.

The story is: “ok, this website is having a hiccup, but let’s not let that get in the way of us doing business together”. Also, notice how they don’t present you with the usual nice-looking female receptionist stock photo: they put you in direct contact with one of their developers. In ancient business culture, you would never do that, because typically developers on a salary don’t bill their time (that’s maybe one of the reasons why management puts account managers in between customers and developers).

Louis CK and the graphical language

Louis C.K. cracks me up.   His website, which does not fancy a slick look (much like the man itself), does feel home-made and genuine. Actually, maybe because it is a graphically poor experience. So see, graphical improperness is sometimes good.

Louis C.K: opt-out message

Respective to its personality, the website language is much more graphical, as in this opt-out message which litterally put the words into the user’s mouth in an (emphatic) attempt to connect with the feeling of someone who would choose that opt-out option. Ironically, that little touch could be considered like an ultimate attempt to have the user not opt-out.

foursquare feels your pain

Foursquare 505 Error page
Foursquare’s 505 Error page plays on honesty: a 505 error means that somehow their technical infrastructure is having an issue. Not you, the user. Their server fails, so they fail to serve you, therefore for both reason they feel miserable, like this little girl. They don’t try to dodge the bullet, they recognize honestly their responsibility in this failure.

Appsumo is sad to see you go

In the same manner as foursquare – perhaps more humorously, Appsumo.com ‘s boss is waving you goodbye when you unsubscribe to their list.


Typecast.com thanks you personally for subscribing… May soften the unwelcomed information that they’ve charged my credit card °-).

Typecast - Thank you for subscribing page
Typecast – Thank you for subscribing page

You can find many other great examples of emotion design on the web on Oops!