Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Optimizing Emotional Engagement In Web Design Through Metrics

Think about what keeps you coming back to your favorite store, your favorite person or even your favorite website. It’s not just a mindless buy-go, hug-go or click-go relationship. It is a complicated, emotional connection. It is what makes relationships with people and brands intoxicating. User engagement must have an equally complex emotional connection. It must affect the user in mind, body and spirit. Anything less is a 1990s brochure website.

You can create strong storytelling strategies based on user personalities and segmentation. However, it seems almost impossible to measure those efforts, let alone know how to optimize them, without access to a neuroscience laboratory1. In fact, emotional engagement can be optimized, and quite effectively, using something already at your disposal: performance metrics2.

Further Reading on SmashingMag: Link

Emotional-Behavioral Response Relationship Link

Let’s start with the basics: an emotion is a psychophysiological response in your body to a stimulus. It’s an internal process that in turn triggers an external behavioral response. Behavioral responses help you decipher the emotional responses of others. Things like facial expressions and body language give you clues to whether the chef wielding the knife is angry and going to attack you or happy and going to make you dinner.

Cognitive Response Chart7

For example:

Cognitive Response Example via Monty Python8

But you don’t have to be face to face in order to read a person’s behavioral clues. In digital environments, users’ behavioral interactions with the platform can give you insight into their emotional states. Instead of reading facial cues to analyze how your UX efforts affect users, you can measure their responses via metric data. Metric data is a user’s behavioral response quantified. With a little reverse engineering, you can identify strong emotional triggers, optimize weak elements and create stronger user experience strategies, using psychology as your secret weapon.

By The Numbers: Behavioral Response Link

Behavioral psychologists have classified emotions in numerous different theories. A large majority of these theories agree that emotions manifest in various intensities and can even combine with others to build new emotional states. One example of such a theory is Robert Plutchik’s emotion wheel.

Plutchiks Emotion Wheel9
Plutchik’s emotion wheel.

When it comes to user experience, emotional engagement builds on itself as the user continues to interact not only with your platform, but with all aspects of your brand online, including SEM, press coverage and social networks. Emotional engagement with a digital product can be divided into four categories based on how much information and engagement the user has with your website: awareness, attraction, investment and adoption.

Awareness Link

Google Adwords Emotion Map10

User experience doesn’t start when they hit your landing page or start your app, but prior to it. Visitors have to make their way to your website in the first place. They’re navigating through websites full of frustration-inducing elements, trust-busting perils and anticipation-inducing amusements. The focus at this point is on building trust, anticipation and whatever other emotional responses you’ll target in your copy, imagery and overall storytelling11.

  • Track awareness-level engagement using metrics like page views, page hits, video views, impressions and click-through rates.
  • Identify emotional image and copy triggers during the development phase by A/B testing on micro-sites, as well as using ad content and email campaigns.
  • Create dynamic content that spotlights your SEM, SEO and advertising goals, giving users exactly what they want as soon as they hit your page.
  • Leverage strong referral sources and advertising platforms to build trust and credibility. The coffee vendors featured in the screenshot above use Google, and the companies featured to the right of this column you’re reading use Smashing Magazine to reach customers. By aligning their messages with these brands, they are able to build more trust in the user than an ad on a less relevant platform (like Craigslist) might have.
  • Use emotionally rich imagery in your advertising messages, and carry that messaging through to the website itself. “Fresh-roasted coffee” begins to paint an emotional picture for the user of that perfectly roasted cup of steaming delight first thing in the morning. If your click-through rate is low, then your ad may not be compelling enough.
  • Develop intuitive and relevant architecture to decrease frustration and increase trust. First impressions count. If the bounce rate is high or the time on site is low, then the story you are telling in the awareness phase might not be carrying though to the user’s interaction on the platform.

Attraction Link

Mailchimp Emotion Map12

