5  Using imagery and visuals

Summary

There is always a trade-off when using imagery. Imagery can help create ambiance, impart information or orientate the user. But images slow down page loading and increase scrolling and scanning time, especially on mobile devices. Images should not be used to provide information alone.

5.1 How to use images

Users are primarily visiting Library webpages to access information or services. Therefore images and visuals should support these aims either by informing or orientating the user.

Be wary of using images that don’t do either of these things, and never rely on imagery alone to provide information. This will exclude users who cannot see or access the image. Likewise images that contain text are difficult for some users to read, so should be avoided if possible (See Section 2.3).

Images can also make scanning more difficult and increase scrolling time, especially on mobile devices. Remember that users are just as likely to be accessing from a mobile device than a desktop or laptop computer (Section 2.1).

Therefore use images carefully and consider the trade-off in either including or excluding an image or visualisation.

Tip

Services usually work best without relying on images. Focus on writing clear, simple content for your service first. GOV.UK Design System: Images

5.2 Types of images

5.2.1 Informative images

  • Photographs: if you need to show a lifelike representation of something such as a piece of equipment or room that can be booked.

  • Illustrations: useful for conveying complex processes or information that is difficult to describe.

  • Icons and logos: used to represent menus, actions or objects and can orientate the user on the page as they are easy to scan. However, icons don’t have universal meaning and are open to misinterpretation. If you use icons, ensure they are consistent across pages.

  • Infographics and data visualisations: as the name implies, these are images used to summarise data, usually to show a trend or pattern of complex information in a simplified form. Good visualisations have informative titles and annotations to clarify their purpose.

5.2.2 Decorative images

Decorative imagery are images which are used to create ambiance and should be marked as decorative so that they are ignored by screen readers.

5.3 Making imagery accessible

Alternative text, or alt text is read aloud by screen readers or displayed when an image fails to load. All images should include alt text that explains the meaning and the context of the image to the user.

Writing good alt text

Good alt text:

  • tells people what information the image provides
  • describes the content and function of the image
  • is specific, meaningful and concise

Use normal punctuation, like commas and full stops, so the text is easy to read and understand.

Generally, aim for no more than 2 sentences of alt text. GOV.UK Design System: Images

You will need to consult the documentation for the tool you are using to create your webpage for the instructions on how to add alt text to your image.

5.4 Further reading

The use of imagery is a topic in itself that I encourage the reader to explore. In this book we are only considering webpages that comprise of largely text and links. The GDS have detailed guidance for these type of webpages in their style guide for images and content guide for images.

NN/g cover a broader set of uses in their article on their research into using imagery in visual design.