Adapting to Reality

A presentation at Guest Lecture - Amsterdam University Of Applied Sciences in March 2023 in Amsterdam, Netherlands by Aaron Gustafson

Slide 1

Slide 1

Adapting to Reality Aaron Gustafson front-end.social/@Aaron noti.st/AaronGustafson

Slide 2

Slide 2

Web design & development is hard © Brad Frost

Slide 3

Slide 3

In the beginning… Created by Vectors Market from the Noun Project 640 × 480

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

In the beginning… Created by Vectors Market from the Noun Project 640 × 480

Slide 7

Slide 7

Ok, we can go a little larger Created by Vectors Market from the Noun Project 800 × 600

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Ok, we can go a little larger Created by Vectors Market from the Noun Project 800 × 600

Slide 12

Slide 12

Ok, a bit larger, but that’s it 1024 × 768 Created by Vectors Market from the Noun Project

Slide 13

Slide 13

Of course laptops… Created by Vectors Market from the Noun Project 800 × 600 Created by Vectors Market from the Noun Project 1024 × 600 Created by Vectors Mark Created by Vectors Marketfrom the Noun Project from the Noun Project 1280 × 800 1366 × 768

Slide 14

Slide 14

The web’s “happy place” 1024 × 768 Created by Vectors Market from the Noun Project

Slide 15

Slide 15

We were ignoring mobile… Created by creative outlet from the Noun Project 240 × 240 Created by Douglas Santos from the Noun Project 640 × 200

Slide 16

Slide 16

Until this happened Created by Vectors Market from the Noun Project 320 × 480 Created by Vectors Market from the Noun Project 3840 × 2160

Slide 17

Slide 17

Don’t even get me started on tablets © Brad Frost

Slide 18

Slide 18

Credit: OpenSignalMaps

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Until this happened Created by Vectors Market from the Noun Project 320 × 480 Created by Vectors Market from the Noun Project 3840 × 2160

Slide 22

Slide 22

Desktops today… Created by Vectors Market from the Noun Project 1920 × 1080 7680 × 4320 Created by Vectors Market from the Noun Project

Slide 23

Slide 23

Chasing screen sizes is clearly a fool’s errand

Slide 24

Slide 24

a e y 8 “ ! o g rs a One In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected ye a r af te r the iP h o ne 1062 — Jason Samuels IT Manager, National Council on Family Relations Source

Slide 25

Slide 25

“ In 2008, 27 screen resolutions showed up with more than 10 visits, in 2014 that number was 200 — Jason Samuels IT Manager, National Council on Family Relations Source

Slide 26

Slide 26

Chasing screen sizes is clearly a fool’s errand

Slide 27

Slide 27

Designing for screens is hard

Slide 28

Slide 28

And then there’s everything else

Slide 29

Slide 29

Your content can and will go anywhere that’s connected wearables smart tvs IoT assistants Created by Vectors Market Created by Vectors MarketCreated by Vectors MarketCreated by Vectors Market from the Noun Project from the Noun Project from the Noun Project from the Noun Project

Slide 30

Slide 30

Meaning users will need to interact in different ways mouse touch Created by Vectors Market Created by Vectors Market from the Noun Project from the Noun Project keyboard Created by Vectors Market from the Noun Project

Slide 31

Slide 31

Meaning users will need to interact in different ways Created by Christopher Holm-Hansen from the Noun Project eye tracking braille Created by Adriano Emerick from the Noun Project T9 Created by bezier master from the Noun Project print owo mouse b pen i touch remote Created by Vectors Market ri W Created by Vectors Market Created by Vectors Market oA from the Noun Project from the Noun Project Created by Vectors Market from the Noun Project from the Noun Project keyboard Created by Vectors Market from the Noun Project audio Created by Vectors Market from the Noun Project ty oject e S by un Pr d ate No Crem the fro gamepad Created by Vectors Market from the Noun Project

Slide 32

Slide 32

Over varied networks and in changing conditions wifi hardline Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project homes Created by Vectors Market from the Noun Project buildings Created by Vectors Market from the Noun Project cars Created by Vectors Market from the Noun Project buses mobile Created by Vectors Market from the Noun Project trains airplanes by Vectors Market Created by Vectors Market Created from the Noun Project from the Noun Project Created by Vectors Market

Slide 33

Slide 33

And, ultimately, our users all have different needs too

Slide 34

Slide 34

And, ultimately, our users all have different needs too

Slide 35

