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 · 42 comments
Open

Button #34

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

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 12, 2018

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

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018
@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018
@timpaul
Copy link
Contributor

@timpaul timpaul commented May 12, 2018

Related article: Disabled buttons suck

@pds2208
Copy link

@pds2208 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 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 hidden.

@joelanman

This comment has been hidden.

@nubz

This comment has been hidden.

@frankieroberto

This comment has been hidden.

@davidolsan
Copy link

@davidolsan davidolsan commented Oct 8, 2018

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

@thaskeengithub thaskeengithub commented Jan 12, 2019

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

@edwardhorsford edwardhorsford commented Jan 25, 2019

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 hidden.

@edwardhorsford

This comment has been hidden.

@MatthewBurstein

This comment has been hidden.

@vickytnz
Copy link

@vickytnz vickytnz commented Mar 21, 2019

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
Member

@joelanman joelanman commented Mar 21, 2019

@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

@edwardhorsford edwardhorsford commented Mar 22, 2019

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
Member

@joelanman joelanman commented Mar 22, 2019

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

@jrbarnes9
Copy link

@jrbarnes9 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

@accessiblewebuk accessiblewebuk commented May 17, 2019

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

@jrbarnes9 jrbarnes9 commented May 24, 2019

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 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
Member

@joelanman joelanman commented Jul 3, 2019

@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 antimega commented Jul 3, 2019

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

@terrysimpson99
Copy link

@terrysimpson99 terrysimpson99 commented Jul 17, 2019

@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 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 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.

@a184studio
Copy link

@a184studio a184studio commented Jul 23, 2019

Hi @timpaul , I've missed out that it is an 'AGENT facing' system.

The risk is that the AGENT will leave without the PDF downloading in time. The service needs to compile everything that the AGENT has collected over the phone. (The compiling is quite slow). There is also the risk that it may not initiate the download. If you leave using 'Finish and close' it will clear the session and now there will be no option of a second attempt at downloading the PDF.

The session is only stored within the bowser and so there is a risk the AGENT may lose everything, which I guess is our worst case scenario.

The following this step is that it needs to be entered into a legacy system, until we can pry it away and the PDF is no longer needed.

@timpaul
Copy link
Contributor

@timpaul timpaul commented Jul 23, 2019

Aaah, the reality of government legacy tech. We'll get there :-)

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Jul 23, 2019

@a184studio the way it's worded makes me think you're ok to check it as soon as you click the button - so you might get the same issue that it's marked before the download is completed. I'd look to see if you can make it clear you're interested in whether the download has completed.

@a184studio
Copy link

@a184studio a184studio commented Jul 23, 2019

@edwardhorsford Yeah, it's basically for an AGENT to double check the download was successful, the data is there and go back into the service and close the session.

But you are right, there would be nothing to stop an AGENT from clicking the checkBox then leaving without the data, but if they didn't download the PDF they will lose everything.

@jesseyuen
Copy link

@jesseyuen jesseyuen commented Sep 5, 2019

I wonder if styling the disabled button with cursor: not-allowed would provide more affordance to the user?

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Oct 2, 2019

@colinrotherham shared the modal they're working on for timeout warnings:
Screenshot 2019-10-02 at 15 05 21

Because of Aria requirements, the button is focused when the modal is loaded. But is a yellow button right in this case? The style is distinct when the user has moved focus on to an element, but is it right when that element is loaded in the focused state?

(NB I'm not suggesting it shouldn't be focused - only raising the styling as a potential issue).

@titlescreen
Copy link

@titlescreen titlescreen commented Dec 30, 2019

@edwardhorsford We have done a similar thing with our modal and it looks the same. What I read at the time said that the first input should have focus, which in this case is the resume application button. So yeah I think what you have done is correct.

I think a non-accessible user would expect the button to be green, but I don't think it's a big problem. If anything seeing the button a different colour might encourage them to read the popup...

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Feb 12, 2020

I'd like to suggest that the design system site include an explicit example of links styled as buttons. The start now example is one such case, but unless a team knew it was a link, they may not find it. For content only pages with a 'continue' button, I'd normally expect teams to use a link - but there's no example of how to do this.

@titlescreen
Copy link

@titlescreen titlescreen commented Feb 12, 2020

I have a bit of an issue with buttons styled and links and visa-versa. It makes me sad when I press space on a button to trigger it and it doesn't work because it's actually a link. I've guess people who navigate via keyboard have seen this kind of kayak issue before and recover from it quickly but it may burn some goodwill.

@joelanman
Copy link
Member

@joelanman joelanman commented Feb 12, 2020

@titlescreen it's a good point, our links styled as buttons have javascript to make this work:

https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/button/button.js

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Mar 5, 2020

I'd like to suggest that the design system site include an explicit example of links styled as buttons. The start now example is one such case, but unless a team knew it was a link, they may not find it. For content only pages with a 'continue' button, I'd normally expect teams to use a link - but there's no example of how to do this.

This came up again today - where a user didn't know the design system supported this. I'm think I may raise as an issue against the design system repo.

Edit: new issue opened here.

@simonwhatley
Copy link

@simonwhatley simonwhatley commented Sep 26, 2020

When the new gov.uk/transition landing page launched in August 2020, the design included a blue 'start now' button rather than the standard green.

transition landing page blue button

The start now button leads to a multi-question from, called the 'transition checker'. The checker is designed to provide a personalised set of actions an indvidual or business needs to take in order to be ready for the UK's exit from the European Union.

At the beginning of September we ran an A/B test on the landing page to determine whether the button colour had an impact on users engaging with the checker. The test was a simple one, we changed the button to green in line with the standard pattern.

transition landing page green button

The results were conclusive, changing the colour of the start now button from blue to green improved the click-through rate to the checker by 9%.

This improvement is likely, in part, due to green being what users expect for start buttons on GOV.UK. It also stands out more against the blue on the transition landing page.

@selfthinker
Copy link

@selfthinker selfthinker commented Dec 1, 2020

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

@CharlotteDowns CharlotteDowns commented Jan 25, 2021

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:

  • Use two primary buttons in the cookie banner component #12.
  • Cross-reference further work to buttons and how they look on different backgrounds with the alternative button styles #154.

@joelanman
Copy link
Member

@joelanman joelanman commented May 18, 2021

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

@owen-bennett123 owen-bennett123 commented Jul 5, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet