Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adapting to Reality [Starbucks Lunch & Learn]

296 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Adapting to Reality [Starbucks Lunch & Learn]

  1. 1. Adapting
 to Reality Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
  2. 2. Web design & development is hard © Brad Frost
  3. 3. Created by Vectors Market from the Noun Project 640 × 480 In the beginning…
  4. 4. 800 × 600 Created by Vectors Market from the Noun Project Ok, we can go a little larger
  5. 5. Created by Vectors Market from the Noun Project 1024 × 768 Ok, a bit larger, but that’s it
  6. 6. 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…
  7. 7. 1024 × 768 Created by Vectors Market from the Noun Project The web’s “happy place”
  8. 8. 640 × 200 Created by Douglas Santos from the Noun Project Created by creative outlet from the Noun Project 240 × 240 We were ignoring mobile…
  9. 9. 3840 × 2160320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
  10. 10. Don’t even get me started on tablets © Brad Frost
  11. 11. Credit: OpenSignalMaps
  12. 12. 3840 × 2160320 × 480 Created by Vectors Market from the Noun Project Created by Vectors Market from the Noun Project Until this happened
  13. 13. 1920 × 1080Created by Vectors Market from the Noun Project 7680 × 4320 Created by Vectors Market from the Noun Project Desktops today…
  14. 14. Chasing screen
 sizes is clearly a
 fool’s errand
  15. 15. 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
  16. 16. 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
  17. 17. Chasing screen
 sizes is clearly a
 fool’s errand
  18. 18. Designing for screens is hard
  19. 19. And then there’s everything else
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. And, ultimately, our users all have different needs too
  24. 24. Anyone notice I haven’t even mentioned
 browsers? ;-)
  25. 25. So...‽
  26. 26. REALITY CHECK Nothing about our users’ experiences of the web
 has ever been as homogenous
 as we imagined.
  27. 27. Treat your
 ideal scenario
 as an edge case
  28. 28. The reality
  29. 29. The reality
  30. 30. 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
  31. 31. U.S. Smartphone penetration #s released in January 2018 Urban 83% Suburban 78% Rural 65% Source
  32. 32. 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
  33. 33. In the 2017 survey, Smartphone users making < $30k/yr experienced app errors
 52% of the time Source
  34. 34. Photo Credit: Dylan Passmore
  35. 35. wheelchairs strollers bicycles skateboards
  36. 36. one arm arm injury new parent permanent situational
  37. 37. one arm arm injury new parent permanent situational 26K 13M 8M+ + 21 Million People
  38. 38. So how can we make
 our interfaces work
 for everyone?
  39. 39. Approach your job
 with an open mind
 and empathy for
 your users.
  40. 40. We try stuff, make mistakes, & learn from them
  41. 41. Progressive Enhancement
  42. 42. UserExperience Browser Capabilities BASIC ADVANCED
  43. 43. I like an escalator because an escalator can never break, it can only become stairs. — Mitch Hedberg
  44. 44. Mono
  45. 45. Stereo
  46. 46. Surround
 Sound
  47. 47. 5.1 Channel
 Surround
  48. 48. 7.1 Channel
 Surround
  49. 49. 16.2 Channel Surround
  50. 50. Sometimes it’s
 all you need
  51. 51. Kindle 3 = Free global data
  52. 52. Graceful Degradation
  53. 53. Modern Browsers Older Browsers
  54. 54. Modern Browsers Older Browsers
  55. 55. I’m sorry,
 you need
 more channels
  56. 56. INTRO TO ADAPTIVE WEB DESIGN
 They’re actually related Graceful Degradation Progressive Enhancement
  57. 57. Technological
 restrictions
  58. 58. What matters
  59. 59. “Mobile first”
  60. 60. It’s all about process
  61. 61. INTRO TO ADAPTIVE WEB DESIGN
 Step by step 1. Focus on what matters. 80 The essential nugget
  62. 62. 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•
  63. 63. 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
  64. 64. INTRO TO ADAPTIVE WEB DESIGN
 3. Look for semantics that support 1 & 2. Step by step 84 heading a paragraph a img a
  65. 65. 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)
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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?
  71. 71. 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
  72. 72. 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?
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×