Not Just Pretty: Building Emotion Into Your Websites

Advertisement

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 at all; rather, they were drowned by a flood of rational functionality 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 Internet on our terms, we adapted to its 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 Emotional 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 products make problem-solving easier, which makes them absolutely essential. Emotional Design is Norman’s reaction to critics 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 Aarron Walter contributed another great book to this new era of design: Designing for Emotion. In this book, he defines emotions as the “lingua franca of humanity,” the native tongue that every human is born with. He describes how important emotional experiences are because they make a profound imprint on our long-term memory and create “an experience for users that makes them feel like there’s a 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 more 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.

head and heart
(Image credits: perpetualplum. and geishaboy500)

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. First, 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 internal 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 attention for the rest of the process, but it is 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 commit to a relationship with you.

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 matter to them, you will learn how to target your users. Without knowing your prospective users, designing something relevant that is both usable and pleasurable will be quite tricky.

Context of Use

Finally, think about the context of use. Knowing the situations and circumstances 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. It will help you reach out to your customers and to communicate with them more 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 appealing, effective, pleasurable and memorable design.

In a study 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 are conscious of our role in the world, a consciousness that enables us to reflect on our experiences. The three cognitive levels Norman has defined and applied to visual design are the visceral, behavioral and reflective levels. Let’s look at them one by one.

Visceral Level

The first and also lowest level is visceral. This is the level of preconsciousness, where emotional signals from our environment get interpreted 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 impact on us. Norman calls activities that are initiated from the visceral level “bottom-up behavior.”

For a visual design, this means that the visceral level has to do with the initial impact of the appearance, touch and feel. The visceral quality of a design can be studied by observing people’s first impression. A good visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited.

Vimeo Footer
Vimeo has an appealing footer. The design has no other function than to catch people’s attention. (Image: mattyschreck)

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 fulfill actual needs. Behavioral design needs to be understandable and usable. While confusion and frustration lead to negative emotions, fun, ease 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.

iPad split keybord
The iPad’s split keyboard has phantom buttons. This way, if you are used to typing the letter Y with your left hand, you can still do it. (Image: Finer Things in iOS)

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 overrule both automated behavior and emotional impact.

In visual design, expertise enables us to respond differently to a design than if we had no idea what we are looking at. The reflective design 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.

US highway map
US highways mapped like a subway system. This infographic has a great reflective design. (Image: Cameron Booth).

In every 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 at least be addressed. These different levels of visual design might conflict, though. For example, our opinion of a design after having thought about it might diverge from our initial impression of it. Also, people interpret designs differently and have different preferences for the visceral, behavioral and reflective qualities of a design.

So, the appearance of a design makes up only one level of visual design — the visceral design. The behavioral level relates to how the product 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 looking for.
  • 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 elements 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, dissonance, tone of voice and engagement. Let’s look at the less obvious ones.

Humor

Humor is an effective way to connect with people. A good laugh or even a little smile can break the ice and make people feel comfortable, whether it’s on the street, in the company of friends or on your website. However, humor is also a delicate matter because it is extremely difficult to generalize. What’s hilarious for one person might be ridiculous, embarrassing 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 smile, but avoid making people feel uncomfortable and especially offending them by any means. And don’t forget that the extent of humor on your 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 “welcomes users and makes them feel at home.” Freddie perfectly mirrors the brand’s traits, such as trustworthiness, simplicity and informality, without making the whole website look goofy. The mascot works because Freddie cracks jokes that “you can share with your mama,” but at the same time he never gets in the way of your workflow. This is important. Humor can get people involved, but it should never annoy visitors.

mailChimp mascot
Freddie, the cartoon mascot of MailChimp, is a great emotion carrier 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 appreciate 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, dilemma, 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 recognition of our body’s proportions in a design is enough for us to perceive the design as being familiar and harmonic. This reason for this is the golden ratio, which helps us feel connected to a design because we link the abstract concept of proportion to our own body.

