Adobe Creative Cloud

August 2, 2016 /UX/UI Design /

More Than Just Pretty: How Imagery Drives UX

As the saying goes, a picture is worth a thousand words. Human beings are highly visual creatures able to process visual information almost instantly — 90 percent of all information that we perceive and that gets transmitted to our brains is visual. Images can be a powerful way to capture users’ attention and differentiate your product. A single image can convey more to the observer than an elaborate block of text. Furthermore, images can cross language barriers in a way text simply can’t.

More than just decoration, images have the power to make or break a user experience. The following principles and best practices can help you successfully integrate imagery into your design and bring your app or site to life.

Only Use Relevant Images

Compelling images have a unique ability to inspire and engage your audience. But not all images improve the experience, some of them just take up space or in the worst case, confuse the user. One of the most dangerous elements in any design is imagery that conveys the wrong message.

image10

Images that aren’t related to the topic often cause confusion. Image credit: hubpages

Users react to visuals faster than text, so make sure your content matches the supporting visuals. You should select images that have a strong relationship with your product goals and ensure that they are context-relevant.

Images Shouldn’t Create a Visual Noise

It’s unlikely the purpose of your site or app isn’t to showcase images. Instead, the images you choose should showcase the purpose of your product. Use a limited number of striking visuals in your design, the ones that really capture a user’s attention. For instance, Apple’s homepage features just one large image as the focal point of the screen.

image09

Apple’s homepage features a huge image of the latest product.

This page works because the image shows the newest products in details and provides useful information for users.

Use High-Quality Assets Without Distortion

Make sure your images are appropriately sized for displays across all platforms. Images shouldn’t appear pixelated, so be sure to test appropriate resolution sizes for specific ratios and devices. Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your product to look skewed or too small/large.

psdistort

Left: Degraded imagery. Right: Correct resolution. Image credit: Adobe Photoshop

Image-Focussed Design Isn’t For Every Page

Getting people’s attention with aesthetically pleasing images certainly has value, but it comes at the price of making other elements harder to see and use.

Putting too much focus on images in your design might create a visual overkill that can seriously distract users from meaningful engagement with your content. You can see this effect in SoundCloud’s app where the image takes all the attention and you barely notice two buttons.

image07

In Soundcloud’s home view screen buttons are overshadowed by the image.

Although image-focused design is appropriate in some cases (e.g. Apple’s homepage example above), the vast majority of apps and sites should follow a balanced approach — images that are used in user interface should support the product, but not obscure other important content or overshadow functionality.

Use Multiple Mediums

Both illustration and photography can be used within the same product. Photography is ideal to showcase specific entities and stories. For example, if we need to show not just any flowers, but roses specifically, a photo is ideal:

redrose

For specific entities, look first to photographic representation. Image credit: Adobe Stock

Illustration is effective for representing concepts and metaphors, where photography might be alienating. In the case of showing a flower, an illustration works well:

flower

Illustration conveys an approximation of content to aid comprehension when total specificity isn’t required. Image credit: Adobe Stock

Have a Point of Focus

Imagery is a visual communication tool that conveys your message. A clear focus communicates the concept at a glance, whereas a lack of focus makes the image meaningless.

When the point of focus is obscured, the iconic quality of the image is lost:

planesinsun

Don’t. A lack of focus makes the image meaningless. Image credit: Adobe Stock

The most powerful iconic images consist of a few meaningful elements, with minimal distractions:

airplane

Do. A clear focus communicates the concept at a glance. Image credit: Adobe Stock

Thus, avoid making the user hunt for the meaning in the image. Chances are, they are only giving your content a glance.

Show Real People

Human images are a very effective way to get your users engaged. When we see faces of other humans it makes us feel like we are actually connecting with them, and not just use a product. However, many corporate sites are notorious for the over-use of insincere photography which is employed to “build  trust.”

image11

Don’t. Inauthentic images leaves the user with a sense of shallow fakery. Image credit: Material Design

Usability tests show that purely decorative photos rarely add value to the design and more often harm than improve the user experience. Users usually overlook such images and might even get frustrated by them.

A very simple rule of thumb is to use high quality photographs of people, who match your app’s or site’s character. Imagery you use should be an authentic representation of your product, company or culture.

fatherdaughter

Do. Show real, down-to earth people people and make sure that they really match your product’s characters. Image credit: Adobe Stock

Trigger User Emotions

Apps and sites are built to perform a function. But beyond this, they should be engaging, exciting, even fun to use. Adding delight to the product is a great way to make it not only more human but also make it unique, because a good overall impression isn’t just about usability, it’s also about personality.

If you already have a satisfying customer experience, adding delight to your product helps create an emotional connection with your users.

image06

Snapchat knows that even a zero-data state screen with a proper image can be fun and delightful.

Conclusion

Thinking about images in terms of their usability is important. All visual communication in your design leaves a cumulative impression on the user.

Compelling images have a unique ability to inspire and engage your audience to provide useful information. So take the time to make every image in your app or site reinforce user experience.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD