diff --git a/architecture/canada-content-information-architecture-specification.md b/architecture/canada-content-information-architecture-specification.md index 5d1b7fac9e..ed853f011f 100644 --- a/architecture/canada-content-information-architecture-specification.md +++ b/architecture/canada-content-information-architecture-specification.md @@ -13,10 +13,8 @@ title: "Canada.ca Content and Information Architecture Specification" ---

From: Treasury Board of Canada Secretariat

The Canada.ca design system provides user-tested templates, patterns and design principles. The system allows designers and developers to create a more usable, consistent and trustworthy online experience for people who access Government of Canada digital services.

-

Version 2.1.2

-

Revised: - -

+

Version 2.1.2

+

Revised:

@@ -45,5 +43,5 @@ title: "Canada.ca Content and Information Architecture Specification"
-

© Her Majesty the Queen in Right of Canada, represented by the President of the Treasury Board, 2017,
+

© Her Majesty the Queen in Right of Canada, represented by the President of the Treasury Board, 2017
ISBN: 978-0-660-09331-4

diff --git a/architecture/mandatory-elements.md b/architecture/mandatory-elements.md index 24c4f31d62..532e07f7e3 100644 --- a/architecture/mandatory-elements.md +++ b/architecture/mandatory-elements.md @@ -7,76 +7,65 @@ layout: default title: "Mandatory elements of the Canada.ca design system" ---

From: Treasury Board of Canada Secretariat

-
-
- -
-

Government of Canada web pages must be easily identifiable as part of Canada.ca. Each page must convey the overall brand and feel of Canada.ca, and provide a consistent experience for site visitors.

-

These mandatory elements were designed to reflect the trusted digital brand of the Government of Canada: modern, open, helpful and credible.

-
-

Mandatory elements for all institutions

-
    -
  1. The Canada.ca domain
  2. -
  3. Styles
  4. -
  5. Header and footer
  6. -
  7. Institutional landing page
  8. -
  9. Other mandatory templates
  10. -
-
-

The Canada.ca domain

-

Use the Canada.ca domain for all Government of Canada web pages:

- -

Styles

-

Apply the following style elements:

- - -

Each page from the Government of Canada shares a common header and footer. That is, the upper and lower parts of a page must look the same from page to page.

-

Get the detailed requirements:

- -

Institutional landing page

-

All Government of Canada organizations and institutions must use this template as the single home page for their institution.

- -

Other mandatory templates

-

Specific Canada.ca page types use mandatory templates. Consistency in these page types helps people find and accomplish tasks.

- -

Government-wide templates

-

There is only one of each of these pages across Canada.ca.

- - +
+

Government of Canada web pages must be easily identifiable as part of Canada.ca. Each page must convey the overall brand and feel of Canada.ca, and provide a consistent experience for site visitors.

+

These mandatory elements were designed to reflect the trusted digital brand of the Government of Canada: modern, open, helpful and credible.

+

Mandatory elements for all institutions

+
    +
  1. The Canada.ca domain
  2. +
  3. Styles
  4. +
  5. Header and footer
  6. +
  7. Institutional landing page
  8. +
  9. Other mandatory templates
  10. +
+

The Canada.ca domain

+

Use the Canada.ca domain for all Government of Canada web pages:

+ +

Styles

+

Apply the following style elements:

+ + +

Each page from the Government of Canada shares a common header and footer. That is, the upper and lower parts of a page must look the same from page to page.

+

Get the detailed requirements:

+ +

Institutional landing page

+

All Government of Canada organizations and institutions must use this template as the single home page for their institution.

+ +

Other mandatory templates

+

Specific Canada.ca page types use mandatory templates. Consistency in these page types helps people find and accomplish tasks.

+ +

Government-wide templates

+

There is only one of each of these pages across Canada.ca.