By recognizing ourselves in a design, we sense that there is more than just a screen with a bunch of code and images. We perceive human presence, which makes us feel comfortable and connected. Walter describes the personality of a website as the key to making a design more human.

golden ratio of twitter redesign
Twitter based its redesign entirely on the golden ratio. (Image: Doug Bowman)

Dissonance

Another trait that characterizes us as 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 article “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 information 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 website 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 patterns, 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 out of their habits and would welcome some distraction; they might see the dissonance with their expectations as a 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 intend to find certain information, make sure to meet their expectations 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.

Subplot Design
The branding firm Subplot has a clear layout for its website, but the navigation is fun and out of the ordinary; it engages people, while still being easy to use.

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

Wufoo Website
Wufoo creates a distinctive environment for conducting surveys through its tone of voice.

Engagement

A perfectly usable and accessible website could still have a high bounce rate, a low number of sign-ups, or no characteristics worth remembering. In his presentation on “The Art and Science of Seductive Interactions,” 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 personalization 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 interaction 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 in.

Slavery Footprint
On Slavery Footprint, users can learn about their impact on slavery in an interactive and engaging way.

Conclusion

Emotional design turns casual users into fanatics, ready to tell 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 (usability), and the reflective level (personal satisfaction, self-image and remembrance). 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

