Most requested band: Canada.ca design system
Last updated: 2024-04-03
The most requested pattern features top tasks for landing pages that offer many choices. Top tasks are the main things that users are trying to do in a given context. The most requested pattern functions as a band that runs across the full width of the page on which it appears.
On this page
When to use
Use this pattern on landing pages where people are trying to find where to start their task, such as a topic page or an institutional landing page.
What to avoid
Don’t use this pattern when you want people to stay on the page and do their task.
Don’t use this to promote departmental preferences. Use data and evidence to determine the top tasks people are trying to access.
Don’t present different top tasks on the English and French versions of the landing page. Top tasks should be the same in both languages.
Content and design
Find content and design specifications and visual examples.
Content specifications
The heading is “Most requested” in English and “En demande” in French.
Include links to relevant top tasks - use evidence and data to determine which links should appear.
Organize the links in a bulleted list.
Make bullets visible so links are easy to scan.
Recommended maximum of 8 links.
Use task-oriented, plain language link labels (avoid program names or titles that may be unfamiliar to people).
On large screens:
- the heading appears to the left of the links
- the list of links appears in up to 2 columns
On small screens:
- the heading appears above the links
- the list of links appears in a single column
Design specifications
-
Layout:
- Columns: 2 columns of bullets on large and medium screens, single column of bullets on small screens (if you have only 2-3 links, make it a single column in all screen sizes)
- Tab order: left to right, then top to bottom
-
Styling:
- Background colour: #f5f5f5
- Font family: Noto Sans
- Font weight: Bold
- Heading: H2, Lato: 1.2em
- Line height: 2em (base size is 20px)
- Text size: 87% (base size is 20px)
Visual examples
Image description: most requested - large screen
Most requested links appear in a horizontal band with the heading “Most requested”. Links are organized in a bulleted list.
Image description: most requested - small screen
Most requested links appear in a bulleted list underneath the heading “Most requested”.
How to implement
Find working examples and code for implementing the most requested pattern.
GCweb (WET) theme implementation reference
The implementation reference includes how to configure elements of the most requested band.
Implementations
Determine what best suits the type of page you're creating.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
Research and rationale
Research findings
The banded approach to the most requested pattern was successfully tested on the Canada.ca home page in 2018.
As part of the Contact the Canada Revenue Agency (CRA) project in 2019, the banded approach was successfully tested on a prototype of the CRA institutional landing page.
The usefulness of most requested links for navigation pages was reconfirmed as part of the Wayfinding project in 2022.
Policy rationale
The most requested pattern is required in the following mandatory templates:
Latest changes
- Updated guidance to reflect the banded style for the most requested pattern
- Documented the most requested pattern
Page details
- Date modified: