Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Burn your selects

Burn your selects

Talk for jQuery UK. At some point I'll also write this up, but for now this is just the deck.

Alice Bartlett

March 06, 2015
Tweet

More Decks by Alice Bartlett

Other Decks in Technology

Transcript

  1. 4 In this talk… ! • Who are GDS •

    Some user research about selects 4 4 GDS
  2. 5 In this talk… ! • Who are GDS •

    Some user research about selects • Alternatives to select boxes 5 5 GDS
  3. 6 In this talk… ! • Who are GDS •

    Some user research about selects • Alternatives to select boxes • GOV.UK option select widget 6 6 GDS
  4. 13

  5. 14

  6. 15

  7. GDS

  8. 12 million visitors every week Home to over 330 departments

    and organisations Saving more £62 million a year GDS
  9. GDS

  10. Carer’s Allowance 150,000 claims in the last year 90% user

    satisfaction GDS LIVE Source: gov.uk/performance
  11. 30 13 GDS Findings from user research highlight gaps in

    our understanding about the way people interact with our services
  12. 31 14 13 GDS Findings from user research highlight gaps

    in our understanding about the way people use computers
  13. 32 GDS The user needs we have to address on

    GOV.UK are those of an entire country interacting with its government
  14. 35 People who only access the web on a public

    computer at the library GDS
  15. 42 42 GDS People sat on their phones half paying

    attention to GOV.UK while also watching a conference talk ! ಠ_ಠ
  16. 44 44 44 GDS More often than not, it’s not

    a task that is inherently enjoyable
  17. 45 45 45 45 GDS We do user research to

    make sure these tasks are as easy to accomplish as possible
  18. 46 46 46 46 46 GDS So users can come

    to our site, do their thing, and then get back to their lives
  19. 54 We see users: ! Unable to close the select

    Typing into the select ! 54 GDS
  20. 55 We see users: ! Unable to close the select

    Typing into the select Confusing focused items with selected items 55 GDS
  21. 56 We see users: ! Unable to close the select

    Typing into the select Confusing focused items with selected items Trying to pinch zoom select options on tablets 56 56 GDS
  22. 57 GDS All of these users were able to enter

    their date of birth with a text input successfully
  23. 60 27 GDS Validation:  Does ruby’s Date.parse() understand this

    to be a valid date of a person who could feasibly be alive right now?
  24. OK, don’t use select boxes for date of birth !

    ! Can I use them for other stuff? 62 GDS
  25. “Drop-down menus: Use sparingly” ! Jakob Nielsen. 12 November 2000

    64 GDS http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
  26. “Drop downs should be the UI of last resort” 

    ! @lukew 68 GDS https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
  27. 74 GDS Cases where there are too many options to

    list consecutively ! ! Cases where users have no idea what the correct answer for them is, but they would know it if they saw it.
  28. 75 75 GDS These are the times when you might

    want to build a custom widget 75 GDS
  29. 80 Steve Faulkner’s checklist for custom components and web components

    is a good baseline for accessibility standards GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  30. 81 1. Keyboard focusable ! ! ! ! ! GDS

    http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  31. 82 82 1. Keyboard focusable 2. Keyboard operable ! !

    ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  32. 83 83 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation ! ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  33. 84 84 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation 4. Clear indication of focus ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  34. 85 85 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation 4. Clear indication of focus 5. Label ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  35. 86 86 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation 4. Clear indication of focus 5. Label 6. Role GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  36. 87 87 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation 4. Clear indication of focus 5. Label 6. Role 7. States and properties GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  37. 89 89 GDS Some more requirements for GOV.UK: ! 1.

    Functional without JavaScript 
  38. 90 90 GDS Some more requirements for GOV.UK: ! 1.

    Functional without JavaScript  2. Functional in IE7+
  39. “Progressive enhancement is about resilience as much as it is

    about inclusiveness”  - @bradwright 91 GDS
  40. 93 GDS In January ~0.6% of sessions were IE7 !

    (That’s ~353,400 sessions)
  41. 94 People still using Internet Explorer 7 are not people

    who simply haven’t heard of Firefox yet GDS
  42. 100 GDS Screen readers announce it as a list of

    checkboxes. The open / closing stuff is a presentational layer
  43. 102 GDS It has JavaScript event listeners that make it

    keyboard operable so users should be able to infer how it works
  44. The widget exposes itself to assistive tech as a list

    of checkboxes. ! This is fine but it could be better. Users of assistive tech would benefit from being able to hide all the options they don’t care about too. 107 GDS
  45. 108 Make the label at the top a button. This

    will give it all the accessibility hooks for screen readers. 108 GDS <button>! Case type! </button>
  46. 109 GDS Give the button ARIA-expanded=false when the box is

    closed and ARIA-expanded=true when the checkboxes are displayed. ARIA-expanded=false! ARIA-expanded=true!
  47. 110 110 GDS Use aria-controls to hook button to container

    with checkboxes in. aria-controls=! case-type-container! ! ! id=“case-type-container”! !
  48. 111 111 GDS In summary: ! Don’t use selects for

    date of birth Making a widgets is harder than you think Do the hard work to make it simple
  49. We believe sharing what we do will make it better,

    so you can see lots of our thinking and working online... GDS
  50. Read more:! ! GDS Blog – http://gds.blog.gov.uk Design Principles –

    www.gov.uk/design-principles Digital Strategy – www.gov.uk/digitalstrategy Service Manual – www.gov.uk/service-manual Our code – www.github.com/alphagov GDS
  51. 114 Links:! ! Luke Wroblewski – https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort Jakob Nielsen –

    http://www.nngroup.com/articles/drop-down-menus-use-sparingly/ Competitions and Markets Authority – www.gov.uk/cma-cases Github – www.github.com/alphagov/finder-frontend GDS