Screen and Context: Usability in the Postdesktop World


Published on

The era of desktop-first methodologies has ended. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. People aren't just visiting your site on phones and desktop computers, they are also using game consoles, laptops, tablets, and other devices. As we enter into the renaissance of the postdesktop web, we must be prepared to boldly alter how we prototype, design, and gather feedback from audiences. Two of the most important factors for current web usability are considering the screen (designing and testing for multiple displays) and context.

Published in: Design, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Screen and Context: Usability in the Postdesktop World

  1. Screen and Context by Doug Gapinski
  3. Debunk this!
  4. @DougGapinski ME
  5. SHARE #heweb13 #uad8
  6. STEAL
  7. STEAL
  8. Context Screens Planning and Design Speed Usability Testing
  9. as coined by Mark Weiser of Xerox PARC UBIQUITOUSCOMPUTING
  11. 61% 39% offline online How much of the world’s population is online? Source: ITU
  12. 0 22.5 45 67.5 90 Americas Asia Pacific Middle East Africa +28% +45% +55% +82% Americas Asia-Pacific Middle East Africa Where is the biggest growth in mobile broadband (2010 to 2013)? Source: ITU
  13. 0 750000000 1500000000 2250000000 Americas Asia Pacific Total mobile broadband subscriptions, 2007 vs. 2013 268MILLION 2.1BILLION in 2007 in 2013 Source: ITU
  14. 2020 The year Google predicts the entire world will be online. Source: CNN
  15. 61% of the world will be coming online for the first time soon using (mostly) cheap mobile devices.
  16. Many of these users will intially be mobile-only.
  17. If you aren’t providing users with sites optimized for mobile use, it’s time to catch up.
  19. Aakash Ubislate tablet $69 ($20 for students in India) Archos 35 Carbon smartphone $120 Cheap devices and displays for browsing
  20. Lower quality displays that display limited information Pebble smartwatch $150 Fitbit Zip fitness data collector $60
  21. In some objects, sensors + connectivity matter more than display Fitbit Aria transmits weight to app Parrot Flower Power transmits plant data to app
  23. Dude, WTF? :(^
  24. SEQUENTIAL+SIMULTANEOUSUSE using more than one device using more than one device at the same time
  25. 98% used more than one device within 24 hours. Source: Google
  26. 90% browsed sequentially: beginning a task on one device and finishing on another. Source: Google
  27. 66% used more than one device at the same time. Source: Google
  28. 66% used more than one device at the same time. 81% if you also include televisions. Source: Google
  29. 22% performed complementary activities. For simultaneous users, 78% multi-tasked Source: Google
  31. pixel density converter for handling images
  33. The primary purpose of a prototype is to get to better, more useful work. client educationbuy-in iterative building early user testing visualizing content strategy
  34. The primary purpose of a prototype is to get to better, more useful work. IT’S CRAP!
  35. “All our decisions should start from content out, not canvas in.” --@Viljamis (Viljami Salminen) Read this: Valjami Salminen’s blog
  36. Ask your clients to focus on typography, legibility, and real content in prototypes.
  37. style prototypes mStoner: our own in-browser version
  38. typography prototypes
  39. can also generate style guides
  40. mobile-first content prototype with an in-browser responsive style tile +
  41. Adobe Edge Reflow: import PSDs, edit/add media queries, and export CSS to the editor of your choice
  42. responsive, front-end framework
  43. static site generator, pattern starter kit, design and presentation system
  44. TABLETS The rise of the
  45. Tablet traffic to the web surpassed smartphone traffic in December 2012. Source: Adobe
  46. All countries saw tablet traffic double (or more) in 2012. Source: Adobe
  47. Users spend 54% more time on tablets than they do on smartphones. Source: Adobe
  48. Users view 70% more pages on tablets than they do on smartphones. Source: Adobe
  49. Tablets: 14.6% Smartphones: 65.1% Desktops: 8.6% Laptops: 11.6% Predicted market share for Q4 2013 Source: IDC
  50. “New rule: every desktop design has to go finger-friendly.” --Josh Clark (@globalmoxie) Read this: Global Moxie blog
  51. To build for the future, we need to make our responsive designs more tablet-friendly.
  52. Places primary navigation in easy range of fingers, on the sides or bottom. Example: Google +
  53. Adjust designs for height to accommodate the dual display nature of tablets. Read this: Luke W’s blog
  54. u Example: Apple iPhone Adjust designs for height to accommodate the dual display nature of tablets.
  55. Use bigger touch target areas to accommodate finger / thumb input. Example: MIT research showed the average fingertip is 8 to 10 mm. ~7 to 9 mm minimum recommended based on manufacturer.
  56. Consider side-swipe navigation where appropriate. Example: Yale School of Management
  57. Anchor content to the side of the browser (not just to the side of the body). Example: Quartz
  58. Bonus round: use transitional interfaces (carefully) to augment the touch experience and add affordances. Read this: Pasquale D’Silva on Medium
  60. Talk about speed, not style.
  61. Designing for speed
  62. Responsive design requires different layouts for different breakpoints.
  63. Layout means more design and development time per breakpoint...
  64. ...and multiply the breakpoints times the browsers / devices you’re testing for. Baseline browsers we test: • IE 8+ • Firefox 18+ • Chrome 24+ Devices for mobile / tablet testing: • iPad 3 • iPhone 4s • HTC DNA • Kindle Fire 2 • Nexus 7 • Galaxy S II • Droid Razr • iPhone 5
  65. Simpler design makes it easier to design across layouts, devices, and browsers.
  66. Page weight has a linear, negative impact on conversions, page views, bounce rate, and returning visitors. Source: Web Performance Today
  67. Tests at Amazon showed that every 100 ms increase in load time decreased sales by 1%. Source: Web Site Optimization
  68. Speed touches nearly every measurable metric of a web project.
  69. That means speed is everyone’s problem.
  70. What can you do?
  71. 1. Learn how to check page weight in your browser.
  72. Reading the nuances of the inspector: Check out his blog at
  73. 2. Minimize the number of custom fonts and external widgets per page.
  74. 3. Include designers and developers who understand web performance from the beginning.
  76. 23 network requests / 333 KB mobile size / 2.8 MB desktop size
  77. 21 network requests / 410 KB mobile size / 420 KB desktop size
  78. 38 network requests / 451 KB mobile size / 753 KB desktop size
  79. Thanks to Erik Runyon, Director of Web Communications at Notre Dame, for the examples and data. Check out his blog and Higher Education RWD Directory at
  80. Further reading on web performance:
  82. “If you aren’t talking to your users and letting them have a say, you aren’t doing UX.” --@TimothyWhalen
  83. What is a minimum viable strategy for postdesktop usability testing?
  84. 1. If you can, always user test your prototypes AND your alpha site.
  85. 2. Perform critical path testing for each breakpoint where layout changes. mobile tablet desktop
  86. 3. Test users on different devices to confirm input types work intuitively— a minimum is mouse & trackpad vs. touch.
  87. 4. Always do usability tests specifically for the mobile breakpoint.
  88. Two things that need to be impossible to miss at any mobile breakpoint:
  89. Two things that need to be impossible to miss at any mobile breakpoint:
  90. 5. Test people on their own devices.
  91. Design for speed and simplicity.
  92. @DougGapinski THANKS