Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button #34

Open
govuk-design-system opened this issue Jan 12, 2018 · 55 comments
Open

Button #34

govuk-design-system opened this issue Jan 12, 2018 · 55 comments
Labels
component Goes in the 'Components' section of the Design System

Comments

@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Use this issue to discuss the button component from the GOV.UK Design System.

@timpaul
Copy link
Contributor

timpaul commented May 12, 2018

Related article: Disabled buttons suck

@timpaul timpaul added the component Goes in the 'Components' section of the Design System label May 21, 2018
@pds2208
Copy link

pds2208 commented Jun 25, 2018

Why are there two different methods used to render a button? The start button type used an <a> tag while the other two use <button>?

@kr8n3r
Copy link

kr8n3r commented Jun 26, 2018

Hi, thanks for getting in touch
start "button" is a link to the next page so it's appropriate to use a tag for this.

When used in a form then a button or input type=submit tag should be used

@nubz

This comment has been minimized.

@joelanman

This comment has been minimized.

@nubz

This comment has been minimized.

@frankieroberto

This comment has been minimized.

@davidolsan
Copy link

We are working on "Add a course" backend portal used by the Providers to add a new course.

Think of Gmail inbox with each email being a course with a date, duration, cost etc.
Now just like Gmail I need various buttons - archive, duplicate, delete etc.

Any idea how these buttons would be (if anyone has done this and have an example that would be super helpful) implemented on one page as a GDS design pattern?

@thaskeengithub
Copy link

I am following GDS and I have to create Secondary and Tertiary buttons for the site, but couldn't find these buttons styles in GDS, if anyone has done please share, it will be helpful. - Thanks

@edwardhorsford
Copy link

I wonder if button should be wrapped in <div class="govuk-form-group"></div> by default? or as an option?

I've joined a service and our cancel links sit weirdly with buttons - I suspect in most situations (page per thing), you'll want the button to be a block level element - whereas right now it behaves as if it's inline.

@edwardhorsford

This comment has been minimized.

@edwardhorsford

This comment has been minimized.

@MatthewBurstein

This comment has been minimized.

@vickytnz
Copy link

I'm not an expert on red-green colourblindness but when I've put the red and green through Sim Daltonism under deuteranopia the two buttons look pretty much exactly the same in terms of shade - is there sufficient difference in the shades of buttons in these situations?
image

@joelanman
Copy link
Contributor

@vickytnz it's a good point and potentially we can look at improving the design for colourblind people, but it's important to note colour isn't the only thing conveying meaning here - the button text does too.

@edwardhorsford
Copy link

In principle the buttons could be the same colour. So it's not an absolute barrier for users.

With that said, we make them different because we think one should be clearly the primary one - and we should try to continue that.

The general luminance between both primary and secondary should be different - which it looks like it is. @vickytnz in the example above they don't look the same - the 'save and continue' looks much darker / different from the 'save as draft'. Can you explain what looks the same to you?

@joelanman
Copy link
Contributor

@edwardhorsford I think Vicky's referring to Primary vs Destructive, not Secondary

@jrbarnes9
Copy link

jrbarnes9 commented May 17, 2019

Does anyone have any recent accessibility research findings on the use the 'start now' links (buttons) with voice recognition software? (eg. Dragon).

The start now button relies on the aria role 'button' to make use of the 'click button' voice command to show the user all the buttons on the page. Aria role isn't supported by versions of Dragon below v13, which, as pointed out in the blog post Results of the 2016 GOV.UK assistive technology survey, is not the most commonly used version of Dragon (well not in 2016, at least)

@accessiblewebuk
Copy link
Member

In the accessibility lab at GDS we are running versions 13 and 15 on which the start buttons do work. I can’t recall now if they didn’t work with v 12 or 12.5. I would anticipate there wouldn’t be much usage now below version 13 and if the button doesn’t work directly with Dragon there is the option for the user of Mousegrid which should operate it without difficulty (although I always tell people that is a bit of a compromise)

@jrbarnes9
Copy link

Thanks @accessiblewebuk for your response.

Do we have any more recent data about assistive tech usage (and versions)? Does anyone know of any plans to conduct another assistive tech survey?

@antimega
Copy link

antimega commented Jul 3, 2019

From a Slack conversation - I think the wording proposed for the buttons is odd - do users really need to know information is saved at every step? surely that's assumed. It leads to some screen reader issues where different buttons for "save and continue" and "save and exit" sound alike.

@joelanman
Copy link
Contributor

