| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | AC | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Name | When to use | Category | Type | Mandatory | Dependencies with mandatory templates | Where is the component? | In use (in the wild)? | Keep? | Notes/rationale | ||||||||||||||||||||
2 | Basic page layout | The basic layout for Canada.ca pages. | Template | Destination | N | GCWeb - Content page | Y | N | pretty basic for inclusion? seems not in keeping with modern d.s. approaches, which are more focused on components | |||||||||||||||||||||
3 | Breadcrumb trail | Represents the location of the current page as it stands in relation to the site’s user navigation model - Mandatory pattern | Design pattern | Site, Interaction, Navigation | Y | header | GCWeb - Breadcrumb trail | Y | Y | Part of mandatory header pattern. core to integrated experience | ||||||||||||||||||||
4 | Buttons | Buttons are clickable objects intended to encourage a person to take action | Design pattern | Interaction, Visual | N | Institutional landing page | GCweb - Buttons | Y | Y | while the Supertask and Sign in button are GCweb, several other button styles are straight from Bootstrap 3 w no overrides. | ||||||||||||||||||||
5 | Campaign page | Gives information to support a promotional campaign. Use to support institutional, theme or GC-wide promotional campaigns that last for a set period of time. Don’t use for core content. | Template | Promotion | N | GCWeb - campaign name and campaign name 2 | Y | Y | This template has been widely used (and abused). Anyone can build a landing page at any time, so is this template really required? Perhaps the better approach is to update guidance to help balance the need for marketing but also not create unneccsary duplicate or conflicting content. | |||||||||||||||||||||
6 | Canada.ca domain | The primary domain for the Government of Canada's public-facing web presence. | Design pattern | Site-wide pattern | Y | similar to a global style | n/a | Y | Y | Mandatory. core to brand/trust | ||||||||||||||||||||
7 | Carousels | Use this component for situations such as image or video galleries. | Design pattern | Promotion, Visual | N | WET - Tabbed interface - carousel | Y | N | one thing that is useful is the guidance to only use in things like media galleries. current component has not been updated in a very long time. | |||||||||||||||||||||
8 | Charts and graphs | Use as visualization techniques for communicating data or statistics | Design pattern | Visual | N | none | WET - Charts and graphs | https://tdih-cdit.tc.canada.ca/en/urban-mobility-performance-indicators-transport-canada/calgary | Y | the value of this guidance is the point that ppl should create charts and graphs using CSS/js rather than by using images. current component is managed by WET and have not been updated since the deprecation of FlotJS. | ||||||||||||||||||||
9 | Checkboxes and radio buttons | Allow people select an answer to a question or confirm completion. | Design pattern | Interaction, Visual | N | GCWeb - Checkboxes and radio buttons | Y | Y | usability testing showed that these larger checkboxes and radio buttons were better at helping people complete their tasks | |||||||||||||||||||||
10 | Colours | Colours for Canada.ca - Mandatory style | Style | Site-wide pattern, Visual | Y | global style | n/a | Y | Y | Part of mandatory elements. core to brand/trust. documentation is skimpy and could be improved. | ||||||||||||||||||||
11 | Consultation profile page | Describes a consultation or engagement activity. Provides the status and outcome of the initiative, background material, data and information about planned or completed events. | Template | Destination | N | none | n/a | https://tc.canada.ca/en/corporate-services/consultations/let-s-talk-transportation-public-interest-assessment-bunge-s-proposed-acquisition-viterra https://ised-isde.canada.ca/site/strategic-policy-sector/en/marketplace-framework-policy/consultation-copyright-age-generative-artificial-intelligence | Y | a few orgs appear to be using aspects of these templates ... does the pattern as currently written reflect the research findings from back in the day? | ||||||||||||||||||||
12 | Contact information | Use to present contact information on Canada.ca page | Design pattern | Institutional | N | n/a | Y | N | actually 2 patterns - contact block (which is more of a content style guide thing?) and a list of contact links (a pattern so simple that it barely needs mention?) | |||||||||||||||||||||
13 | Contact us page | Provides models for contact options on Canada.ca. Use to present contact information for a person, an office, an organization or an emergency. | Template | Institutional | N | institutional landing page, ministerial profile page | GCWeb - Contact [Institution name] | https://www.justice.gc.ca/eng/contact/index.html | Y | actually a series of related patterns for different kinds of contact pages; out of date - maybe only keep the institutional contact page stuff, as that is the only part with a coded example | ||||||||||||||||||||
14 | Context-specific features | Use to promote activities, initiatives, programs, and services | Design pattern | Promotion, Visual | N | home page institutional landing page theme and topic pages | GCWeb - Context-specific features (working examples) | Y | Y | the main value is explaining how to integrate promo content into pages. A variant exists on the home page, also common on many landing pages. People mess with the layout a lot. | ||||||||||||||||||||
15 | Contextual alerts | Use to present important new information that needs to appear in a pre-existing context | Design pattern | Visual | N | GCWeb Alert example | Y | Y | highly used pattern/component. guidance on how and when to use alerts is valuable | |||||||||||||||||||||
16 | Contributors | Use to link to institutions or organizations that support the content on the page | Design pattern | Institutional | N | theme and topic pages | GCweb - part of Topic template (stable) | Y | N | code-wise this is so simple - it's a list of links. But the beta topic page template uses a variation of it as one of its patterns | ||||||||||||||||||||
17 | Data tables | Use to communicate data | Design pattern | Visual | N | GCWeb - GC tables (provisional) and WET - Tables | Y | Y | actually 2 separate things - data tables is pure WET; responsive tables is GCweb | |||||||||||||||||||||
18 | Date modified | Indicates how recently the content of a web page has been updated - Mandatory pattern | Design pattern | Site-wide pattern | similar to a global style | GCWeb - Date modified | Y | Y | date modified is labeled as mandatory, but we don't talk about it in mandatory elements (oops)... we did remove it from the home page... the basic value is that it serves as an indicator of currency of content (helps w trust) | |||||||||||||||||||||
19 | Departments and agencies page | Provides links to all federal government institutions | Template | Government-wide template | N | GCWeb - Departments and agencies | Y | N | template for a single instance; don't think it needs to be a template | |||||||||||||||||||||
20 | Download links | Use to reference and link to non-HTML files | Design pattern | Visual | N | none | GCWeb - Download link example | https://tc.canada.ca/en/corporate-services/acts-regulations/list-regulations/canadian-aviation-regulations-sor-96-433 | Y | used for attaching downloadbles/shareables to a page, such as a PDF | ||||||||||||||||||||
21 | Expand/Collapse | Use to hide secondary content until requested | Design pattern | Interaction | N | WET - Details-summary polyfill | Y | Y | helpful for task success; provides clear evidence-based guidance on when to use. We could look at re-naming it | |||||||||||||||||||||
22 | Faceted finder page | Use to present a list of 100+ related links that can be filtered using metadata and may require results to be split across multiple pages. Use when there is a need to allow people to build more complex queries against a large number of results. Shows the number of results using facets. | Template | Navigation | N | n/a | https://www.canada.ca/en/government/system/consultations/consultingcanadians.html | N | never made any components to support this | |||||||||||||||||||||
23 | Finder page | Use to present a list of 100+ related links that can be filtered using metadata and may require results to be split across multiple pages. Use when there is a need to allow people to build simpler queries against large amount of results. | Template | Navigation | N | none | n/a | https://www150.statcan.gc.ca/n1/en/type/surveys?MM=1 | N | never made any components to support this | ||||||||||||||||||||
24 | Global footer | The site-wide footer at the bottom of each web page, includes the contextual band, the main band and the sub-footer band - Mandatory pattern | Design pattern | Site-wide pattern, Interaction | GCWeb - footer | Y | Y | Mandatory pattern, core to integrated experience | ||||||||||||||||||||||
25 | Global header | The global (site-wide) header at the top of each web page - Mandatory pattern | Design pattern | Site-wide pattern, Interaction | GCWeb - header | Y | Y | Mandatory pattern, core to integrated experience | ||||||||||||||||||||||
26 | Government of Canada signature | The Government of Canada signature as specified in Federal Identity Program (FIP) policy instruments is prominently featured in the global header area across Canada.ca - Mandatory pattern | Design pattern | Site-wide pattern, Visual | header | part of GCWeb - header | Y | Y | Part of mandatory header pattern, core to brand/trust | |||||||||||||||||||||
27 | Government-wide audience page | Gives access to information and services relevant to a government-wide audience - Mandatory template | Template | Theme template | it's a mandatory template on its own, very similar to theme and topic | GCWeb - [Audience name] | Y | N | let's take this opportunity to retire this template since any GC-wide audiences are now treated as themes | |||||||||||||||||||||
28 | Guidance on legislation profile page | Gives access to guidance on legislation. Gives access to details and related materials. | Template | Destination | none | GCweb - [Act name] | Can't find example | N | Nobody ever used it as far as we can tell | |||||||||||||||||||||
29 | Home page | Shows the Government of Canada’s most visited and important products and services | Template | Government-wide template, Navigation | Y | GCWeb - Home | Y | N | a template for a single-instance use (the Canada.ca home page). | |||||||||||||||||||||
30 | Icons | Use as symbols to communicate actions or states | Design pattern | Visual | N | WET - Icons | Y | N | does contain solid guidance for depts on how to work with icons (although some of it might be outdated). | |||||||||||||||||||||
31 | Images | Use to complement or enhance text | Design pattern | Visual | N | WET - Images | Y | Y | does contain solid guidance for depts on how to work with images (although some of it might be outdated). there is also stuff in the style guide on images. However, no guidance on how images should work with the grid system, etc. | |||||||||||||||||||||
32 | In-page table of contents | List of links that lead to subsections of the same page | Design pattern | Navigation | N | GCWeb - In-page table of contents | Y | Y | This is the "on this page" pattern. Should rename accordingly | |||||||||||||||||||||
33 | Institutional byline | Use to link to the institution responsible for the content | Design pattern | Institutional | N | n/a | Y | N | current guidance says it goes at the top of the content, when it actually should go at the bottom. But with contextual footers that can be used to identify depts and agencies, is this even needed? | |||||||||||||||||||||
34 | Institutional landing page | Home page of each Government of Canada institution - Mandatory template | Template | Institutional, Navigation | Y | GCWeb - Institutional profile (stable) and [Institution name] (beta) | Y | Y | Mandatory pattern, core to integrated experience | |||||||||||||||||||||
35 | Institutional service performance reporting page | Use to present all service standards from an institution, as per the requirements in the Policy on Service | Template | Institutional | N | none | GCWeb - [Institution] service performance reporting | Can't find example | Y | intended to support requirements under the policy on service (before it got combined into the policy on service and digital) - still required? | ||||||||||||||||||||
36 | Interactive questions | Use to present a sequence of simple questions that leads to answer needed to continue or complete task | Design pattern | Destination, Navigation | N | GCWeb - Fieldflow | Y | Y | very valuable pattern for supporting top task success. Could stand to have better working examples in WET/GCweb | |||||||||||||||||||||
37 | Labels | Labels are visual indicators that assign a tag to items such as events, products, programs or services | Design pattern | Visual | N | WET - Labels | Y | Y | although we didn't make any changes, we did research and provided valuable guidance on how to use these - they can help user task success when applied correctly | |||||||||||||||||||||
38 | Language toggle link | Gives people access to site content in either French or English - Mandatory pattern | Design pattern | Site-wide pattern, Interaction | Y | Header | GCWeb - Language toggle link | Y | Y | Part of mandatory header pattern, core to integrated experience | ||||||||||||||||||||
39 | Latest news | Use to feature the most recent news items | Design pattern | Institutional | N | Institutional landing page, ministerial profile, | GCWeb - part of Institutional profile | https://tc.canada.ca/en | Y | referred to in the ILP template as a potential option for the free space at the bottom of the ILP | ||||||||||||||||||||
40 | Layouts | Layouts for Canada.ca - Mandatory style | Style | Site-wide pattern, Visual | Y | global style | n/a | Y | Y | Part of mandatory elements. core to integrated experience. documentation at design.canada.ca very scant, basically just specifies the max width of the content area on desktop. | ||||||||||||||||||||
41 | Long index page | Use to present a list of 50+ related links without descriptions | Template | Navigation | N | none | GCWeb - Long index page | I can't find this one | N | there is a GCweb working example for this, but it is marked incomplete... don't think any orgs ever impmented it | ||||||||||||||||||||
42 | Ministerial profile page | Gives an overview of the biography and links to the minister’s recent activities and announcements, and social media channels - Mandatory template | Template | Institutional | Y | GCWeb - Ministerial profile page | Y | Y | Mandatory pattern, core to integrated experience | |||||||||||||||||||||
43 | More information for | Use to connect to a related government-wide audience | Design pattern | Navigation | governement-wide audience page topic page (stable) | GCweb - part of Topic template (stable) | Y | N | a bit basic for a design pattern - it's just a heading plus a list of links. appears on many topic pages though. | |||||||||||||||||||||
44 | Most requested | Use to feature top tasks related to the page it is on | Design pattern | Navigation | N (but used in several mandatory templates) | Home page Institutional landing page Theme and topic pages | GCWeb - Most requested (provisional) | Y | Y | not mandatory in and of itself, but used in several mandatory templates. Will be updated when new ILP guidance launches | ||||||||||||||||||||
45 | Multimedia (video and audio) | Use to complement or enhance text | Design pattern | Visual | N | WET - Multimedia player | Y | N | comes straight from WET, hasnt been looked at in a long while... but widely used. | |||||||||||||||||||||
46 | News landing page | Gives access to Government of Canada’s news products | Template | Government-wide template | Y | GCWeb - News | Y | N | another of these single-instance implementation templates, this time for the newsroom product | |||||||||||||||||||||
47 | News product page | Allows people to read a news product - Mandatory template | Template | Institutional | Y | n/a | Y | N | intended to ensure a standard format for news releases etc. While many news releases are published via the newsroom product which takes care of keeping things consistent for those ones, there are still news releases that get published on some institutuonal websites also | |||||||||||||||||||||
48 | News results page | Enables people to efficiently find a specific news product by quickly filtering results based on keywords and pre-set metadata fields | Template | Government-wide template | Y | n/a | Y | N | another of these single-instance implementation templates, this time for the newsroom product | |||||||||||||||||||||
49 | Ordered multi-page navigation | Set of links to a group of several pages intended to be read in a preferred order | Design pattern | Navigation | N | GCWeb - Step by step navigation | Y | Y | widely used. this pattern is part of the service initiation template. But the subway nav approach is more mobile friendly | |||||||||||||||||||||
50 | Page feedback tool | The feedback tool is an optional pattern to uncover specific page-level issues affecting task performance. | Design pattern | Interaction | N | GCWeb - feedback area | Y | Y | widely used, helps with continuous improvement | |||||||||||||||||||||
51 | Partnering and collaborative arrangement profile page | Gives an overview of the mandate and information and services of partnering or collaborative arrangement agreements | Template | Institutional | none - similar to ILP but not dependant | n/a | Can't find this | N | not sure this has ever been used by anyone... it was intended as a variation on the ILP for situations where there was a service jointly delivered with non-GC partners, yet still in scope for the Canada.ca design | |||||||||||||||||||||
52 | Privacy disclaimer | Use this pattern to present privacy disclaimers. | Design pattern | Interaction | N | n/a | Y | Y | component-wise it is just a details-summary element. This is more a pure design pattern than a component. But valuable to retain, as it gives guidance on how to deal with privacy disclaimers without disrupting the task at hand. | |||||||||||||||||||||
53 | Program description page | Offers details about a program. Gives access to services related to the program. Use to give background information about a program. Don’t use to start a task. | Template | Institutional | N | none | n/a | https://tc.canada.ca/en/programs/commemoration-fund-victims-ethiopian-airlines-flight-302-tragedy. Close but not exactly the same | N | very rarely used. more like content design than a template. no consistent defn of what a program is? | ||||||||||||||||||||
54 | Promotional events page | Describes an official government event that occurs in a promotional context. Gives information such as date, time, location and target audience. | Template | Promotion | N | none | GCWeb - event | Can't find this | N | not sure anyone ever used this template... design pattern and template code do not match | ||||||||||||||||||||
55 | Regulation profile page | Gives a 1 or 2 sentence description of the regulation, allows people to read the regulation, and relates a regulation to topics, institutions, ministers and other legislation. | Template | Destination | N | none | GCWeb - [Regulation name] | Can't find this | N | Nobody ever used it as far as we can tell | ||||||||||||||||||||
56 | Related links | The related links pattern is a list of links to content that is related to the page on which it appears | Design pattern | Navigation | N | n/a | Y | N | Seems a bit basic for a design pattern. Also, do we really want to encourge the use of related links lists? | |||||||||||||||||||||
57 | Report a problem | Allows people to provide feedback via a form for any problems that may have happened | Design pattern | Site-wide pattern, Interaction | N | GCWeb - Report a problem | Y | N | we are deprecating this pattern in favour of the page feedback tool | |||||||||||||||||||||
58 | Search page | Provides the template for the search engine on Canada.ca | Template | Government-wide template | Y | GCWeb - Search results | Y | N | this template was created so that the various instances of site search would be consistent. design pattern is out of date with the current SERP design (which we did get updated in GCweb) | |||||||||||||||||||||
59 | Service initiation page | Gives people the information they need before starting the task, such as explaining eligibility criteria or steps to follow. Gives people easy access to service standards, turnaround times, related services, guides and help. | Template | Destination, Navigation | N | GCWeb - Advanced service and [Service name] | Y | Y | Pattern as it currently exists overlaps with the newer subway nav pattern. might make sense to merge | |||||||||||||||||||||
60 | Services and information | Use to present sets of links with accompanying descriptions | Design pattern | Navigation | N | Institutional landing page Theme and topic page Home page | GCWeb - services and information | Y | Y | widely used on various landing pages, will be updated as part of the ILP work. Could look at renaming this pattern? link+ description? grid of links + descriptions? | ||||||||||||||||||||
61 | Share this page | Allows people to share the content of the page to other users | Design pattern | Site-wide pattern, Interaction | N | WET - Share widget | Y | N | widely used bc it is baked into the standard page template, but analytics show it is rarely used. Widget code is very old. | |||||||||||||||||||||
62 | Short index page | Use to present a list of 10 to 50 related links without text descriptions | Template | Navigation | N | n/a | Y | N | No coded exmaples made. This pattern is just about lists of links. | |||||||||||||||||||||
63 | Sign in button | The Sign in button is an optional header element that directs people to government accounts that require authentication. | Design pattern | Interaction, Visual | N | global header | GCWeb - Authentication patterns | Y | Y | key for improving wayfinding | ||||||||||||||||||||
64 | Site search box | Gives the ability to search all content from the Governement of Canada - Mandatory pattern | Design pattern | Site-wide pattern, Interaction | Y | Header | GCWeb - part of Header | Y | Y | Part of mandatory header pattern, core to integrated experience | ||||||||||||||||||||
65 | Social media channels block (follow box) | Use to allow people to follow official Government of Canada social media accounts from various social media platforms | Design pattern | Institutional | N | Institutional landing page | GCWeb - part of topic template | Y | Y | shows up on a bunch of topic pages. being redesigned as part of the ILP update | ||||||||||||||||||||
66 | Social media feeds widget | Use to embed the latest posts from official Government of Canada social media accounts | Design pattern | Institutional, Visual | N | none | GCWeb - Stay connected | Y. Saw lots o stay connected pages but not with the template | N | The current GCweb working example seems broken | ||||||||||||||||||||
67 | Subway navigation | Break up long and complex content into sections that each focus on a step or specific answer people need before moving to the next step or section. | Design pattern | Navigation | N | GCWeb - Subway | Y | Y | depts find it useful; works well to support top tasks | |||||||||||||||||||||
68 | Tabbed interface | Separates related content into different panes that are viewable one at a time | Design pattern | Navigation | N | WET - Tabbed interface | Y | Y | guidance on when and how to use seems solid, so worth keeping | |||||||||||||||||||||
69 | Theme and topic menu | Use on all Canada.ca web page as the main theme-based navigation - Mandatory pattern | Design pattern | Site-wide pattern | Y | Header | GCWeb - Menu | Y | Y | we are transitioning away from this but keep for now | ||||||||||||||||||||
70 | Theme and topic page | Allows people to discover services and information related to a specific theme or topic across government - Mandatory template | Template | Theme template, Navigation | Y | GCWeb - [Topic title] (stable) and [Theme - Topic title] (beta) | Y | Y | in order to facilitate the layered theme design, theme tempaltes and topic templates are going to be separated | |||||||||||||||||||||
71 | Transparency and corporate reporting | A corporate reporting page provides proactive disclosure of information offered by that institution. | Template | Institutional | N | design.canada.ca - Transparency and corporate reporting page | Y | Y | institutions find it useful? one of the few patterns where the coded example lives on design.canada.ca | |||||||||||||||||||||
72 | Typography | Typography for Canada.ca - Mandatory style | Style | Site-wide pattern, Visual | Y | global style | n/a | Y | Y | Part of mandatory elements. Core to integrated experience. | ||||||||||||||||||||
73 | What we are doing | Use to link to content that provides background or explanations of GC activities in support of creating or improving public policy | Design pattern | Institutional | N | GCWeb - part of Topic template (stable) | Y | N | this pattern is no longer going to be part of the topic template or ILP, actively caused UX problems in testing w users | |||||||||||||||||||||
74 | ||||||||||||||||||||||||||||||
75 | ||||||||||||||||||||||||||||||
76 | ||||||||||||||||||||||||||||||
77 | ||||||||||||||||||||||||||||||
78 | ||||||||||||||||||||||||||||||
79 | ||||||||||||||||||||||||||||||
80 | ||||||||||||||||||||||||||||||
81 | ||||||||||||||||||||||||||||||
82 | ||||||||||||||||||||||||||||||
83 | ||||||||||||||||||||||||||||||
84 | ||||||||||||||||||||||||||||||
85 | ||||||||||||||||||||||||||||||
86 | ||||||||||||||||||||||||||||||
87 | ||||||||||||||||||||||||||||||
88 | ||||||||||||||||||||||||||||||
89 | ||||||||||||||||||||||||||||||
90 | ||||||||||||||||||||||||||||||
91 | ||||||||||||||||||||||||||||||
92 | ||||||||||||||||||||||||||||||
93 | ||||||||||||||||||||||||||||||
94 | ||||||||||||||||||||||||||||||
95 | ||||||||||||||||||||||||||||||
96 | ||||||||||||||||||||||||||||||
97 | ||||||||||||||||||||||||||||||
98 | ||||||||||||||||||||||||||||||
99 | ||||||||||||||||||||||||||||||
100 |