Page feedback tool: Canada.ca design system

When to use

Consider adding the page feedback tool to:

• uncover specific page-level issues affecting your GC Task Success Survey task score
• research issues on pages you plan on working on in the future
• understand if new or existing pages are meeting user needs
• identify emerging issues
• monitor after page improvements have gone live

What to avoid

Avoid using the page feedback tool on pages where there is no plan to monitor comments or take action. We also don’t recommend using the tool within secure spaces or pages with sensitive subject material.

Additional behaviours to avoid when analyzing feedback

Content and design

The feedback tool invites visitors to:

• indicate if they found what they were looking for (yes / no)
• offer their feedback describing the problem

Place the tool at the bottom of the page before the date modified. It's aligned to the left of the page before the “Share this page” widget. You can opt to use the page feedback tool in place of the "Report a problem" pattern. It's not mandatory to add the feedback pattern when removing “Report a problem” from your page.

The page feedback pattern has 3 states:

• “Did you find what you were looking for?” prompt with “Yes” and “No” buttons
• Feedback text entry box (with an option to add a customizable contact link)
• Thank you message

This pattern also has detailed documentation for use and analysis of feedback.

Page feedback tool (Analytics and feedback)

Content specifications

When you first add the feedback tool to your page, use the default option without the contact link.

Only consider adding a contact link if you have tried to make the page content clearer for how to contact the program or service and users are still using the feedback tool to get a response for their situation.

The link can go to an HTML page or an email address.

Keep the link text short. The recommended wording is “Contact [the Service Name]”

Interactions

The feedback pattern has 3 states:

• "Did you find what you were looking for" prompt
• feedback entry
• thank you message

For all of these states, the user stays on the same HTML page as they interact with the feedback pattern.

On page load, the feedback pattern displays the prompt “Did you find what you were looking for” followed by buttons for “Yes” and “No”.

If a user selects "No" the next step asks the user to provide more details about their experience.

It begins with a heading labelled "Please provide more details", followed by the text "You will not receive a reply. Don't include personal information (telephone, email, SIN, financial, medical, or work details). Maximum 300 characters". After selecting "Submit", the user is shown a thank you message.

Then there is an open text field to capture the feedback.

If the contact option is used, a contact link for the service is placed inside an expand/collapse pattern labeled “Need urgent help with a problem? Contact us” located before the heading and open text field.

The user selects the “Submit” button to send their feedback. After selecting "Submit", the user is shown a thank you message with a green checkmark to indicate that their feedback has been successfully sent.

If a user selects "Yes" they will only be shown a thank you message.

Design specifications

The feedback pattern replaces the "Report a problem" pattern when in use.

Grey well

• Well class: well mrgn-bttm-0

Typography

• Heading: font-size: 16px
• Body text: small font-size: 87%

Buttons

• Position: The buttons are to the right of the "Did you find what you were looking for" prompt. The ‘Yes’ button is to the left of the ‘No’ button
• Button class: btn btn-primary

Thank you checkmark icon

• Position: left of the "Thank you" message
• Checkmark icon: glyphicon glyphicon-ok
• Checkmark colour: success class

Visual examples

Image description: Initial view of the feedback tool

On page load, the feedback is located at the bottom of the web page above the date modified. A small gray well includes the prompt “Did you find what you were looking for?” followed by buttons for “Yes” and “No”.

Image description: Default view after selecting "No"

After interacting with the “No” button, a text entry screen will replace the prompt. There is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

Image description: Optional view after selecting "No" with contact option

After interacting with the “No” button, a text entry screen will replace the prompt.

In the contact option, there is an expand/collapse pattern with the header “Need urgent help with a problem? Contact us”. When the expand/collapse pattern is opened, there is a customizable link to contact the service.

After the expand/collapse pattern, there is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

Image description: View after selecting "Yes" or after submitting feedback

When users select “Yes” from the initial prompt or after submitting their feedback, a thank you message is displayed. There is a green checkmark icon followed by the heading “Thank you for your feedback”.

How to implement

Add the feedback tool to the bottom of a content page after the page content and before the date modified.

Research and rationale

Research findings

Blog post: Collect feedback, find issues

Policy rationale

The Guideline for Service and Digital requires client feedback to be an integral part of service or product design. It can take several forms, including using the page feedback tool.