Skip to content

Commit

Permalink
Merge branch 'master' into migration-cia-architechture
Browse files Browse the repository at this point in the history
  • Loading branch information
David Elisma authored May 17, 2023
2 parents 2dcac96 + 37aa6d0 commit 66ab97d
Show file tree
Hide file tree
Showing 35 changed files with 1,649 additions and 5,693 deletions.
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# Canada.ca design library - evidence-based patterns & templates

[![Build Status](https://travis-ci.com/canada-ca/design-system.svg?branch=master)](https://travis-ci.com/canada-ca/design-system)

In order to move towards a more flexible design system, the plan is to “decouple” the detailed specs of the templates and patterns from the official “policy documents” - the [Canada.ca Content and Information Architecture Specification]({{ site.url }}/architecture/canada-content-information-architecture-specification.html) and [Canada.ca Content Style Guide](https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html).

The vision would then be to gradually improve each pattern and template and make into usable code (rather than pictures) with instructions. We could also have a separate library of “experimental patterns and templates”, that we could open up to the whole community. We would need to eventually develop a process involving the community for a pattern to go from “experimental” to “approved”.
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,4 @@ defaults:
link: https://www.canada.ca/en/government/about/design-system.html
- title: Information architecture specification
link: https://design.canada.ca/architecture/canada-content-information-architecture-specification.html

163 changes: 149 additions & 14 deletions ajax/patterns-01-en.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,155 @@
---
---
---
{
"data": [{
"NAME": "<a href=\"https://blog.canada.ca/2022/03/23/task-success\">Using task success data to improve user experience</a>",
"SOURCE": "Blog post",
"DESCRIPTION": "Using task success to improve user experience: Evidence from the GC Task Success Survey can help support positive cultural change within your organization.",
"WHENTOUSE": "How to use the task success survey to improve the performance of top task content",
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/wayfinding-on-canada-ca.html\">Wayfinding on Canada.ca</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "explains the context of the research and the insights that drove the design updates",
"WHENTOUSE": "Explains the context of the research and the insights that drove the design updates",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/recalls-research-summary.html\">Recalls and safety alerts</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Optimizing content for mobile can improve findability and overall task success rates. Provide answers, not information, optimize task flow, simplify approach, customize search, and use clear, shortened, scannable content.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/recalls-safety-alerts-research-summary.html\">Recalls and safety alerts search optimization, Round 2</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Experimenting with an open source solution to support effective search. What we learned: understand search use cases, fix the data at the source with the right people, and dedicate resources to performance monitoring and data curation.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/electronic-procurement-research-summary.html\">Electronic Procurement Solution</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Moving paper-based processes online means rethinking how to present documentation. Effective techniques included customized search and wizards, navigable HTML instead of PDFs, and a summary of essential details for improved scannability.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/travel-advice-research-summary.html\">Travel advice and advisories</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Designing content that clearly conveys risk requires a focus on findability. Techniques included using clear headings and link labels for better \"scent of information,\" making content easy to scan, and improving relationships between parent topics and sub-topics.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/cra-contact-us-research-summary.html\">Contact the CRA</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Improving contact pages can reduce misdirected calls and mail, and redirect some people to online resources. Help people choose the right option using collapsible content, group details for richer search engine results, use wizards to guide people through options.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/maternity-parental-research-summary.html\">EI maternity and parental benefits</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "For complex financial tasks with eligibility requirements, focus on simplifying content. Incorporate the words people are searching for, use headings to improve scannability, use the expand/collapse pattern to reduce complexity, help people do the math.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/student-loans-research-summary.html\">Student loans and grants</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "When provinces/territories are the service providers, Canada.ca pages need to redirect people. Reduce program information that doesn't have the answers people are looking for, adjust navigation routes to focus on tasks, use evidence to design language.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/find-job-research-summary.html\">Find a job</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Making it easier to find government jobs, we learned to eliminate redundant pages, orient content for users and their top tasks, design for answers not information, use searchable job titles, meet user expectations for a single job search platform.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/citizenship-test-research-summary.html\">Prepare for the citizenship test</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "When turning long documents into web content, present step-by-step processes in a clear sequence, include search and navigation features within the document, eliminate distracting links, and use plain language to make labels clearer.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/business-account-research-summary.html\">Business account maintenance</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Reduce call volumes by answering common questions in web content. Front load labels by putting keywords first, reorganize content based on where people look for answers, add a simple wizard to help people get a precise answer.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/caregiving-research-summary.html\">EI special benefits</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Reduce ineligible applications by helping people understand eligibility rules and how to apply. Offer a simple visual overview of the complete process, use keywords strategically, put important details where people expect them, and simplify language.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/taxfiling-research-summary.html\">GST/HST and payroll</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "When people can find information but don't understand it (high findability, low task success), use techniques to increase understanding. Match user language, use a step-by-step structure, and reduce complexity by breaking long pages into smaller chunks.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/diseases-research-summary.html\">Disease and immunization information</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Design content to help people make informed choices about their health. Provide answers, not information, design for mobile first, reduce layers, and get content out of PDFs and posters.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/weather-research-summary.html\">Weather information</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Redesigning content for a primarily mobile audience means maximizing real estate. Group tasks and sub-tasks together, shorten breadcrumbs, choose the right alert style, shorten content by focusing on answers not information. ",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/2018/03/29/visit-canada-optimization.html\">Travel documents</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "Content about rules can be complex. Focus on guiding people to the answers they need for their situation. Simplify navigation to reduce cognitve load, use a wizard to guide people through the task, and reduce links that take people away from their ideal path.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/2018/02/20/starting_a_business.html\">Business start-up activities</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "To improve user experience for multi-step tasks, map out different actions and decisions that a user has to make, make key task links more prominent, reduce links that take people away from their ideal path.",
"WHENTOUSE": "",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
Expand Down Expand Up @@ -109,15 +253,6 @@
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/research-summaries/wayfinding-on-canada-ca\">Wayfinding on Canada.ca</a>",
"SOURCE": "Research summary",
"DESCRIPTION": "explains the context of the research and the insights that drove the design updates",
"WHENTOUSE": "Explains the context of the research and the insights that drove the design updates",
"CATEGORY": "",
"TYPE": "",
"MANDATORY": "",
"TANDP": "0"
}, {
"NAME": "<a href=\"https://blog.canada.ca/2022/12/21/wayfinding-research-project\">Wayfinding research project improves our approach to navigation on Canada.ca</a>",
"SOURCE": "Blog post",
Expand Down
8 changes: 4 additions & 4 deletions crisis/alerts.html
Original file line number Diff line number Diff line change
Expand Up @@ -203,10 +203,10 @@ <h3>Limited service availability</h3>
<h3>Additional examples</h3>
<p>Alert examples on specific page types:</p>
<ul>
<li><a href="https://design.canada.ca/alerts-alertes/alerts-sit.html">Service initiation page</a></li>
<li><a href="https://design.canada.ca/alerts-alertes/alerts-contact.html">Contact page</a></li>
<li><a href="https://design.canada.ca/alerts-alertes/alerts-ilp.html">Beta institutional landing page</a></li>
<li><a href="https://design.canada.ca/alerts-alertes/alerts-stable-ip.html">Institutional profile</a></li>
<li><a href="https://design.canada.ca/alerts/alerts-sit.html">Service initiation page</a></li>
<li><a href="https://design.canada.ca/alerts/alerts-contact.html">Contact page</a></li>
<li><a href="https://design.canada.ca/alerts/alerts-ilp.html">Beta institutional landing page</a></li>
<li><a href="https://design.canada.ca/alerts/alerts-stable-ip.html">Institutional profile</a></li>
</ul>
</section>
<section>
Expand Down
6 changes: 3 additions & 3 deletions feedback/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ The page feedback tool is a <strong>research tool</strong> that can help you bet
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
<section>
<h3><a href="../design-system/design-patterns/page-feedback.html">Implementation</a></h3>
<h3><a href="https://test.canada.ca/experimental/feedback-retroaction/page-feedback.html">Implementation</a></h3>
<p>Get the code to implement the page feedback tool on your site</p>
</section>
</div>
</section>
</div>

<h2>Using and understanding page feedback</h2>
<p>Accessing and analyzing user feedback from your page feedback tool. Data in Adobe Analytics.</p>
<p>Accessing and analyzing user feedback from your page feedback tool.</p>
<div class="row">
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
Expand Down Expand Up @@ -95,4 +95,4 @@ The page feedback tool is a <strong>research tool</strong> that can help you bet
</div>
</section>
</div>
</section>
</section>
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@
},
"homepage": "https://github.com/canada-ca/design-system#readme",
"devDependencies": {
"vnu-jar": "^22.9.29"
"vnu-jar": "^23.4.11"
}
}
Loading

0 comments on commit 66ab97d

Please sign in to comment.