The Web Designers’ Guide to Photo Selection
Photographic images grab our attention and trigger an almost instantaneous response when we encounter them. They are therefore an important part of any website we create. Photos play a significant part in determining our first impression, but they can also tell us what the site is about and can be a huge factor in earning trust.
When used properly, photos are very effective and can quickly send the intended message to your audience. However, using the wrong photos can degrade your users’ experience. How do we choose the right ones?
Using Photos in Web Design
As much as we care about all aspects of the website we’re creating: content, colours, typography, hierarchy, information architecture and other details, photos deserve as much attention in terms of usability and overall users’ experience on your site.
Dealing with photos on websites should be something designers understand and apply effectively, so this article will point you in the right direction and show you how to think about photos when deciding to use one on your next web project.
Demand Attention by Using a Large Photo
People scan screens based on past experience and expectations. The top left is the most common starting point for users' eyes, although this does depend on their culture's reading patterns. If you're using a large photo on the page it will immediately grab their attention and pull them away from their usual tendency.
Treating a Photo as Content
I’m sure you won’t argue with me that a photo on a web page is content, but do you really treat it as such? Do you use it just as an add-on or a nice content filler? Have you considered all aspects of that particular piece of content? Have you evaluated the photo properly before you have chosen to use it? Have you considered users mental models and the impact the photo will have on them? Does the photo provide meaningful information or provide help for a user’s current task? These are just some of the questions you need to answer before using a photo on a web page.
Photos should never be used just to “jazz up” the web page.
I’ve seen many designers just placing a beautiful fullscreen photo on a web page, throwing in some tagline or a “Call to action” and declaring it done. In many cases the photo has not been evaluated, the designer was merely following an ongoing trend. Let’s see how to evaluate a photo before using it on your site.
Choosing the Perfect Photo
There are a few things to consider when deciding to choose a photo in your design. I will assume that you already know how to evaluate fundamental aspects of a photo, those being: quality, size, composition and exposure. Quality in terms of required resolution, size of the image and preferably its orientation for the intended usage, effective composition and cropping of the photo to draw attention, and properly exposed subjects on the photo.
Once you have done that and the photo has passed the fundamental test you can continue to explore the options for your intended usage.
Our brain processes images 60,000 times faster than reading text. - Mike Parkinson
Is it Useful?
Above all a photo must be useful. There's nothing wrong with using a photo as a placeholder to brighten up a page or fill some space, but even then consider the context in which you’re using that photo. Useful, helpful, thought provoking content photos are the ones which need our special attention. Useful photos should
- help us better understand something,
- teach us how to use something, or
- show us how something is done.
A beautiful example of a useful photo in web design is the Square website.
You can tell right away that this image has been professionally shot (look at the hands and finger nails). Most importantly it directly communicates what the product is about and how easy it is to use. Very useful, educational and instructional photo.
Another example of a useful photo is the Pencil website. Similarly to the previous example this photo shows exactly what the product is about (a stylus), where and how it can be used (iPad application).
The Woodster website also makes good use of photos to explain the product. It is clear that their product is used to elevate your Mac but also provides helpful USB connections at hand. Imagine this product isolated without context (the iMac). Do you think the photo would be as useful as this one?
Grovemade does a great job of presenting a collection of their product on a single fullscreen background photo. It is quite obvious that they manufacture high-end wooden office accessories. Not only is this photo useful, it is also very effective and emotional at the same time. We'll come to effective and emotional photos in a moment.
If you look at the examples above you will notice that all the photos are pretty obvious, self-explanatory and that they communicate the intended message very well. You don’t have to look long to figure out what the product/service/site is about. These are all characteristics of a useful photo in web design.
Is it Effective?
An effective photo is the one which is prompting for an action, influences our behaviour and communicates the intended message clearly. In particular, good and effective product photos should encourage users to buy those products. We’ve seen from the examples above that usable photos are indeed effective as they’re making the product desirable thus encouraging us to buy them. Whenever we see a photo which triggers a change in our behaviour we can describe it as being effective.
If you look at the Mobility website and those juicy red headphones you immediately get attracted and potentially want to buy them!
Apple is known for perfectionism in everything they do. The iPhone landing page is full of brilliant and desirable product photos which make you want to own one of their products.
Another example of an effective photo is the tsptr website. Notice how the man on the photo is looking downwards like there is something below for you to explore? Indeed there is something below.
The Mapquest website not only conveys emotion with the imagery, but also uses clever gaze direction to guide users’ eyes to important content on the page, in this case the mobile download link on the left.
Poco People uses a fun and entertaining photo on their homepage. You can immediately tell that there's something strange about it. Due to that, and good use of colours, lights and exposure, your interest is piqued in some way to see what this site is about.
The Colossal website features a large photo on the homepage showing what they do (they hand paint large ads and murals) and how they do it (check out the man on the right). The interesting thing about this photo is the people passing by on the left. They look excited about what they're witnessing which involves you as an observer and makes the whole photo and message exciting and effective.
Is it Emotive?
An emotive photo should result in an emotional response from the viewer. Be it just pleasing to look at, or calming, or disturbing in a way that compels us to take some action, or funny and entertaining, or attractive and desirable, as long as the photo appeals to our emotions in some way it will have greater impact than one which doesn't.
Frogdesign features a case study on their website about FEMA and disaster relief management. The main photo, combined with a good tagline, is very effective and emotive. It tells a story and it shows danger and because of the we feel attached to it.
The main photo of the Breath website is very calming. Combined with a good tagline and proper gaze direction the woman on the photo transfers her ease of breathing to the viewer. Notice the button label "Inhale"?
Shaun Groves’ website’s main photo tells a great story about him. It transmits happiness, trust, hope, friendship and anticipation to the viewer who gets attached to it and feels empathy towards his work.
Beside the usefulness and effectiveness of the Relay Foods photo selection, they also translate emotions about the service they offer. The women on the left and right show their joy in working for them, and because Relay Foods is all about natural products the womens’ facial expressions on these photos are aligned with their brand/service message.
The Power of Faces
There are seven (or eight) basic emotions:
- joy
- sadness
- contempt
- fear
- disgust
- surprise
- anger
They are universal and are (usually) communicated by facial expression and physical gestures. If you're using photos of people to communicate your intended message watch out for these basic seven emotions and decide which ones drive your target audience.
Close up photos of people immediately grab our attention and help trigger our emotions, which make them a powerful design element.
When we see a face, we are automatically triggered to feel something or to empathize with that person
We've already seen photos of people in previous examples but let's explore them a bit further.
Even though the Build Fire photo of a woman does not tell us anything about their product, it adds personality to their product and is a useful and effective way of grabbing users’ attention. The same effect would not be accomplished if there was only a photo of the iPhone instead of the woman.
If you ever decide to use a large portrait photo on your personal website I salute you,I've been there. But be careful! A tiny facial expression can make huge difference in the message you’re communicating. Daniel Eckler does a really good job in presenting himself to the audience. His facial expression communicates confidence, calmness and trust.
People can tell when a smile is real or fake
Everyone knows what happened to the WTC. The 9/11 Tribute Center website is dedicated to the stories of those who were there. The man on the photo is looking directly at us thus helping us relate to the topic of the site inviting us into the community.
Note: this is done without being confrontational; a fine line!
Another great example of bringing over the message with a close up human face photo is the Conservation website. The Kayapo man on the photo communicates authority, courage and appreciation.
As Susan Weinschenk said, close up photos are most persuasive on a charity site, and that is true. Save the Children features a close up photo of a child in need which perfectly aligns with the tagline and topic of the site. Notice the gaze direction towards the donation button?
How *Not* to Use Photos in Web Design
Even though we've seen many great examples of how to use photos in our web design, these can easily be misused. Hence I'm going to show you few examples of how not to use photos and what to avoid.
Unrelated photo - a web design studio offering "Tailored-made" services uses an unrelated background photo (coloured threads) which creates wrong first impression and sends wrong messages to the visitor. There's meaning here, but it's an obscure metaphor.
A much better solution here would be to use either solid colour or a team group photo. Besides, digital products cannot be tailored.
A software as service offering collaboration tools for teams uses a photo of a worried woman at work. This might create the impression that she's worried about the same software the site is promoting. A much better solution here would be to show either the real product screenshots or show a happy woman using their product.
Blurred photo background - only used as decorative placeholder, does not communicate anything about the site thus having no real effect. I would advise you to avoid blurred photo backgrounds as much as possible, you can do better then that ;)
Another totally unrelated photo to the subject of the site. Even though the words "handcrafted" and "workshop" can be related to the photo itself, it does not communicate the real subject of the site. Brand Bat is all about creating brand strategies and with the series of wood processing related photos they are missing a great opportunity to communicate their message.
Wrong photo choice - what was your first impression when you saw this photo? Two happy people standing in a coffee shop will help your business succeed online. Right? No, a full service web design agency actually offers this help, and the photo should be showing one of their happy and successful clients. This may also possibly be a stock photo which you should avoid.
Stock photos - they almost never communicate the right message. Why is there a young boy wearing glasses and holding thumbs up? Is he a developer providing PHP coding services? I don't think so.
The Nationwide website is failing to communicate the message with this photo. Firstly, the photo is unrelated to the subject, the woman appears to be biting her nails (we know that this is a psychological disorder), and the screen on her tablet is blurred. This photo shows anxiousness, nervousness and stress and I really don't think Nationwide wanted to communicate that to their visitors.
Final Thoughts
This article has been all about using large photos on your website, but there are many other ways photos can be used properly to engage your audience. Start to think about photos early in your design process. If you have done proper project research you'll already have plenty of insights.
Invest in good photo shoots: a great photographer can add a fortune to your website's business value.
Whatever you’re designing, your audience is comprised of the people who will benefit from your design. Understanding human behaviour is really the only way to make effective design and this applies to choosing the best photos for your next website design.
0 comments: