Images are among the most important elements in UX design. They can make or break a design by either reinforcing the content or call to action, or derailing it and confusing the user.
Without images of some kind, a product’s users are presented with nothing but text content. While that can provide good UX in some cases, long-form content can appear as an intimidating wall of text that some users may find difficult to consume. Images are often necessary to provide context to the content, and to reinforce key ideas. In still other cases, images themselves can become key parts of the content, such as with infographics or in new stories.
Learning the terminology around images is the first step in learning how to successfully implement images in UX designs. In addition to the definitions of each term, we’ll explore how they’re used and why they’re important for UX designers to understand.
Images in UX design are generally broken down into two categories: photographs and illustrations. Beyond that, there’s also the “image placeholder”, which holds space for an image that either hasn’t yet loaded or hasn’t been added to a design mockup.
Photographs are an essential part of website and product design. Every photo tells a story, and that story can evoke powerful emotions and engage users. Photographs come in many forms in a design—product images, profile pictures, hero images, and images to support content—and help bring a website to life.
Humans are visual creatures, so the types of photos you use in a website or product design is important. Studies have shown that photos of real people (not stock photos) draw user attention more than other forms of content, even when they take up less space. Other high-attention photo types include those of product details and those used to reinforce content (or those that actually contain content).
Illustrations include drawings, sketches, artwork, printed work, or graphic design (like an infographic) that clarifies or explains an idea. They can evoke positive emotions and create an enjoyable user experience. Illustrations, depending on their style, can be used to tap into nostalgic feelings, too (as they evoke the cartoons most people watched as children).
Illustrations can be particularly useful to liven up content that is dry or dense. They can also be a fantastic tool to reinforce or shape your brand’s identity in your product. There are stock illustrations available from sites like unDraw and Absurd Design, or you can hire an illustrator to create custom illustrations for your product.
When designing a new web page or app, there are times when we need to hold space for a photo or illustration but don’t have the final image available, such as in wireframes or early mockups and prototypes. That’s where an image placeholder comes in.
An image placeholder is a dummy image that is used to draw attention to the need for an actual image, most commonly seen as a grey background with a mountain/sun icon in the center. Some sites, however, design their own version of an image placeholder that’s in line with their branding.
Image placeholders can also be seen in skeleton loaders, to hold space for images while the page content loads.
Start improving your skills
Learn the UI/UX skills you need to succeed — regardless of your level.
Besides displaying images inline within the content of a page, there are specific ways to show images within a design that you’ll want to familiarize yourself with: the Hero Image, the Thumbnail Image, and Lightboxes.
First impressions are vital on any website. The hero image is often the first impression a visitor gets when visiting a website.
A hero image is usually a large, eye-catching canvas at the top of a website. It could be an image, a video, or a GIF. It has the power to grab a user’s attention and engage them to explore the site further. Choose your hero images wisely, as they need to reinforce the overall message of the site and are key to audience engagement.
While hero images are big and bold, thumbnail images are pretty much the opposite. Thumbnails are small versions of images with which users can interact. Those interactions can include navigating to a new page, opening the full-size image into a lightbox (more on those in a second), or otherwise displaying the selected image. The thumbnail itself can represent an image or a still from a video.
Thumbnails are often used for two reasons: scanning through a long set of photos or videos is tedious, so using thumbnails allows users to view more images on a single screen. Thumbnails also reduce overall server load, as more images can be loaded with less bandwidth, only loading the full-size images the user actually wants to see.Because of this reduction of server load, designers should create separate thumbnail assets, rather than simply shrinking the full-size image on the server (which can actually increase the server load and the page’s load time).
If you’re designing a product with a lot of photo content, using a lightbox can be a lifesaver. Rather than having to display every image at full size on the page (which can make pages with a lot of photos unwieldy), a lightbox will open the images into a larger format when the user clicks on an image, overlaying the entire screen. It sort of mimics a projector and lets users view the image distraction-free.
Remember that if you have multiple images in a sequence, you should include some kind of visual cue for photo navigation. This can include arrows on either side of the photo or a series of dots or numbers near the bottom of the image.
If you have an account on virtually any social media site, you’re probably already familiar with profile images. Besides personalized profile images users upload to a site, there are also avatars and profile placeholders to consider as a UX designer.
Let’s start with profile pictures. A profile picture is generally a personal photo that represents a user on social media or other sites that include user profiles. It’s usually found near the account name on a user page, in comments, or on posts.
Since profile pictures are often photos of the user’s face, circular shapes are preferred, as they frame the face better.
When a new user signs up for your product, before they add a profile picture, an avatar is often used as a type of profile placeholder. Avatars usually include a colored background and some kind of profile icon, the user’s initials, or an identicon (which are covered below). It should go without saying that a user’s initials should only be used if your product requires them to enter their name during the signup process.
Similar to an avatar, a profile placeholder is used in place of a profile picture before new users have had a chance to add one. These generally include a colored background and profile icon. What differentiates them from an avatar is that they’re not customized to each user, as initials or an identicon would be.
Profile placeholders can also be used in wireframes, mockups, and prototypes when designing a product.
Other image types
There are other types of images—icons, identicons, and emojis—that you may use in designing a website or product. The importance of these is sometimes overlooked, but they can be an integral part of any user’s experience, as they can enhance surrounding content and interaction.
Icons have been a mainstay of product design for as long as graphical user interfaces have been around. Icons are pictograms used in web and mobile interfaces that indicate to users functionality of various elements throughout the design. They visually represent ideas, objects, or actions and help users complete tasks.
Icons are often seen in relation to navigation, such as a house icon for the home page. The best icons are immediately recognizable in relation to the idea they represent.
Similar to icons, identicons are used in avatars and are an elegant way to represent users who have not yet uploaded a personal profile picture. They’re created by using a hash value, usually an IP address or string, creating a figurative fingerprint for the user they represent.
You’re probably familiar with emojis from social media or texting apps. Emojis are tiny images used to represent a variety of things. The word “emoji” comes from the Japanese word for pictograph, and has nothing to do with the English word emotion.
Emojis were first used in 1997, but only went mainstream in the past few years. They can represent everything from facial expressions to food, animals, objects, places, and even the weather.
Emojis can add an informal feeling to UX design, and create a more human connection with users. They’re most commonly used in conversational products like chatbots.
Image quality on everything from photographs to emojis is essential for providing high-quality user experiences in product design. If an image looks blurry or fuzzy, it signals low quality to the user. This is a major red flag and reflects poorly on your brand and products. In the worst case scenario, poor image quality might make a user stop using your product all together.
Images should appear crisp and in-focus in any user interface design. Be sure to account for the higher resolution of retina screens by providing image versions at various sizes. Exporting different versions to be served on different devices can also reduce server load.
Because of the importance of images in user experience design, it’s vital to learn the basics of how images are used and how to properly refer to them. Image terminology and these concepts help build the foundation of your UX knowledge.
Because images are such a key part of creating a positive, pleasant user experience, spending the time mastering these concepts and why they’re important is necessary for UX designers and anyone working on UX design projects. Thankfully, if you think of them in terms of how you see them on the web every day, they’re easy to understand!
Writing for the tech industry for over a decade has made me a superhero at breaking down super complicated topics into simple, easy-to-understand copy.