Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. 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.

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 Chart3

For example:

Cognitive Response Example via Monty Python4

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 Wheel5
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 Map6

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

  • 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 Map8

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 usability9 to create systems that are user-centric.
  • Identify high-focus areas in your user interface through eye-tracking10, 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 triggers11. @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 Map12

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 community13 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 objective14. 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 Map15

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 interfaces16 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 Booth17
    A great resource on all things user experience. It goes into detail on many of the subjects touched on here.
  • Occam’s Razor18, Avinash Kaushik
    A blog dealing with Web analytics and its practical applications.
  • Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets19
    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 Group20, 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
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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…


↑ Back to top