The design principle that attention is scarce and must be preserved is very different from a principle of 'the more information the better'.
Herbert A. Simon
Cognitive psychologist
How do people read online?
When people come to a web page they are generally looking for specific information to help them accomplish at least part of a task. Research shows people typically scan through content looking for key words.
This is useful to know because it shows the importance of thinking about content hierarchy, the order, layout and format of the information we're providing to our readers.
Content hierarchy
A good way to start thinking about the content hierarchy is from the reader's perspective. What are their needs? What is the scenario in which they might be reading the content? On what device? What are the misconceptions they might have?
Then think about how content can be laid out so they will easily understand the following:
- What is the primary action for someone to do on a page?
- What are the secondary actions?
- What is the content they can explore?
These should be visually differentiable:
- Primary CTAs should be used for the most important actions someone can take on the page. Ideally there should only be one primary CTA in sight at a time, to help focus the reader's attention.
- Secondary CTAs should be used in cases where there are additional optional actions. They still get attention, but don't clutter or draw away from the primary actions.
Just another header in a big world of content
- Elements like headers, bullet points, icons are all ways of getting people’s attention towards key information. This requires structuring content in a way it can be broken up into easily digestible chunks.
Landing pages
(1) Starting with text means that mobile readers can quickly understand what the page is about. The primary action is communicated using an individual CTA component. Related but optional/alternate actions are displayed using the secondary CTA.
(2) If you find you want to further delineate hierarchy of actions, use rich text components. The bold and underlined treatment for links should suffice to communicate tertiary actions.
(3) If there are multiple key actions, the zig-zag layout provides visual interest on a desktop/large tablet screen which maintains attention but still makes it clear what to do next. Just note that these collapse left to right on mobile devices.
Tips for components
- Do not use headers for introductory text.
Example of a notice
Use 'Dark Grey' HTIs to help important content such as alerts, notices stand out more.
You can find this option in 'Component Style' under the 'TEXT' tab.
- Use the dark grey HTI to make important information stand out.
- When using carousels, do not select the autoscroll option as this has severe accessibility issues.
- Avoid using the 'section' colours.