Content design and layouts

Single quote icon

The design principle that attention is scarce and must be preserved is very different from a principle of 'the more information the better'.

Single quote icon

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:

  1. What is the primary action for someone to do on a page? 
  2. What are the secondary actions?
  3. 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.

Landing pages

A wireframe demonstrating a suggested layout for landing pages. This layout highlights primary actions and differentiates the content hierarchy.

(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.

A screenshot showing the carousel component from the AEM editor perspective. The option that says 'autoscroll' has been circled in red, showing it must not be checked.

When using carousels, do not select the autoscroll option as this has severe accessibility issues.

A grid showing colours from the colour scheme which is being phased out

Avoid using the 'section' colours.

This is an HTI...

...used for content that has a secondary CTA...

Use HTI components for secondary actions.