Speed and Simplicity: Design and Usability for Multi-device Websites

We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information.

This webinar focused on how new realities are changing web design, web design process, and usability standards.

Session Outline
• Ubiquitous computing, ubiquitous internet
• Sequential and simultaneous browsing
• The rise of the tablet
• Flat design for a lumpy web
• Speed matters
• Usability strategies

Transcript

1. by Doug Gapinski Speed & Simplicity
2. chrome.com/racer
5. @DougGapinski mstoner.com responsive.ly ME
6. SHARE #mstoner @DougGapinski
7. mstonerblog.com STEAL
8. STEAL mstonerblog.com
9. Ubiquitous internet Planning Design Tablets & Touch Speed Usability
10. as coined by Mark Weiser of Xerox PARC UBIQUITOUS COMPUTING
12. UBIQUITOUS COMPUTING INTERNET
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 source: ITU +28% +45% +55% +82% Americas Asia-Pacific Middle East Africa Where is the biggest growth in mobile broadband?
15. 0 750000000 1500000000 2250000000 Americas Asia Pacific Total mobile broadband subscriptions, 2007 vs. 2013 268 MILLION 2.1 BILLION in 2007 in 2013 source: ITU
16. 2020 The year Google predicts the entire world will be online. source: CNN
17. What are some of the realities of ubiquitous internet?
18. SCREENS
19. “The technology required for ubiquitous computing: cheap, low-power computers that include equally convenient displays...” --Mark Weiser of Xerox PARC
20. Aakash Ubislate tablet $69 ($20 for students in India) Archos 35 Carbon smartphone $120 Cheap devices and displays for browsing
21. Lower quality displays that display limited information Pebble smartwatch $150 Fitbit Zip fitness data collector $60
22. In some objects, sensors + connectivity matter more than display Fitbit Aria transmits weight to app Parrot Flower Power transmits plant data to app
23. 6 basic screen sizes* for 22 of the most popular tablets 1200 x 1920 800 x 1280 768 x 1280 600 x 1024 600 x 800 1536 x 2046 Screensiz.es
24. 1200 x 1920 800 x 1280 768 x 1280 600 x 1024 600 x 800 1536 x 2046 1200 x 1920 800 x 1280 768 x 1280 600 x 1024 600 x 800 1536 x 2046 6 basic screen sizes* for 22 of the most popular tablets Screensiz.es
25. That’s only the tablets!
26. SEQUENTIAL + SIMULTANEOUS USE 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. source: Google For simultaneous users, 78% multi-tasked
32. for different screen sizes PLANNING
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. REMEMBER!
39. The primary purpose of a prototype is to get to better, more useful work. client education buy-in iterative building early user testing visualizing content strategy
40. The primary purpose of a prototype is to get to better, more useful work. IT’S CRAP!
41. Ask your clients to focus on the reading experience and typography as the most important design choice.
42. styletil.es: style prototypes our own in-browser version
43. typecast.com: typography prototypes
44. typecast.com: can also generate style guides
45. Seesparkbox.com: mobile-first content prototype with an in-browser responsive style tile +
46. uxpin.com: multi-device, in-browser prototypes
47. Adobe Edge Reflow: import PSDs, edit/add media queries, and export CSS to the editor of your choice JUNE 17 Coming
48. foundation.zurb.com: responsive, front-end framework
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 are predicted to outpace desktop and laptop combined sales around 2015. source: Gartner
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. Designing for speed
64. SKEUO MOR PHIC FLAT
65. Responsive design requires different layouts for different breakpoints. webster.edu
66. Layout means more design and development time per breakpoint... webster.edu
67. ...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
68. Simpler design makes it easier to design across layouts, devices, and browsers.
69. Page weight has a linear, negative impact on conversions, page views, bounce rate, and returning visitors. Source: Web Performance Today
70. Tests at Amazon showed that every 100 ms increase in load time decreased sales by 1%. Source: Web Site Optimization
71. Speed touches nearly every measurable metric of a web project.
72. That means speed is everyone’s problem.
73. Four things everyone on a web team can do to help with web performance.
74. 1. Learn how to check page weight in your browser.
76. 2. Work to devise a solution the responsive images problem on the CMS level.
77. 3. Minimize the number of custom fonts and external widgets per page.
78. 4. Hire and talk to competent developers.
79. GOOD + FAST EXAMPLES
80. nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
81. ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
82. uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size
83. 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.
84. Further reading on web performance: www.stevesouders.com www.igvita.com www.dmolsen.com
85. USABILITY
86. “If you aren’t talking to your users and letting them have a say, you aren’t doing UX. Keep the user at the heart of our work.” --@TimothyWhalen
87. What is a minimum viable strategy for postdesktop usability testing?
88. 1. If you can, always user test your prototypes AND your alpha site.
89. 2. Perform critical path testing for each breakpoint where layout changes. mobile tablet desktop
90. 3. Test users on different devices to confirm input types work intuitively— a minimum is mouse & trackpad vs. touch.
91. 4. Always do usability tests for the mobile breakpoint.
92. Gotomeeting.com: make user the presenter, enable webcam, and record.
93. Pros: Works remotely Cons: Doesn’t work for mobile Hack: Ask your desktop users to make the browser mobile-sized This hack exposes some design flaws, but does not offer insight about touch input.
94. uxrecorder.com: make user the presenter, enable webcam, and record.
95. Pros: Does mobile and tablets great! Cons: Does not work remotely
96. Source: MailChimp Hack-ish: Laptop hugging to test mobile users remotely
97. 1. User joins gotomeeting or other screen sharing software via laptop. 2. User shares laptop camera. 3. User “reverse hugs” laptop, pointing laptop camera at mobile device
98. To embrace the complexity of the multi-device web, design and test for speed and simplicity.
99. @DougGapinski mstoner.com responsive.ly THANKS