Button - secondary / tertiary / low priority option

[Tosin-Balogun]

What

We need a low priority secondary button or CTA to help provide users with low priority options or to balance out optional decisions on pages.

Why

As at the date 28-Jan-2022 we only have:

• A green primary button which is most prominent on the page
• A grey secondary which is slightly less prominent on the page
• A white button which is used for blue background pages
• A text link for the lowest priority action

We do not have something that sits in the middle tier priority where it isn't vying for the users attention or isn't completely quiet like a text link

Anything else

Speaking to designers

When I spoke to designers involved in the original build of our design system, the consensus I got was there was not enough active research done to see if the secondary options conveyed the message of low priority

P1: We did do some thinking around this at the time. Personally I'm not wild about 'ghost' buttons, ie, ones that are see through, as they can give the impression of being disabled. Which is how we arrived at the dark grey, because it was still clearly a working button, even if it had a lower visual hierarchy than the bright green one.

Something to bring up with the community though. Write up your theory about why the current one could be improved, how this is an improvement, etc.

P2:...on the redesign project and we basically took the basics of Gov's work and tweaked their form elements to fit in with our overall design. 

So we reduced the size of the inputs, lightened the font slightly, reduced spacing, changed the border colour etc. 

We went through a couple of rounds of testing to make sure stuff worked ok. 

But I'm pretty sure not much went into secondary buttons, other than styling. 

I think it would be a great idea to revisit them with a clean slate and test different options for varying purposes. Including the second colour, ghost style and plain text style.

Looking at what GOVUK has done for their secondary or low priority CTA

GOVUK uses a pale grey button and link text for their low priority options which helps convey their hierarchy. My assumption is we could not adopt theirs because we use pale grey as our primary background colour

They also use outline buttons in some parts of their service like when asking users for feedback or when users want to print a page

Looking at what other design systems have for secondary or low priority CTA

When looking at secondary button options in other design systems, their secondary or low priority options tend to follow these rules

• Have a very pale background on the button
• Have an outline without background on the button

These are some visuals of how other design systems handle secondary or low priority CTA. These can be found on the design systems repository

Google Material

IBM Carbon

Apple UI guidelines

Quote from Apple's guide

Too many filled buttons can increase cognitive load because people must spend time comparing multiple likely options before making a choice

To see more examples from other design systems, check out the MURAL board where I have added many examples

Colour blindness accessibility issue

When I ran a colour blindness simulation on the current secondary CTA, it looses meaning when it cannot rely on colour.

When running a colour blind accessibility simulation on our secondary CTA alongside the one from GOVUK, we see where the colour value loses its hierarchical meaning compared to what GOVUK has.

Proposal

After looking through a whole host of options and considering the primary background we use is hex f0f4f5, I feel us adopting an outlined button can help us provide low priority option CTA.

This is because an outline button helps convey the message of low priority by adopting its native background as its primary colour and also uses the border to convey its presence without competing with the primary CTA.

Here are some examples

It is accessible for users with visual access needs as borders are easier to spot when the colour contrast communication style is lost

It is versatile enough to also work across multiple backgrounds, so should work well with f0f4f5(pale grey), ffffff(white) or 005eb8 (nhs blue)

End end users are familiar with them as they are used by design systems from popular brands such as Apple, Google, Microsoft and many others.

We also use versions of it on our products such as a website, service manual website among others

It can help future proof some of our designs, especially more professional facing clinical systems

It can be used to balance the action hierarchy on pages. Here are some examples where it could have helped achieve balance

Related to:

An extension of #7

[henocookie]

Thanks for submitting this @Tosin-Balogun. What user needs and/or testing evidence do you have for a button that falls between the "quietness" of standard hyperlink text and the "loudness" of the current secondary button from the design system? If there's a clear need then this would definitely be useful

[Tosin-Balogun]

Thanks for submitting this @Tosin-Balogun. What user needs and/or testing evidence do you have for a button that falls between the "quietness" of standard hyperlink text and the "loudness" of the current secondary button from the design system? If there's a clear need then this would definitely be useful

There's two users here, the primary user which is the designer responding to a problem and the end user which is the person responding to the solution.

I have tried to tinker around how to articulate the issue through user needs but it's difficult to extract as I'd need to wait to find a scenario that fits. I also consulted with user researchers to see if creating a mock experiment would be useful but they advised against it as such scenarios are difficult to simulate.

