Adapting to Reality [Starbucks Lunch & Learn]
•
0 likes•660 views
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain. One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Recommended
Recommended
More Related Content
Similar to Adapting to Reality [Starbucks Lunch & Learn]
Similar to Adapting to Reality [Starbucks Lunch & Learn] (20)
More from Aaron Gustafson
More from Aaron Gustafson (20)
Recently uploaded
Recently uploaded (20)
Adapting to Reality [Starbucks Lunch & Learn]
- 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
- 9. Created by Vectors Market from the Noun Project 1024 × 768 Ok, a bit larger, but that’s it
- 10. Created by Vectors Mark from the Noun Project 1366 × 7681024 × 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…
- 11. 1024 × 768 Created by Vectors Market from the Noun Project The web’s “happy place”
- 12. 640 × 200 Created by Douglas Santos from the Noun Project Created by creative outlet from the Noun Project 240 × 240 We were ignoring mobile…
- 13. 3840 × 2160320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
- 14. Don’t even get me started on tablets © Brad Frost
- 18. 3840 × 2160320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
- 19. 1920 × 1080Created by Vectors Market from the Noun Project 7680 × 4320 Created by Vectors Market from the Noun Project Desktops today…
- 20. Chasing screen sizes is clearly a fool’s errand
- 21. 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
- 22. 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
- 23. Chasing screen sizes is clearly a fool’s errand
- 24. Designing for screens is hard
- 25. And then there’s everything else
- 26. 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
- 27. 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 printCreated by Adriano Emerick from the Noun Projectbraille
- 28. 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
- 29. And, ultimately, our users all have different needs too
- 30. Anyone notice I haven’t even mentioned browsers? ;-)
- 31. So...‽
- 32. REALITY CHECK Nothing about our users’ experiences of the web has ever been as homogenous as we imagined.
- 33. Treat your ideal scenario as an edge case
- 35. The reality
- 36. The reality
- 37. U.S. Smartphone penetration #s released in January 2018 Source < $30k 67% $30-50k 82% $50-75k 83% >$75k 93% 49.55% of the population
- 38. U.S. Smartphone penetration #s released in January 2018 Urban 83% Suburban 78% Rural 65% Source
- 39. INTRO TO ADAPTIVE WEB DESIGN Not all smartphones are equal Dash JR K 3.5" (480 × 320) 256 MB RAM 512MB Memory 2MP camera 1.3 GHz Dual-core Android 4.4 $43 Galaxy S5 5.1” (1920 × 1080) 2GB RAM 16GB Storage 16MP Camera 2.5GHz Quad-core Android 4.4 $799
- 40. In the 2017 survey, Smartphone users making < $30k/yr experienced app errors 52% of the time Source
- 43. wheelchairs strollers bicycles skateboards
- 44. one arm arm injury new parent permanent situational
- 45. one arm arm injury new parent permanent situational 26K 13M 8M+ + 21 Million People
- 46. So how can we make our interfaces work for everyone?
- 47. Approach your job with an open mind and empathy for your users.
- 48. We try stuff, make mistakes, & learn from them
- 51. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
- 52. Mono
- 53. Stereo
- 54. Surround Sound
- 58. Sometimes it’s all you need
- 59. Kindle 3 = Free global data
- 64. I’m sorry, you need more channels
- 66. INTRO TO ADAPTIVE WEB DESIGN They’re actually related Graceful Degradation Progressive Enhancement
- 71. What matters
- 72. “Mobile first”
- 73. It’s all about process
- 74. INTRO TO ADAPTIVE WEB DESIGN Step by step 1. Focus on what matters. 80 The essential nugget
- 75. INTRO TO ADAPTIVE WEB DESIGN 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 it’s embarrassing•
- 76. INTRO TO ADAPTIVE WEB DESIGN Step by step 2. Write it out, then read it back. 83 Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
- 77. INTRO TO ADAPTIVE WEB DESIGN 3. Look for semantics that support 1 & 2. Step by step 84 heading a paragraph a img a
- 78. INTRO TO ADAPTIVE WEB DESIGN Step by step 3. Look for semantics that support 1 & 2. 85 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)
- 79. INTRO TO ADAPTIVE WEB DESIGN Step by step 4. Think about how design can improve comprehension. 86 visually the mostimportant text distinct from the content & diminished in importance Less important & distinct from content
- 80. INTRO TO ADAPTIVE WEB DESIGN Step by step 5. Consider how your design choices impact the reading experience. 87 Can’t tell what theepisode is called
- 81. INTRO TO ADAPTIVE WEB DESIGN Step by step 5. Consider how your design choices impact the reading experience. 88 Floated images crush the text on small screens Ouch
- 82. INTRO TO ADAPTIVE WEB DESIGN Step by step 6. Think about the many different ways folks might interact. 89 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 gamepadCreated by Vectors Market from the Noun Project printCreated by Adriano Emerick from the Noun Projectbraille Created by Vectors Market from the Noun Project audio
- 83. INTRO TO ADAPTIVE WEB DESIGN Step by step 6. Think about the many different ways folks might interact. 90 touch Created by Vectors Market from the Noun Project mouse Created by Christopher Holm-Hansen from the Noun Project eye tracking Hover?
- 84. INTRO TO ADAPTIVE WEB DESIGN Step by step 6. Think about the many different ways folks might interact. 91 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
- 85. INTRO TO ADAPTIVE WEB DESIGN 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 Setyo Ari Wibowo from the Noun Project pen Gestures?
- 86. INTRO TO ADAPTIVE WEB DESIGN Step by step 6. Think about the many different ways folks might interact. 93 Created by Vectors Market from the Noun Project printCreated by Adriano Emerick from the Noun Projectbraille Text expansions? Created by Vectors Market from the Noun Project audio
- 87. INTRO TO ADAPTIVE WEB DESIGN Step by step 7. Map the potential experiences. 94 Path A Experience 1Start Path B Experience 2 Notes Decision point Change
- 88. INTRO TO ADAPTIVE WEB DESIGN 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. 96