A pattern for presenting sets of links and descriptions displayed in concise blocks. Each doormat has a title and short summary of the destination content. Clear, well-written doormats that are accurate and distinct from one another help users choose the right path to complete their tasks.

On this page

• When to use
• What to avoid
• Content and design
  • Structure of a doormat
  • Link title
  • Link description
  • Order and organization of doormats
  • Combining link titles and descriptions
• Complementary templates and patterns

When to use

• 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
• Use in the following templates or patterns:
  • Institutional landing page (mandatory)
  • Topic page (mandatory)
  • Subway index page (mandatory)
  • Subway links to sub-steps (optional)
  • Campaign page (optional)
  • Stylized steps (optional)

What to avoid

• Don’t use doormats for simple lists that do not require a description to provide more context (for example, a list of provinces and territories)
• Don’t use a doormat format without following the specific rules for length and style
• Don’t repeat links that are found in the Most Requested pattern (if using both patterns on the same page)
• Don’t use icons or images in the pattern to create more emphasis on the doormats

Content and design

Rules and options for creating doormats and guidance on creating a cohesive set of doormats.

Structure of a doormat

A doormat has a link title in hyperlink format and a link description in text format and uses this basic layout:

Link title

Purpose

• Provides a very short description of page it links to
• Helps user decide if that page will assist them to complete their task

Length

• Optimal character limit for links is 45 characters (with spaces) for both official languages
• Can extend to 75 characters (with spaces)
• Tip:
  • Aim for the English version to be under 35 characters (with spaces) to allow for the French version to be under 45 characters (with spaces)

Content

• Must make sense within the context of the page
• Must be descriptive, unique within the page, and clearly distinguishable from the other links on the page
• Does not need to exactly match the destination page title
• Does not need to be unique across Canada.ca

Format

• Capitalize the first letter of the first word and capitalize all proper nouns
• Don’t end linked text with punctuation (for example, write "Who is eligible" instead of "Who is eligible?" )
• Add a link to the destination page
• Enhancement - Labels: You can add labels to the link title indicating the status of the program or service if it has recently changed, for example “New” (use info label) or “Closed” (use danger label)
  Refer to: Labels

Style options

• Choose a consistent style for the doormats on a page, such as topics, products or services, actions or audience groups
• Topics
  • Example:
    • Arts and media
    • History and heritage
    • Cultural trade and investment
    • Sport
• Products or services
  • Example:
    • Registered retirement savings plan
    • Tax-free savings accounts
    • Registered education savings plan
    • Registered disability savings plan
    • First home savings account
• Actions
  • Example
    • Notify the CRA of the date of death
    • Apply for the CPP/QPP death benefit
    • Represent someone who died
    • Apply for a clearance certificate
• Audience groups
  • Example:
    • Individuals
    • Businesses
    • Charitable organizations
    • Non-Canadians
    • Tax Professionals

Link description

Purpose

• Provides greater detail and clarity about the scope of the link itself
• Helps the user decide if that page will assist them to complete their task by giving them a bit more information than the link text

Length

• The character limit for link descriptions is 120 characters (with spaces) in both official languages
• Tip:
  • Aim for English version to be under 100 characters (with spaces) to allow for French version to be under 120 characters (with spaces)

Content

• Describe what the user can find or do on the page that is linked to
• Recommended style is to list keywords or keyword phrases separated by commas rather than full sentences
• Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
• Don’t repeat information already provided in the link title
• Don’t include promotional messaging

Format

• Don’t include links
• Don’t end with a period or any other punctuation
• Don’t add extra formatting to the descriptions (for example, bold, bullets)

Style options

• Comma separated list of the links or headings on the next page (recommended style)
  • Tip: Don’t include “and” before the last item in your list
    • You save a few characters of space
    • You avoid having to figure out if an Oxford comma is needed to make the phrase understandable
  • Example:
    • Tax-free savings accounts, registered savings plans, pooled pension plans, plan administrators
• Description of the tasks the user can complete
  • Example:
    • File income tax, get the income tax and benefit package, check status of your tax refund
• Description of what you can get and who is eligible
  • Example:
    • Monthly payment for eligible families with children under 18 years of age
• Enhancement - Drop-down menu:
  • 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

Order and organization of doormats

• Demand-based:
  • Prioritization is based on demand (for example, based on web metrics), with higher demand links appearing ahead of lower demand ones
• Enhancement: Numbered list
  • 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
  • Use the stylized steps pattern when presenting sequential doormats on a page
  • Refer to: Stylized steps
• Enhancement: Use 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
  • Refer to Headings and titles for guidance on writing good subheadings
• 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

Combining link titles and descriptions

Choose compatible styles for your link title and description to support user task completion.

Choose text that distinguishes one link from the other

The goal of doormats is to help a user select the best path to complete their task. To support this, write the link title and link description in a way that helps users determine if a link is relevant to them or not.

Example: Sample doormats for benefits

Do:

Link descriptions provide relevant information on what users can get and who is eligible. Link descriptions help users distinguish between various paths and tasks.

Don’t:

Link descriptions have almost identical text and do not help users to determine if they are relevant to them. Instead put the generic text as an introductory sentence between the heading and the doormats.

Use parallel structure

Parallel structure means that the doormats match one another grammatically and share other basic similarities. For example, use verbs for the link text for all doormats on the page or use nouns for the link text for all doormats on the page, but do not include a mix of both.

Example: Using parallel structure for link text for benefits

Complementary templates and patterns

• 

  Topic

• 

  GC subway page

• 

  Campaign page

• 

  Context-specific features