Get a Web Design Quote

Get a feel for it: optimising emotional engagement in web design

By Aimee Sanderson
October 12, 2011
Web Design
Simply put, emotional engagement is about creating a stronger user experience, using psychology.

Last I checked no one in our studio had completed (read: started) their psychology major, but as web designers we have to be jack of all trades.

Humans are very reactive creatures, and the majority of our decision making is not rational. We rely heavily on how people/things/product makes us feel and our gut instincts.

Some products sell themselves, but chances are unless you’re building a website about puppies, you’re going to need to start thinking about emotional engagement.

puppies
Puppies: more appealing than print cartridges on a homepage. But not always more relevant.
From the RSPCA website.

Think about the people or places you like the most. You trust them, they are fun and you feel like you belong. The same qualities can be emulated within web design. These are the elements of emotional web design I’m going to look at today.

Good usability has been covered a bit on this blog, however in this post, we’re talking about strategies to implement and measure the soft stuff, the stuff that’s going to get your user liking you more. 

Usability verses Emotional Engagement?
In an Introduction to emotion design, Frank Spillers, suggests the necessary thinking to shift from usability to emotional engagement:
 


Emotional design isn’t instead of good usability. It complements it and adds another element of top of your web design to keep the users’ anxiety levels low, engaged and returning to your site.

Before users even see your siteEmotional engagement begins well before users hit your homepage. How your site displays in a search engine will already dictate the emotions a user feels towards your site, messages and product.

 

What the user sees in search engines is already aligning your website with a set of values and causing them to either feel trust, distaste, joy, or anticipation. Google your competitors and make sure your meta titles and meta tags are being used effectively.

Users will also find your site through your advertising strategy. Align your site with brands with similar values you want to portray. One of Australia’s top female bloggers, Mia Feedman, has such brand value that her readers outright criticise her if she takes advertising from any sponsor they deem the wrong ‘fit’ for their online community. On the other hand, good fits can have a positive impact on the emotional attachment of the reader.

Your social media pages and press coverage will also dictate how a user feels towards your site before they even get there. Although press coverage is not always controllable, it’s essential to have cohesive social media, advertising and web site goals. To create these keep in mind the end goal – downloading a form, creating a profile, making a purchase or changing a behaviour pattern.

And then they see your siteResearch shows that at 1/20th of a second1 a user can make decisions about your site that are lasting. We like to feel we are right, and even if the facts indicate that our first impression was wrong, we will seek the irrational justifications that it was in fact correct. You can read more about this study here.  

Stephen Anderson, who speaks on ‘seductive design’ came up with the below diagram based on Maslow’s hierarchy of needs. Whereas Maslow was discussing basic human needs and how they escalate when each one is met, this fits nicely into the theory of design:



Design hierarchy of needs from Boagworld.

What is the design of your site saying about you? Your homepages and landing pages need to be meeting the very top of this pyramid to be gaining good first impressions.

Visibility magazine has a nice article about emotional motivators on landing pages. It covers issues like safety, clarity and coherence. 

The importance of building funJellybean bikes have optimised on the game aspect of ordering a coloured bike. The entire site shouts fun, it’s highly usable, full of only the information you need, and easy to navigate.



Even though I’m pretty sure we have no need for a Mintleaf Studio themed bike, I had so much fun building this thing I was mad keen to buy it.

Then showing me in neat diagram what size I’d probably be after.



Even letting me know in a friendly way that it was out of stock.



Which was probably lucky for me at this point.

You’re aiming to create joy and anticipation. While clicking through the Jellybean site I was genuinely interested to see what the next screen was going to bring me. Even the cool way a new screen slid to view like a journey I was moving forward in, kept me engaged.

By human nature we like games, challenges and rewards. Building these elements into your site will increase engagement and emotion like joy, competition and satisfaction of winning.

The fun theory proves time and time again that humans will change their behaviour, or even go way out of their normal routine, for the sake of game. Check out the video below showing how the fun theory manages to convince commuters to use the stairs:


