Emotions in web design

Emotions play a most important role in the way people make decisions. It seems to me the general pattern of our decision process of the modern man 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 “choice” mental space and rather directly jump to the “trust your guts” part.

Bypassing the logical assessment part is ok if the choice is about which hamburger you’ll eat. But what’s about that big red button that could start the ultimate nuclear war? Surely you’ll want to make sure the decision motivating the gesture is not based on emotions, but rather on a rationale that will stand against future historical analysis (not that there would be much after hitting that button, but you got the point, right?).

Emotions in web design: examples

Emotions. You wouldn’t want to live without emotions, right? So : design emotion-centric interaction environments. Every little detail counts. Here is a collection of emotional bits i’ve collected. I’m updating it regularly, so keep visiting!

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.

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, the website has 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 nice-looking female receptionist: they put you in direct contact with one of their developers. In ancient business culture, you try to avoid that, because typically developers on a salary don’t bill their time (that’s why managements put account managers in between customers and developers).

Louis C.K. cracks me up, and his graphically poor website does feel home-made and genuine thanks to that. So see, graphical improperness is sometimes good.
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’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.

There is a lot more to say about emotions and web design, but this was meant as a quick post. Let me get back to you on this topic a bit later. And in the meanwhile, if you find other great examples of emotion design on the web, fire up a comment!