@antimega You might be right, but just to say that not all services do Save and continue - shorter transactions without accounts like Register to vote for example

@antimega
Copy link

antimega commented Jul 3, 2019

Most services I've seen don't use Save and continue.

@terrysimpson99
Copy link

@antimega @joelanman If there are two buttons ('Save and continue' and 'Continue without saving') then the distinction might be important but I can't imagine that situation arising. If there's only one button then I can't see a significant benefit in describing whether it saves or doesn't.

@a184studio
Copy link

a184studio commented Jul 22, 2019

(AGENT FACING) Has anyone come across something like this before?

Screen Shot 2019-07-22 at 15 44 35

@timpaul
Copy link
Contributor

timpaul commented Jul 23, 2019

Hi Mark - could clicking on the download button act as the confirmation? I imagine the service would be able to tell if the user had done that, and then you wouldn't need the checkbox at all.

@selfthinker
Copy link

The NHS found some problems in user research with buttons being full width in mobile view: nhsuk/nhsuk-service-manual-community-backlog#7

A significant number of teams said that the full width gov button on mobile screens was problematic in user testing - it took many users time to realise it was a button (some thought it was a title, some the bottom of the screen).

@CharlotteDowns
Copy link

GOV.UK Design System working group review: Updated button styles component

Representatives from the GOV.UK Design System working group reviewed this contribution in December 2020.

Based on a majority vote, the group decided that:

  • The contribution cannot be published until some recommendations have been made.

They also made the following recommendations.

Guidance

  • Include guidance to determine when and when not to use a border on a secondary button.
  • Consider how the guidance page is structured with the new variants.
  • Consider how we offer variations of buttons.
  • Determine how to communicate changes to the button component and it's variations with our users.

Design

  • Consider whether users could confuse the start button on a dark background with a secondary button.
  • Consider whether there are use cases for buttons other than a primary button on a dark background.
  • Consider whether to create a set of standard buttons or parameters for the button component that can be used with more flexibility.
  • Consider whether the ‘ghost button’ example follows the same design principles as the other buttons within the system.
  • Consider whether all examples of buttons including the ‘warning button’ should be represented across background colours.

Code

  • Clarify what border thickness all buttons should have if they adopt the new style variant.

Next steps

Based on this feedback, the GOV.UK Design System team have agreed to:

@joelanman
Copy link
Contributor

from an accessibility report, a comment on the grey secondary button:

Low vision users reported that they struggled to identify the purpose of the grey links from
the styling. This is due to the low colour contrast of the grey background of the links against
the white background of the page.

Low vision user comments:

“I found that the buttons that say Add IP addresses, is difficult to recognise as an interactive
button due to the lack of contrast between the background colour and the page colour. I
feel that it would be easily recognised as a button if it had a black border. I know that there
is a state change on mouse-over, but it is very slight and can easily be missed, if the I wasn’t
concentrating.”

@owen-bennett123
Copy link

Further to @joelanman 's comment. we have just done some user testing with a partially sighted user (blind in one eye). For most of the journey they seemed pretty confident but we noticed that they struggled with the grey secondary button in a few places.

@adamliptrot-oc
Copy link

I was wondering about why the button contents are centre-aligned below a certain breakpoint when the general approach is for left-aligned content on mobile.

This can mean that on mobiles with a magnifier being employed, a user will have to move over to the right to see the button contents.

Screenshot approximating what I see when testing on mobiles with a magnifier.
form showing an input with a label and a green rectangle below, the text of the button is off-screen

@edwardhorsford
Copy link

@adamliptrot-oc Before my time, but I speculate it's because on mobile we use full width buttons and it helps keep the button looking more 'balanced'.

Comparison from my service with and without the centreing.
Screenshot 2021-09-29 at 18 27 42
Screenshot 2021-09-29 at 18 28 05

@asier-hmrc
Copy link

Following previous comments re: issues in recognising full width buttons on mobile as well as magnifier users,
it would be worth considering fitting the button to its content and aligned to the left. This way it will align better within its reading context. It will look less like a section header or banner and it will be in sight of magnifiers.
Using the example above,

mobile button left aligned

@asier-hmrc
Copy link

And on the subject of button likeness, what happens when a button text extends over multiple lines? The current styles extend the button to full container width and centre-aligns text to it, weakening it button-ness. Line-height is tight too.
Button-two-line-example-–-GOV-UK-Design-System

