5 Super Interesting Studies About Using Photos On Your Website
Photos weren’t originally a feature of the World Wide Web. In the beginning, it was text-only. But now, you wouldn’t see a website without one! Has this led to an overuse of images? Or even a misuse?
Using the results from web design psychology studies on images, I examine the findings, and share some top tips for using images on your website.
NB Click on the images to enlarge them!
We don’t find all images interesting
When people view a website, some images immediately catch the viewers’ eye but not all images. This means that you should not mindlessly insert photos, but think carefully about what they’re supposed to communicate.
Consider this eye tracking study on the Yale School of Management website. The blue circles show where the users’ eyes focus, and the numbers indicate the order. Notice though how no one has even glanced at the generic school photo.
Product images on e-commerce site help us understand and differentiate the products… sometimes.
Product photos can help users to easily identify the difference between similar items. Look at the eye-tracking study on Potterybarn. Visitors to the site pay a lot more attention to the images of bookcases than anything else on the page.
But what about the product images of tellys on Amazon.com? Surely the results should be the same? If you look at the blue circles, hardly any are on the images, but more are on the product descriptions. In fact, visitors spent 82{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} of their time reading the text and only 18{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} looking at the photos.
So why the big difference? The photos of tellys don’t give much information to customer. They all look pretty much the same. Black, flat, telly shaped. But the deciding factors are in the description. How big is the TV? Does can you watch catch-up TV on it? How much is it going to cost?
Jakob Nielsen, the leading web usability expert, has found when testing product pages that visitors like alternate views of the product and often click links to download enlarged photos.
We want to see photos of the people behind the website
For example, look at Freshbooks – a website for a cloud accounting system. They currently have one hundred and twenty three staff, and have profiles and photos of all of them. By including photos of everyone, even a big company like Freshbooks doesn’t seem impersonal.
Do you think people would look at all one hundred and twenty three bios if there were no photos? And yet, the eye tracking study shows that the visitors spent 10{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} more time viewing the staff photos than reading the profiles, even though the bios take up 316{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} more space. It’s a lot easier for visitors to make quick judgements about the company by scanning the images; and humans emotionally connect with images of other people.
Jason Thompson, did a study where he compared conversion rate on his original generic contact icon with an image of his face and found that the one with his face on had a 48{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} higher conversion rate.
We follow people’s gaze… even in photos
We tend to fixate on people’s eyes in photos, but if they’re looking at something, we also like to look at it too. Look at James Breeze’s heat map below. The longest times that a visitor looks at something are shown in red. And green shows areas that are fixated on for less lime. The image shows that when the baby is facing the user, they focus mainly on the baby’s face. But when the baby is looking at the text, you can see that there are a lot more red areas on the text, showing the visitors spend more time reading the text.
But it’s not just babies that people follow. Look at the similar results below for Sunsilk shampoo. When the model is looking towards the product rather than towards the viewer, the user spends much more time looking at the product that the model is looking at.
THiNK also carried out an eye tracking study for Dove, and found that when the model looked towards the product they had a 78{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} increase in people looking at the advertised product.
If someone is smiling about the product, we’re more likely to buy it.
37 Signals tested two page designs for Highrise, a company selling a simple-to-use content management system. One (shown on the left) was longer and had more information about Highrise, whilst the other was shorter, had less information and has a happy customer (called Jocelyn) smiling in the background.
Jocelyn’s page had significantly more conversions that the other.
37 signals then added more information underneath Jocelyn’s smiley picture, but this performed 22{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} worse than the original design.
To see whether Jocelyn was the key to success, they asked several more customers to be on their website: Michael, an accountant; Will, a programmer, John, founder of Revolution Management; Mari, owner of Foiled Cupcakes; and Brian, owner of Nutphree’s. And here are the results:
Jocelyn wasn’t necessarily the key, the key is just to include happy smiling customers.
Conclusions
We all know the difference between real people and stock photos, and we don’t pay attention “filler” images, so think carefully about littering your site with images. But photos that add more information or help users emotionally connect help conversions!
Sources
- http://www.uvsc.edu/disted/decourses/dgm/2740/IN/steinja/lessons/05/docs/eyetrack_iii.pdf
- http://www.nngroup.com/articles/photos-as-web-content
- http://designinstruct.com/web-design/usability-photos/
- http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part-3-final
- http://webdesign.tutsplus.com/articles/design-theory/visual-direction-in-web-design/
