Adapting to Reality [Guest Lecture, March 2021]
0 likes135 views
The document discusses the challenges of web design and development in adapting to a diverse range of devices and user interactions. It emphasizes that creating web experiences requires consideration of varying screen sizes, user needs, and interaction methods, advocating for an empathetic and flexible design approach. The speaker highlights the importance of progressive enhancement and understanding the distinct requirements of users across different contexts and technologies.
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-4-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-5-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-7-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-8-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-9-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-17-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-18-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-36-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-44-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-66-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-68-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-71-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-72-320.jpg)
![Adapting to Reality [Guest Lecture, March 2021]](https://image.slidesharecdn.com/adaptingtorealitybrowsertechnologiesguestlecture-210311215856/85/Adapting-to-Reality-Guest-Lecture-March-2021-73-320.jpg)
Adapting to Reality [Guest Lecture, March 2021]
- 2. Web design & development is hard © Brad Frost
- 3. Created by Vectors Market from the Noun Project 640 × 480 In the beginning…
- 6. 800 × 600 Created by Vectors Market from the Noun Project Ok, we can go a little larger
- 10. Created by Vectors Market from the Noun Project 1024 × 768 Ok, a bit larger, but that’s it
- 11. Created by Vectors Mark from the Noun Project 1366 × 768 1024 × 600 Created by Vectors Market from the Noun Project 1280 × 800 Created by Vectors Market from the Noun Project 800 × 600 Created by Vectors Market from the Noun Project Of course laptops…
- 12. 1024 × 768 Created by Vectors Market from the Noun Project The web’s “happy place”
- 13. 640 × 200 Created by Douglas Santos from the Noun Project Created by creative outlet from the Noun Project 240 × 240 We were ignoring mobile…
- 14. 3840 × 2160 320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
- 15. Don’t even get me started on tablets © Brad Frost
- 19. 3840 × 2160 320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
- 20. 1920 × 1080 Created by Vectors Market from the Noun Project 7680 × 4320 Created by Vectors Market from the Noun Project Desktops today…
- 21. Chasing screen sizes is clearly a fool’s errand
- 22. In the second quarter of 2008 we detected 71 different screen resolutions among our visitors. In the first quarter of 2014 we detected — Jason Samuels IT Manager, National Council on Family Relations “ 1062 One year after the iPhone 5 years ago! Source
- 23. In 2008, 27 screen resolutions showed up with more than 10 visits, in 2014 that number was — Jason Samuels IT Manager, National Council on Family Relations “ 200 Source
- 24. Chasing screen sizes is clearly a fool’s errand
- 25. Designing for screens is hard
- 26. And then there’s everything else
- 27. Your content can and will go anywhere that’s connected Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project wearables smart tvs IoT assistants
- 28. Meaning users will need to interact in different ways Created by Vectors Market from the Noun Project touch Created by Vectors Market from the Noun Project mouse Created by Vectors Market from the Noun Project keyboard
- 29. Meaning users will need to interact in different ways Created by Vectors Market from the Noun Project touch Created by Vectors Market from the Noun Project mouse Created by bezier master from the Noun Project T9 Created by Christopher Holm-Hansen from the Noun Project eye tracking Created by Vectors Market from the Noun Project remote Created by Setyo Ari Wibowo from the Noun Project pen 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 gamepad Created by Vectors Market from the Noun Project print Created by Adriano Emerick from the Noun Project braille
- 30. Over varied networks and in changing conditions Created by Vectors Market from the Noun Project hardline Created by Vectors Market from the Noun Project wifi Created by Vectors Market from the Noun Project mobile 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 buses Created by Vectors Market from the Noun Project trains Created by Vectors Market from the Noun Project airplanes
- 31. And, ultimately, our users all have different needs too
- 32. Anyone notice I haven’t even mentioned browsers? ;-)
- 33. So...‽
- 34. REALITY CHECK Nothing about our users’ experiences of the web has ever been as homogenous as we imagined.
- 35. Treat your ideal scenario as an edge case
- 37. The reality
- 38. The reality
- 39. ADAPTING TO REALITY U.S. Smartphone penetration < $30k 71% $30-50k 78% $50-75k 90% >$75k 95% 49.55% of the population Smartphone Other
- 40. ADAPTING TO REALITY U.S. Smartphone penetration Urban 83% Suburban 83% Rural 71% Smartphone Other
- 41. ADAPTING TO REALITY One in 5 U.S. adults is a smartphone-only Internet user. Smartphone Other
- 42. ADAPTING TO REALITY Not all smartphones are equal BLU Studio Mini 5.5" (1440 × 720) 2 GB RAM 32 GB Storage 13 MP Camera 1.6 GHz Octo-core Android 9 $79 Galaxy S21 Ultra 5G 6.8” (3200 × 1440) 12 GB RAM 128 GB Storage 4 Cameras (10–108 MP) 2.8GHz (1) / 2.4GHZ (3) / 1.8GHZ (4) Android 11 $999
- 43. In the 2017 survey, Smartphone users making < $30k/yr experienced app errors 52% of the time Source
- 46. wheelchairs strollers bicycles skateboards
- 47. one arm arm injury new parent permanent situational
- 48. one arm arm injury new parent permanent situational 26K 13M 8M + + 21 Million People
- 49. So how can we make our interfaces work for everyone?
- 50. Approach your job with an open mind and empathy for your users.
- 51. We try stuff, make mistakes, & learn from them
- 54. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
- 55. Mono
- 56. Stereo
- 57. Surround Sound
- 61. Sometimes it’s all you need
- 62. Kindle 3 = Free global data
- 67. I’m sorry, you need more channels
- 69. ADAPTING TO REALITY They’re actually related Graceful Degradation Progressive Enhancement
- 74. What matters
- 75. “Mobile first”
- 76. It’s all about process
- 77. ADAPTING TO REALITY Step by step 1. Focus on what matters. 81 The essential nugget
- 78. ADAPTING TO REALITY Step by step 2. Write it out, then read it back. 82 How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 79. ADAPTING TO REALITY Step by step 2. Write it out, then read it back. 83 How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other it’s embarrassing •
- 80. ADAPTING TO REALITY Step by step 2. Write it out, then read it back. 84 Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
- 81. ADAPTING TO REALITY 3. Look for semantics that support 1 & 2. Step by step 85 heading a paragraph a img a
- 82. ADAPTING TO REALITY Step by step 3. Look for semantics that support 1 & 2. 86 heading (also .p-name) a (also .u-url) paragraph a (also .p-author & .h-card) .h-entry (feed) img (also .u-photo) a (also rel-tag)
- 83. ADAPTING TO REALITY Step by step 4. Think about how design can improve comprehension. 87 visually the most important text distinct from the content & diminished in importance Less important & distinct from content
- 84. ADAPTING TO REALITY Step by step 5. Consider how your design choices impact the reading experience. 88 Can’t tell what the episode is called
- 85. ADAPTING TO REALITY Step by step 5. Consider how your design choices impact the reading experience. 89 Floated images crush the text on small screens Ouch
- 86. ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. 90 Created by Vectors Market from the Noun Project touch Created by Vectors Market from the Noun Project mouse Created by bezier master from the Noun Project T9 Created by Christopher Holm-Hansen from the Noun Project eye tracking Created by Vectors Market from the Noun Project remote Created by Setyo Ari Wibowo from the Noun Project pen Created by Vectors Market from the Noun Project keyboard Created by Vectors Market from the Noun Project gamepad Created by Vectors Market from the Noun Project print Created by Adriano Emerick from the Noun Project braille Created by Vectors Market from the Noun Project audio
- 87. ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. 91 touch Created by Vectors Market from the Noun Project mouse Created by Christopher Holm-Hansen from the Noun Project eye tracking Hover?
- 88. ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. 92 Created by Vectors Market from the Noun Project touch Created by Vectors Market from the Noun Project mouse Created by bezier master from the Noun Project T9 Created by Christopher Holm-Hansen from the Noun Project eye tracking Created by Vectors Market from the Noun Project remote Created by Setyo Ari Wibowo from the Noun Project pen Created by Vectors Market from the Noun Project keyboard Created by Vectors Market from the Noun Project gamepad Focus & target? Created by Vectors Market from the Noun Project audio
- 89. ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. 93 Created by Vectors Market from the Noun Project touch Created by Vectors Market from the Noun Project mouse Created by Setyo Ari Wibowo from the Noun Project pen Gestures?
- 90. ADAPTING TO REALITY Step by step 6. Think about the many different ways folks might interact. 94 Created by Vectors Market from the Noun Project print Created by Adriano Emerick from the Noun Project braille Text expansions? Created by Vectors Market from the Noun Project audio
- 91. ADAPTING TO REALITY Step by step 7. Map the potential experiences. 95 Path A Experience 1 Start Path B Experience 2 Notes Decision point Change
- 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