From a1ea612dfc64f768f137e3306bbfd98438179733 Mon Sep 17 00:00:00 2001
From: Jennifer Mealing
Date: Wed, 23 Aug 2023 14:56:12 -0400
Subject: [PATCH 01/17] Update services-information.md
---
common-design-patterns/services-information.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/common-design-patterns/services-information.md b/common-design-patterns/services-information.md
index 6bddd3b7b9..5bc9653b74 100644
--- a/common-design-patterns/services-information.md
+++ b/common-design-patterns/services-information.md
@@ -2,8 +2,8 @@
altLangPage: https://conception.canada.ca/configurations-conception-communes/services-renseignements.html
date: null
dateModified: '2018-12-19'
-description: null
-title: Services and information design pattern
+description: Guidance about using the services and information pattern on Canada.ca.
+title: Services and information
---
From a19ce2e080c70d8524d600b1437513302aab6f06 Mon Sep 17 00:00:00 2001
From: Jennifer Mealing
Date: Wed, 23 Aug 2023 15:16:12 -0400
Subject: [PATCH 02/17] Update services-information.md
---
.../services-information.md | 361 ++++++++----------
1 file changed, 168 insertions(+), 193 deletions(-)
diff --git a/common-design-patterns/services-information.md b/common-design-patterns/services-information.md
index 5bc9653b74..db9b08f3b4 100644
--- a/common-design-patterns/services-information.md
+++ b/common-design-patterns/services-information.md
@@ -5,208 +5,183 @@ dateModified: '2018-12-19'
description: Guidance about using the services and information pattern on Canada.ca.
title: Services and information
---
+
Last updated: {{ page.dateModified }}
+
The services and information pattern presents sets of links with accompanying descriptions (also known as doormats). It acts as a roadmap when a landing page has a series of pages to link to. Each link with its description provides a concise summary of what a person will find on destination pages.
- 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.
-
Use the services and information pattern whenever the primary purpose of the page is to provide clear choices to navigate to tasks. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.
+
+
+
What to avoid
+
Don’t repeat links that are found in your most requested pattern (if using both patterns on the same page).
+
+
Don’t use decorative icons or images in the pattern, as these can distract from people’s ability to make choices.
+
+
+
Content and design
+
Find content and design specifications and visual examples.
+
+
Content specifications
+
Style is very important when implementing the services and information pattern. Please see the Canada.ca Content Style Guide for more information on how to write content for this pattern.
- 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
-
+
+
Linked doormat headings
-
- 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:
-
+
The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)
+
Don’t end doormat headings with punctuation (for example, “How do you apply for funding?”)
+
+
+
Descriptions
-
- 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:
-
+
Optimal character limit for descriptions is 120 characters (with spaces) in both official languages
+
Recommended style is to list keywords or keyword phrases separated by commas; full sentences aren’t required
+
+
Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
+
Don’t include links in the descriptions
+
Don’t include promotional messaging
+
Don’t add extra formatting to the descriptions (bold, bullets, etc.)
+
+
+
+
+
Design specifications
+
+
+
Layout
-
- 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
-
+
Columns:
+
+
3 for large screens
+
2 for medium screens
+
1 for small screens
+
+
+
Tab order is from left to right, then top to bottom
The heading is generally “Services and information” in English and “Services et renseignements” in French. It’s required for the semantic outline and screen readers, but you can style it as invisible.
+
+
Visual examples
+
+
+
+
+
+
+
+
+
+
How to implement
+
+
Determine what best suits the type of page you're creating.
+
For the Government of Canada Adobe Experience Manager (AEM):
This research summary explains how choosing the right keywords helped users find the path they needed. It also explains how the team reduced and simplified text by putting keywords at the beginning of titles, links and doormats. Improved scent of information
This blog post explains how shorter keyword phrases showed significant advantages over full sentences on navigation pages. They made the key information easier to find.
@@ -175,72 +179,8 @@ title: Services and information
Latest changes
-
+
-
Updated the guidance to include content and design specifications, visual examples and implementation guidance.
+
Updated the guidance to include content and design specifications, visual examples and implementation guidance
-
-
-
-
-
-
- Examples
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
From f6b74a1ec88f256d98eabeb2154c340ad5ffbf57 Mon Sep 17 00:00:00 2001
From: Jennifer Mealing
Date: Tue, 29 Aug 2023 16:40:55 -0400
Subject: [PATCH 04/17] formatting
---
.../services-information.md | 291 +++++++++---------
1 file changed, 141 insertions(+), 150 deletions(-)
diff --git a/common-design-patterns/services-information.md b/common-design-patterns/services-information.md
index 0128dc4ddb..f0abb060ff 100644
--- a/common-design-patterns/services-information.md
+++ b/common-design-patterns/services-information.md
@@ -6,181 +6,172 @@ description: Guidance about using the services and information pattern on Canada
title: Services and information
---
Last updated: {{ page.dateModified }}
-
-
The services and information pattern presents sets of links with accompanying descriptions (also known as doormats). It acts as a roadmap when a landing page has a series of pages to link to. Each link with its description provides a concise summary of what a person will find on destination pages.
-
-
-
+
+ The services and information pattern presents sets of links with accompanying descriptions (also known as doormats). It acts as a roadmap when a landing page has a series of pages to link to. Each link with its description provides a
+ concise summary of what a person will find on destination pages.
+
Use the services and information pattern whenever the primary purpose of the page is to provide clear choices to navigate to tasks. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.
+
When to use
+
+ Use the services and information pattern whenever the primary purpose of the page is to provide clear choices to navigate to tasks. Together, these sets of links and descriptions provide clear and distinct choices for people trying
+ to complete their task.
+
-
What to avoid
-
Don’t repeat links that are found in your most requested pattern (if using both patterns on the same page).
-
-
Don’t use decorative icons or images in the pattern, as these can distract from people’s ability to make choices.
+
What to avoid
+
Don’t repeat links that are found in your most requested pattern (if using both patterns on the same page).
+
Don’t use decorative icons or images in the pattern, as these can distract from people’s ability to make choices.
-
Content and design
-
Find content and design specifications and visual examples.
-
-
Content specifications
-
Style is very important when implementing the services and information pattern. Please see the Canada.ca Content Style Guide for more information on how to write content for this pattern.
Each doormat consists of a heading and a description. The heading is a link.
-
-
Doormats
-
-
Optimal limit of doormats on a page is 9
-
You can use headings to group sets of doormats if needed
-
-
-
Linked doormat headings
+
Content and design
+
Find content and design specifications and visual examples.
+
Content specifications
+
Style is very important when implementing the services and information pattern. Please see the Canada.ca Content Style Guide for more information on how to write content for this pattern.
The heading is generally “Services and information” in English and “Services et renseignements” in French. It’s required for the semantic outline and screen readers, but you can style it as invisible.
The heading is generally “Services and information” in English and “Services et renseignements” in French. It’s required for the semantic outline and screen readers, but you can style it as invisible.
+
Visual examples
-
+
-
+
-
-
How to implement
-
-
Determine what best suits the type of page you're creating.
-
For the Government of Canada Adobe Experience Manager (AEM):
This research summary explains how choosing the right keywords helped users find the path they needed. It also explains how the team reduced and simplified text by putting keywords at the beginning of titles, links and doormats. Improved scent of information
This blog post explains how shorter keyword phrases showed significant advantages over full sentences on navigation pages. They made the key information easier to find.
-
-
Policy rationale
-
-
Services and information is an required pattern for the following mandatory templates:
+ This research summary explains how choosing the right keywords helped users find the path they needed. It also explains how the team reduced and simplified text by putting keywords at the beginning of titles, links and doormats.
+ Improved scent of information
+
This blog post explains how shorter keyword phrases showed significant advantages over full sentences on navigation pages. They made the key information easier to find.
+
Policy rationale
+
Services and information is an required pattern for the following mandatory templates:
Updated the guidance to include content and design specifications, visual examples and implementation guidance
-
+
Latest changes
+
+
+
+
+
Updated the guidance to include content and design specifications, visual examples and implementation guidance
+
\ No newline at end of file
From be852f1fad0fb140323a5abe20a013740b3c4aaf Mon Sep 17 00:00:00 2001
From: Jennifer Mealing
Date: Tue, 29 Aug 2023 16:55:54 -0400
Subject: [PATCH 05/17] finish imgs
---
common-design-patterns/services-information.md | 6 +++---
images/services-info-en.png | Bin 0 -> 130515 bytes
images/services-info-generic-en.png | Bin 0 -> 64101 bytes
images/services-info-sm-en.png | Bin 0 -> 80503 bytes
4 files changed, 3 insertions(+), 3 deletions(-)
create mode 100644 images/services-info-en.png
create mode 100644 images/services-info-generic-en.png
create mode 100644 images/services-info-sm-en.png
diff --git a/common-design-patterns/services-information.md b/common-design-patterns/services-information.md
index f0abb060ff..994b674b30 100644
--- a/common-design-patterns/services-information.md
+++ b/common-design-patterns/services-information.md
@@ -10,7 +10,7 @@ title: Services and information
The services and information pattern presents sets of links with accompanying descriptions (also known as doormats). It acts as a roadmap when a landing page has a series of pages to link to. Each link with its description provides a
concise summary of what a person will find on destination pages.
-
+
On this page
@@ -122,7 +122,7 @@ title: Services and information