TC Design
Page design and visual hierarchy
- Dan Larmour
- 1 What is good page design?
- 1.1 Keep it simple
- 1.2 Prioritize information
- 1.3 Use visual cues
- 1.3.1 Colour and contrast
- 1.3.2 Scale
- 1.3.3 Grouping
- 2 Summary
- 3 Resources
What is good page design?
Cognitive overload is a term used to describe what users experience when there is too much information presented on a page and they have a difficult time either deciding what to do (analysis paralysis), or cannot easily and efficiently find the information they are looking for. This can lead to frustration, errors, and task abandonment.
Good page design uses visual hierarchy to reduce cognitive overload so that users can easily and quickly find the information they need or complete a task.
Three tips to improve your page design and help reduce cognitive overload are:
Keep it simple
Prioritize information
Use visual cues
Keep it simple
Avoid having too much information on a single page or giving the user too many options and include only the information that a user requires in the specific context to help them complete a task or make decisions.
When you begin designing a new page, start with the “one thing per page” principle. For example, if the user is performing a linear task flow, such as filling out an online form, the wizard pattern helps chunk the input fields into bite-sized pieces that the user can easily focus on, often with only one question per page. Note that for enterprise software, this principle might not always apply since internal users often need to repeat and switch between tasks quickly, and are more familiar with the application since they use it every day (for more information, check out this Design principles for admin interfaces article). In either case, focus on the problem that you are solving for your users and start designing as simple as possible.
In general, more choices increases the chances of user errors and mistakes which in turn makes validation and error recovery more difficult. It also means we have to provide more ways of reversing the trouble and getting the user back to the intended path. Whenever possible, break up the content or task into “one thing per page” chunks to limit the number of options available to the user, and always use clear and concise labeling and plain language.
For more information on designing online forms, refer to this Structuring forms article from GOV.UK. There is also a playbook for designing services for government users to help design enterprise software for public servants.
Prioritize information
Essential information should be displayed prominently and secondary information can be hidden behind a toggle or in a less prominent location, such as a submenu. This helps the user focus on what is important and ignore any unnecessary information.
Use visual cues
Visual cues can help users quickly and easily determine what content is important to them whether they are trying to complete a task or simply looking for information. In page design, colour and contrast, scale, and grouping are powerful tools that can be used to create visual hierarchy.
Colour and contrast
The colour itself doesn’t create hierarchy, but rather the contrast in value and saturation between a specific element and the context in which it appears. Use bold and heavy-weighted fonts for headings to contrast with the body text.
When using colour to communicate hierarchy, limit your colour palette to two primary and two secondary colours - any more mutes the visual effect of hierarchy. Don’t use too many contrast variations because then nothing actually stands out. Do not rely solely on colour for hierarchy because of colour blindness (WCAG 1.4.1 Use of Color).
Scale
For text-heavy content, try to limit font sizes to three: small, medium, and large (body, subheading, heading). For task-based pages, use size and scale to indicate what actions or areas require the user’s attention. The most important information or design element should be the largest to attract the user's eye, but limit the amount of ‘big’ items to two per page or section so that they stand out and reinforce the hierarchy.
Whether you are designing a page with text-only content or for task completion, good heading structure will not only help users scan and find important information quickly, but it is also required to meet the WCAG 1.3.1 Info and Relationships (Level A) criterion. Each page must have at least an H1 identified, and if you are using more than one heading level, make sure they follow the proper structure: H1, followed by H2, followed by H3, and so on.
For more information on accessibility refer to Accessibility page.
Grouping
Implicit and explicit groupings help users quickly see and understand the structure of a page, including both text content and interface components such as navigation menus, notification banners, and buttons.
Implicit grouping is done through proximity such as body text located directly under a heading which implies that the text is related to that heading. Another example is an EDIT button in line and close in proximity to the content that can be edited.
Explicit grouping is done through use of white space and enclosure. An example of explicit grouping using white space is the amount of space between the end of content and the next heading/content pairing. An example of enclosure is a card or tile border.
Consider using the “squint test” or applying a slight blur to your design to get an idea of the conveyed groupings and hierarchy.
Summary
Before you begin design work on a new content-based page, define the hierarchy of the content and the key points you want the user to take away. For task-based pages, define the primary and secondary tasks the user will perform and design the hierarchy based on the tasks.
Once you know the hierarchy, focus on applying variations in colour and contrast, scale, or grouping to illustrate the hierarchy.
Whenever designing new pages and content, user feedback is the most valuable tool, so it is always recommended that you test your pages with target users to see if the design reads as intended.
Resources
Services for government users - Service Manual - GOV.UK
Structuring forms - Service Manual - GOV.UK
TC Design