Tweet
Tweet

Slide 1

Slide 1 text

@tempertemper Accessible user interface patterns

Slide 2

Slide 2 text

I’m Martin Interaction designer at Orange Bus

Slide 3

Slide 3 text

@tempertemper • What is accessibility • Who should care and why • Some examples

Slide 4

Slide 4 text

@tempertemper A11y is for everyone

Slide 5

Slide 5 text

@tempertemper ♿

Slide 6

Slide 6 text

@tempertemper ♿

Slide 7

Slide 7 text

@tempertemper ♿

Slide 8

Slide 8 text

@tempertemper The social model of disability

Slide 9

Slide 9 text

@tempertemper Disability is a social state

Slide 10

Slide 10 text

@tempertemper Impairment does not equal disability

Slide 11

Slide 11 text

@tempertemper Individuals with an impairment are disabled by society, its social structures and it’s failure to build an inclusive environment

Slide 12

Slide 12 text

@tempertemper Disabled users are just… users!

Slide 13

Slide 13 text

@tempertemper Who might we disable?

Slide 14

Slide 14 text

@tempertemper Permanent

Slide 15

Slide 15 text

@tempertemper Temporary

Slide 16

Slide 16 text

@tempertemper Situational

Slide 17

Slide 17 text

@tempertemper https://www.microsoft.com/design/inclusive/

Slide 18

Slide 18 text

@tempertemper https://www.microsoft.com/design/inclusive/

Slide 19

Slide 19 text

@tempertemper https://www.microsoft.com/design/inclusive/

Slide 20

Slide 20 text

@tempertemper https://www.microsoft.com/design/inclusive/

Slide 21

Slide 21 text

@tempertemper Who cares?

Slide 22

Slide 22 text

@tempertemper Brand designers

Slide 23

Slide 23 text

@tempertemper Graphic designers

Slide 24

Slide 24 text

@tempertemper UX designers

Slide 25

Slide 25 text

@tempertemper Front-end developers

Slide 26

Slide 26 text

@tempertemper Back-end developers

Slide 27

Slide 27 text

@tempertemper Server wizards '

Slide 28

Slide 28 text

@tempertemper Marketers

Slide 29

Slide 29 text

@tempertemper Sales people

Slide 30

Slide 30 text

@tempertemper Stakeholders

Slide 31

Slide 31 text

@tempertemper Why should we care?

Slide 32

Slide 32 text

@tempertemper Being a good human being

Slide 33

Slide 33 text

@tempertemper Legal obligation

Slide 34

Slide 34 text

@tempertemper Money

Slide 35

Slide 35 text

@tempertemper People with impairments

Slide 36

Slide 36 text

@tempertemper More than 10m people were limited in daily activities in England and Wales in 2011 https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/disability/articles/disabilityinenglandandwales/2013-01-30

Slide 37

Slide 37 text

@tempertemper Older people

Slide 38

Slide 38 text

@tempertemper At age 65, the average person will have a disability https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/healthandlifeexpectancies/bulletins/ disabilityfreelifeexpectancybyuppertierlocalauthorityengland/2014-07-24

Slide 39

Slide 39 text

@tempertemper Nearly 12m UK residents aged 65 years and over https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/bulletins/ annualmidyearpopulationestimates/mid2017#nearly-12-million-uk-residents-aged-65-years-and-over

Slide 40

Slide 40 text

@tempertemper Parents

Slide 41

Slide 41 text

@tempertemper 679,106 live births in England and Wales in 2017 https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/livebirths/bulletins/ birthsummarytablesenglandandwales/2017

Slide 42

Slide 42 text

@tempertemper 679,106 × 5 = Just over 3m

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

@tempertemper Drivers

Slide 45

Slide 45 text

@tempertemper 31.7m cars on the road in 2017 https://www.statista.com/statistics/299972/average-age-of-cars-on-the-road-in-the-united-kingdom/

Slide 46

Slide 46 text

@tempertemper Scottish people

Slide 47

Slide 47 text

@tempertemper

Slide 48

Slide 48 text

@tempertemper Scots are also more likely to leave their homeland and settle elsewhere than any other English-speaking peoples https://www.scotsman.com/news/the-scottish-diaspora-how-scots-spread-across-the-globe-1-4011012

Slide 49

Slide 49 text

@tempertemper Other stuff is a bit trickier

Slide 50

Slide 50 text

@tempertemper People who read their phone at night

Slide 51

Slide 51 text

@tempertemper People on dodgy phone connections

Slide 52

Slide 52 text

@tempertemper Commuters

Slide 53

Slide 53 text

@tempertemper Anti-patterns

Slide 54

Slide 54 text

@tempertemper https://en.wikipedia.org/wiki/Anti-pattern An anti-pattern is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

@tempertemper Expensive

Slide 57

Slide 57 text

@tempertemper Expensive (see above )

Slide 58

Slide 58 text

@tempertemper Serves some functional use

Slide 59

Slide 59 text

@tempertemper Lack of experience

Slide 60

Slide 60 text

@tempertemper Looks good

Slide 61

Slide 61 text

@tempertemper Looks good

Slide 62

Slide 62 text

@tempertemper Everyone’s doing it

Slide 63

Slide 63 text

@tempertemper Everyone’s doing it

Slide 64

Slide 64 text

@tempertemper Examples

Slide 65

Slide 65 text

@tempertemper Forms

Slide 66

Slide 66 text

@tempertemper Placeholders for labels

Slide 67

Slide 67 text

@tempertemper

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

@tempertemper

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

@tempertemper Labels that look like placeholders

Slide 74

Slide 74 text

@tempertemper

Slide 75

Slide 75 text

