Adobe Creative Cloud

August 30, 2016 /UX/UI Design /

8 Tips and Tricks for Using Images to Improve UX

When we think about usability, images are not the first thing to come to mind. Oftentimes as UX designers, we are so focused on making sure the information architecture is solid, the navigational flows are usable, and the calls to action and labelling are just so, that images are an afterthought. How many times have you used the placeholder image box with a cross through it in your wireframes and maybe even in your prototypes?

image02

It’s common to see wireframes with the placeholder image box used. The challenge here can be that we don’t fully think through what these images are for, what they will communicate or what they will be in the final design. Image: Flickr

Naturally enough, it turns out that images have a huge impact on the UX of our websites and digital platforms. Stock photography that feels cheesy and last minute placement of images can lead to users being put off by the content on a site. Users are also now very adept at ignoring any imagery that seems even remotely like an advertisement, a ‘banner blindness’ that has come from tuning out unhelpful advertising online.

What is a usable photo? What is good photo UX? It’s a question that is being explored, and will continue to evolve with the web and with techniques like responsive web. As a rule of thumb;

“ the most usable and effective photos communicate something clearly to the user, are useful, are in keeping with the brand, evoke an emotional response, and influence the user in the way that the designer intended”

James Chudley

image01

The Samsonsite website uses navigational images to further illustrate the navigational categories to users.

Jared Spool identifies three different types of images – navigation graphics, content graphics and ornamental graphics. The first category, navigation graphics, support the information architecture and navigational flow of a site, and help the user choose where to go next. Content graphics provide users with extra information they would not get from a written description. Airbnb is said to have doubled revenue by improving the content images that showed people where they would be staying. Ornamental images are decorative images that do not contain information. This third category needs to be used sparingly as these images are often least supportive of a good user experience.

With all of this in mind, here are some tips and tricks for making sure your images are as usable as possible, and are contributing to a great user experience.

8 Tips and Tricks for Using Images to Improve UX:

1. Design content first – including images!

Even if you do not have access to finalized images, make a habit of including directional imagery or proto-content. Adobe Stock makes it easy to preview watermarked images in your designs in Creative Cloud first, so that is one approach to quickly and easily pulling in images as you design. Having to think about these choices and provide direction on images will go a long way to improving the UX of the final product.

2. Consider your layout

Basic layout considerations include avoiding awkward cut-offs, and choosing imagery that complements the layout and format of the design you are using. It may seem obvious, but making sure an image is in the correct format ratio will go a long way to enhancing usability. Stretched images are distracting.

image00

Othr.com uses product shots with lots of whitespace to allow for stylish and readable text overlays on their site. This pairs descriptive text with a content image of the product to produce a great shopping experience.

 

3. Use text appropriately

Overlaying text on images can be a huge usability challenge. To ensure that the text is readable, use a contrast checker to evaluate the contrast between the text and all parts of the background image. As a general rule, overlaying text on an image works best on minimal images with lots of whitespace.

image03

Chemistry.com makes use of our impulse to look where eyes are looking to draw attention to the sign up form. Signups are likely the key conversion metric for this page, and this technique ensures the user is drawn to this area.

 

4. Use eyes to draw eyes in

Behavioural psychology explains that we are drawn to look where a set of eyes in a photo are looking, and this can be used to your advantage when designing a page – to draw attention to a headline or CTA. We naturally look where we see the gaze of a person in a picture gazing. Apparently this even works with the gaze of an animal!

5. Specific is better than generic

In your images, aim to use specificity to your advantage. Part of why stock photography has become a cliche is due to the general and vague nature of the images – such as women laughing alone with salad. New services like Adobe Stock Premium bring a higher quality set of images to the table – with exceptional, lush photography and more real, relatable scenarios. These images have the added advantage of being integrated in way that you can access, license and manage them within Creative Cloud.

Services like Adobe Stock Premium bring a more real world, diverse set of photography to your fingertips. Good photo UX relies on relatable and real feeling imagery.

6. Tell your story with pictures

When using stock photography, think very carefully about whether the image is the right one for what you are trying to convey. “Even when using stock photography, care should be taken to ensure that the photo is truly telling your story and reinforcing your message,” as Joshua Brewer says.

7. Accessibility matters

Image and photo accessibility is crucial to making your website usable by the widest range of people possible. Images that contain important information should have descriptive alt tags which convey the same information as the image. If an image contains a link, the alt tag should communicate what it links to. Purely decorative images should have blank alt tags, as this information is not crucial to comprehension or task completion. Alt tags also add SEO value, so this is a win-win!

8. Performance is UX!

A huge way in which images impact user experience is through loading time. Making sure images are optimized for web will reduce the (irritating) time users spend waiting for their experience to load. Using the Photoshop save for web feature gives you the opportunity to balance image quality with file size. A good rule of thumb for images is to try to keep them below 70kb where possible.

Photography is a key part of most user experiences on today’s media rich web. Creating good UX means paying imagery the same attention and due diligence that we do the rest of our design work. A little intentionality and thoughtfulness will go a long way to ensuring images are usable.

UX/UI Design

Get 10 free Adobe Stock images.

Search Adobe Stock for royalty-free images, 4K videos, photos, graphics, and more. Purchase an individual image or subscription and sync with Creative Cloud desktop apps.

Start Now