Help users toFind information on a document

Also known as: guidance images

Using guidance images can help users to understand a complex message, show a user how to perform an action or guide a user to complete a task.

Inline guidance imageExamples of guidance images displayed inline and right-aligned.
Right-aligned guidance imageExamples of guidance images displayed inline and right-aligned.

When to use this pattern

Only use guidance images to enhance the information being conveyed, when research indicates a real user need. Used correctly, guidance images can help users understand:

  • complex guidance when completing a task
  • how to perform an action
  • what information you’re asking from them
  • where to find specific contextual information, such as a reference number on a document or the relevant side of an identity document

When not to use this pattern

Do not use guidance images:

  • as decoration
  • when there is no real user need

How it works

If the image represents something physical, such as a document, you should use the aspect ratio of that object. Follow our guidance on the use of images.

The examples above have been used in public-facing services.

Services using this pattern

  • EU settlement account recovery
  • Generic identity verification
  • Update your EU settlement scheme details
  • Refugee integration loan
  • Registered traveller
  • Passport renewals

Research

Research has shown that guidance images can help to guide a user through a sequence of steps and clarify what information is required from them. It has been shown to work well when representing something physical, such as a letter or an ID document, to help point users to a specific area of it.

Accessibility

When using an image as guidance, remember to include alternative text (alt text). We recommend following the guidance on the use of alt text in the GOV.UK Design System.

Get in touch

If you’ve got a question or suggestion share it on the Slack channel #ho-design-system, on GitHub or email design@digital.homeoffice.gov.uk.