Attraction-level engagement keeps users interested in your platform. Cohesion of the UX elements and usability is the name of the game. Building emotional engagement at this level is critical because behavioral engagement consists mainly of superficial interaction such as navigation and content absorption.

  • Track attraction-level engagement by looking at bounce rates, session lengths, pages per visit, abandonment rates, email opening rates and click-through rates.
  • Stay up to date on current trends in usability13 to create systems that are user-centric.
  • Identify high-focus areas in your user interface through eye-tracking14, heat maps and software that records mouse movement. Optimize your framework, and place emotion-building content in strategic areas.
  • Continue building and reinforcing motivational and emotional triggers through engaging imagery, emotionally charged words for headings and main copy, and persuasive triggers15. @Mailchimp publicizes a lot of “free”, “big” offers and uses bright imagery to boost joy and anticipation levels. Negative emotions, like sadness, can also build strong emotional engagement in users. Examples are the powerful images of animal cruelty often seen in PETA and ASPCA campaigns.
  • Highlight brand relationships, security measures, press and endorsements. Aligning your product with other respected brands builds trust. The list of brands that Mailchimp uses to show its press features builds an impressive amount of credibility. This is immediately followed by the call to subscribe by email. Putting the call to action after the trust-building credentials is more effective than the other way around.
  • Develop proper system-generated feedback and error handling. This could include loading notices and 404 pages with content referrals, which reduce abandonment due to user frustration.

Investment Link Emotion Map16

Investment-level engagement involves a commitment from the user. It moves beyond a simple navigational interaction; the user is no longer behaving based on curiosity and anticipation alone. The user is interested in what you are offering, they trust your credibility, and they anticipate further interaction; thus, they act appropriately. They are now engaged enough to invest time, or do something risky like download a file or submit credit card information, or assume an identity (real or fictitious), stepping out of the role of anonymous Web surfer.

  • Track investment-level engagement by tracking your social network followers, RSS feed or podcast subscribers, email newsletter subscriptions, file downloads, e-commerce conversion rates, purchase line items (both items and amount), community sign-ups, and warm leads.
  • Leverage your existing community17 to motivate others to action. leverages its community to build trust, and its strong messaging of love and belonging and its interesting interface build joy in users.
  • Minimize frustration by requiring the fewest steps possible to achieve the objective18. For example, allow users to order without logging in. The more information you require (such as Social Security or credit card numbers), the more trust you will have to build.
  • Reiterate trust, security and credibility elements during the check-out or registration process.
  • Monitor your online reputation.

Adoption Link

Chipotle Emotion Map19

Adoption entails users accepting the website structure as a common platform for interaction or knowledge on a subject. Emotional engagement is extremely high, and interaction is consistent. If investment-level engagement gets users involved, then adoption-level engagement makes them your cheerleaders.

  • Adoption-level engagement can be seen in return customers, unique versus returning visitor ratios, geo-location check-ins, and participation in “karma” systems (badges, etc.), to name a few.
  • Use strong social interfaces20 to spotlight followers, supporters and die-hard addicts.
  • Put community-building messaging in your copy. “Colbert Nation,” “Psychos,” “Gleeks” and “Chipotle for Life” are elements that brands use to add excitement and enthusiasm to their products and reinforce the emotional engagement of their communities.
  • Make it easy for users to integrate the product into their daily lives, as Foursquare, Facebook and Twitter do via apps and open APIs.
  • Invite fans to help shape your future, and make it easy for them to share information, spread your brand and recruit their network.
  • Let users play. It’s just a burrito wrapped in foil, but @Chipotle builds an addictive community element into its website by combining joy, trust and anticipation with quick, simple interactive elements.

Summary Link

So, what keeps people coming back? Or more to the point, what keeps them from coming back? Using metric data, we are able to trace behavioral and emotional responses to identify the weak spots in our storytelling strategies. By identifying and optimizing these areas, we’re able to make our products better, faster, stronger.

These are just some of the ways to quantify emotional engagement strategies. How do you measure your engagement successes? Share in the comments below.

Resources Link

Looking for more information?

  • UX Booth21
    A great resource on all things user experience. It goes into detail on many of the subjects touched on here.
  • Occam’s Razor22, Avinash Kaushik
    A blog dealing with Web analytics and its practical applications.
  • Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets23
    A very good introduction to all things analytics, via Occam’s Razor.
  • A Cognition-Emotion Integrated Model of Media Message Processing, International Communication Association
    Looks at the significance of communication messages in the cognitive-emotion-behavior relationship.
  • Affective Computing Group24, MIT Media Lab
    Always has interesting projects on the affective-cognitive experience of human and technology. Many studies are publicly available in PDF.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24

↑ Back to top Tweet itShare on Facebook

