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. Alice Bartlett
 Front-end developer
 Government Digital Service
 @alicebartlett

  2. In this talk… 2 GDS

  3. 3 In this talk… ! • Who are GDS 3

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

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

    Some user research about selects • Alternatives to select boxes 5 5 GDS
  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
  7. I’m from the Government Digital Service GDS

  8. GDS is a team at the heart of government building

    digital public services GDS
  9. Our job is to transform the government... GDS

  10. Making services so good that people prefer to use them

    GDS
  11. We started by building GOV.UK GDS

  12. The best place to find government services and information GDS

  13. 13

  14. 14

  15. 15

  16. GDS

  17. 12 million visitors every week ! GDS

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

    and organisations GDS
  19. 12 million visitors every week Home to over 330 departments

    and organisations Saving more £62 million a year GDS
  20. We’re also transforming government services GDS

  21. GDS

  22. GDS 25 of government’s biggest services redesigned to meet the

    needs of users GDS
  23. Services like... GDS

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

    satisfaction GDS LIVE Source: gov.uk/performance
  26. How are we doing all this? GDS

  27. Open Agile Multidisciplinary teams GDS

  28. Relentlessly focused  on user needs GDS

  29. 29 GDS We do a lot of user research at

    GDS
  30. 30 13 GDS Findings from user research highlight gaps in

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

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

    GOV.UK are those of an entire country interacting with its government
  33. 33 33 GDS That’s all kinds of people with all

    kinds of needs…
  34. 34 34 GDS People who only use the web at

    work
  35. 35 People who only access the web on a public

    computer at the library GDS
  36. 36 GDS People who think “the web” = “Facebook”

  37. 37 People for whom English is a second language GDS

  38. 38 38 People for whom English is a second third

    language GDS
  39. 39 39 People for whom English is a second third

    nth language GDS
  40. 40 40 GDS People whose reading comprehension age is that

    of a nine year old
  41. 41 41 GDS People who use screen readers

  42. 42 42 GDS People sat on their phones half paying

    attention to GOV.UK while also watching a conference talk ! ಠ_ಠ
  43. 43 43 GDS All of these users are on GOV.UK

    because they need to be
  44. 44 44 44 GDS More often than not, it’s not

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

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

    to our site, do their thing, and then get back to their lives
  47. 47 GDS Sometimes user research shows us we’re letting our

    users down...
  48. Today I want to talk about how people use 48

    16 GDS
  49. User research participant 1 49 GDS

  50. I don’t have permission to share these videos on the

    web, sorry!
  51. User research participant 2 51 GDS

  52. I don’t have permission to share these videos on the

    web, sorry!
  53. 53 We see users: ! Unable to close the select

    ! ! 53 GDS
  54. 54 We see users: ! Unable to close the select

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

    Typing into the select Confusing focused items with selected items 55 GDS
  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
  57. 57 GDS All of these users were able to enter

    their date of birth with a text input successfully
  58. 58 Do the hard work to make it simple GDS

  59. 59 GDS Do the hard work to make it simple

  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?
  61. 61 GDS OK, don’t use select boxes for date of

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

    ! Can I use them for other stuff? 62 GDS
  63. 63 GDS We aren’t the only people that think selects

    are crap. This isn’t new.
  64. “Drop-down menus: Use sparingly” ! Jakob Nielsen. 12 November 2000

    64 GDS http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
  65. 65 GDS Fifteen years ago, folks.

  66. 66 The Spice Girls were still having number 1s when

    Nielsen wrote that
  67. And yet, here we are 67 GDS

  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
  69. 69 GDS What are the alternatives to drop-downs?

  70. 70 70 Will a text input suffice? GDS

  71. 71 For small numbers of discrete data, use checkboxes or

    radio buttons GDS
  72. 72 GDS There are times were neither of these UIs

    will work for you
  73. 73 GDS Cases where there are too many options to

    list consecutively ! ! ! !
  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.
  75. 75 75 GDS These are the times when you might

    want to build a custom widget 75 GDS
  76. 76 76 76 GDS 76 GDS (a custom widget like

    this…)
  77. 77 77

  78. What good looks like in widget land GDS

  79. 79 Firstly, you’re going to want to make it accessible

    GDS
  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/
  81. 81 1. Keyboard focusable ! ! ! ! ! GDS

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

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

    operation ! ! ! GDS http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
  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/
  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/
  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/
  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/
  88. 88 GDS Some more requirements for GOV.UK: ! !

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

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

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

    about inclusiveness”  - @bradwright 91 GDS
  92. 92 Sometimes people break things! GDS

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

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

    who simply haven’t heard of Firefox yet GDS
  95. 95 GDS Do the hard work to make it simple

  96. 96 GDS Building custom widgets is a lot more work

    than you think it will be
  97. 97 97 97

  98. 98 GDS GDS

  99. 99 GDS In terms of HTML, It’s just a list

    of checkboxes.
  100. 100 GDS Screen readers announce it as a list of

    checkboxes. The open / closing stuff is a presentational layer
  101. 101 It has  tabindex="0" to make it keyboard focusable

    GDS keyboard gif?
  102. 102 GDS It has JavaScript event listeners that make it

    keyboard operable so users should be able to infer how it works
  103. It looks like this with no JavaScript 103 GDS

  104. It looks like this in IE6 104 36 GDS

  105. 105 GDS It looks like this on mobile (i.e. it

    doesn’t scroll)
  106. Further work… 106 GDS

  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
  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>
  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!
  110. 110 110 GDS Use aria-controls to hook button to container

    with checkboxes in. aria-controls=! case-type-container! ! ! id=“case-type-container”! !
  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
  112. We believe sharing what we do will make it better,

    so you can see lots of our thinking and working online... GDS
  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
  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
  115. Thanks ◕ ◡ ◕ ! Alice Bartlett
 @alicebartlett