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