Buttons are a design element that let you add interaction to a page.
Consider using buttons when:
- helping a person into or through a transaction such as “Sign in”
- invoking functionality, for example “Share this page”
- providing a persistent set of UI controls across a series of pages, for example “previous”, “next”, or “back to table of contents”
Don’t use buttons when an ordinary text link will do the job just as well. Overuse reduces their visual impact.
The buttons pattern in the Canada.ca design system includes 5 different styles of buttons. Using the right style in the right situation can help people succeed better on your web page.
Buttons - Canada.ca design pattern
The super task button
Among the button options in the design system is the super task button. It’s a large-ish, attractive green button and it really gets your attention! This button can be powerful…but “with great power comes great responsibility.”
So, how do you use this button properly?
Use this button to launch the main task or next step - when that task or step is what the majority of the visitors to the page are coming to do.
A time for the top of the page
We first used the super task button on the CRA institutional landing page. There, the majority of visitors are looking for how and where to sign into one of their CRA accounts. Since that’s what most people are there to do, the CRA makes it easy by placing the “Sign in to a CRA account” super task button right at the top of the page.
Canada Revenue Agency - Institutional landing page
Super task button appears directly below the main title of the page, ahead of other content.
In the spring of 2020, when the Coronavirus landing page was receiving extremely heavy traffic, anxiety about the virus was high. Call centres were swamped with people wanting to check their symptoms to see if they had COVID-19. To support them, we worked with Health Canada to add a super task button at the top of the page. It led to the newly developed symptoms checker. Again, this worked well because it provided an answer for a key task visitors were coming to the page for at that time. The super task button at the top of the page supported users and redirected them to web content instead of call centres.
A time for the middle of the page
There are times when using a super task button makes sense, but placing it further down the page is more effective than having it at the top.
For example, the Canada Recovery Benefit uses a green “Sign in to your CRA my account” button part way down the “How to apply” page.
Canada Recovery Benefit - How to apply
Super task button appears part way down the page, below the in the Apply online or by phone heading
In this case, the button appears part way down the page. At that point, users have everything they need to be ready to launch into the process of applying. For the vast majority of people on the page, clicking that button is the reason they’re there. However, since there are a few things they need to know before they begin, the button is where it needs to be to ensure task success.
Avoid using the super task button for promotion
So what happens when you use the super task button to get people’s attention for something that isn’t what they’re on the page to do?
Getting people to download the COVIDAlert app has been a key priority for the Government of Canada as cases of COVID-19 rise and contact tracing becomes more difficult. That green button was a tempting way to try to catch people’s attention.
When the super task button was placed on pages where it didn’t directly support page content, the button was not effective.
This was because downloading the app wasn’t what people had come to those pages to do. They saw the button more like an ad that was in the way of what they were looking for. The result? They ignored it.
So, not only did adding the button on these pages not work as intended, it taught people to see it as irritating instead of helpful. Effective web content respects the conventions of the medium. In other words, the more predictable your web content is, the more usable it is. Promotions should look like promotions - not buttons. They shouldn’t interfere with the main task of the page. Instead, they should appear at the end of a task, as a courtesy, an add-on, something to enrich the experience.
We’ll talk more about how to do effective promotions in an upcoming blog post.
Super task vs primary and secondary task buttons
We’ve established that the super task button works well when we want to make it ultra-easy to jump into the task or process that most people on a page are trying to complete.
Once you get people into the process, it’s time to use the primary task button. This button stands out a little less than the super task button, but still supports the primary task on the page. That means it feels more like part of the process, and supports a clear “next step” logic for users. Use this button for actions someone is likely to take on the page, like “submit” or “next.”
The secondary task button is useful for alternate steps in a process - like a “previous” button. Use it for steps that represent “the road less travelled”.
Notice how the primary and secondary task buttons work together in this survey invitation to distinguish between “Yes” as the primary action to take, and “No” as the alternate option.
Example of primary and secondary task buttons
Example of primary and secondary task buttons working together.
Danger and link buttons
The Canada.ca design system includes 2 other button styles or patterns as well.
The danger button is an option when an action may have unintended consequences. Leaving an authenticated application or deleting the contents of a form are examples of correct use cases. Use this button sparingly.
Finally, the link button pattern offers an option for a rarely used action that must not compete with a primary or secondary task button. You wouldn’t want those controls to compete with the “Submit” button, but you might want to style the control as a button for consistency, or to provide a slightly larger target area than rectangular links.
Final word
Most of the time, you don’t need buttons on a web page - simple text links are often sufficient. When you do use a button, take care to limit their use. In a situation where you need to use multiple buttons on a single page, avoid having the buttons compete with each other. The more common or important the action, the more its button should stand out. Choosing the right button style lets you signal the relative importance of one action to the other. It helps you create a logical flow through your process or content.