↑ Back to top

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 designers among you, check out Usabilla's new tool at discover.usabilla.com and collect, rate, and share design elements on the entire web.

  1. 1

    Great article, lots of important points. Thank you Sabina

    0
  2. 2

    Great article. I think emotional design plays a huge role in solving the communications of the web. One thing we always need to remember in creating designs that push emotions, we still need to focus on content. We don’t want to overdo it and make content difficult to find or understand. I also think emotional design will take on an even greater purpose in responsive design. Creating positive experiences on our different devices is very important to a sites success. Your article definitely promotes design in a positive way so that both content and design works together nicely.

    Well done! Thanks for the great read.

    2
    • 3

      Hi Chris,

      I totally agree! The key is to find just the right balance between content, simplicity and that emotional aspect that let’s us really enjoy a website.

      3
  3. 4

    Kerry Kim Russo

    April 12, 2012 8:48 am

    Awesome read. I’ve yet to read Don Norman’s book but Aaron Walter does an excellent job of relating emotional design to situations we experience everyday in a tone that’s just as familiar. Sabina, you do just as good a job!

    1
  4. 5

    Nice article :-) For further reading I would also recommend Andersons book “Seductive Interaction Design”. He explains many of the points made in this article in more detail and also talks a lot about gamification.

    0
  5. 6

    Hey good article! I’m reading Aarron Walter’s book right now, and finding it incredibly insightful. I’d suggest anyone that likes this article take a look.

    It’s something we really need to address as designers, and push upon the powers that be to take online advertising, apps, and other digital related products to the next level.

    Thanks!

    1
  6. 7

    Great article! I couldn’t agree more.

    0
  7. 8

    Not only the content, but also the structure of the article is GREAT !
    Easy to understand, Lots of great points !

    I think it’s quite difficult for me to make a good emotional design, if that happens:

    “Design goals” V.S. “Commercial goals”

    0
  8. 9

    Interesting article! If anyone wants to get really deep into topic of understanding emotional responses you might want to check out “Thinking, Fast and Slow” by Daniel Kahneman.

    Putting “Designing for Emotion” on my to read list right now!

    1
  9. 11

    Worth every line of text. A new approach and same time so simple and human.

    0
  10. 12

    Excellent resource! Bookmarked and Tweeted.

    As I’m about to engage in a massive site redesign, I’m considering every element possible to make the site stand out and convert better without being overly obnoxious.

    I’m starting to recognize more and more the websites that get this right, because using their site “feels good” is the only way to describe it.

    I started using the twitter web interface over tweetdeck for example. I can spend hours on fastcompany’s website as another.

    These sites really keep me drawn in, and I’ve found myself lost in them for hours. Facebook used to do this, keeping people hypnotized with their Facebook trance, but I feel like they’ve kind of missed the mark in the last redesign. Groups are cool, but the rest of it just isn’t as intuitive.

    Anyways, thank you for such an awesome article, I’ll be referencing it quite frequently through the redesign process.

    1
  11. 13

    Great article Sabina! We’ve implemented this tool on our site, i actually created a screen cast to show our contact us page in action – http://www.screenr.com/Tox8 Result – we do get mentions of it in our inquiry emails. :)

    4
  12. 14

    Rafael Paranaíba

    April 13, 2012 7:02 am

    Everybody should read the book Emotional Design: Why We Love (or Hate) Everyday Things. Seriously.

    5
  13. 15

    This article is good, but far too long. You are writing to the web. We want brief stories here. Nonone need introduction …. , and fundamentals. Those things have been discussed here 1000 times, years ago. Please use the inverted pyramid, and start with the most interesting conclusion.

    -11
    • 16

      Hi,
      Thanks for your feedback, I guess you have a point there. I’ll keep that in mind for the next article I write.

      -1
    • 17

      I agree with the overall argument (if not the tone, which was unnecessarily rude)

      Waaay too long, “cut & pastey” article :(

      0
  14. 18

    Your vimeo example of a visceral reaction inspired me to put in a new footer. It might be a little much, but I’d been holding onto gray and white too long. What do you think of this bright orange @ AllenBooth.com

    0
    • 19

      Hi Jotham, I’m glad you got inspired by my article. I looked at your page and I like the orange. It goes very nicely with your color scheme and energizes the site. However, the footer image loads very slowly and I would think about a design that better suits the overall style of the site. Since the color itself is already quite ‘noisy’, you might want to stick with a more simple design.

      0
      • 20

        Hi thanks Sabina,
        Everyone else hated it (except my wife, who loves those colors!). So we went black and white again. You’re saying less noisy design, but the orange is okay… May try that in next iteration… thanks much! Do like something that “energizes” the site :)

        0
  15. 21

    Sabina

    Thank you for a very informative and helpful article. I particularly enjoy the recaps of the book since it helps people like me who hasn’t read the book yet.

    0
  16. 22

    Good article! I think we should also talk about storytelling. For me an user experience with a site is like a story, what you do on the site from start to finish is a journey and design should support the story. You mentioning this in your conclusion and it’s something that is really important. Ordering a book or uploading a video should trigger a celebration, your user should feel like it has reached the end of the story and when it does it again it should feel exited about it, it should be rewarded to come back to an old friend. And emotional design is not just for transactional sites or tools. We just launched insanelydriven.com and have thought long and hard at our audience, tone of voice and humor. This is why we went with a POV experience to put the user at the heart of the action, this is why there is practically not cut for the scenes as there is no cut in life and this is why the main character talks to you, it takes you through a journey. The test is about 10 minutes long so the pace speed up as you go along to keep the user engage, to reward him, to let him carry on. Granted our site is technically a one off visit but in fact it’s even more important to emotionally engage the user as we only have one shot. We use colours for the interaction, the rest is monochrome to let the performances shines. Hope you like it

    0
    • 23

      Hi Christophe,

      thanks! I just took your test and I haven’t been engaged that much in a long time! You totally got me! The only thing I caught myself doing at one point, was going for the answer that I expected to give me the funniest response. You definitely got my attention, but I’m not sure how accurate the results are. Still, I loved it! great job!

      0
  17. 24

    Hi Sabina,

    Great article which I stumbled across through Usabilla’s article (http://blog.usabilla.com/how-to-design-for-the-user-experience/).

    I agree with Chris Da Sie’s comment about remembering to focus on content. I’m doing some work on improving an information heavy website and studying the emotions of customers is really important. After a customer journey mapping exercise on a particular task it’s good to stop and think about the emotions a customer is going through at that point. Take your local Council – if you’ve got a parking ticket you’re going to be in a frustrated mood so the content should be written to the point with very clear instructions. However if you want information about a local park or leisure facility, you want the content provided to you in a contented way with descriptive words and pictures. I consider this part of the emotional design too!

    Thanks for a good read.

    0

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