By the way – the above campaigns were all sponsored by Volkswagen, who has ‘fun’ as a key emotion needed to buy vehicles such as the new Beetle. No coincidence, huh.

The importance of belongingWhile looking at the importance of belonging and creating the ‘tribe’ mentality that successful emotional web design creates I started looking at online patient forums. Often lacking funding, a lot I came across were just plain summary-and-thread type forums. However Cancer Connections have great usability and makes it easy for their members to find each other, make connections and profiles, or browse as a guest. I was especially impressed with their search feature:



This site also lists its new members on the homepage and shows a list of recently active members as a strip of avatars down the bottom of the page.



These features help develop a tribe mentality of “I belong here, I am safe here.” The editorial tone should give the user a sense of belonging, using language commonly used by that demographic.

Create dynamic content. Use appropriate language. Leverage existing users to influence others. Showing how many users are also online, have bought a product, or showing testimonials can especially put in good use at the registration and check out processes of e-commerce modules.

Online blogger Mamamia uses social media to assist users in making the decision to sign up to their e-newsletter:



The importance of trustThis post wouldn’t be complete without touching on trust and credibility. We’ve covered these topics before in Defensive web design and Persuasive web design, which are both good resources.

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.

Measure itNo point doing it if you can’t measure it.

As well as looking at typical analytical measurements like unique versus returning users, heat maps, eye tracking, and recording mouse movement can all be used to measure emotional engagement. Analysing where the user is drawn to on a page and how they navigate can be indicative of emotional content.

There are also emotion specific measurements that ask users to class various aspects of your website with a caricature showing emotion. LEMtool (layered emotion measurement) and PrEmo are both examples of this from the Susa Group.

Last thoughtsEffective emotional web design can displayed simply as2:


Although adoption is last, consider it first for best results. What are we aiming the user to do? Essentially, in some way change their behaviour by adopting our messages, buying our product or interacting further with the site.

Then we can work forwards. How do our users find us and what is that telling them? Is the sites first impressions hindering or helping us? What can we do to make them want to stay on the site?

It’s a diverse topic, but one you can have a lot of fun with.

And I better start those enrolment papers in psych if I’m going to take this topic any further.

Like it? Follow Mintleaf Studio on Facebook and Twitter.


References

  1. First impressions count in website design, Websiteoptimization.com
  2. How to create user engagement with your web design, Googlj, July 2011

Other references

  
Comments (3)
  • Marco
    13/10/2011 7:08:39 PM
    Hi Aimee,
    thanks for the interesting outline and the mention of our tools and SusaGroup. I wanted to make a small correction to one of your references and a good friend of mine. Frank Millers is in fact Frank Spillers :-)

    Keep up the good work and let me know if we can help you out in any way with your quest for emotional engagement in UX.

    Cheers
    Marco
  • Aimee Sanderson
    14/10/2011 1:00:00 PM
    Whoops, sorry about that, the name is fixed now.

    Thanks Marco, great to hear you're enjoying the blog.

Leave a Comment

  • Comment

Luke started his career as a Technical Systems Engineer at NCSi, and after helping design a major upgrade to a global data collection platform he moved onto to a major Account Management role. After 8 years at NCSi Luke moved on to become the Managing Director of Datatime Services where he continued for 7 years. Luke has now recently joined Mintleaf as the Managing Director. Luke is passionate about the web industry- particularly systems Integration, eCommerce, eLearning and Corporate and Government Web Design.

Matt Morrison is Creative Director at Mintleaf.

In a past life he acquired a Science Degree (honours) from Sydney University but has worked in web design/development here in Melbourne for the past 11 years, 9 of those at Mintleaf. His current focus is on online marketing, information architecture and business development.

The purpose of this blog is to provide insight into how Mintleaf approaches web projects and offer pointers on how to achieve online success.
Aimee Sanderson is a Web Producer at Mintleaf.

Matty Collins is a front-end web developer at Minleaf.

Categories

Home  |  Folio  |  Clients  |  Services  |  Studio  |  Contact
Copyright © Mintleaf Studio Pty Ltd ABN: 68 132 751 770 All Rights Reserved  |