That said, I do have instances where I have considered using a low priority CTA in my response to a design challenge. An example was when I created error patterns and there were to equally important solution needed on the page, adding two primary button did not feel right, neither did it feel right to use a primary and secondary, another example is in the professional systems we use in screening, the current grey secondary feels too elevated.

I have spoken to other designers and I suspect it would be one where we might need to uncover scenarios where their design solution have been limited by not having a low priority button option.

I know that the NHS app had the issue where the two CTA were competing for attention and it confused the user, don't know if @nancyhalladay24 wants to share this here

[Tosin-Balogun]

It also seem liked GOVUK has had conversations around the use of low priority CTA options especially for admin systems

https://github.com/alphagov/govuk-design-system-backlog/issues/154#issuecomment-467361454

[nancyhalladay24]

Hi Tosin. Yes as you mentioned we had two buttons with equal weighting on the NHS App homepage and this meant that the user was struggling to understand the functionality of the App. Often confusing it with 111 online. Obviously the weighting wasn't the only issue here as the order also skewed the hierachy of the page however it was still definitely a problem.

[Tosin-Balogun]

Example of outline button being used on Campaign's healthier families sugar calculator

[mmips]

hi, I saw that 'ghost buttons' perform quite well for mostly secondary actions, so would think they're worth exploring and maybe test against the grey and the white that @nancyhalladay24 you mention? On the back of the conversation here another question that comes to mind is if we want to differentiate between link and button context of use, which could also help accessibility? As mentioned in some of the guidelines 'Buttons are used for actions that affect the website’s front-end or back-end; links are used for navigation and actions that don’t affect the website at all.' (https://ux.iu.edu/writings/buttons-vs-links-basic/#:~:text=There%20are%20differences%20as%20to,affect%20the%20website%20at%20all) and 'The starkest difference between a link and a button to me is that a link navigates the user to a new resource, taking them away from the current context (internal links are the only wrinkle here). A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup.' (https://marcysutton.com/links-vs-buttons-in-modern-web-applications).

I'm new to the organisation and come to it all with very fresh eyes, so would be keen to hear your thoughts on it.

[Tosin-Balogun]

Usability report – Start for Life April 2023

What

As part of the migration and rebrand for the campaign product Start for life, we introduced an outlined button. This was to help balance out the amount of element on screen as the campaign product tend to be very visual and using our grey secondary felt too heavy.

How

We tested a journey to sign up to email newsletters with 5 users, one of them used a screen magnifier. We had a split of 3 on desktop and 2 on mobile

• All users where able to recognise the outlined button as an interaction element.
• 3 users recognised what it was quickly and unprompted.
• User relying on screen magnifier recognised it immediately and unprompted
• P2 "Can even see [hovering on button] at the bottom, you can sign up for emails"

Example

Unprompted, a user scrolled down and paused on the image of the baby and went straight to the outlined button

[nancyhalladay24]

Product: 111 online

111 online is a service people use when they have a health problem and aren't sure where to go. It assess their symptom and tells them appropriate services that can help.

What:

To select a symptom a user can either browse for their symptom from a list of categories or they can search for it by string matching or searching an A-Z list.

We use a ghost button on our categories page that links to the search page.

We want to lead users to use categories over searching because our search results can return unrelated symptoms due to the string matching search method.

To match the desired hierarchy, of categories being the main call to action, it was important that the search button didn’t rule the top of the page, but appeared as an option.

We found that the ghost button was the most suitable component to use in this scenario.

Research and interaction monitoring:

The design has been through 1 round of targetted UR and many un-targetted usability sessions as a part of the journey. It is also part of our live site where we can monitor user interactions with it.

In UR sessions the ghost button was successful as appearing as an option to users instead of a CTA. Participants mentioned seeing it but continued to navigate and interact with other parts of the page, before choosing to click if they decided to search.

Around 9% of visitors to our site click on this ghost button to search for their symptom. Our aim is for categories to be the main CTA on the page to find your symptom so 9% using the ghost button to search is satisfactory for the design.

We also have a hyperlink to the search page at the bottom of the categories page, where around 3% more users click to search for their symptom, this was intentionally placed at the bottom for those who scroll through categories and cannot find what they are looking for.

We have found that users are more likely to use the ghost search button at the top of the page compared to the hyperlink at the bottom of the page if they are on a mobile device compared to desktop or tablet. This makes sense since the mobile button takes up more room on the page compared to the desktop view.