Services and information - Canada.ca design pattern

Services and information is a pattern for presenting sets of links with accompanying descriptions (also known as doormat). Each link with its description provides an accurate and concise description of what a person will find on the destination page. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.

When to use this pattern

  • Use this pattern to provide links to topics or destination content related to the page it is on
  • Use when the primary purpose of the page is to provide clear choices to navigate to tasks

How to use this pattern

Content requirements

  • Content for each link and description pairing is written for a grade 6-8 reading level
  • Keep punctuation simple
  • Use popular keywords that the target audience will likely know and use; base choices on research and evidence
  • Don’t use acronyms or abbreviations unless most people know these better than the long-form equivalent
  • See the Canada.ca Content Style Guide for more information on how to write content for this pattern

Link requirements

  • Link text must make sense within the context of the page
    • It does not need to exactly match the destination page title
    • It does not need to be unique across Canada.ca
    • It must be descriptive, unique within the page, and clearly distinguishable from the other links on the page
    • Don’t end linked text with punctuation (for example, “How do you apply for funding?”)
    • The linked text must speak to a person (for example, “Apply for funding”)
  • The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)
  • Use only standard link styles as defined in the Web Experience Toolkit (WET)

Link descriptions

  • The link description complements the link it accompanies to provide greater detail and clarity about the scope of the link itself
    • Recommended style is to list keywords or keyword phrases separated by commas; full sentences are not required
    • Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
    • Don’t include links
    • Don’t include promotional messaging
  • The character limit for link descriptions is 120 characters (with spaces) in both official languages
  • Drop-down menus are permitted in place of a link description in specific circumstances:
    • When used to provide access to a large number of items at the same level (for example, lists of countries or species)
    • When the destination page consists primarily of a list of links, and so can be completely replaced by the drop-down menu
  • Use only standard presentation styles as defined in WET

Grouping sets of links with accompanying descriptions

The following styles may be used:

  • Demand-based
    • Prioritization is based on demand (for example, based on web metrics), with higher demand links appearing ahead of lower demand ones
  • Sequential
    • Use sequential, numbered doormats when links must be followed in a step-by-step order (for example, confirming eligibility, registering and then charging for GST/HST)
    • Use to allow people to skip over optional/non-applicable steps or steps they have previously completed
  • Subheadings
    • Use to group links and descriptions that are very similar, in cases where it wouldn’t make sense to move the group into a sub-topic page
    • Use to avoid information overload; ideally no more than 9 links with descriptions per subheading
  • Combinations of the above, as appropriate; however, limit application to avoid overly complex sets of links and descriptions

In all cases, priority sequencing is as follows:

  • In a single column layout, the priority sequencing is top to bottom
  • In using across multiple columns, the priority sequencing is from left to right, then top to bottom

Working example

Examples

Doormat links in 2 columns pattern
Screenshot illustrating a set of doormat links in 2 columns on Canada.ca. Details on this graphic can be found in the surrounding text.
Doormat links in single column pattern
Screenshot illustrating a set of doormat links in a single column on Canada.ca. Details on this graphic can be found in the surrounding text.
Sequential doormat links in single column pattern
Screenshot showing a set of sequential doormat links in a single column. Details on this graphic can be found in the surrounding text.
Doormat links in 2 columns grouped with headings pattern
Screenshot showing a set of doormat links in 2 columns, grouped with headings on Canada.ca. Details on this graphic can be found in the surrounding text.
Date modified: