There is one variable that data is not very good at deciphering – the human.
It’s easy to forget when analyzing the data for conversion purposes is that the end-user is a real human with feelings. Data tells us a lot of things, but it is really bad at anything that involves understanding the human condition.
In an ideal world, designers and conversion optimizers can strike the perfect balance between the logical & emotional sides of the human brain & design experiences that engage potential customers and “activate” visitors to take action.
But the world isn’t ideal, and this stuff is hard as hell to balance out.
As a follow up to our data driven traffic acquisition article, we’re going to be looking at the roles emotion & data play in “activating” customers and using Dave McClure’s Conversion Metrics as a guide to the larger conversation.
Table of contents
- 3 Step Approach To Emotional Design
- Step 1 – Start With The Eyes
- Some Might Start With Layout & Color… I Recommend Starting With Typography
- Using Wireframes To Design The Flow Of The Page
- Step 2 – Appeal To The Mind
- Step 3 – Aim For The Heart
- Sidenote: This is of those moments where testimonials probably wouldn’t help.
- So What Comes Next?
3 Step Approach To Emotional Design
Screenshot from CopyBlogger’s Slideshare
Whenever you land on any web page, the first thing that happens is that you see how the page looks like. Then you’ll read what’s there and lastly if you like what you see and read you’ll act on the CTA of that page.
When it comes to using emotional design work for you, the process is pretty similar:
- Start with the eyes – Visitor sees your design, how you present information. All this happens before (s)he reads a single line of text
- Appeal to the mind – Visitors reads the presented information – emphasize on useful content and it’s readability
- Aim for the heart – Take your visitors on a journey that touches upon their experiences, their needs and emotions.
Now I know this sounds a lot like some camp fire kumbaya type stuff, bear with me, it will all make sense soon. I promise.
Step 1 – Start With The Eyes
I’m planning on going to Greece with my family this summer, so obviously the first stop is to Google “Greek travel”
I clicked on two links and they could not be more different from each other. This was the first one:
Screenshot of Dolphin Hellas
With this first example, unfortunately there is not much to say – there is very little in terms of design, it’s a wall of text. They skipped that first part – appealing to the eyes – completely.
This page tells me nothing about what a vacation to Greece might be like, and if my family hadn’t already made up their minds about going to Greece, we might give up on Greece all-together (think about that for a second)
And here’s the second:
Screenshot of VisitGreece
VisitGreece on the other hand seems to understand perfectly what I’m imagining my vacation would be like and creates a first impression that is perfectly in sync with my expectations.
Though there are things I would change about what happens after I click on this welcome screen, it does more than enough to grab my attention & draw me in.
The image is stunning, the typography is welcoming & it makes me feel excited at the peace and relaxation I’ll have when I’m finally in Greece. This is all done with minimal text and a visual experience that gets me wanting more.
Using The Visual Experience To Draw Visitors In
Now, I can’t read Portuguese, but I can confidently say that this website is about Beer.
But this isn’t just any beer. No. This is a premium beer for the man who spends all day using his hardened, calloused hands, in 110 degree heat, sweat stinging his eyes to provide a better life for his wife & two beautiful children.
This is the man who chopped the wood to build the house you live in, laid the pavement for the road you drive on, raised the animals that line your dinner plate & built the machines that make the things that keep you comfortable.
He doesn’t ask for reward or praise. He doesn’t care if you know his name. This beer, and the love of his family are more than enough to keep him happy.
I know this because that is what the typography, formatting, visual hierarchy, layout, contrast & colors tell me.
Some Might Start With Layout & Color… I Recommend Starting With Typography
Every designer’s process is different, but I believe that if the end goal is to “activate” the visitor & speak to their heart, typography should be where you start.
We’ve talked extensively about how typography can influence perception already, but by starting with typography you ensure your text communicates something about you, even if the reader never actively engages with it.
Take Pat Flynn over at Smart Passive Income for example.
When he and Chase Reeves were working on redesigning the site, Chase presented Pat with several different Typographic pairings first, to demonstrate how something as subtle as type can influence your perception of what’s happening on the page:
Even just being black text on a white page, It’s clear to see how just the interplay of the headline & body typography completely changes the character of the page.
Yes, it’s true that pairing typefaces is pretty difficult. But the reality is, the details of whatever it is you’ll be communicating is going to be done through text. If that text doesn’t have the appropriate “body language”, so to speak, you’ll ultimately end up (over)compensating in other aspects of your design.
A look at this board on Pinterest shows you just how many designers publicly do not understand what makes a good relationship between two different typefaces.
Follow Amanda’s board Fonts on Pinterest.
Daniel Eden of Justmytype.com argues font pairing is more of an art than it is a science which makes this part of the process even more subjective – and is probably why many designers save it for last.
Adding to what Daniel is saying in the image above, the tone and voice of your typeface should ultimately reflect what you’ve learned about your customers through your customer development interviews or feedback loops.
- Four Techniques For Combining Fonts
- Best Practices For Combining Typefaces
- The Big Book of Font Combinations
- Typecast (for experimenting with different typefaces in the browser)
Using Wireframes To Design The Flow Of The Page
After you’ve determined what the “personality” of the page should feel like through typography, you should move on to the wireframing process to construct the outline of the page in a way that is functional & usable.
Even this early in the design process, wireframing can become a very good indicator of the final design’s usability.
This case study on Loop11’s website shows how a tourism website conducted usability testing simply by using wireframes, and found which prototype performed better – and potential slips in the user experience for that particular mockup.
What they had found was that even though Prototype A performed better, it took people significantly longer to perform all but two tasks.
Now what if “events” were their most profitable segment? Looking at their data, it’s pretty consistent with the notion that the longer it takes to complete a task, the fewer people will do it.
Addressing these kinds of usability issues at such a basic level will help you establish a solid foundation that reduces friction from the outset.
In this example by redmonkeygoo, it’s easy to see how both the wireframe & the choice of typography begin to build an experience that could be very easy to become “activated” by.
Also, take notice that even without any finalized colors or images here, there still a very strong visual hierarchy that guides your eyes along the page.
So even without product shots or button colors screaming “PICK ME” you still get a very strong feel for what the most important elements are going to be.
Notable wireframing tools:
The Role Color And Images Play On Activating Visitors
Looking at the final design of the MiBolsa website, you see not much has changed from the initial wireframe.
Sure, there’s a few bits of microcopy to let you know about free shipping & the return policy, and some of the fonts around the pricing have been switched around, but the primary objective of this page is still very clear – showcase the product.
What’s interesting to me though is how they’ve used color to further enhance the goal that was already very apparent in their initial wireframe. The red of the bag obviously draws you right in, but what else is going on here?
The discount is highlighted directly underneath the header logo, a place people typically look first on a site.
The current view of the product is highlighted in that same shade of pink.
The why choose MiBolsa & Free Shipping disclaimers are highlighted in the same color so you can quickly identify they’re important (even if you haven’t consciously read them)
And the Primary & Secondary CTA are both visible very quickly.
Even if you never read a single word in the product’s description, you’ve been able to take in the most important elements of this page, simply because the colors directed your eyes to the most important parts of the page:
- current view (and by proxy alternative views)
- add ons
- Buy now
All made visible to you within a fraction of a second.
You already know whether or not you want this bag before your logic ever stands a chance of kicking in.
Good Use Of Color Acts Like A Target For The Eyes
Believe or not but the same principles apply also in an everyday furniture eCommerce settings as we are about to find out. World Market is an ecommerce store that sells home decor, rugs and furniture among other things.
Let’s say I’m in the market for desk, while searching around their site I eventually land on this one:
The search bar, Add to cart button, save 25%, free shipping – they all use the same color and style making it easy to attract the eyes while at the same time giving a clear overview of everything important.
So let’s “see” what I’m looking at when I’m on this page with a little help from heatmap data:
I look at their logo, look at the product and all other relevant information like free shipping, save 25% offer etc. So in general I look at where I’m “supposed” to look at.
Don’t be fooled into taking this for granted though, when you don’t work on visual hierarchy and role of colors and images you end up in a situation where your visitors to your site don’t even notice your “Add To Cart” button:
Strongly Recommended Reading:
- First Impressions Matter: The Importance of Great Visual Design
- The Mega-Details Behind the New Design of The Smart Passive Income Blog
- The Effect of Typography on User Experience & Conversions
- The Guide to Wireframing – For Designers, PMs, Engineers and Anyone Who Touches Product
- Which Color Converts The Best
Step 2 – Appeal To The Mind
Upon first landing on the site, I liked what I saw. The design, visual hierarchy and the overall outlook managed to get my mouth watering a little at what you have to offer. So far so good.
From here until the checkout, your visitor’s logic & emotion will be in a knock-down, drag out brawl. And their logic brought an uzi to a fist-fight.
This is the point where they go “ok, read what’s on the page” and their logical mind goes into overdrive asking a million questions a second.
- Do I understand what is written, is the product clear to me?
- Is it something that is useful to me?
- Do I need it?
- Do I need it now?
- How much does it cost?
- What do other people have to say about it?
- Does it have free shipping?
- Are there any discounts?
- What are the guarantees?
- What are the alternatives?
- How soon will it get here?
If what they see has already hooked them, these and about 10 million other questions are flooding their brains as they go from the product page & the checkout.
This is why it’s so critical to answer as many of these questions as possible once the logical part of the brain has kicked in. Looking at the MiBolsa product page again, what do you see?
- 25% savings
- The bag is $280
- Real women’s genuine leather handbag
- Free shipping (in Australia)
- Worldwide shipping is available
- 30 Day simple returns
- 100% real leather
- What it “goes great with…”
- And the exact product dimensions (just in case you’re that practical)
Addressing all these little things in a very visible way acts as a mediator between the logical & emotional aspects of the brain when making the purchasing decision.
What I find particularly interesting about these little bits of copy too is that it addresses many of the primary reasons that Forrester & UPS found people are hesitant to shop online.
Now, something else I’d like to address here is a question I hear all the time, “Well, I have added free/discounted shipping, but that didn’t do anything to improve my conversion rates.”
Here’s the thing, it’s not just a matter of having the service, but also making it known at the points where it matters during the journey your visitor’s eye takes.
Even elite designer handbag companies don’t seem to get this concept though. The offer’s are all there, but can you tell right away where it is?
That’s the thing I love about the MiBolsa website so much, is that by design, your eyes are attracted to the colors like “targets”, and they happen to contain the little information to address common customer concerns.
It’s like you absorb the information on a subconscious level helping to put your logical mind at ease, and making it much easier to get your credit card ready.
- How Do I Know If My Copywritng Is Any Good?
- Should I Lower My Prices To Compete? <–don’t be fooled, there’s more to it than pricing
- Microcopy: The Tiny Phrases With An Explosive Impact On Conversions
When OK Design Meets Bad Copy
Let’s take a slight detour & look at this from a slightly different angle – What’s it looks like when ok design meets bad copy:
From a design standpoint it’s ok. I’ve definitely seen worse (hello Dolphin Hellas), I’ve also seen better. The design is not that bad that it would drive me away immediately.
And then we start reading the copy of the page. This is is where things go south.
I can honestly say that based on the information I’m presented I have no idea what’s the software/service about.
This is a classic case of not understanding your target audience, and I can tell just by looking at this page that it was built with colors & layout in mind before the copy / message clarity was nailed down.
Fortunately all is not lost, using feedback loops to understand common hickups for non-converting visitors will help unearth what language needs to be used in order to bring more clarity to the copy.
For the record though, I also believe that once they’ve understood their customers better, they should rebuild from the ground up using the processes we’ve been talking about so far.
Strongly Recommended Reading:
- How to Create Customer Feedback Loops at Scale
- How to Identify Your Online Target Audience and Sell More
- Tommy’s Video Review of Team Colony
- How To Come Up With A Value Proposition When What You Sell ISN’T Unique
Step 3 – Aim For The Heart
We have arrived at crucial last step of the process – the heart.
My eyes are telling me that it’s something that I should care about. After reading through the copy you have for me, my mind as decided that yes I understand what the offer is and how it’s beneficial to me.
Now the big question is – have you managed to make me care enough about what you’re offering for me to actually take action? Have you managed to create a want and/or need that you and only can help me fulfill?
Taking one last look at the MiBolsa page, after the images have taken me in, and my logic has been calmed by the microcopy, by design, my eyes seem to go the product description last.
Now, even though I’m not really in the market for a woman’s purse, I’m impressed how they use the product description copy to start appealing to the emotions again.
Using words like “Argentine” evoke a sense of glamour & exotic-ness, while phrases like “Stunning” “Eye catching” “Stylish” let me know that others are going to stop and admire & perhaps envy me.
Interestingly enough, the phrase “sure to go quick” does double duty here by creating a sense of urgency while also reassuring me this is not a purse everyone else is going to own.
Sidenote: This is of those moments where testimonials probably wouldn’t help.
Something that struck me about this page after looking at it for so long was that it was missing customer testimonials. But then it dawned on me… The woman buying this bag doesn’t want anyone else to own this bag.
She doesn’t need reassurance that it’s a good purchase. She’s the kind of woman who set’s the trend & while she doesn’t necessarily want the attention – per sae – she doesn’t mind one bit that you envy her fashion sense or her ability to buy a $280 handbag. In fact, she’s counting on it.
Part of what makes this bag appealing is the hunt, the exclusivity, and the status it brings.
Ultimately, to her, this looks tacky:
Looking back, it’s easy to see that the entire experience was built from the ground up for this woman.
Everything about it she’s in the right place, with the sexiest stuff, that nobody else is going to own… unless of course she liked you enough to share her secret ;-)
“Emotional design turns casual users into fanatics, ready to tell others about their positive experience.”
Aarron Walter, lead UX designer @ MailChimp
So What Comes Next?
At this point, all of the criteria for a “happy first visit” have been met.
I’ve viewed the requisite amount of pages & have stayed on the site for a significant amount of time.
Even if I hadn’t added the bag to my cart, this would be decent enough criteria to run an ad retargeting campaign to drive me back to the site. After all, according to SeeWhy.com 99% of people aren’t going to purchase on their first visit.
Fortunately for MiBolsa though, I will be making this purchase today, and after clicking “Checkout” this is where they bring me.
Now, there are things I like about this form & things I don’t. For instance, I love the security features at the top, and the reminder about 30 day returns.
I am not a huge fan of the 3 column layout, nor the amount of extra fields (first name/last name could be one field for example) or the lack of microcopy around required fields to explain why you need something like my phone number.
And I wish they brought more attention to this, as well as give me some idea of how it benefits me.
However, perhaps they realize that “creating an account” is more of a commitment than I’m willing to make right now, and perhaps they’ll explain the benefits of an account later.
After all, they have auto-checked the “subscribe to newsletter option” here, so it’s not like we won’t be hearing from each other again soon.
Who knows, they may even have an email onboarding series that gets me coming back & becoming a loyal customer. In any event, that’s the stuff we’ll be talking about when we revisit this series ;-)
Data and emotion are two things that at first glance don’t really go together. But as we have seen it it possible and in reality all you need to do is change your perspective just a little bit and a whole new world opens for you.
Start with the eyes – make me fall in love with you just by looking at your site. Experiment with typography to communicate without words, then guide me through the experience I’m looking for with layout, colors, & images I can almost feel.
Once you have me, make sure that what you offer is indeed clear to me. Doing that the last step – me taking action, happens seamlessly. Job done.
Join the conversation
Add your comment
I just wanna explain better about the brazilian’s website posted (Brahma website). Yes, it’s about a beer. Yes, it’s about a premium beer. But, no, it wasn’t for that kind of men that you posted. This beer it’s a special edition for the World Cup. The barley was planted in the “official house” of the brazilian soccer team. The pictures of the site shows the project of the beer, and doesn’t the kind of costumer. The costumer of this beer is a man that loves soccer and are fascinated that the World Cup is in Brazil. It’s for the people who cares about it, and for people who have money. The collector editions was very limited (just 2014 kits) and who bought this wasn’t the man of the field.
Sorry for the write mistakes in this text. English isn’t my native language, because I’m brazilian.
And, by the way, great article!
Hey thanks for clarifying that Aline :-)
Even though the beer was released as a special edition & was specifically targeted towards the football loving man, I think the point Ott’s making here is that the design itself speaks to something very specific.
Being Brazilian, you have more context on website, and the market. For Brahma, that is very important as they can fine tune all of the football oriented messaging within this premium package.
However, if you were to look at this out of context (like we did) the design still speaks a very specific message about a kind of person (even if we misinterpreted it, due to lack of context), which is the bigger point I think we’re trying to make.
Thank you for pointing that out though, I will add a clarification in just a little while :-)
Yes, it’s not so easy to read in portuguese to really understand the message. I agree with you that the pictures seems to show what Ott said.
Just for complement, the man in the third picture is Felipe Scolari, the Brazilian’s team coach. In the picture seems to be a man of the field :)
I am not sure that the CTA buttons in the sites featured (MiBolsa and World Market) are the best choice – both use the same colours for every feature they want to highlight, so the only thing that separates the button from the rest is the size and placement, not the colour. Actually, the price in MiBolsa and the 25% discount in World Market are far more visible than the buy button. Using a different, more contrasting colour would probably have been better to quickly identify the button.
Another point, you say you are not a fan of the three-column layout (I assume it is in the checkout page) – can you explain why? So far, it is the best layout I have seen for this page: all the process is visible in one sight, much better that a one column layout or, worse, a multi-step checkout.
BTW, nice article, I have enjoyed it a lot.
Fair point Xavier, but let me ask you this.
Really though, which do you think is more important in a buying decision, quickly seeing there’s a 25% off discount, or seeing where the “add to cart” button is a fraction of a second faster?
At a certain point, you do have to trust that the user understands why they came to the page in the first place, and that they can find the “add to cart” button if they wanted it.
Testing the button color in either of these situations, just to be “more contrasting”, would probably be a waste of time, without any significant improvement in results.
I could be wrong of course, but there would be many other more important things to test that would drive bigger results (like emphasizing free shipping or returns policy more).
I agree this is probably a minor issue. I think it would be worth a second thought, but minor anyway.
On another side, I have just seen that the images are not actually eye tracking experiments, but predictions made using FengGui. I am not sure about the accuracy of FengGui predictions – their competitors at Eyequant (http://eyequant.com/) claim to have a 90% accuracy, whereas FengGui barely passes the 50% barrier. True or not, it calls my attention the fact that FengGui considers the search bar more interesting than the logo, and the second recommended product worth any interest (far more than the first one, which is equal to me).
I like FengGui, it’s wonderful to convince a customer to reject a bad design. But I am not so sure that it is so precise as to help fine-tune a design.
I would really appreciate some light on whether FengGui is reliable or not.
Good question :-) I’ll ask around!
really awesome and insightful stuff to read right now
thankyou very much
have a great day :):)
Really nice post. I’m pretty new to conversion rate, but i saw that for my web sites CTA buttons work a little better than the classic cta links. And xavier thanks for the link, i didn’t know that site like this exist :). Let’s see if this work on my new gambling site http://assok.it
Un gros merci pour ce site.
Really nice post . thanks
Comments are closed.