Account pages describe pages a person encounters:
- when they create, log in or log out of an account to access a service;
- the platform pages they interact with to access a service.
All services with Account pages must use MyYukon so they will automatically meet the requirements on this page. If you have an older service with a different account system - follow the advice below.
Why we have a design pattern for Account pages
We have a design pattern for Account pages so people have a user experience that:
- is consistent from one government service to another;
- is predictable and in line with established conventions for online accounts; and
- gives them confidence they are using a secure method to access government services.
When to use Account pages
Creating and logging into accounts is a barrier to many users. When possible, people should only have to create or log into an account to access a government service if:
- they'll need to update their data often; or
- the service is complex and it will benefit them to save their progress.
Let people use as much of your service as possible before they need to create an account or log in.
When to not use Account pages
If a small group of users need an account, but most users do not - don't force all users to create an account.
If a user needs to check the status of a one-off transaction you can give them a unique reference number. You can send these to the user via email or text message.
How Account pages work
If you determine people need accounts for your service, use MyYukon.
Reduce the cognitive load of logging in
When we ask people to log in to access a service, it's an interruption. They have to remember which email address they used, what their passowrd is or if they even have an account. Our goal is to make the log in process as minimally intrusive as possible. We do this by streamlining the user journey.
Streamline the user journey
We aim for the most straight-forward user journey possible. The user journey starts on a Yukon.ca bridge page. From there, the user selects the option to apply online. They'll be prompted to create a MyYukon account, link an existing account to their MyYukon account or log in to their account to access the service. Once they log in, they will be on the specific service's Start page.
Account page components
The following sections describe components of Account pages.
Account pages
Create an account
There are two screens a person sees when they create an account. The first screen is where they add their email address and the second is where they add their password.
The MyYukon logo appears centred at the top of the page.
Screen 1
Page title: Create your account. Do not use: Register, Sign up or something else.
Support text: Set your passwod for MyYukon to continue to Name of the service.
Email address field: Email address
Button text: Continue
If you are not using MyYukon the button text can be Create account.
Button style: style as a primary button.
Text below the button: Already have an account? Log in. Make sure the log in link is underlined and uses the appropriate colour.
Screen 2
Page title: Create your account. Do not use: Register, Sign up or something else.
Support text: Create an account with MyYukon to continue to Name of the service.
Email address field: Email address the person input on the previous screen appears. Add an Edit link in the box so people can change the email address.
Password field: Password. Include an eye as an option for people to display their password as they type.
Button text: Continue
If you are not using MyYukon the button text can be Create account.
Button style: style as a primary button.
Text below the button: Already have an account? Log in. Make sure the log in link is underlined and uses the appropriate colour.
Example of MyYukon Create an account pages
Username
Use email addresses for usernames when possible.
An email address is easier for most people to remember. Some users many not have an email address or may not want to use an email address. If an email address is required to access the online service, make sure you note that on the service Start page in the Before you apply section. This gives the user the option to go back and access the service another way.
Whatever approach you take, make sure people have a way to change their email address or username.
Form label: Email address. Do not use: Enter a username or something else.
Example of a username field on a Create an account page
Example of a username on a Log in page
Passwords
Form label: Password
Criteria to help people select a strong password
Help users select a strong password that meets the criteria set for them.
Include the following password criteria for users. Passwords should be:
- at least 8 characters long;
- contain lowercase letters (a-z);
- contain uppercase letters (A-Z); and
- contain a number (0-9).
Make sure:
- passwords do not contain a user's first or last name or email address; and
- you screen new passwords against a list of known or comprimised passwords.
Allow:
- copy and paste functionality in password fields to facilitate the use of password managers; and
- the use of all printable ASCII and UNICODE characters including emojis.
Design elements to help users
Include a password reveal button so people can see the password as they enter it. This will help prevent typos and password resets. For MyYukon we use an eye as the password reveal button.
If possible, display the password criteria below the password field. Add a checkmark beside each criteria users meet as they type their password out. This will help them meet the criteria in one try rather than forcing them to do it over and over until they get it right.
Skip password hints and knowledge-based security questions.
Forgot password
Provide people with a link to reset their password. This should be a link on the Log in screen placed below the Password field.
Link text: Forgot password? Make sure the link is underlined and apply the appropriate brand colours.
Link function: The link should send the user to a page where they can reset their password.
Forgot password page form label: Enter your email address
Password reset support: In some cases a user might forget their email address. Provide them with an email or phone number so they can contact someone for help. Another option is to direct the user to a service like Get help with a Government of Yukon online services account.
Action once a person resets their password: The use is emailed a link to reset their password.
Example of a password field on a MyYukon Create an account page
This example shows the placement and style of the link to Forgot password?
Log into an account
There are two screens a person sees when they log in. The first screen is where they add their email address and the second is where they add their password.
Screen 1
The MyYukon logo appears centred at the top of the page.
Page title: Log in
Support text: Log in with MyYukon or Log into your account. Do not use Login, Sign in or something else.
Email address field: Email address or Enter your email address. Do not use Username or something else.
Button text: Continue
Button should be styles as a primary button.
Create an account text: Don't have an account? Create an account. Make sure the Create an account link is underlined and uses the appropriate colour.
Screen 2
Page title: Enter your password
Support text: Enter your password for MyYukon to continue to Name of service.
Email address field: Email address the person input on the previous screen appears. Add an Edit link in the box so people can change the email address.
Password field: Password. Include an eye as an option for people to display their password as they type.
Button text: Continue
If you are not using MyYukon the button text can be Log in to account
Example of MyYukon log in screens
Limit the number of failed authentication attempts
Make sure you limit the number of times a person can enter incorrect log in information. These are called failed authentication attempts.
Let people know they have a limited number of tries to log in before their account is locked. For instance, if they have 5 tries, let them know on the 3rd try so it doesn't come as a suprise.
Sign out of an account
Button text: Sign out of account
Link text: Sign out of your account
Signing users out of different sessions
With MyYukon, users stay logged in until they log themselves out. This happens at the platform level.
When a user signs out, terminate their session at your service level. We recommend you encourage the user to sign out after they're done using the service.
Button or link text: Sign out of account or Sign out
Button or link placement: Same place the "Log in to account" button is. This is usually at the top, right of the page to the left of the Français link.
Example of a log in link on a service page
Example of a sign out link on a service page
After a person signs out
Once a person logs out - you must confirm they've logged out. You can do this on the same page or a Confirmation page. This page should include a button or link for the user to log back into their account.
Text to use: You have logged out of your account
Button text: Log in to your account
Onboarding accounts
If you have a service where new users need to provide some information before they can use the service, you need to onboard your users. This is often done as a one-time "set up" step, collecting informating that is specific to your service.
Completing an onboarding step is may be required before full access to a service is allowed. In other cases, progressive profilling can be used, where the required information is only collected right when it is needed.
Some onboarding processes include an linking accounts step.
The process of onboarding ensures people:
- can provide the sevice with the information needed for service delivery.
Onboarding can include:
- service-specific information; or
- confirmation of certain details or information
Linking accounts
If you have a service with user accounts that existed before or seperate from MyYukon, your users may need to link their pre-existing account to their MyYukon account. For some services, this step may be mandatory, for some it may be optional, and for other it is not possible.
The process of linking account ensures people:
- can still access their account; and
- they have a path to transition to MyYukon.
Linking can include:
- finding and matching existing records in other connected services.
Help users with this transition
People will be presented with three options. These are to:
- create an account;
- link an account; or
- log in to an account.
It's important we help people make the right selection for their particular scenario. They often miss one of them or they do not understand the difference. If they get this wrong - they might not be able to use the service.
It is also helpful to let the user know what the next steps are to access the service.
Heading text: Link your account
Link text: Link your account
Support: Provide an email and phone number so people can contact someone to get help to link their account. For help linking your account email [email protected] or phone 867-667-XXXX. Another option is to link them to a service similar to Get help with a Government of Yukon online services account.
Button text: Link account or Link your account
Button style: style as a primary button.
Button and link function: Once a person clicks the button or linked text to link their account - they go to a page where they can link their account to MyYukon. Once the accounts are linked, return them to the service Start page.
Example of linking accounts process