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
   

   View Slide

2. In this talk…
   2
   GDS
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

7. I’m from the
   Government Digital
   Service
   GDS
   

   View Slide

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

   View Slide

9. Our job is to transform the government...
   GDS
   

   View Slide

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

    View Slide

11. We started by
    building GOV.UK
    GDS
    

    View Slide

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

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. GDS
    

    View Slide

17. 12 million visitors every week
    !
    GDS
    

    View Slide

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

    View Slide

19. 12 million visitors every week
    Home to over 330 departments and organisations
    Saving more £62 million a year
    GDS
    

    View Slide

20. We’re also transforming government services
    GDS
    

    View Slide

21. GDS
    

    View Slide

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

    View Slide

23. Services like...
    GDS
    

    View Slide

24. View Slide

25. Carer’s Allowance
    150,000 claims in the last year
    90% user satisfaction
    GDS
    LIVE
    Source: gov.uk/performance
    

    View Slide

26. How are we doing all this?
    GDS
    

    View Slide

27. Open
    Agile
    Multidisciplinary teams
    GDS
    

    View Slide

28. Relentlessly focused
    on user needs
    GDS
    

    View Slide

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

    View Slide

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

    View Slide

31. 31
    14
    13
    GDS
    Findings from user research highlight
    gaps in our understanding about the way
    people use computers
    

    View Slide

32. 32
    GDS
    The user needs we have to address on
    GOV.UK are those of an entire country
    interacting with its government
    

    View Slide

33. 33
    33
    GDS
    That’s all kinds of people with all kinds of
    needs…
    

    View Slide

34. 34
    34
    GDS
    People who only use the web at work
    

    View Slide

35. 35
    People who only access the web on a
    public computer at the library
    GDS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. 40
    40
    GDS
    People whose reading comprehension
    age is that of a nine year old
    

    View Slide

41. 41
    41
    GDS
    People who use screen readers
    

    View Slide

42. 42
    42
    GDS
    People sat on their phones half paying
    attention to GOV.UK while also watching a
    conference talk
    !
    ಠ_ಠ
    

    View Slide

43. 43
    43
    GDS
    All of these users are on GOV.UK
    because they need to be
    

    View Slide

44. 44
    44
    44
    GDS
    More often than not, it’s not a task that is
    inherently enjoyable
    

    View Slide

45. 45
    45
    45
    45
    GDS
    We do user research to make sure these
    tasks are as easy to accomplish as
    possible
    

    View Slide

46. 46
    46
    46
    46
    46
    GDS
    So users can come to our site, do their
    thing, and then get back to their lives
    

    View Slide

47. 47
    GDS
    Sometimes user research shows us we’re
    letting our users down...
    

    View Slide

48. Today I want to talk about how people use
    48
    16
    GDS
    

    View Slide

49. User research participant 1
    49
    GDS
    

    View Slide

50. I don’t have permission to share
    these videos on the web, sorry!
    

    View Slide

51. User research participant 2
    51
    GDS
    

    View Slide

52. I don’t have permission to share
    these videos on the web, sorry!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

57. 57
    GDS
    All of these users were able to enter their
    date of birth with a text input successfully
    

    View Slide

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

    View Slide

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

    View Slide

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?
    

    View Slide

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

    View Slide

62. OK, don’t use select boxes for date of birth
    !
    !
    Can I use them for other stuff?
    62
    GDS
    

    View Slide

63. 63
    GDS
    We aren’t the only people that think
    selects are crap. This isn’t new.
    

    View Slide

64. “Drop-down menus: Use sparingly”
    !
    Jakob Nielsen.
    12 November 2000
    64
    GDS
    http://www.nngroup.com/articles/drop-down-menus-use-sparingly/
    

    View Slide

65. 65
    GDS
    Fifteen years ago, folks.
    

    View Slide

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

    View Slide

67. And yet, here we are
    67
    GDS
    

    View Slide

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
    

    View Slide

69. 69
    GDS
    What are the alternatives to drop-downs?
    

    View Slide

70. 70
    70
    Will a text input suffice?
    GDS
    

    View Slide

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

    View Slide

72. 72
    GDS
    There are times were neither of these UIs
    will work for you
    

    View Slide

73. 73
    GDS
    Cases where there are too many options
    to list consecutively
    !
    !
    !
    !
    

    View Slide

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.
    

    View Slide

75. 75
    75
    GDS
    These are the
    times when you
    might want to
    build a custom
    widget
    75
    GDS
    

    View Slide

76. 76
    76
    76
    GDS
    76
    GDS
    (a custom widget like this…)
    

    View Slide

77. View Slide

78. What good looks like in widget land
    GDS
    

    View Slide

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

    View Slide

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/
    

    View Slide

81. 81
    1. Keyboard focusable
    !
    !
    !
    !
    !
    GDS
    http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/
    

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

88. 88
    GDS
    Some more requirements for GOV.UK:
    !
    !
    

    View Slide

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

    View Slide

90. 90
    90
    GDS
    Some more requirements for GOV.UK:
    !
    1. Functional without JavaScript
    2. Functional in IE7+
    

    View Slide

91. “Progressive enhancement is about
    resilience as much as it is about
    inclusiveness”
    - @bradwright
    91
    GDS
    

    View Slide

92. 92
    Sometimes people break things!
    GDS
    

    View Slide

93. 93
    GDS
    In January ~0.6% of sessions were IE7
    !
    (That’s ~353,400 sessions)
    

    View Slide

94. 94
    People still using Internet Explorer 7 are
    not people who simply haven’t heard of
    Firefox yet
    GDS
    

    View Slide

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

    View Slide

96. 96
    GDS
    Building custom widgets is a lot more
    work than you think it will be
    

    View Slide

97. View Slide

98. 98
    GDS
    GDS
    

    View Slide

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

    View Slide

100. 100
     GDS
     Screen readers announce it as a list of
     checkboxes. The open / closing stuff is a
     presentational layer
     

     View Slide

101. 101
     It has
     tabindex="0"
     to make it keyboard
     focusable
     GDS
     keyboard gif?
     

     View Slide

102. 102
     GDS
     It has JavaScript event listeners that make
     it keyboard operable so users should be
     able to infer how it works
     

     View Slide

103. It looks like this with
     no JavaScript
     103
     GDS
     

     View Slide

104. It looks like this in
     IE6
     104
     36
     GDS
     

     View Slide

105. 105
     GDS
     It looks like this on
     mobile (i.e. it
     doesn’t scroll)
     

     View Slide

106. Further work…
     106
     GDS
     

     View Slide

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
     

     View Slide

108. 108
     Make the label at the top a button. This will give it all the
     accessibility hooks for screen readers.
     108
     GDS
     !
     Case type!
     
     

     View Slide

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!
     

     View Slide

110. 110
     110
     GDS
     Use aria-controls to hook button to container with
     checkboxes in.
     aria-controls=!
     case-type-container!
     !
     !
     id=“case-type-container”!
     !
     

     View Slide

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
     

     View Slide

112. We believe sharing what we do will make
     it better, so you can see lots of our
     thinking and working online...
     GDS
     

     View Slide

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
     

     View Slide

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
     

     View Slide

115. Thanks ◕ ◡ ◕
     !
     Alice Bartlett

     @alicebartlett
     

     View Slide