Hackpads are smart collaborative documents. .

Mark Shahid

45 days ago
Unfiled. Edited by Mark McElhaw 45 days ago
Tim P See the GOV.UK Service Manual for more advice on how to style buttons.
 
Caroline J Position the continue button  under the last question on the form, aligned with the left-hand edge of the text box. 
 
 
 
 
Caroline J The most natural reading pattern on forms is to look for the next box to type into / next question to ask, and the first place that people look is immediately under the left-hand edge of the previous text box. 
This is particularly important for users of screen magnifiers, who have to laboriously search in other places if they don't find the button where it ought to be. 
 
Tim P Buttons must describe the action they perform
Make sure the button text clearly describes the action that the button performs (not the action performed on the page the button takes you to). So for example, on the screen before a payment screen use 'Proceed to payment', not 'Pay now'.
 
Caroline J If the action of the button changes, then change the text of the button to match the action
If the action of the button is simply to continue to the next page, it's fine to use 'continue' repeatedly. 
if the action changes, then change the text to match it. For example: 'Find address', 'Proceed to payment', 'Review your answers'
 
We slightly prefer 'Continue' to 'Next' 
'Continue'  is a verb implying progress, so is slightly more suitable in this  context. Continue' is a little easier to  combine   with other words than 'Next' (for example, some services have  buttons   labelled 'Save and continue'.) 'Save and next' arguably sounds a   little  weird.
 
We slightly prefer 'Next' for navigation links like pagination, where no user  data is being changed. 'Next' works better in places where users may wish to step backwards and forwards through pages: it combines nicely with 'Previous'. 
 
The GOV.UK Verify team has tested journeys that use 'Next' for the parts of the journey on GOV.UK and 'Continue' for parts on the identity provider. Partipants don't notice any difference and don't comment on the change. 
 
Tim P Avoid multiple continue buttons
Buttons are for performing actions, not making choices. Try to establish the convention of a single, strong call to action on each page. If you need your users to make a choice, use something else like radio buttons. Alternatively, if one choice is much less important then try styling it as a link instead.
 
Tim P
  • I know there are exceptions to the above - would be interesting to try to figure out when it's appropriate to use multiple buttons
Sjors T
  • We have a case where, when a user arrives on first page, we show both the ''apply now and 'return to saved form' next to each other. (styling is a bit off ;)
Joe L
  • whats the context of this? why would they want to do one or the other?
Sjors T
  • It only shows up for an application where a user must create an account to use the application, and we have two user groups those that don't have an account and want to create one and those that have an account and want to return to them.