+ diff --git a/architecture/organizing-content.md b/architecture/organizing-content.md index acc656390f..85bb238cf9 100644 --- a/architecture/organizing-content.md +++ b/architecture/organizing-content.md @@ -36,7 +36,7 @@ title: "Organizing content on Canada.ca"
  • Search: supports findability for both theme and institutional navigation through the on and off-site search engine
  • Most people looking for government services and information don't understand how government is organized. To address this, the theme-based navigation is the priority navigation path on Canada.ca.

    -

    See where your content fits under themes and their corresponding topics in the Canada.ca Topic tree.

    +

    See where your content fits under themes and their corresponding topics in the Canada.ca Topic tree.

    Navigation conceptual overview
    Diagram of user navigation conceptual overview. Text version below: diff --git a/architecture/templates.md b/architecture/templates.md index 459a2dfc7b..d10f19aafb 100644 --- a/architecture/templates.md +++ b/architecture/templates.md @@ -7,90 +7,88 @@ layout: default title: "Designing content on Canada.ca" ---

    From: Treasury Board of Canada Secretariat

    -
    -
    - + +
    +

    The Canada.ca templates, page layouts and design patterns have been developed to support departments in designing web content that will help people complete their tasks.

    +

    On this page

    + +

    How to design for Canada.ca

    +

    When designing content, always focus on the task. All design decisions should make it easier for people to:

    +
      +
    • find the page: how do users get to the page, either by navigating or searching
    • +
    • understand the information: does the content provide the right answers, using the right words
    • +
    • use the content to complete their task: do the design patterns help people succeed
    • +
    +
    +
    +
    +
    +

    Template and pattern library for Canada.ca

    +

    Find the template or pattern you need for your content

    +
    +
    +
    +
    +

    Content style guide

    +

    Writing principles and techniques to make content clear and accessible to all

    +
    +
    +
    -

    The Canada.ca templates, page layouts and design patterns have been developed to support departments in designing web content that will help people complete their tasks.

    -

    On this page

    +

    Design principles

    +

    Canada.ca is based on the following principles.

    +

    Open, collaborative concept design

    +

    The rules and concepts presented in this design system have been developed in collaboration with Government of Canada Theme lead departments. Other departments and agencies have also provided input.

    +

    We are actively engaging with the community in several ways:

    -

    How to design for Canada.ca

    -

    When designing content, always focus on the task. All design decisions should make it easier for people to:

    +

    Evidence-based iteration

    +

    The rules and concepts presented here have been designed and revised based on evidence of people’s needs and their success on the site.

    +

    the structure of the main menu canada.ca was based on an understanding what canadians are looking for. this came from a review public web usage data. data collected across government departments and agencies.

    +

    The Canada.ca IA, templates and patterns have been adjusted since 2013. This reflects the outcomes of user research and usability testing with thousands of Canadians. Usability tests have been performed in English and French, on mobile, tablet, and desktop environments, and with assistive technologies.

    +

    As new research and testing is undertaken and departments try new ideas, this design system will continue to be updated.

    +

    This system is a living and evolving toolbox. Its role is to help departments save time and money by using existing patterns and styles for their specific content. It provides a consistent framework for the Government of Canada web presence, while being flexible enough to allow innovative design solutions.

    +

    People first

    +

    Canada.ca is based on user needs. It ensures that the most in-demand information and services are easy to find, understand and use.

    +

    Non-priority content must not interfere with someone’s ability to find what they are looking for. Content must be organized to present a government-wide perspective to users, wherever possible. For example, information from multiple departments on the same topic of public interest must be grouped together. When duplicate content is identified, it should be removed.

    +

    Canada.ca must provide current, relevant, accurate, unique and authentic information about the Government of Canada’s programs and services. This reduces confusion for people.

    +

    Content for which the Government of Canada is not clearly the authoritative source must not be published on Canada.ca. Instead, Canada.ca can refer to this content by providing links to an external source.

    +

    To ensure content is always current, it must be actively managed throughout its life cycle. This is required by the Government of Canada Information Management policy requirements.

    +

    Task-centred approach

    +

    People visit Canada.ca to complete a task. A task is something a person has set out to do. To accomplish a task, a person may need to read a web page or undertake a complex transaction online. All content supporting a task should be simple, consistent and predictable.

    +

    The Canada.ca design system provides people with consistent navigation, content labels, templates and patterns. Whether they enter Canada.ca pages directly through Internet search engines or by way of social media or direct traffic, consistency helps ensure users can find, begin, and complete the most in-demand tasks.

    +

    Optimized for mobile devices

    +

    Canadians are increasingly using mobile devices, including tablets and smart phones.

    +

    The existing Canada.ca design helps people easily find the same content on either their mobile or desktop device. The design system, including Web Experience Toolkit (WET) templates and design components, have been tested and verified as mobile-friendly.

    +

    A separate mobile instance of the site is not needed.

    +

    To perform well on mobile devices, the IA is as simple and as flat as possible. In-page navigation is more effective than menus and page sizes must be limited. The content specifications and writing guidance take this mobile context into account. They also specify how to create content that will be easily downloaded on mobile devices. This allows people to access information quickly while on the go.

    +

    Integrated with search

    +

    The IA must be well integrated with the site’s search function. This integrated approach:

      -
    • find the page: how do users get to the page, either by navigating or searching
    • -
    • understand the information: does the content provide the right answers, using the right words
    • -
    • use the content to complete their task: do the design patterns help people succeed
    • +
    • provides people with the necessary navigation cues, when search doesn’t take them to the right place
    • +
    • ensures filters are based on the underlying IA, such as the topic structure, to improve overall search precision and relevance
    -
    -
    -
    -
    -

    Template and pattern library for Canada.ca

    -

    Find the template or pattern you need for your content

    -
    -
    -
    -
    -

    Content style guide

    -

    Writing principles and techniques to make content clear and accessible to all

    -
    -
    -
    -
    -
    -

    Design principles

    -

    Canada.ca is based on the following principles.

    -

    Open, collaborative concept design

    -

    The rules and concepts presented in this design system have been developed in collaboration with Government of Canada Theme lead departments. Other departments and agencies have also provided input.

    -

    We are actively engaging with the community in several ways:

    -
      -
    • a social media presence, through the use of #Canadadotca
    • -
    • a blog that presents our work
    • -
    • regular meetings with the Theme lead departments
    • -
    • events and presentations for all departments and agencies
    • -
    -

    Evidence-based iteration

    -

    The rules and concepts presented here have been designed and revised based on evidence of people’s needs and their success on the site.

    -

    the structure of the main menu canada.ca was based on an understanding what canadians are looking for. this came from a review public web usage data. data collected across government departments and agencies.

    -

    The Canada.ca IA, templates and patterns have been adjusted since 2013. This reflects the outcomes of user research and usability testing with thousands of Canadians. Usability tests have been performed in English and French, on mobile, tablet, and desktop environments, and with assistive technologies.

    -

    As new research and testing is undertaken and departments try new ideas, this design system will continue to be updated.

    -

    This system is a living and evolving toolbox. Its role is to help departments save time and money by using existing patterns and styles for their specific content. It provides a consistent framework for the Government of Canada web presence, while being flexible enough to allow innovative design solutions.

    -

    People first

    -

    Canada.ca is based on user needs. It ensures that the most in-demand information and services are easy to find, understand and use.

    -

    Non-priority content must not interfere with someone’s ability to find what they are looking for. Content must be organized to present a government-wide perspective to users, wherever possible. For example, information from multiple departments on the same topic of public interest must be grouped together. When duplicate content is identified, it should be removed.

    -

    Canada.ca must provide current, relevant, accurate, unique and authentic information about the Government of Canada’s programs and services. This reduces confusion for people.

    -

    Content for which the Government of Canada is not clearly the authoritative source must not be published on Canada.ca. Instead, Canada.ca can refer to this content by providing links to an external source.

    -

    To ensure content is always current, it must be actively managed throughout its life cycle. This is required by the Government of Canada Information Management policy requirements.

    -

    Task-centred approach

    -

    People visit Canada.ca to complete a task. A task is something a person has set out to do. To accomplish a task, a person may need to read a web page or undertake a complex transaction online. All content supporting a task should be simple, consistent and predictable.

    -

    The Canada.ca design system provides people with consistent navigation, content labels, templates and patterns. Whether they enter Canada.ca pages directly through Internet search engines or by way of social media or direct traffic, consistency helps ensure users can find, begin, and complete the most in-demand tasks.

    -

    Optimized for mobile devices

    -

    Canadians are increasingly using mobile devices, including tablets and smart phones.

    -

    The existing Canada.ca design helps people easily find the same content on either their mobile or desktop device. The design system, including Web Experience Toolkit (WET) templates and design components, have been tested and verified as mobile-friendly.

    -

    A separate mobile instance of the site is not needed.

    -

    To perform well on mobile devices, the IA is as simple and as flat as possible. In-page navigation is more effective than menus and page sizes must be limited. The content specifications and writing guidance take this mobile context into account. They also specify how to create content that will be easily downloaded on mobile devices. This allows people to access information quickly while on the go.

    -

    Integrated with search

    -

    The IA must be well integrated with the site’s search function. This integrated approach:

    -
      -
    • provides people with the necessary navigation cues, when search doesn’t take them to the right place
    • -
    • ensures filters are based on the underlying IA, such as the topic structure, to improve overall search precision and relevance
    • -
    -
    -
    -

    Help improve this design system

    -

    When designing for Canada.ca, keep in mind that the measure of success is more than just conformity to guidelines. It is equally important to help users successfully complete their tasks. Improving the rules is encouraged. Always share your ideas to make things better with the Digital Transformation Office at dto.btn@tbs-sct.gc.ca.

    -
    -
    +
    +

    Help improve this design system

    +

    When designing for Canada.ca, keep in mind that the measure of success is more than just conformity to guidelines. It is equally important to help users successfully complete their tasks. Improving the rules is encouraged. Always share your ideas to make things better with the Digital Transformation Office at dto.btn@tbs-sct.gc.ca.

    +
    + diff --git a/architecture/usage-canadaca-design.md b/architecture/usage-canadaca-design.md index 9748429472..e3edbfa1c9 100644 --- a/architecture/usage-canadaca-design.md +++ b/architecture/usage-canadaca-design.md @@ -7,42 +7,38 @@ layout: default title: "Who has to use the Canada.ca design sytem" --- -
    - - -

    The Canada.ca Content and Information Architecture Specification is referenced in "Appendix D: Mandatory Procedures for Social Media and Web Communications" of the Directive on the Management of Communications. Its requirements apply to departments and other portions of the federal public administration listed in Schedules II.1 and II of the Financial Administration Act.

    -

    These organizations must apply Canada.ca design requirements for all their public-facing websites or digital services, regardless of the technology, domain name (both canada.ca and gc.ca) or publishing platform through which these are delivered.

    -
    -

    Out-of-scope situations

    -

    The Canada.ca global header and footer design may not be applied or replicated in the following situations:

    -
      -
    • internal-facing websites or digital services
    • -
    • Government of Canada institutions that are not subject to the Directive on the Management of Communications
    • -
    • enterprises and organizations that are not part of the Government of Canada
    • +
      +
      + -

      Using the Web Experience Toolkit

      -

      All institutions are encouraged to use the components in the Web Experience Toolkit for both their internal and external web products. These components are open source and free. They reflect the results of ongoing usability testing. They make it easier to meet accessibility requirements and provide responsive design for a variety of devices with a range of screen sizes.

      -
      -

      Adapting the Web Experience Toolkit for out-of-scope situations

      -

      If your website or service is out of scope for the Canada.ca design system, but you wish to use the Web Experience Toolkit, you must make the following minimum modifications.

      -

      Global header

      -
        -
      • Change the contents of the global navigation menu so that they are clearly different from the menu labels used on Canada.ca
      • -
      • Change the main colour used in the global navigation menu so that it is clearly contrasted from the main colour used in the global Canada.ca header
      • -
      -

      Global footer

      -
        -
      • Change the links in the global footer so that they are clearly different from the links used in the footer navigation menu on Canada.ca
      • -
      • Change the background colour used in the global footer so that it is clearly contrasted from the background colour used in the footer navigation menu on Canada.ca
      • -
      -

      These modifications help users distinguish between different sites, and they ensure that the overall Canada.ca design remains unique.

      -
      +
      +
      + +

      The Canada.ca Content and Information Architecture Specification is referenced in "Appendix D: Mandatory Procedures for Social Media and Web Communications" of the Directive on the Management of Communications. Its requirements apply to departments and other portions of the federal public administration listed in Schedules II.1 and II of the Financial Administration Act.

      +

      These organizations must apply Canada.ca design requirements for all their public-facing websites or digital services, regardless of the technology, domain name (both canada.ca and gc.ca) or publishing platform through which these are delivered.

      +

      Out-of-scope situations

      +

      The Canada.ca global header and footer design may not be applied or replicated in the following situations:

      +
        +
      • internal-facing websites or digital services
      • +
      • Government of Canada institutions that are not subject to the Directive on the Management of Communications
      • +
      • enterprises and organizations that are not part of the Government of Canada
      • +
      +

      Using the Web Experience Toolkit

      +

      All institutions are encouraged to use the components in the Web Experience Toolkit for both their internal and external web products. These components are open source and free. They reflect the results of ongoing usability testing. They make it easier to meet accessibility requirements and provide responsive design for a variety of devices with a range of screen sizes.

      +

      Adapting the Web Experience Toolkit for out-of-scope situations

      +

      If your website or service is out of scope for the Canada.ca design system, but you wish to use the Web Experience Toolkit, you must make the following minimum modifications.

      +

      Global header

      +
        +
      • Change the contents of the global navigation menu so that they are clearly different from the menu labels used on Canada.ca
      • +
      • Change the main colour used in the global navigation menu so that it is clearly contrasted from the main colour used in the global Canada.ca header
      • +
      +

      Global footer

      +
        +
      • Change the links in the global footer so that they are clearly different from the links used in the footer navigation menu on Canada.ca
      • +
      • Change the background colour used in the global footer so that it is clearly contrasted from the background colour used in the footer navigation menu on Canada.ca
      • +
      +

      These modifications help users distinguish between different sites, and they ensure that the overall Canada.ca design remains unique.