Burn your selects

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

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
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
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