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.
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.
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.
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.
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:
Illustration is effective for representing concepts and metaphors, where photography might be alienating. In the case of showing a flower, an illustration works well:
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:
The most powerful iconic images consist of a few meaningful elements, with minimal distractions:
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.”
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.
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.
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.