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.

Df057cdadda4cd7a2a2db52576de1bf2?s=128

Alice Bartlett

March 06, 2015
Tweet

Transcript

  1. 4.

    4 In this talk… ! • Who are GDS •

    Some user research about selects 4 4 GDS
  2. 5.

    5 In this talk… ! • Who are GDS •

    Some user research about selects • Alternatives to select boxes 5 5 GDS
  3. 6.

    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. 8.
  5. 13.

    13

  6. 14.

    14

  7. 15.

    15

  8. 16.

    GDS

  9. 19.

    12 million visitors every week Home to over 330 departments

    and organisations Saving more £62 million a year GDS
  10. 21.

    GDS

  11. 24.
  12. 25.

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

    satisfaction GDS LIVE Source: gov.uk/performance
  13. 30.

    30 13 GDS Findings from user research highlight gaps in

    our understanding about the way people interact with our services
  14. 31.

    31 14 13 GDS Findings from user research highlight gaps

    in our understanding about the way people use computers
  15. 32.

    32 GDS The user needs we have to address on

    GOV.UK are those of an entire country interacting with its government
  16. 35.

    35 People who only access the web on a public

    computer at the library GDS
  17. 42.

    42 42 GDS People sat on their phones half paying

    attention to GOV.UK while also watching a conference talk ! ಠ_ಠ
  18. 43.
  19. 44.

    44 44 44 GDS More often than not, it’s not

    a task that is inherently enjoyable
  20. 45.

    45 45 45 45 GDS We do user research to

    make sure these tasks are as easy to accomplish as possible
  21. 46.

    46 46 46 46 46 GDS So users can come

    to our site, do their thing, and then get back to their lives
  22. 54.

    54 We see users: ! Unable to close the select

    Typing into the select ! 54 GDS
  23. 55.

    55 We see users: ! Unable to close the select

    Typing into the select Confusing focused items with selected items 55 GDS
  24. 56.

    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
  25. 57.

    57 GDS All of these users were able to enter

    their date of birth with a text input successfully
  26. 60.

    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?
  27. 62.

    OK, don’t use select boxes for date of birth !

    ! Can I use them for other stuff? 62 GDS
  28. 64.

    “Drop-down menus: Use sparingly” ! Jakob Nielsen. 12 November 2000

    64 GDS http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
  29. 68.

    “Drop downs should be the UI of last resort” 

    ! @lukew 68 GDS https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
  30. 73.
  31. 74.

    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.
  32. 75.

    75 75 GDS These are the times when you might

    want to build a custom widget 75 GDS
  33. 77.
  34. 80.

    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/
  35. 81.

    81 1. Keyboard focusable ! ! ! ! ! GDS

    http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  36. 82.

    82 82 1. Keyboard focusable 2. Keyboard operable ! !

    ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  37. 83.

    83 83 1. Keyboard focusable 2. Keyboard operable 3. Expected

    operation ! ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  38. 84.

    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/
  39. 85.

    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/
  40. 86.

    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/
  41. 87.

    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/
  42. 89.

    89 89 GDS Some more requirements for GOV.UK: ! 1.

    Functional without JavaScript 
  43. 90.

    90 90 GDS Some more requirements for GOV.UK: ! 1.

    Functional without JavaScript  2. Functional in IE7+
  44. 91.

    “Progressive enhancement is about resilience as much as it is

    about inclusiveness”  - @bradwright 91 GDS
  45. 93.

    93 GDS In January ~0.6% of sessions were IE7 !

    (That’s ~353,400 sessions)
  46. 94.

    94 People still using Internet Explorer 7 are not people

    who simply haven’t heard of Firefox yet GDS
  47. 97.
  48. 100.

    100 GDS Screen readers announce it as a list of

    checkboxes. The open / closing stuff is a presentational layer
  49. 102.

    102 GDS It has JavaScript event listeners that make it

    keyboard operable so users should be able to infer how it works
  50. 107.

    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
  51. 108.

    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>
  52. 109.

    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!
  53. 110.

    110 110 GDS Use aria-controls to hook button to container

    with checkboxes in. aria-controls=! case-type-container! ! ! id=“case-type-container”! !
  54. 111.

    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
  55. 112.

    We believe sharing what we do will make it better,

    so you can see lots of our thinking and working online... GDS
  56. 113.

    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
  57. 114.

    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