Slide 35

Anyone notice I haven’t even mentioned browsers? ;-)

Slide 36

Slide 36

So…‽

Slide 37

Slide 37

REALITY CHECK Nothing about our users’ experiences of the web has ever been as homogenous as we imagined.

Slide 38

Slide 38

Treat your ideal scenario as an edge case

Slide 39

Slide 39

Slide 40

Slide 40

The reality

Slide 41

Slide 41

The reality

Slide 42

Slide 42

ADAPTING TO REALITY Smartphone penetration Global 66%

Slide 43

Slide 43

ADAPTING TO REALITY Differences by country UK NL China India 83% 79% 68.4% 46.5%

Slide 44

Slide 44

ADAPTING TO REALITY U.S. Smartphone penetration < $30k $30-50k $50-75k

$75k 71% 78% 90% 95% n o i t a l u p o p e h t f o % 5 49.5 Smartphone Other

Slide 45

Slide 45

ADAPTING TO REALITY Penetration by density Urban Suburban Rural 83% 83% 71% Smartphone Other

Slide 46

Slide 46

ADAPTING TO REALITY 1 in 6 U.S. adults is a smartphone-only Internet user. Smartphone Other

Slide 47

Slide 47

ADAPTING TO REALITY Not all smartphones are equal Galaxy S21 Ultra 5G 6.8” (3200 × 1440) 12 GB RAM BLU Studio Mini 5.5” (1440 × 720) 2 GB RAM 128 GB Storage 32 GB Storage 4 Cameras (10–108 MP) 13 MP Camera 2.8GHz (1) / 2.4GHZ (3) / 1.8GHZ (4) Android 11 $999 1.6 GHz Octo-core Android 9 $79

Slide 48

Slide 48

In the 2017 survey, Smartphone users making < $30k/yr experienced app errors 52% of the time Source

Slide 49

Slide 49

Slide 50

Slide 50

=

Slide 51

Slide 51

Photo Credit: Dylan Passmore

Slide 52

Slide 52

wheelchairs strollers bicycles skateboards

Slide 53

Slide 53

one arm permanent arm injury new parent situational

Slide 54

Slide 54

26K + 13M + 8M one arm permanent arm injury new parent situational 21 Million People

Slide 55

Slide 55

So how can we make our interfaces work for everyone?

Slide 56

Slide 56

Approach your job with an open mind and empathy for your users.

Slide 57

Slide 57

We try stuff, make mistakes, & learn from them

Slide 58

Slide 58

Progressive Enhancement

Slide 59

Slide 59

User Experience BASIC ADVANCED Browser Capabilities

Slide 60

Slide 60

I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg

Slide 61

Slide 61

Mono

Slide 62

Slide 62

Stereo

Slide 63

Slide 63

Surround Sound

Slide 64

Slide 64

5.1 Channel Surround

Slide 65

Slide 65

7.1 Channel Surround

Slide 66

Slide 66

16.2 Channel Surround

Slide 67

Slide 67

Sometimes it’s all you need

Slide 68

Slide 68

Kindle 3 = Free global data

Slide 69

Slide 69

Graceful Degradation

Slide 70

Slide 70

Modern Browsers Older Browsers

Slide 71

Slide 71

Modern Browsers Older Browsers

Slide 72

Slide 72

Slide 73

Slide 73

I’m sorry, you need more channels

Slide 74

Slide 74

Slide 75

Slide 75

ADAPTING TO REALITY They’re actually related Graceful Degradation Progressive Enhancement

Slide 76

Slide 76

Technological restrictions

Slide 77

Slide 77

Slide 78

Slide 78

Slide 79

Slide 79

Slide 80

Slide 80

What matters

Slide 81

Slide 81

“Mobile first”

Slide 82

Slide 82

It’s all about process

Slide 83

Slide 83

ADAPTING TO REALITY Step by step 1. Focus on what matters. Th e e s s e n t i a l nugge t 83

Slide 84

Slide 84

ADAPTING TO REALITY Step by step 2. Write it out, then read it back. How does this photo make you feel? ◎ Embarrassing ◎ Upsetting ◎ Saddening ◎ Bad Photo ◎ Other 84

Slide 85

Slide 85

ADAPTING TO REALITY Step by step 2. Write it out, then read it back. How does this photo make you feel? ◎ Embarrassing ◎ Upsetting ◎ Saddening ◎ Bad Photo • ◎ Other it’s embarrassing 85

