5 Things You Didn't Know About People (and How It Can Boost Your Conversion)

5 THINGS YOU DIDN’T KNOW ABOUT PEOPLE…(and how to use them to increase conversions)

By Louis Grenier@LouisSlices

@LouisSlices / [email protected] / bit.ly/swipeslides

Photo credit

This is Charles Darwin.

Charles Darwin is a badass.

https://twitter.com/LouisSlices

mailto:[email protected]

http://bit.ly/swipeslides

https://www.flickr.com/photos/cgpgrey/

Photo credit


In 1831, he took part of one the most important scien>fic expedi>ons in history.

The expedi>on, aboard the Beagle, took 5 years in total.

https://upload.wikimedia.org/wikipedia/commons/9/94/PSM_V57_D097_Hms_beagle_in_the_straits_of_magellan.png




Photo credit


During those 5 years, the Beagle travelled all over the Globe. From Plymouth, to Rio de Janeiro, to the Galapagos Islands or even Australia.

https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Voyage_of_the_Beagle-de.svg/2000px-Voyage_of_the_Beagle-de.svg.png





ALer studying intensively plants and animals, Charles Darwin came up the Theory of Evolu>on.

This is one of first drawing related to this theory, years aLer the Beagle Expedi>on.




DNA

DNA+ DNA-‐ DNA=


The Theory of Evolu>on goes as follow. All living species have DNA. This DNA will some>me change, at random. If the change in a species DNA doesn’t have any impact, the species will keep reproducing. If it has a nega>ve impact and spreads, the species will ul>mately die. If it has a posi>ve impact and spreads, the species will keep reproducing and striving thanks to a higher chance of survival.




DNA

DNA+ DNA-‐ DNA=


What does the Theory of Evolu>on has to do with conversion rate? Everything. Humans behave a certain way thanks to billion of years of evolu>on. We survived and evolved thanks to the way we act, think and communicate. The web is no different. Let me introduce to 5 things you didn’t know about people and how to use them to increase conversion rate online.




I’m Louis Grenier, Founder of Slices

Consul,ng.

As seen:

We help you to boost sales by making the most out of each of your website visitors.

As seen:

As seen:

#1

Research: Dimitri Bayle in 2009.





#1

Research: Dimitri Bayle in 2009.


According to Bayle in 2009, humans will react to danger in their central vision in a delay of between 140 to 190 milliseconds.









However, humans will react to danger in their peripheral vision in 80 milliseconds.

We perceive things quicker outside of our central vision! What does it mean for the web?




≈

≈





≈

≈


Elements placed at the centre of your pages, such as headlines, subheadlines, or call-‐to-‐ac>ons are important, but visitors will perceive elements in their peripheral vision first. To build trust and credibility quickly, use that to your advantage as you can see in this example from Hotjar.




Company LogoTrademarkTagline

SSL Cer>ficateCer>fica>onsClients logosNumbers


The following elements can be used to build trust and credibility almost instantly. They can be placed in the periphery of your pages.




#2

Research: Kaen Pierce in 2001.@LouisSlices / [email protected] / bit.ly/swipeslides

This is my li`le brother Niels. He’s my inspira>on. Niels has special powers: he can tell you exactly how many video games he has in his collec>on and the >tle of each. But, because he’s au>s>c, he can’t recognise human faces as well as non-‐au>s>c people (research from Kaen Pierce in 2001)





Humans have a part of their brains uniquely design to recognise human faces (expect au>s>c people). This is why you can recognise somebody you know in a crowd of hundreds of people.

On the web, if you want visitors to give their aèn>on, use human faces.





This is an example from Intercom.io. They are using a picture of their clients looking at you in the eyes to create an emo>onal connec>on with you. See how you can no>ce that he’s happy? That he’s not “fake”? That his smile is real?

(this is one of the reasons why you MUST NOT use free/cheap stock photos)





The other way to use human faces is by making them look at the elements you want your visitors to look at. No>ce how your eyes naturally follow where this lady is looking at?

This is good way to draw aèn>on to important elements of your pages and increase conversions.




#3

Research: Ebbinghaus in 1886@LouisSlices / [email protected] / bit.ly/swipeslides




#3

Research: Ebbinghaus in 1886@LouisSlices / [email protected] / bit.ly/swipeslides

This is the “Forgejng Curve” by Ebbinghaus. Humans forget things pre`y quickly. We couldn’t func>on if we remembered everything that happened in our lives. This is why we only remember 20% of what we experienced aLer only 1 week.





What does it mean for the web? You have to repeat yourself. All the >me. People WILL forget about you, your company or why you’re different than your compe>>on. In this example AO.com repeats page aLer page why they’re different and why you should purchase from them. This is called your value proposi>on. Repeat it as much as you can.




http://AO.com


Another great example would be Sunshine.co.uk that clearly explains on their homepage why you should buy from them rather than a compe>tor.




http://Sunshine.co.uk

#4


Can you figure out what to do with this object?

Obviously, switch it.





And this one?

Burst it.




Research: James Gibson in 1979

See object

Figure out what to do Do it Did it

work?


It sounds silly but in design this is called an affordance (coined by James Gibson in 1979). An affordance is a rela>on between an object and an organism that, through a collec>on of s>muli, affords the opportunity for that organism to perform an ac>on.

In Layman’s terms: see > figure out what to do > do it




Explicit affordance


This is an explicit affordance. This makes any webpage easy to use. This call-‐to-‐ac>on couldn’t be clearer: the text makes it easy to understand, the arrow offers an idea of movement, the mouse icon changes from a pointer to a hand, and it looks like a real buòn, with a shadow and relief.




PaJern affordance


Paèrn affordances are slightly more complex. For example, visitors expect to be able to click a website logo to go back to the homepage. The only explicit clue is the mouse icon.




Hidden affordance


This is where affordances can have a nega>ve impact on your visitors’ web experience. The “shop now” call-‐to-‐ac>on doesn’t give any indica>ons that it can be clicked. Yes, some people might figure it out, but others won’t. The more explicit the beèr.




False affordance


This buòn looks like it’s clickable, but it’s not. This is a false affordance. Visitors might perceive that they can perform a certain ac>on but nothing happens. This can create frustra>on and ul>mately make people leave your website.




#5


Finally, imagine an eCommerce website. How does it look like? Where do you see the logo appearing? The search bar? The basket?




LOGO SEARCH BAR BASKET

MENU

FILTERS

BANNER

PRODUCT 1 PRODUCT 2 PRODUCT 3


Was the mental image you constructed the same way than above? It’s very likely. This is because over the years, you’ve developed a mental model of most things you’ve interacted with. This allows you to act fast with the smallest amount of energy possible.





But… what if you land on this eCommerce website?





Or this one?





Conceptual Model

Mental Model

GOOD EXPERIENCE

If there’s a difference between the mental model your mind has constructed and the conceptual model you’re interac>ng with, you will get frustrated. To create a good experience online, you must match as closely as you can the mental model of your visitors with your conceptual model (your website).




Ques>ons? [email protected]

or +353 (0)1 697 8581

As seen:

mailto:[email protected]?subject=

Marketing

5 Things You Didn't Know About People (and How It Can Boost Your Conversion)