Add new secondary button

[davidhunter08]

Description

• Update secondary button style
• Update button spacing

Button guidance

Before	After

Button spacing

To do

• add secondary button css
• update button examples
• update guidance

[davidhunter08]

In the NHS App code there are differences in button padding (in comparison to the NHS design system button) including:

On mobile - padding (top & bottom)
NHS design system = 8px
NHS App design system = 12px

On desktop - padding (left & right)
NHS design system = 16px
NHS App design system = 32px

[davidhunter08]

The default button left/right padding (16px) looks too small because of all the extra visual space on top of the label due to the cap/x-height.

[davidhunter08]

The default button left/right padding (16px) looks too small because of all the extra visual space on top of the label due to the cap/x-height.

I've set it to 24px for now, pending feedback

[davidhunter08]

Vertical spacing comparison.

NHS design system = 8px padding (top & bottom)
NHS App design system = 12px padding (top & bottom)

[davidhunter08]

Draft guidance - v1

Guidance needs updating to:

• say that the secondary button is different to the NHS design system
• reference the research

Also is the current usage guidance for secondary buttons correct?

NHS design system usage guidance:
Use a secondary button on pages that have more than 1 action or when users are not noticing standard link text.

Are there instances where you would use the secondary button as the only action?

Here's the gov guidance:

GOV.UK design system usage guidance:
Use secondary buttons for secondary calls to action on a page.

[davidhunter08]

A question from Katy around secondary button usage:

We currently use Secondary button + Link assembly component to give users two distinct options. Our reasoning for using secondary and link rather than primary and link is that each CTA is equally weighted and one is not the natural next step over the other, which the green button may suggest. Is this logic used in other services or is primary button + link the default here?

cc @Graham-Pembrey

[Graham-Pembrey]

Draft addition to the secondary button usage guidance:

Our secondary button design differs from the NHS design system.

Use a secondary button either:

• for secondary actions on a page
• when an action needs less prominence – for example because it is optional

The second point would fit with cases where we might have reasons to use a secondary button as the only action on a page. It could also work in the scenario Katy described.

Draft addition to the research section of the guidance:

We designed the NHS App secondary button as an alternative to a secondary button with a grey background. This was because our research found some participants overlooked that design or believed it was a disabled button. In moderated usability testing, six out of six participants were able to use the NHS App secondary button for a variety of actions. Two participants had colour vision deficiency (colour blindness).

[Graham-Pembrey]

Suggested changes to the draft guidance above after further discussions with the team this morning. Additions are in code blocks:

We use a variation of the NHS design system secondary button. The "Research" section below has more details about why.

Use a secondary button either:

• for secondary actions on a page
• when an action needs less prominence – for example because it is optional

In the research section:

We designed the NHS App secondary button as an alternative to a secondary button with a grey background. This was because our research found some participants overlooked that design or believed it was a disabled button. Some participants hesitated before selecting the button. The visual hierarchy of primary and secondary buttons was also found to be unclear for people with monochromatic vision.

In moderated usability testing, six out of six participants were able to use the NHS App secondary button for a variety of actions and without hesitation. Two participants had colour vision deficiency (colour blindness).

[davidhunter08]

Draft guidance - v2 (latest version)