Layout and Hierarchy

Can you understand the meaning of the page and complete your task?

Why it’s important:

David has attention deficit disorder and has trouble staying focused on busy pages.
Geoffrey is not confident in using technology to find information online.
Temara is distracted and needs to fill out an important web form.

Key information is understandable at a glance. Use minimal design so the user can decipher as much information as quick as possible.
Create a clear hierarchy by positioning items according to their level of importance. For example, place key actions at the top or bottom of the screen (reachable with shortcuts).
Plan the heading structure early. Ensure all content and design fits into a logical heading structure.
Avoid skipping heading levels as screen readers rely on navigating by hierarchical structure.
Make sure users can differentiate the navigation menus from main content.
To assist users with low vision or trouble focusing, group related items close to one another.
Headings don’t need to decrease from 1 to 6 on all pages. Whilst you don’t need to use all the headings, they still need to be sequential. For example, avoid skipping from H2 to H4.

Last modified: 3 December 2020