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

    View Slide

  14. 14

    View Slide

  15. 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. 77
    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. 97
    97
    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