Adapting to Reality

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

Slide 1

Slide 1

Adapting to Reality Aaron Gustafson @AaronGustafson slideshare.net/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

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

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

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

Slide 11

Slide 11

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 12

Slide 12

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

Slide 13

Slide 13

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 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

Credit: OpenSignalMaps

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

Chasing screen sizes is clearly a fool’s errand

Slide 22

Slide 22

a e y 5 “ ! 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 23

Slide 23

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

Slide 24

Chasing screen sizes is clearly a fool’s errand

Slide 25

Slide 25

Designing for screens is hard

Slide 26

Slide 26

And then there’s everything else

Slide 27

Slide 27

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 28

Slide 28

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 29

Slide 29

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 30

Slide 30

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 31

Slide 31

And, ultimately, our users all have different needs too

Slide 32

Slide 32

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

Slide 33

Slide 33

So…‽

Slide 34

Slide 34

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

Slide 35

Slide 35

Treat your ideal scenario as an edge case

Slide 36

Slide 36

Slide 37

Slide 37

The reality

Slide 38

Slide 38

The reality

Slide 39

Slide 39

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 40

Slide 40

ADAPTING TO REALITY U.S. Smartphone penetration Urban Suburban Rural 83% 83% 71% Smartphone Other

Slide 41

Slide 41

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

Slide 42

Slide 42

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 43

Slide 43

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

Slide 44

Slide 44

Slide 45

Slide 45

Photo Credit: Dylan Passmore

Slide 46

Slide 46

wheelchairs strollers bicycles skateboards

Slide 47

Slide 47

one arm permanent arm injury new parent situational

Slide 48

Slide 48

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

Slide 49

Slide 49

So how can we make our interfaces work for everyone?

Slide 50

Slide 50

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

Slide 51

Slide 51

We try stuff, make mistakes, & learn from them

Slide 52

Slide 52

Progressive Enhancement

Slide 53

Slide 53

User Experience BASIC ADVANCED Browser Capabilities

Slide 54

Slide 54

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

Slide 55

Slide 55

Mono

Slide 56

Slide 56

Stereo

Slide 57

Slide 57

Surround Sound

Slide 58

Slide 58

5.1 Channel Surround

Slide 59

Slide 59

7.1 Channel Surround

Slide 60

Slide 60

16.2 Channel Surround

Slide 61

Slide 61

Sometimes it’s all you need

Slide 62

Slide 62

Kindle 3 = Free global data

Slide 63

Slide 63

Graceful Degradation

Slide 64

Slide 64

Modern Browsers Older Browsers

Slide 65

Slide 65

Modern Browsers Older Browsers

Slide 66

Slide 66

Slide 67

Slide 67

I’m sorry, you need more channels

Slide 68

Slide 68

Slide 69

Slide 69

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

Slide 70

Slide 70

Technological restrictions

Slide 71

Slide 71

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

What matters

Slide 75

Slide 75

“Mobile first”

Slide 76

Slide 76

It’s all about process

Slide 77

Slide 77

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

Slide 78

Slide 78

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 82

Slide 79

Slide 79

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 83

Slide 80

Slide 80

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 84

Slide 81

Slide 81

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 85

Slide 82

Slide 82

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 . & 86

Slide 83

Slide 83

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 87

Slide 84

Slide 84

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 88

Slide 85

Slide 85

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 89

Slide 86

Slide 86

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 90

Slide 87

Slide 87

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

Slide 88

Slide 88

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 92

Slide 89

Slide 89

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

Slide 90

Slide 90

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

Slide 91

Slide 91

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 95

Slide 92

Slide 92

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

Slide 93

Slide 93

Thank you! @AaronGustafson aaron-gustafson.com noti.st/AaronGustafson