Eye Candy: Are Your Pictures Worth 1,000 Words?
Images are a powerful medium that can give your brand personality and create engaging, lasting user experiences. When used properly, images quickly and clearly provide valuable information.
Why use imagery to communicate your message to your target audience?
Your images should seek to provide the users with compelling, helpful and relevant information. Burdening users with generic photos that serve no purpose only frustrates users and distracts them from their intended goal, to gather information.
RULES OF IMAGE USABILITY
1) Choose the right photos
In James Chudley’s book “Usability of web Photos” he outlines a framework to evaluate your photos:
- Are image fundamentals, such as composition, size, exposure and contrast appropriate for your image, your website and your users?
- Does this image create a convincing argument that supports or is supported by any surrounding content?
- Is your image communicating the correct message to the intended audience?
- Is this image strong enough to change a users behavior?
2) Stay away from filler photos
Jakob Nielsen did an eye tracking study to gauge how users approach website images. He found that “users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to ‘jazz up’ Web pages.”
Take a look at the example below. Users intentionally ignored the generic stock photo-esq images featured on this customer service site because they provide no added benefit.
3) Use photos to guide a reader
In a separate eye tracking study, usability specialist James Breeze found that users fixate on the model’s eyes and wherever the model’s eyes look.
In the example below you can see that in both images users were fixated on the model’s eyes, but when the model’s eyes are directed toward the product, more users also looked at the product.
Strategically use images to guide users to a desried outcome—product, chunk of text, or call-to-action.
4) Use photos for a purpose
We all know that many online readers skim. In fact, you’ve probably skimmed this entire article. Don’t risk readers missing valuable information! Provide important contextual information about a product or service in a single image.
In the example below, Square is able to efficiently show us the size of the product, how to use the product, how to connect the product and what the user interface looks like, all within one image.
What are your favorite usability guidelines or biggest pet peeves? Please share your thoughts in the comments section below!