By following some design best practices, we can improve our site and create a familiar and easy user experience. By focusing on how we use components, readability, CTAs, grouping, reading patterns, backgrounds and layouts, users will find it easier to navigate, understand content, and complete tasks. This guide outlines key principles to follow when constructing pages.
On this page
- Use components as intended
- Optimise text readability
- Establish clear Calls to Action (CTAs) with button hierarchy
- Group related elements logically
- Design for reading patterns
- Use section backgrounds purposefully
- Choose appropriate section layouts
- Proper use of Headings for content hierarchy
- Cards vs Card Carousel
Use components as intended
Each component in the CMS has a specific purpose. Using them consistently helps users understand how to interact with different elements across the site. Many components are also tracked in Google Analytics, which helps us track how users interact with them. Using components as intended gives us strong data. This helps us understand our site visitors better.
Example
Cards
- Purpose: Cards are primarily navigational elements. They should always contain a link directing the user to another relevant page.
- Avoid: Using cards exclusively for the display of information in the style of an infographic.
- Alternative: For non-navigational visuals, use a content block. This can be an image block, an icon block, or a text and image block.
In-page alerts
- Purpose: In-page alerts are for important information that needed to grab a user’s attention.
- Avoid: Using multiple in-page alerts on the same page. Each extra alert makes the component less important.
In-page navigation
- Purpose: The in-page navigation component ('on this page') lets users quickly find key topics on a page. They can then jump straight to the content section they need.
- Use the right tool: The in-page navigation updates on its own based on the content headings. Manually copying this function with other components leads to extra maintenance. If the content changes, you’ll need to update the links.
-
Managing length: A common challenge occurs when the list of links in the In-page nav gets too long. This can leave a large empty space beside the page content, particularly on wider screens. To mitigate this:
- Optimise content: Review the page content for conciseness. Shorter, focused content means fewer navigation links. This helps prevent overwhelming the user.
- Reorganise Information Architecture (IA): If a page covers many different topics, split it into focused pages. This usually makes it easier to use and navigate the page and the site.
Optimise text readability
Long lines of text on a big screen are difficult to read with ease.
- Guideline: Avoid using the full-width layout for long paragraphs, especially on desktops.
- Recommendation: Use narrower sections, like the 3/4 width section. This keeps line lengths short and helps improve reading speed and understanding. It is okay if there is white space to the right of the text.
Establish clear Calls to Action (CTAs) with button hierarchy
Buttons guide users towards important actions, but overuse can diminish their impact.
- Primary Buttons: Use these for the most important action you want users to take on that page or section. If everything is marked as primary, nothing stands out, confusing the user.
- Hierarchy: Use a combination of primary, secondary, and tertiary buttons to indicate the relative importance of different actions.
- Placement: Often, the main primary CTA makes the most sense as the final action presented on the page.
Group related elements logically
Keep related information and interactive elements together visually.
- Guideline: If several pieces of content or functions are related, try to keep them in the same component or block whenever you can.
- Benefit: This reduces visual clutter and makes the relationships between elements clearer to the user. Avoid using multiple separate blocks for items that naturally belong together.
- Example: Place your introductions under Heading 1 in the hero banner. Don't create a separate section in the page content.
Design for reading patterns
Users typically scan web pages in two predictable patterns. Pick the right components based on your content size. This will help people see and understand it better if you keep these reading patterns in mind.
-
F-Pattern: In text-heavy areas, users first scan across the top. Then, they move down the left side. Finally, they scan horizontally again but in shorter sections.
- Component choice: Use Feature Blocks or standard WYSIWYG blocks. They help users read smoothly down the page.
- Note: if the overall page is long, the F-pattern also applies to the scanning of the page.
-
Z-Pattern: Users often scan visually from the top-left to the top-right. Then, they move diagonally down to the bottom-left and across to the bottom-right, much like following a grid.
- Component choice: Use content blocks with images or icons. Keep supporting text minimal for best results.
-
Alignment: For longer pages, the F-pattern works best. Keeping sections aligned helps create a smooth reading path. You can change the alignment between sections to highlight that content.
Use section backgrounds purposefully
Using different background colours for page sections can help separate content. This makes the page feel lighter and easier to read.
Avoid using too many different background colours on a single page. Too much variation creates visual clutter, and gives the page a 'stripey' effect. This can distract users and make them miss important content.
Choose appropriate section layouts
Consider how your layout choices impact user interaction and reading flow, not just how content fits vertically.
- Common choices: Full-width and 3/4 width sections are often sufficient for most layout needs.
-
Multi-column considerations: Two half-columns may save space, but they can cause usability issues:
- Reading flow: Scanning content across narrow columns, especially after interaction (like opening an accordion), can be disjointed. Users might also not know whether they should read down then across or across then down.
-
Users will scroll: It's true that the further down the page you go, the more likely users are to drop off. However, they are used to scrolling. Don't force content into complex column layouts solely to avoid page length. If a page feels too long considering:
- Optimising content: Make your messaging more concise.
-
Reorganising the information architecture (IA): Think about breaking the content into several clearer pages.
Proper use of headings for content hierarchy
Heading styles help establish content hierarchy and is an accessibility requirement (WCAG 1.3.1). Use them sequentially, starting with H1 for the primary page title, then H2, H3, and so forth. Skipping heading levels breaks the logical flow. This can confuse users and hurt search engine optimisation.
Cards vs Card Carousel
Deciding between a standard card layout and a card carousel shouldn't solely rely on saving space. Each option has distinct advantages and disadvantages that impact user experience.
When to use:
Cards
- Description: All cards visible at once.
- Pros: Easy to find and compare information, reduces user effort.
- Cons: Takes up a lot of page space, a look cluttered.
-
Use Cards when:
- All content is equally important and should be easily discoverable.
- Users need to compare multiple options.
- The amount of cards is small to medium.
Card Carousels
- Description: Cards hidden in a scrolling display.
- Pros: Saves space, can be visually engaging, highlights specific items.
- Cons: Users may miss content, difficult to navigate, can cause accessibility issues.
-
Use Card Carousels when:
- Space is limited, and the content is not critical.
- You want to highlight a few key items.
- The design requires a visually dynamic element.
It's best to avoid having too many cards, no matter if you're using a cards component or cards carousel. As a general rule, try to keep it to 9 cards or less.
Always consider the user's needs and how they will interact with the content. If the content is very important, a carousel is usually not the best choice as content may be hidden. In many cases, a simple card layout provides a better user experience than a card carousel.
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.