Content design and layouts
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
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.
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:
Use CTAs to communicate 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.
(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. (2) Seconday actions are displayed using HTI with CTA components. (3) Tertiary actions are further differentiated by using rich text.
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.
This is an HTI...
...used for content that has a secondary CTA...
Use HTI components for secondary actions.