Joe L
  • did you investigate having that as a decision, with a continue button? dunno if it'd be better or worse - Are you starting a new application, or returning to a saved form? Purely from research on Verify, I'd be worried that people saw the 'Apply now' as a strong call to action, regardless of their situation (we had [verify my identity] [I've already been verified])
Sjors T
  • By using a question with two radio buttons, you mean? (No haven't investigate it yet, but will keep an eye out for the possible confusion)
 
 
 
Caroline J
  • I don't understand 'return to your saved form'. What do you mean?
Sjors T
  • It's similar to LPA's start page: https://www.lastingpowerofattorney.service.gov.uk/home 'apply now' means create an account and start filling in the form 'Return to your saved form' means sign in to the 'account'  you created earlier and complete or continue to work on your application.
  • We tried an approach closer to LPA's 'sign in' but found that too many returning users missed the 'sign in' link and started with a new application.
Tim P
  • Definitely a pattern here - apply / renew is very similar. I wonder if you make the first question after the 'Apply' button "Are you renewing your X or are you applying for the first time?". Particularly for low-frequency transactions where you might only use it once a year people might need reminding.
  • Another option: if someone goes down the 'apply' path but enters an email address that's already been used, get them to sign in? Might be security issues here...
Ed H
  • We currently use one page with a 'double' button design on Passports. It's certainly not something you want on every page, but it's worked for us for where we have two equally weighted forward paths. We also tried doing it as a question with a radio, but found the choice was clearer in this case with the dual buttons. We  may revisit later.
  • Re 'Apply now' and 'Returning users' - I've always thought this part of our start page journey was the most broken. Having a returning users link only after they click 'apply now' feels like hiding it. It feels like some users would be very hesitant to click on apply now, knowing that's not what they want.
 
Tim P
  • Discussion
 
Button style
 
The GOV.UK button style is relatively flat, which means its affordance is lower than it could be. It's not a problem if you follow this advice:
 
  • avoid similar styles elsewhere on the page that could be confused for buttons
  • try to have as few buttons on a form as possible - just one is best
  • avoid excessively long button text
  • make sure the button text describes an action
Caroline J
  • Please can we test buttons that look like buttons? Instead of telling people 'our style doesn't look like a button so do all these other things?'.
Joe L
  • Personally, I'm not aware of any research on Register to vote, HMRC or Verify that people weren't clear on the buttons - not to say it hasn't been a problem elsewhere. However, I think the 4 points stand anyway - if it's not a button it shouldn't look like one, few buttons is simpler, same for long text, and actions are good
Tim P
  • Has anyone implemented the faded 'disabled' style for buttons? Any accessibility issues with this?
Joe L
  • I'm really not a fan of faded buttons - much better to have buttons always 'work' and if there's a problem, be explicit what the problem is. A faded button shows there is a problem but doesn't say what.
Ed H
  • Feels like it's usually better to avoid needing them in the first place. However, are there situations where they might make sense? Where you want make the scope of the UI clear, but indicate that something is blocked? I'm thinking more for complex interfaces (admin / caseworker?) rather than service ui. The best solution is to design out the need for them.
Gemma L
  • We can remove these if we don't want to recommend a disabled/faded button style.
Joe L
  • It would be interesting to see a situation where it'd be helpful. The issue is, it may (?) convey 'you have to do something', but it doesnt convey what. A validation message does
Ed H
  • As I say, I suspect there are *probably* some times where it might work, but not in the sorts of interfaces we normally use or advocate. I'm thinking more admin interfaces.
Stephen G
  • Agree with Ed Horsford. If you've got a complex piece of software that people are going to use repeatedly (rather than as a one off) seems like greyed out buttons could make sense. Thinking of something like Photoshop, for example.
Joe L
  • yes thats true, in Sketch, the 'send back a layer' is greyed out when theres nothing selected. You could have it show a message on click, but its quicker for an expert user to see that the button is greyed out and assume its because nothing is selected
Ed H
  • Or zoom in and out in maps. It's odder to have the zoom in button disappear than having a consistent interface. Worth keeping in mind that these use cases are nearly all very rare on the services we make.
Adrie L
  • Should we use 'Back to Business overview' or 'Back to business overview'? Or simply 'Back'?
Ed H
  • I think it depends on the context. We normally use 'Back' would to take the user to the 'page they were previously on' - ie not a specific page. Though there may be contexts where it could be closer to how 'back' is used on iOS - ie up one level.
Adrie L
  • So if it goes to a specific page, should the name of that page have a capital?
Ed H
Joe L
  • So far we've just used "back", we dont have any research to say people need more
Ed H
  • Joe Lanman if my understanding is correct though, this isn't back. Back *isn't* where this takes you. As with everything though I'd test this with users and see what their expectations are.
Adrie L
  • In this case the user has started on 'Business overview', gone through a process to amend business details and at the end of this clicks to return to 'Business overview'. So in their mind they are very much returning to 'Business overview' rather than continuing to it. 
Joe L
  • Ah I see "back" should normally refer to the previous screen. In this case, wouldn't just "business overview" suffice?
Ed H
  • Possibly a green button "Return to business overview" ?
Adrie L
  • If this green button is on a screen that confirms the amended business details, 'Continue' would be my preference. If it shows amendments that have not yet been confirmed, it would be 'Submit'. 'Back to business overview' doesn't seem a CTA; if the user would logically expect to return to business overview after confirming amendments, 'Continue' makes more sense. However, this is just one example and the query I received was more in general about use of capitals when referring to screen titles.
Joe L
  • hm, good question on capitals, I'm not sure to be honest - We normally use sentence case throughout. So "Continue to business overview" or just "Business overview" - but this might be a question for a content person like Stephen Gill
Stephen G
  • I think it's sentence case. You either understand what we mean by 'Back to business overview' label or you don't - I don't think capping up 'Business' helps. If people don't understand what you mean, the answer is probably to change the label.
Tim P
  • Hi Adrie. Elsewhere in the prototype I've used a green 'Save and return' button for the final action in a series of screens that returns you to the 'index' page. Not sure if it's appropriate here - but if the link is saving data then it should probably be styled as a button.
Michael L
  • Hi I've got a question about action buttons on a form for example: Adding multiple attachments like the screenshot below. What is the guidance when we have competing actions on a form?
 
Tim P See the GOV.UK Service Manual for more advice on how to style buttons.
 
Caroline J Position the continue button  under the last question on the form, aligned with the left-hand edge of the text box. 
 
 
 
 
Caroline J The most natural reading pattern on forms is to look for the next box to type into / next question to ask, and the first place that people look is immediately under the left-hand edge of the previous text box. 
This is particularly important for users of screen magnifiers, who have to laboriously search in other places if they don't find the button where it ought to be. 
 
Tim P Buttons must describe the action they perform
Make sure the button text clearly describes the action that the button performs (not the action performed on the page the button takes you to). So for example, on the screen before a payment screen use 'Proceed to payment', not 'Pay now'.
 
Caroline J If the action of the button changes, then change the text of the button to match the action
...

Contact Support



Please check out our How-to Guide and FAQ first to see if your question is already answered! :)

If you have a feature request, please add it to this pad. Thanks!


Log in