@tempertemper Hint text as placeholder

Slide 76

Slide 76 text

@tempertemper

Slide 77

Slide 77 text

@tempertemper

Slide 78

Slide 78 text

@tempertemper

Slide 79

Slide 79 text

@tempertemper Source order

Slide 80

Slide 80 text

@tempertemper Hint text after input

Slide 81

Slide 81 text

@tempertemper

Slide 82

Slide 82 text

@tempertemper Parts of the form after the submit button

Slide 83

Slide 83 text

@tempertemper

Slide 84

Slide 84 text

@tempertemper

Slide 85

Slide 85 text

@tempertemper

Slide 86

Slide 86 text

@tempertemper

Slide 87

Slide 87 text

@tempertemper

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

@tempertemper

Slide 91

Slide 91 text

@tempertemper

Slide 92

Slide 92 text

@tempertemper

Slide 93

Slide 93 text

@tempertemper

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

@tempertemper More form best practices

Slide 98

Slide 98 text

@tempertemper Make sure labels have for="" attributes

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

@tempertemper Use proper type="" attributes

Slide 102

Slide 102 text

@tempertemper Try to avoid

Slide 103

Slide 103 text

@tempertemper

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

@tempertemper Use and elements properly

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

@tempertemper

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

@tempertemper Place labels above inputs to aid readability

Slide 111

Slide 111 text

@tempertemper

Slide 112

Slide 112 text

@tempertemper

Slide 113

Slide 113 text

@tempertemper

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

@tempertemper Split large form up onto multiple pages

Slide 116

Slide 116 text

@tempertemper Indicate optional fields rather than required fields

Slide 117

Slide 117 text

@tempertemper Only ask for information you need

Slide 118

Slide 118 text

@tempertemper Auto tabbing

Slide 119

Slide 119 text

@tempertemper https://userresearch.blog.gov.uk/2017/04/18/why-we-care-more-about-effectiveness-than-efficiency-or-satisfaction/ “if auto-tabbing stops just a few people from using a service successfully, their needs take priority over the many people who might prefer but don’t need the feature”

Slide 120

Slide 120 text

@tempertemper Hamburger menus

Slide 121

Slide 121 text

@tempertemper http://www.kukastudios.com/blog/uncategorized/hamburger-icon

Slide 122

Slide 122 text

@tempertemper What even is it?

Slide 123

Slide 123 text

@tempertemper Difficult to reach

Slide 124

Slide 124 text

@tempertemper https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

Slide 125

Slide 125 text

@tempertemper Saves space

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

@tempertemper Hamburgers on bigger-than- mobile screens

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

@tempertemper What can we do instead?

Slide 130

Slide 130 text

@tempertemper Pair/replace it with ‘Menu’

Slide 131

Slide 131 text

@tempertemper Put the nav on the page

Slide 132

Slide 132 text

@tempertemper Images in headers

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

@tempertemper Takes time to load

Slide 136

Slide 136 text

@tempertemper Awful, inconsistent contrast for text and buttons

Slide 137

Slide 137 text

@tempertemper Is there a fall-back background colour?

Slide 138

Slide 138 text

@tempertemper How can we fix it?

Slide 139

Slide 139 text

@tempertemper Consider a design using SVG instead

Slide 140

Slide 140 text

@tempertemper Redesign with CSS instead – gradient?

Slide 141

Slide 141 text

@tempertemper Use nothing

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

@tempertemper General

Slide 144

Slide 144 text

@tempertemper Typography ✍

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

@tempertemper Nice, big body font

Slide 147

Slide 147 text

@tempertemper Avoid all-caps

Slide 148

Slide 148 text

@tempertemper Font stack for system-font fall-backs

Slide 149

Slide 149 text

@tempertemper Choose your font(s) carefully

Slide 150

Slide 150 text

@tempertemper FS Me by Fontsmith

Slide 151

Slide 151 text

@tempertemper –Mencap For people with learning disabilities, reading is made much harder by certain fonts

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

@tempertemper Web fonts

Slide 154

Slide 154 text

@tempertemper Loading times ⏱

Slide 155

Slide 155 text

@tempertemper http requests

Slide 156

Slide 156 text

@tempertemper Download time

Slide 157

Slide 157 text

@tempertemper Use woff

Slide 158

Slide 158 text

@tempertemper Or, even better, use woff2

Slide 159

Slide 159 text

@tempertemper Consider number of weights needed

Slide 160

Slide 160 text

@tempertemper Avoid animation wherever possible

Slide 161

Slide 161 text

@tempertemper Makes sure colour contrast is good

Slide 162

Slide 162 text

@tempertemper Avoid using colour to communicate meaning

Slide 163

Slide 163 text

@tempertemper Putting things right ⭐

Slide 164

Slide 164 text

@tempertemper Semantic HTML

Slide 165

Slide 165 text

@tempertemper Thoughtful HTML

Slide 166

Slide 166 text

@tempertemper Responsive web design

Slide 167

Slide 167 text

@tempertemper Subtitles/closed captions

Slide 168

Slide 168 text

@tempertemper Performant websites

Slide 169

Slide 169 text

@tempertemper Don’t override default browser behaviour

Slide 170

Slide 170 text

@tempertemper Use common UI conventions

Slide 171

Slide 171 text

@tempertemper Consider a11y from the start

Slide 172

Slide 172 text

@tempertemper A lot of your design decisions make themselves

Slide 173

Slide 173 text

@tempertemper Think of all those users

Slide 174

Slide 174 text

@tempertemper You don’t test your users’ patience

Slide 175

Slide 175 text

@tempertemper Thanks

Slide 176

Slide 176 text

@tempertemper