I think such buttons should maintain its 'desktop' styling -- the button adjusts to its content with 10px padding either side.
A paragraph-like line-height would be good for readability.
Line brake would have to be controlled by limiting button width.
Left aligning its content would favour magnifier users.

For example

timeout-edited-3

@titlescreen
Copy link

Thats an interesting one. I'm not sure buttons should be that long to go onto multiple lines. I think they should be short and to the point which may mitigate the need for this work. For example instead of Continue checking what help you can get with childcare costs I would change the button to be Continue or Continue checking.

I think if a button gets too long then it can become harder to understand what it will do. We spent a bit of time with content designers working on keeping our buttons short, providing an idea of what it will do/where the user will go.

image

@asier-hmrc
Copy link

@titlescreen I completely agree, buttons should be short and to the point. It is part of their 'button' identity.
The guidelines should specify this to prevent the example I showed earlier. Putting a limit of a single line to a button when in its smallest form (mobile) would be helpful.

@chrisadesign
Copy link

Some questions around labels when save and return is an option, there seems to be some inconsistency.

The design system has:

  • ‘Continue’ when the service does not save a user’s information
  • ‘Save and continue’ when the service does save a user’s information
  • ‘Save and come back later’ when a user can save their information and come back later
    but
  • ‘Save and continue’ and ‘Save as draft’ as a coded example

The GOV.UK Sign In service uses a ‘Continue’ button and ‘Save and complete later’ link in their documentation.

@adamliptrot-oc
Copy link

Is there a reason why the hover states for buttons (and links) are so slight compared to the focus states?
I was on a call yesterday with a low-vision user who was using a large mouse pointer but struggled to see when the buttons and links were under it as the state change wasn't apparant.

@owenatgov
Copy link

We had a low vision user on support today make note of the poor contrast on secondary buttons:

For me (as someone who sees fewer colours than most people), the bottom border isn't enough. I'd like to know why borders on the other 3 sides weren't implemented. It doesn't look like a button because it's just underlined text to me (I can't see the grey background at all).

This is following them querying the contrast on the secondary button and me making a note of the bottom border as a visual delimiter. There have been a couple of mentions in this issue to the secondary button not being great for low vision users even with the bottom border. At present it technically doesn't fail 1.4.11 but it still might not be 100% accessible.

@adamliptrot-oc
Copy link

It looks like the js which handles links which are styled as buttons (with the role="button" attribute) is missing some of the native functionality, specifically the ability to cancel a spacebar "click" by using the tab key.

I've written up some testing: https://liptrot.org/posts/links_buttons_roles_and_behaviours/

@colinrotherham
Copy link

It looks like the js which handles links which are styled as buttons (with the role="button" attribute) is missing some of the native functionality, specifically the ability to cancel a spacebar "click" by using the tab key.

I've written up some testing: https://liptrot.org/posts/links_buttons_roles_and_behaviours/

Very good point @adamliptrot-oc

We'd love a contribution if you'd like to open a pull request?

https://github.com/alphagov/govuk-frontend/blob/7793d63813b5e86e11a3a4ed108f085cc7cd1a58/packages/govuk-frontend/src/govuk/components/button/button.mjs#L52-L53

@danielck
Copy link

danielck commented Aug 21, 2023

What is the justification for setting cursor: pointeron regular buttons? The intended meaning of the "hand cursor" on the web and in the CSS spec is to indicate a link. This is also the recommendation in Apple's and Microsoft's guidelines. Have you done user research that would suggest adding cursor: pointer to interactive elements improves success rate or something else?

I am asking this because we are discussing the removal of cursor: pointer in another project and I was pointed (ahem) to Gov.uk as an example of its use. So far, I couldn't find any research that would support customizing the cursor, assuming buttons are designed to look clickable in the first place.

@RichardBradley
Copy link

RichardBradley commented Apr 15, 2024

We've had lots of trouble with users submitting forms twice on govuk-design-system projects and found that the "preventDoubleClick" setting is insufficient, because the button turns back on again after 1 second. Users who are still waiting for the form to submit will then click the button again at that point.

So we are not using the "preventDoubleClick" setting but instead have custom js code that permanently disables the form submit buttons after first click, regardless of how long the actual form submit takes. This has very much reduced the number of form double-submits we get, and we haven't had any user complaints about it.

Why was the 1 second timeout chosen?

Would you consider changing the "preventDoubleClick" setting from 1 sec to permanent?

... and, if it were up to me, this would be on by default, rather than opt-in. What service actually wants double form submissions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component Goes in the 'Components' section of the Design System
Development

No branches or pull requests