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

[Discuss:] GOV.UK Verify style radios and checkboxes #194

Closed
wants to merge 5 commits into from

Conversation

@gemmaleigh
Copy link
Contributor

commented Mar 14, 2016

Larger hit area radio buttons and checkboxes.

Screenshot before:

before - example radio buttons and checkboxes form elements gov uk elements

Screenshot after:

example radio buttons and checkboxes form elements gov uk elements

Pros:

  • a larger hit area for the control
  • the selected radio or checkbox is more obvious (background, border and bold text)
  • This fixes issue: #166 (jump in Safari when radio button is selected)

Cons:

  • This requires extra markup within each block label <span><span class="inner"></span></span>

gemmaleigh added some commits Mar 14, 2016

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Mar 14, 2016

I'm strongly in favour of bigger radio and checkboxes. They're much better.

I'm not sure we still need the selection state / boxes with these changes. Though they are good on mobile.

Other thoughts:

  • The checkboxes and radios are not vertically centred
  • We should avoid bolding up the selected text. This can cause jarring movement, particularly if it causes text to wrap to two lines.
@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Mar 14, 2016

NB - if we want to be hacky we could use -webkit-text-stroke-width: 0.5px; or similar which will give a bit of a bold appearance, but not change the width of the text.

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Mar 14, 2016

Any examples of hover styles? For reference, I coincidentally made this last week:
http://address-lookup-prototype.herokuapp.com/option-2/delivery-address (search for anything).

@tombye

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2016

The description doesn't seem to explain the pros of using this design for radio buttons/checkboxes (over just making the native control bigger).

I'd be interested to know the reasons for the change to the windows 8/10/mobile style.

@aduggin

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2016

We'll need to check these for accessibility - need to make sure they work in assistive technologies as expected.
Gemma - could you add test cases to the sandbox?
I've added example for the current style for testing:
https://govuk-accessibility-sandbox.herokuapp.com/patterns/checkboxes-group/
https://govuk-accessibility-sandbox.herokuapp.com/patterns/radio-buttons/

@edwardhorsford

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2016

I've seen some services with a fair amount of text within the radios, including bold for headings. Would probably be good if we avoid changing the weight on selection for this reason too.

@tombye

This comment has been minimized.

Copy link
Contributor

commented Mar 17, 2016

This may be possible without the extra markup (using some CSS3 features), if it we were ok with a certain level of coverage for the CSS (above version 8 for IE and possibly some other older clients).

I've done a test for what I mean, be interested in some reckons on it (needs proper testing):

https://github.com/tombye/custom-field-controls

@timpaul

This comment has been minimized.

Copy link
Contributor

commented Mar 17, 2016

Thrilled to see this discussion happening ;-)

I second Ed's comment about the grey backgrounds - research has suggested they don't really get people to click the labels, so they're really just reducing contrast. Mobile might be a different case.

Can we design an A/B test to see if what effect these changes have?

@joelanman

This comment has been minimized.

Copy link
Member

commented Mar 17, 2016

I'm in favour of big, clear controls for all browsers. Even when browsers do support making built-in controls bigger, theyre still often not as clear as they could be, or fit the GOV.UK style.

In research so far, I don't think the borders or grey boxes add much in terms of usability, and they detract in terms of contrast, and extra visual noise. So we don't have them on Verify, however, we haven't done loads of research on mobile.

@gemmaleigh

This comment has been minimized.

Copy link
Contributor Author

commented Mar 24, 2016

I'm closing this for now, as it's not in a mergable state and it was raised for discussion only.
I'm away until the 15th of April. I'll reopen once I'm back and we can look at a better solution then.

@gemmaleigh gemmaleigh closed this Mar 24, 2016

@gemmaleigh gemmaleigh deleted the govuk-verify-style-radios-and-checkboxes branch Apr 10, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.