Difference between revisions of "Maximizing impact on Canada.ca – Best practices for a web-based approach"
(Fixed URL to content inventory) |
|||
(12 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | [[FR: | + | [[FR:Maximiser l’effet sur Canada.ca – Les pratiques exemplaires d’une approche axée sur le Web]] |
Back to [[COVID content guidance]] | Back to [[COVID content guidance]] | ||
Line 8: | Line 8: | ||
This means: | This means: | ||
− | + | * easy to read, easy to navigate content, grouped by themes that are '''coordinated and integrated across departments''' (without duplicating information), and | |
− | + | * applying '''user experience (UX) principles''' to creating and publishing all related web content. | |
This approach respects the requirements in the policy instruments that guide digital communications for the Government of Canada: | This approach respects the requirements in the policy instruments that guide digital communications for the Government of Canada: | ||
− | + | * [https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=32603 Policy on Service and Digital] | |
− | + | * [https://www.canada.ca/en/government/system/digital-government/government-canada-digital-standards.html Government of Canada Digital Standards] | |
− | Policy on Communications and Federal Identity | + | * [https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=30683 Policy on Communications and Federal Identity] |
− | + | ||
− | + | * [https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html Canada.ca style guide] | |
− | * | + | |
− | + | * [https://www.canada.ca/en/government/about/design-system.html Canada.ca Design System] | |
− | |||
− | |||
== Focus on the user == | == Focus on the user == | ||
Line 32: | Line 30: | ||
** [https://www.canada.ca/en/government/about/design-system/pattern-library.html Templates and design patterns] | ** [https://www.canada.ca/en/government/about/design-system/pattern-library.html Templates and design patterns] | ||
** [https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html Canada.ca style guide] | ** [https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html Canada.ca style guide] | ||
− | * Simple design is professional and timeless - it supports efficiency and effectiveness, helping maximize task success and minimize time on task ([https://neilpatel.com/blog/website-clean-simple-design/ | + | * Simple design is professional and timeless - it supports efficiency and effectiveness, helping maximize task success and minimize time on task. ([https://neilpatel.com/blog/website-clean-simple-design/ 17 Reasons Why Your Website Should Have a Clean and Simple Design]) |
* Applying best practices doesn't necessarily take longer - it can often save time | * Applying best practices doesn't necessarily take longer - it can often save time | ||
− | * | + | * Testing your content/service with as few as 5 people can give you great qualitative information about what works and doesn’t work for your users. ([https://medium.theuxblog.com/why-test-the-design-with-only-5-users-493a4c63ecf6 Why test the design with only 5 users?]) |
** Identifying and correcting usability problems early can divert unnecessary calls from call centres, and reduce ineligible or incomplete applications for benefits, etc. | ** Identifying and correcting usability problems early can divert unnecessary calls from call centres, and reduce ineligible or incomplete applications for benefits, etc. | ||
Line 41: | Line 39: | ||
** '''Consistency matters''' | ** '''Consistency matters''' | ||
*** consistent design builds trust and helps users identify scams and other content that is not trust-worthy | *** consistent design builds trust and helps users identify scams and other content that is not trust-worthy | ||
− | *** predictable, standard navigation strategies support success in finding answers - i.e a global approach to how new content fits into the overall picture ([https://neilpatel.com/blog/create-optimal-user-experiences-improving-websites-information-architecture/ | + | *** predictable, standard navigation strategies support success in finding answers - i.e a global approach to how new content fits into the overall picture ([https://neilpatel.com/blog/create-optimal-user-experiences-improving-websites-information-architecture/ How To Create Optimal User Experiences By Improving Your Website’s Information Architecture]) |
− | ** '''Very simple, direct, plain language text''' — people’s reading and comprehension levels drop significantly in times of stress ([https://readable.com/blog/reading-crisis-readability-risk-communication/ | + | ** '''Very simple, direct, plain language text''' — people’s reading and comprehension levels drop significantly in times of stress ([https://readable.com/blog/reading-crisis-readability-risk-communication/ Reading in a crisis: readability of risk communication]) ([https://www.researchgate.net/publication/274304506_The_Case_for_Readability_of_Crisis_Communications_in_Social_Media The Case for Readability of Crisis Communications in Social Media]) |
− | ** '''A basic layout''' that lends itself well to viewing on mobile devices ([https://neilpatel.com/blog/website-clean-simple-design/ | + | ** '''A basic layout''' that lends itself well to viewing on mobile devices ([https://neilpatel.com/blog/website-clean-simple-design/ 17 Reasons Why Your Website Should Have a Clean and Simple Design]) |
** Respecting '''official languages''' and '''accessibility''' legislation/best practices is still key | ** Respecting '''official languages''' and '''accessibility''' legislation/best practices is still key | ||
* Clear, simple, short text is faster to produce, faster to approve, faster to translate, and faster to code properly for accessibility. | * Clear, simple, short text is faster to produce, faster to approve, faster to translate, and faster to code properly for accessibility. | ||
Line 54: | Line 52: | ||
* Decisions and changes to content and design should be driven by evidence from usability testing and web analytics. | * Decisions and changes to content and design should be driven by evidence from usability testing and web analytics. | ||
− | + | == Mobile-first == | |
* Mobile is now the dominant way that people are accessing web content. Design for mobile first, then desktop. '''Look at your content on a mobile device before publishing.''' | * Mobile is now the dominant way that people are accessing web content. Design for mobile first, then desktop. '''Look at your content on a mobile device before publishing.''' | ||
** '''60-80% of our users are viewing on mobile''' | ** '''60-80% of our users are viewing on mobile''' | ||
Line 60: | Line 58: | ||
*** [https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html Canada.ca/Coronavirus] has some pages that reach 80% mobile. | *** [https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html Canada.ca/Coronavirus] has some pages that reach 80% mobile. | ||
** World Health Organization (WHO) went from 55% mobile visitors pre-coronavirus to 70% now. | ** World Health Organization (WHO) went from 55% mobile visitors pre-coronavirus to 70% now. | ||
+ | |||
+ | == Integrate with other GC content, don’t duplicate == | ||
+ | * On your service and information pages, don’t duplicate announcements and content from other departments. Instead: | ||
+ | ** Check the [https://covid-19inventory.tbs.alpha.canada.ca COVID content inventory] first | ||
+ | ** Work with partners to streamline content development and link to one authoritative source | ||
+ | ** Use alerts at the service level to point to announcement content in the main COVID pages (initially) so if it changes people always have the most up-to-date information | ||
+ | ** As soon as possible, create the detailed program/service level content so the main COVID pages can then direct people to the answers they need - see [[Theme Management Committee Covid-April 3 2020 - Comité de gestion des thèmes Covid-3 avril 2020#Agenda|Moving from announcements to web content]] | ||
== Apps and other technologies == | == Apps and other technologies == | ||
* Key COVID-19 web pages are undergoing multiple updates daily. | * Key COVID-19 web pages are undergoing multiple updates daily. | ||
− | * Apps, chatbots or voice assistants, if not developed properly, can highlight poor content and get in the way of a user trying to find the latest info. Take the time to create effective, '''“authoritative source” web content first'''. ([https://blog.canada.ca/2020/01/28/voice-search-optimization.html | + | * Apps, chatbots or voice assistants, if not developed properly, can highlight poor content and get in the way of a user trying to find the latest info. Take the time to create effective, '''“authoritative source” web content first'''. ([https://blog.canada.ca/2020/01/28/voice-search-optimization.html Optimize your content for voice search]) |
* It is imperative that updates to web content are '''immediately''' reflected in any app so that users are not confused or misled by old information. | * It is imperative that updates to web content are '''immediately''' reflected in any app so that users are not confused or misled by old information. | ||
Line 71: | Line 76: | ||
** Graphics and videos take longer to load on computers and devices and are significant digital burdens for older phones and rural connections. They are also a burden on wireless networks, as well as GC networks. Most importantly, they get in the way of the user who wants to complete a task. | ** Graphics and videos take longer to load on computers and devices and are significant digital burdens for older phones and rural connections. They are also a burden on wireless networks, as well as GC networks. Most importantly, they get in the way of the user who wants to complete a task. | ||
*** “A 4MB webpage is like a private hospital that is designed for the rich. The technology poor (most people) are suffering because of the choices of the technology rich. People are using old phones on expensive plans to try and access vital info. Fast-loading pages save lives.” — Gerry McGovern, usability and service expert | *** “A 4MB webpage is like a private hospital that is designed for the rich. The technology poor (most people) are suffering because of the choices of the technology rich. People are using old phones on expensive plans to try and access vital info. Fast-loading pages save lives.” — Gerry McGovern, usability and service expert | ||
+ | *** [https://gerrymcgovern.com/books/world-wide-waste/ Gerry McGovern - World Wide Waste] | ||
+ | *** [https://www.cbc.ca/news/canada/london/internet-rural-covid19-1.5512235 In the time of COVID-19, slow Internet is more than an annoyance] | ||
+ | *** [https://globalnews.ca/news/6741205/mobile-data-use-surge-canada-coronavirus/ Surge in Canadian mobile and data use leads to complaints about service] | ||
+ | *** [https://www.opensignal.com/2019/09/25/the-state-of-rural-canadas-mobile-network-experience The state of rural Canada’s Mobile Network Experience] | ||
+ | *** [https://www.cira.ca/resources/corporate/factbook/canadas-internet-factbook-2019 CIRA - Canada’s Internet Factbook 2019] | ||
+ | *** [https://crtc.gc.ca/eng/internet/performance.htm What you should know about Internet speeds (CRTC)] | ||
* Graphics and video do '''belong on social media''' where we know visual cues garner more attention and engagement. Do remember to: | * Graphics and video do '''belong on social media''' where we know visual cues garner more attention and engagement. Do remember to: | ||
** Include alternate text (Alt text) in all photos and graphics that are shared on Twitter | ** Include alternate text (Alt text) in all photos and graphics that are shared on Twitter |
Latest revision as of 09:10, 7 May 2021
Back to COVID content guidance
To help Canadians access the critical services and resources they need urgently in this time of crisis, the Government's web content must adhere to proven user-centered design standards.
This means:
- easy to read, easy to navigate content, grouped by themes that are coordinated and integrated across departments (without duplicating information), and
- applying user experience (UX) principles to creating and publishing all related web content.
This approach respects the requirements in the policy instruments that guide digital communications for the Government of Canada:
Focus on the user
- In a crisis, poor content or a poor user experience undermines the credibility of the government
- Speed matters; implement advice from web content design specialists about already-established best practices in user experience
- Rely on standard templates and content design recommendations from the Canada.ca design system - these are based on best practices that have been tested with users to ensure they work and are accessible
- Simple design is professional and timeless - it supports efficiency and effectiveness, helping maximize task success and minimize time on task. (17 Reasons Why Your Website Should Have a Clean and Simple Design)
- Applying best practices doesn't necessarily take longer - it can often save time
- Testing your content/service with as few as 5 people can give you great qualitative information about what works and doesn’t work for your users. (Why test the design with only 5 users?)
- Identifying and correcting usability problems early can divert unnecessary calls from call centres, and reduce ineligible or incomplete applications for benefits, etc.
Design content for success
- It is more important than ever to provide solid, simple web content that people can trust. This means:
- Consistency matters
- consistent design builds trust and helps users identify scams and other content that is not trust-worthy
- predictable, standard navigation strategies support success in finding answers - i.e a global approach to how new content fits into the overall picture (How To Create Optimal User Experiences By Improving Your Website’s Information Architecture)
- Very simple, direct, plain language text — people’s reading and comprehension levels drop significantly in times of stress (Reading in a crisis: readability of risk communication) (The Case for Readability of Crisis Communications in Social Media)
- A basic layout that lends itself well to viewing on mobile devices (17 Reasons Why Your Website Should Have a Clean and Simple Design)
- Respecting official languages and accessibility legislation/best practices is still key
- Consistency matters
- Clear, simple, short text is faster to produce, faster to approve, faster to translate, and faster to code properly for accessibility.
- Follow the Crisis communication checklist
- Work on the basics first, otherwise you risk:
- splitting your already stretched workforce
- delaying key content updates
- increasing call volumes to overloaded call centres
- Decisions and changes to content and design should be driven by evidence from usability testing and web analytics.
Mobile-first
- Mobile is now the dominant way that people are accessing web content. Design for mobile first, then desktop. Look at your content on a mobile device before publishing.
- 60-80% of our users are viewing on mobile
- Over 60% of users access COVID-19 pages through their mobile device.
- Canada.ca/Coronavirus has some pages that reach 80% mobile.
- World Health Organization (WHO) went from 55% mobile visitors pre-coronavirus to 70% now.
- 60-80% of our users are viewing on mobile
Integrate with other GC content, don’t duplicate
- On your service and information pages, don’t duplicate announcements and content from other departments. Instead:
- Check the COVID content inventory first
- Work with partners to streamline content development and link to one authoritative source
- Use alerts at the service level to point to announcement content in the main COVID pages (initially) so if it changes people always have the most up-to-date information
- As soon as possible, create the detailed program/service level content so the main COVID pages can then direct people to the answers they need - see Moving from announcements to web content
Apps and other technologies
- Key COVID-19 web pages are undergoing multiple updates daily.
- Apps, chatbots or voice assistants, if not developed properly, can highlight poor content and get in the way of a user trying to find the latest info. Take the time to create effective, “authoritative source” web content first. (Optimize your content for voice search)
- It is imperative that updates to web content are immediately reflected in any app so that users are not confused or misled by old information.
Graphics and video
- All GC web content must use the GC design system so that users can immediately see that it is from a trusted source. With the increase in phishing campaigns and scams related to COVID-19, it is more important than ever to provide a consistent user experience.
- Graphic-heavy web pages are a digital burden (economic and environmental)
- Graphics and videos take longer to load on computers and devices and are significant digital burdens for older phones and rural connections. They are also a burden on wireless networks, as well as GC networks. Most importantly, they get in the way of the user who wants to complete a task.
- “A 4MB webpage is like a private hospital that is designed for the rich. The technology poor (most people) are suffering because of the choices of the technology rich. People are using old phones on expensive plans to try and access vital info. Fast-loading pages save lives.” — Gerry McGovern, usability and service expert
- Gerry McGovern - World Wide Waste
- In the time of COVID-19, slow Internet is more than an annoyance
- Surge in Canadian mobile and data use leads to complaints about service
- The state of rural Canada’s Mobile Network Experience
- CIRA - Canada’s Internet Factbook 2019
- What you should know about Internet speeds (CRTC)
- Graphics and videos take longer to load on computers and devices and are significant digital burdens for older phones and rural connections. They are also a burden on wireless networks, as well as GC networks. Most importantly, they get in the way of the user who wants to complete a task.
- Graphics and video do belong on social media where we know visual cues garner more attention and engagement. Do remember to:
- Include alternate text (Alt text) in all photos and graphics that are shared on Twitter
- Use open-captions when posting videos on Twitter, Instagram, and LinkedIn (these channels do not support closed-captions)
- Use closed-captions when posting videos on Facebook, YouTube, and websites including Canada.ca
- Provide a link in social media posts to the accessible web version of information
Analytics and measurement
- Reports should lead to action as much as possible. Was the user able to find the information or complete what they came to do? If not, why?
- Analytics should be put in context. “X number of visits per day” is not as valuable as “X number of visits per day, which is Y% more than the average visits per day.”
- Loop in your analytics subject matter experts as early as possible to:
- Find out what data you can collect
- Ensure data is collected when content is launched (i.e. some data needs to be set up to collect prior to content launching)
- Ensure enough time is provided to prepare needed reporting