Slide 86

Slide 86

ADAPTING TO REALITY Step by step 2. Write it out, then read it back. Please describe the photo ◎ It’s embarrassing ◎ It’s a bad photo of me ◎ It makes me sad 86

Slide 87

Slide 87

ADAPTING TO REALITY Step by step 3. Look for semantics that support 1 & 2. a i mg h e adi ng a h p a r g a r pa a 87

Slide 88

Slide 88

ADAPTING TO REALITY Step by step 3. Look for semantics that support 1 & 2. .h y r t -e n ) d e (fe ) g a t l e r o a (als ) o t o h p u . o s l a ( g im h e adi ng ( a l s o .p -n ame ) a ( a l s o .u- u r l ) h p a r g a r pa a r o h t u a ( a l s o .p ) d r a c h . & 88

Slide 89

Slide 89

ADAPTING TO REALITY Step by step 4. Think about how design can improve comprehension. d & t n a t r o p m i s s Le t n e t n o c m o r f t c n is t i v isua l l y t he m os t i m p o r t a n t te xt e h t m o r f t c n i t s i d d e h s i n i m i d & t n e con t e c n a t r o p i n im 89

Slide 90

Slide 90

ADAPTING TO REALITY Step by step 5. Consider how your design choices impact the reading experience. C a n’t te l l w h a t the e p i s o de i s c a l l ed 90

Slide 91

Slide 91

ADAPTING TO REALITY Step by step 5. Consider how your design choices impact the reading experience. e h t h s u r c s e g a m s i n d e e e t r a c o s l l F l a m s n o te x t Ouch 91

Slide 92

Slide 92

ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. Created by Christopher Holm-Hansen from the Noun Project eye tracking T9 Created by bezier master from the Noun Project braille Created by Adriano Emerick from the Noun Project mouse pen touch Created by Vectors Marketremote Created by Vectors Market Created by Vectors Market from the Noun Project from the Noun Project from the Noun Project print Created by Vectors Market from the Noun Project keyboard Created by Vectors Market from the Noun Project audio Created by Vectors Market from the Noun Project owo ib ri W A etyoroject S y P b ted Noun a e Cr m the fro gamepad Created by Vectors Market from the Noun Project 92

Slide 93

Slide 93

ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. Created by Christopher Holm-Hansen from the Noun Project eye tracking touch mouse Created by Vectors Market from the Noun Project Hover? 93

Slide 94

Slide 94

ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. Created by Christopher Holm-Hansen from the Noun Project eye tracking T9 Created by bezier master from the Noun Project mouse pen touch Created by Vectors Marketremote Created by Vectors Market Created by Vectors Market from the Noun Project from the Noun Project from the Noun Project keyboard Created by Vectors Market from the Noun Project Focus & target? audio Created by Vectors Market from the Noun Project owo ib ri W A etyoroject S y P b ted Noun a e Cr m the fro gamepad Created by Vectors Market from the Noun Project 94

Slide 95

Slide 95

ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. mouse touch Created by Vectors Market Created by Vectors Market from the Noun Project from the Noun Project pen owo ib ri W A etyoroject S y P b ted Noun a e Cr m the fro Gestures? 95

Slide 96

Slide 96

ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. braille Created by Adriano Emerick from the Noun Project print Created by Vectors Market from the Noun Project audio Created by Vectors Market from the Noun Project Text expansions? 96

Slide 97

Slide 97

ADAPTING TO REALITY Step by step 7. Map the potential experiences. Path A Start t n i o p n o i s i c e D Experience 1 Ch a nge Path B Experience 2 Notes 97

Slide 98

Slide 98

ADAPTING TO REALITY Step by step 1. Focus on what matters. 2. Write it out, then read it back. 3. Look for semantics that support 1 & 2. 4. Think about how design can improve comprehension. 5. Consider how your design choices impact the reading experience. 6. Think about the many different ways folks might interact. 7. Map the potential experiences. 98

Slide 99

Slide 99

ADAPTING TO REALITY Step by step 1. Focus on what matters. 2. Write it out, then read it back. 3. Look for semantics that support 1 & 2. 4. Think about how design can improve comprehension. 5. Consider how your design choices impact the reading experience. 6. Think about the many different ways folks might interact. 7. Map the potential experiences. 8. Iterate. 99

Slide 100

Slide 100

Thank you! @AaronGustafson front-end.social/@Aaron aaron-gustafson.com noti.st/AaronGustafson