Shell is a compulsive adventurer, gardener, sender of happies & seeker of *swoon*. She enjoys meeting new people on twitter so go meet her here.

  1. 1


    May 19, 2011 3:22 am

    I really like this take on web design and online marketing. It takes the (much discussed) concept of ‘social brands’ and makes sense of it all. The detail and logic is much appreciated so thanks for that.

  2. 2

    Jöran Aerns

    May 19, 2011 1:16 am

    Great article, very informative and shows an effective way to discover how the emotional engagement of your users is.

  3. 3

    Marco van Hout

    May 19, 2011 1:30 am

    Nice article Shell. It is a pity you didn’t refer to LEMtool for emotion mapping of websites. This tool that SusaGroup has been developing since 2007 has proven itself to be highly effective in letting users evaluate the emotional impact of websites.

    The non-verbal approach in emotion self report has been validated in many studies performed by us and people at Delft University of Technology, such as dr. Pieter Desmet. We are about to publish new research done with the LEMtool showing the ability of this tool to measure visual appeal and affect in websites.

    For more information, contact me or have a look at, or its makers

    Keep up the good work!

  4. 4

    Vangelis Makridakis

    May 19, 2011 1:53 am

    Nice article, helpful for those who don’t know the psychology of a web page :)

  5. 5

    Umer Farooq

    May 19, 2011 2:00 am

    Awesome article. worth reading to get loyal visitors to your site.

  6. 6

    Great article! Very informative, I’ll remember this for sure.

  7. 7

    Awesomest post girl!! You did a very good analysis of everything!! :)

  8. 8

    This sort of thing is fascinating. Most purchasing decisions are made based on emotions more than actual wants or needs. We are bombarded with “buy, buy, buy” and “free this, free that” advertising all day but the real winners are the operators that tell a story and engage their customers.

    Im off to Google Plutchik’s emotion wheel.

    • 9

      Web Design New York May 20th, 2011 1:27 am Great job with aseowme article, I am really impressed…

  9. 10

    Trying to read white text on pale yellow makes me feel magenta.

    • 11

      It could be worse… you could feel cyan. :x

    • 12

      Lisa it is so imtorpant to play nice because that man lost a lot of followers from his bullying of a reviewer of his product

  10. 13

    Pretty weak for a design site to pick such non color-blind safe colors for your ‘joy’ and ‘trust’ markers.

    • 14

      dave May 19th, 20115:58 amTrying to read white text on pale yolelw makes me feel magenta.

  11. 15

    I really good article, one onf my favorites! Is good to remember our basis on web design :)

  12. 16

    Thank you for this article, and others like it. I love the direction Smashing Magazine is going with high quality and well though out articles.

  13. 17

    Ryan Donahue

    May 19, 2011 7:35 am

    I’m just confused as to why an article on web design psychology would use a giant X to represent aesthetics as if it were a big negative thing. Even after I saw the legend I kept thinking that those were negative points on the page.

    • 18

      :) I see what you mean. However, the box with the “x” is an empty image placeholder in layout design.

  14. 19

    Hey a Mormon site. I was really shocked to see that. Do you have a mormon on your staff? (im mormon btw).

    Great to see the awesome designs of the LDS church showcased.

  15. 21

    Nice article, but it’s ironic that in Smashing Mag we’d find infographic examples as poorly designed as Plutchik’s remarkably unreadable emotion wheel and the visually confusing and less-than-intuitive legends to the following examples.

  16. 22

    Great article that was ruined with a link to the Twitter page of an organization who dumps tons their of money into hateful and biased political campaigns. While I can appreciate the design aspect of their page, it is probably best for Smashing to veer away from such controversial organizations.

  17. 23

    Amazing article! I’ve been looking for one like this for months and havn’t found it like this!

    ~Thank you!

  18. 24

    Well, you know that emotions assigned to colours are not everywhere the same?
    Your nice colour wheel totally fails over in Europe – “having the blue(s)” is an ENGLISH country-only connection. Eg. in Germany blue is connected with calmness and safety.

    cu, w0lf.

  19. 25

    May 20, 2011 12:58 am

    WOW, very very iformative and well written although I have to agree with chris until I got half way through I realised the x were actually positive and found it very confusing. Perhaps a quick re-jig to a tic??

  20. 26

    Web Design New York

    May 20, 2011 1:27 am

    Great job with awesome article, I am really impressed…

  21. 27

    WOWOWOWOWOWOWOWOO very very instructif thank you soooo…..

  22. 28

    Miranda Lopez

    May 20, 2011 3:43 am

    Everytime I go to Abduzeedo I always find something interesting and this
    article is no different. No wonder it was chosen #2 in this list

  23. 29

    Nice article but the first graph seems like a twist of Pieter Desmet’s appraisal theory in product emotions… I guess references should be mentioned ;)

  24. 30

    I’m the ice man today. I’m going to hail, not rain, on the parade.

    Some things are self-refuting. For example, the creative agency that calls itself “Creative Associates” or something like that. The very name tells you – they’re not creative. It’s self-refuting.

    Now take this title, “Optimizing Emotional Engagement In Web Design Through Metrics.” Get the picture? It’s self-refuting. There’s no emotional engagement whatsoever in that title.

    Emotion mapping is a gimmick. It’s just labeling. You just label text and pictures with the name of an emotion. Maybe you look at it from different perspectives. None of that is new or even interesting.

  25. 31

    Wow this is really good. I wish that next article would be about merchandising methods. It would greatly help my thesis :)

  26. 32

    Paul Mederos

    May 20, 2011 7:18 pm

    Thanks for reminding me of the psychological aspects of web design. I always tend to forget my roots after being caught up in the technicalities of user interaction + metrics. The two go hand-in-hand :D

    It’s interesting that although these emotion maps are subjective, there are certain “standards” that definitely relay “Trust” more often than not… as such there exists a set of standard “Distrust” and “Ewwww”… it would be interesting to investigate hundreds of sites and pinpoint the specifics.

  27. 33

    I liked the reference to Monty Python’s holy Grail

  28. 34

    Really good article, all web-designers should read your article, it should be a part of a basic training in web design.

  29. 35

    Jennifer Nielsen

    May 23, 2011 8:06 pm

    I love this article. It has to be one of the best I’ve ever seen because you’ve really dealt well with the point of a website and not let technical construction, design obsessions or anything else get in the way. Great for marketing strategists, designers and the builders. I hope more people with your knowledge write more like you because of this article.

  30. 36

    Thank you for that great article, informative :and we are all designers but we really need to study always the psychology of our targets.

    thank you

  31. 37

    @Jeff (the ice man) – I’d be interested to hear you expand further on the idea of emotion mapping as merely a gimmick, and as to what you believe to be a more credible option, or if there is any alternative at all, and as to what you’d find interesting instead. Expanding on your context would be useful too, otherwise you’re just walking off after saying ‘I don’t like it’, which isn’t particularly constructive.

    Agreed, it’s ironic that there’s no emotion in the title (perhaps it needed an emotional title, with an ‘Or…’ to bring in the subject?) – but as we’re talking ‘behind the scenes’ with this article, I don’t think it’s necessary to have it there. Time and a place and all that…

  32. 38

    Edward Lewis

    May 24, 2011 2:18 am

    Great article.. just creating a list of idea/changes that we need to make to the design of our site :)

  33. 39

    Shell – very informative and unusual article. I loved the crispness of content segregation.
    The emotion wheel depicted here might work for one country but not for all. The meaning of colors and their association with emotions change with the changing latitude and longitude of our globe :-)

  34. 40

    crea7ive web designer

    June 1, 2011 1:16 pm

    This is one of the best articles i have ever read in Smashing Magazine. Not only design and functionality are kept in mind but also strategy and the psychology of the end user.
    I look forward to reading more of your articles.

    • 41

      There’s nlctieaboy a bundle to learn about this. I assume you made sure good factors in features also.

  35. 42

    I liked very much your article. Could you tell me where to find more info about the emotional wheel?
    Love that graphic, I think it is really usefull

  36. 43

    Stephen Price

    August 16, 2011 12:06 am

    Just a side note… the colours on that Plutchik’s emotion wheel are too hard to read.

    Just saying.

  37. 44

    Great article! Thank you.

  38. 45

    Greg Troxell

    March 24, 2012 7:19 am

    I serve in ministry with a background in behavioral psych. Plutchik’s work was based on animals (theory is that we all react similarly). I developed it further focusing on human-beings in a western culture. The Emotional Spectrum I developed ( includes more emotions, the correlation of motivational needs, virtues and reactionary perils.

  39. 46

    Chris Mears

    April 3, 2012 7:07 am

    Taking inspiration from this article i’ve tried to take it a step further but quantifying the emotions on user journeys… have a read here:

  40. 47

    A great research article on what creates a “wow” response from design>

  41. 48

    Conventional methods of building trust (that should not be overlooked) include featuring security badges on your site, showing social media icons with fan numbers, virtual trials and testimonials.

    From an e-commerce perspective good usability also has easy to find shipping information and costs, return policies, contact information and clear instructions on what point money is deducted and order is confirmed.

    These are more conventional useability methods, as oppose to strictly emotion design, but are highly relevant to a good emotion design.


↑ Back to top