search

bcgov / design-system

The B.C. Design System helps public sector design and development teams build consistent, accessible products
https://gov.bc.ca/designsystem
Apache License 2.0
57 stars 38 forks source link

Secondary Button #54

Closed dlevineBC closed 5 years ago

dlevineBC commented 5 years ago

What

A secondary button is a supporting call to action

Why

Pages will sometimes have more than one action that a user can do. There should not more more than one primary button per page so a secondary button style is needed.

orinevares commented 5 years ago

Australia

Primary Button image

Secondary Button image

image

Here we see the use of a ghost button pattern while the primary button has a colour fill

orinevares commented 5 years ago

US Design System

image

Similar to the Australian Design System the ghost button pattern is used here. This also matches the same design pattern as the Microsoft and MacOS interfaces.

orinevares commented 5 years ago

BC Gov FOI Application

image

Here the secondary button has a yellow fill which attracts more attention than the blue fill. Attention should be brought to the primary button only.

image

Here the secondary action is a link which fails minimum contrast requirements.

orinevares commented 5 years ago

MSP Application

image image

An example of a yellow primary button and grey secondary button.

orinevares commented 5 years ago

Onestop

image

A link style secondary action.

orinevares commented 5 years ago

Cannabis

image

image

Grey filled secondary buttons.

orinevares commented 5 years ago

BCEID

image

Similar design pattern to the US and Australia

image

Here the next button should be the primary button and the back button should be the secondary button. They don't differ so this would be an incorrect use.

orinevares commented 5 years ago

Some Initial concepts for the BC Gov version.

image

orinevares commented 5 years ago

Leaning towards the middle ghost style design for the following reasons.

What is the problem? Currently secondary buttons are inconsistent and can be confusing for users. Often their colours are more prominent than the primary button. Additionally, they are often too small and do not meet accessibility standards.

What are the contraints? The button must match the branding of BC Gov properties, support accessibility considerations, convey a secondary action by colour and prominence, and can appear anywhere in the body of a digital interface.

What is our proposed solution? A ghost style secondary button which copies the basic properties of the primary button.

How did we come to this solution? • The outlines and colours match that of a primary button and the BC Gov colour palette. • The lack of fill puts the button into the background and attracts less attention from the primary button. • This matches the UI design of MacOS and Microsoft increasing the learnability for users. • The rectangular shape resembles the primary button and conveys similar interactivity. • The size maintains a minimum of 44px by 44px • The text underlines and opacity changes on hover to provide multiple ways to convey information

dlevineBC commented 5 years ago

From the Environmental Assessment Office application. They are currently using this pattern. Things to note. On hover it has a complete fill. On the dark background the hover changes to yellow rather than white.

Left: Normal state / Right: onHover

background ghost-hover

Notable that all buttons are treated with this same styling rather than just the secondary buttons