byDougGapinskiSpeed &Simplicity
chrome.com/racer
@DougGapinski mstoner.com responsive.lyME
SHARE#mstoner @DougGapinski
mstonerblog.comSTEAL
STEALmstonerblog.com
Ubiquitous internetPlanningDesignTablets & TouchSpeedUsability
as coined by Mark Weiser of Xerox PARCUBIQUITOUSCOMPUTING
UBIQUITOUSCOMPUTINGINTERNET
61%39%offlineonlineHow much of theworld’s populationis online?source: ITU
022.54567.590Americas Asia Pacific Middle East Africasource: ITU+28%+45%+55%+82%AmericasAsia-PacificMiddle EastAfricaWhere ...
075000000015000000002250000000Americas Asia PacificTotal mobilebroadbandsubscriptions,2007 vs. 2013268MILLION2.1BILLIONin ...
2020The year Google predicts theentire world will be online.source: CNN
What are some of the realitiesof ubiquitous internet?
SCREENS
“The technology required for ubiquitouscomputing: cheap, low-power computers thatinclude equally convenient displays...”--...
Aakash Ubislate tablet$69 ($20 for students in India)Archos 35 Carbon smartphone$120Cheap devices and displays for browsing
Lower quality displays that display limited informationPebble smartwatch$150Fitbit Zip fitness data collector$60
In some objects, sensors + connectivity matter more than displayFitbit Ariatransmits weight to appParrot Flower Powertrans...
6 basic screensizes* for 22 ofthe most populartablets1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 2046Screensi...
1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 20461200x1920800x1280768x1280600x1024600x8001536x20466 basic scre...
That’s only the tablets!
SEQUENTIAL+SIMULTANEOUSUSEusing more than one deviceusing more than one device at the same time
98% used more than onedevice within 24 hours.source: Google
90% browsed sequentially:beginning a task on one deviceand finishing on another.source: Google
66% used more than onedevice at the same time.source: Google
66% used more than onedevice at the same time.81% if you alsoinclude televisions.source: Google
22% performedcomplementaryactivities.source: GoogleFor simultaneous users,78% multi-tasked
for different screen sizesPLANNING
teehanlax.com: pixel density converter for handling images
PROTOTYPES
The primary purpose of a prototypeis to get to better, more useful work.REMEMBER!
The primary purpose of a prototypeis to get to better, more useful work.client educationbuy-in iterative buildingearly use...
The primary purpose of a prototypeis to get to better, more useful work.IT’S CRAP!
Ask your clients to focus on thereading experience and typographyas the most important design choice.
styletil.es: style prototypes our own in-browser version
typecast.com: typography prototypes
typecast.com: can also generate style guides
Seesparkbox.com: mobile-first content prototypewith an in-browser responsive style tile+
uxpin.com: multi-device, in-browser prototypes
Adobe Edge Reflow: import PSDs, edit/add media queries, andexport CSS to the editor of your choiceJUNE17Coming
foundation.zurb.com: responsive, front-end framework
TABLETSThe rise of the
Tablet traffic to the web surpassedsmartphone traffic in December 2012.source: Adobe
All countries saw tablet traffic double(or more) in 2012).source: Adobe
Users spend 54% more time on tabletsthan they do on smartphones.source: Adobe
Users view 70% more pages on tabletsthan they do on smartphones.source: Adobe
Tablets are predicted to outpace desktopand laptop combined sales around 2015.source: Gartner
“New rule: every desktop design has to gofinger-friendly.” --Josh Clark (@globalmoxie)read this: Global Moxie blog
To build for the future, we need to makeour responsive designs more tablet-friendly.
Places primary navigation in easy range of fingers, on the sides or bottom.Example: Google +
Adjust designs for height to accommodate the dual display nature of tablets.read this: Luke W’s blog
uExample: Apple iPhoneAdjust designs for height to accommodate the dual display nature of tablets.
Use bigger touch target areas to accommodate finger / thumb input.Example: Good.isMIT researchshowed the averagefingertip is...
Consider side-swipe navigation where appropriate.Example: Yale School of Management
Anchor content to the side of the browser (not just to the side of the body).Example: Quartz
Designing for speed
SKEUOMORPHICFLAT
Responsive design requires differentlayouts for different breakpoints.webster.edu
Layout means more design anddevelopment time per breakpoint...webster.edu
...and multiply the breakpoints timesthe browsers / devices you’re testing for.Baseline browsers we test:• IE 8+• Firefox ...
Simpler design makes it easier to designacross layouts, devices, and browsers.
Page weight has a linear, negative impacton conversions, page views, bouncerate, and returning visitors.Source: Web Perfor...
Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.Source: Web Site Optimization
Speed touches nearly every measurablemetric of a web project.
That means speed is everyone’s problem.
Four things everyone on a web teamcan do to help with web performance.
1. Learn how to check pageweight in your browser.
2. Work to devise a solution the responsiveimages problem on the CMS level.
3. Minimize the number of custom fontsand external widgets per page.
4. Hire and talk to competent developers.
GOOD+FASTEXAMPLES
nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size
Thanks to Erik Runyon,Director of Web Communications at Notre Dame,for the examples and data.Check out his blog and Higher...
Further reading on web performance:www.stevesouders.comwww.igvita.comwww.dmolsen.com
USABILITY
“If you aren’t talking to your users and lettingthem have a say, you aren’t doing UX.Keep the user at the heart of our wor...
What is a minimum viable strategy forpostdesktop usability testing?
1. If you can, always user testyour prototypes AND your alpha site.
2. Perform critical path testing for eachbreakpoint where layout changes.mobile tablet desktop
3. Test users on different devices toconfirm input types work intuitively—a minimum is mouse & trackpad vs. touch.
4. Always do usability testsfor the mobile breakpoint.
Gotomeeting.com: make user the presenter, enable webcam, and record.
Pros:Works remotelyCons:Doesn’twork for mobileHack:Ask your desktop usersto make the browsermobile-sizedThis hack exposess...
uxrecorder.com: make user the presenter, enable webcam, and record.
Pros:Does mobile andtablets great!Cons:Does not work remotely
Source: MailChimpHack-ish:Laptop huggingto test mobile usersremotely
1. User joins gotomeeting orother screen sharing softwarevia laptop.2. User shares laptop camera.3. User “reverse hugs” la...
To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.
@DougGapinski mstoner.com responsive.lyTHANKS
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Upcoming SlideShare
Loading in …5
×

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

1,335 views
1,207 views

Published on

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

Published in: Technology, Design

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

  1. 1. byDougGapinskiSpeed &Simplicity
  2. 2. chrome.com/racer
  3. 3. @DougGapinski mstoner.com responsive.lyME
  4. 4. SHARE#mstoner @DougGapinski
  5. 5. mstonerblog.comSTEAL
  6. 6. STEALmstonerblog.com
  7. 7. Ubiquitous internetPlanningDesignTablets & TouchSpeedUsability
  8. 8. as coined by Mark Weiser of Xerox PARCUBIQUITOUSCOMPUTING
  9. 9. UBIQUITOUSCOMPUTINGINTERNET
  10. 10. 61%39%offlineonlineHow much of theworld’s populationis online?source: ITU
  11. 11. 022.54567.590Americas Asia Pacific Middle East Africasource: ITU+28%+45%+55%+82%AmericasAsia-PacificMiddle EastAfricaWhere is the biggest growthin mobile broadband?
  12. 12. 075000000015000000002250000000Americas Asia PacificTotal mobilebroadbandsubscriptions,2007 vs. 2013268MILLION2.1BILLIONin 2007in 2013source: ITU
  13. 13. 2020The year Google predicts theentire world will be online.source: CNN
  14. 14. What are some of the realitiesof ubiquitous internet?
  15. 15. SCREENS
  16. 16. “The technology required for ubiquitouscomputing: cheap, low-power computers thatinclude equally convenient displays...”--Mark Weiser of Xerox PARC
  17. 17. Aakash Ubislate tablet$69 ($20 for students in India)Archos 35 Carbon smartphone$120Cheap devices and displays for browsing
  18. 18. Lower quality displays that display limited informationPebble smartwatch$150Fitbit Zip fitness data collector$60
  19. 19. In some objects, sensors + connectivity matter more than displayFitbit Ariatransmits weight to appParrot Flower Powertransmits plantdata to app
  20. 20. 6 basic screensizes* for 22 ofthe most populartablets1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 2046Screensiz.es
  21. 21. 1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 20461200x1920800x1280768x1280600x1024600x8001536x20466 basic screensizes* for 22 ofthe most populartabletsScreensiz.es
  22. 22. That’s only the tablets!
  23. 23. SEQUENTIAL+SIMULTANEOUSUSEusing more than one deviceusing more than one device at the same time
  24. 24. 98% used more than onedevice within 24 hours.source: Google
  25. 25. 90% browsed sequentially:beginning a task on one deviceand finishing on another.source: Google
  26. 26. 66% used more than onedevice at the same time.source: Google
  27. 27. 66% used more than onedevice at the same time.81% if you alsoinclude televisions.source: Google
  28. 28. 22% performedcomplementaryactivities.source: GoogleFor simultaneous users,78% multi-tasked
  29. 29. for different screen sizesPLANNING
  30. 30. teehanlax.com: pixel density converter for handling images
  31. 31. PROTOTYPES
  32. 32. The primary purpose of a prototypeis to get to better, more useful work.REMEMBER!
  33. 33. The primary purpose of a prototypeis to get to better, more useful work.client educationbuy-in iterative buildingearly user testing visualizing content strategy
  34. 34. The primary purpose of a prototypeis to get to better, more useful work.IT’S CRAP!
  35. 35. Ask your clients to focus on thereading experience and typographyas the most important design choice.
  36. 36. styletil.es: style prototypes our own in-browser version
  37. 37. typecast.com: typography prototypes
  38. 38. typecast.com: can also generate style guides
  39. 39. Seesparkbox.com: mobile-first content prototypewith an in-browser responsive style tile+
  40. 40. uxpin.com: multi-device, in-browser prototypes
  41. 41. Adobe Edge Reflow: import PSDs, edit/add media queries, andexport CSS to the editor of your choiceJUNE17Coming
  42. 42. foundation.zurb.com: responsive, front-end framework
  43. 43. TABLETSThe rise of the
  44. 44. Tablet traffic to the web surpassedsmartphone traffic in December 2012.source: Adobe
  45. 45. All countries saw tablet traffic double(or more) in 2012).source: Adobe
  46. 46. Users spend 54% more time on tabletsthan they do on smartphones.source: Adobe
  47. 47. Users view 70% more pages on tabletsthan they do on smartphones.source: Adobe
  48. 48. Tablets are predicted to outpace desktopand laptop combined sales around 2015.source: Gartner
  49. 49. “New rule: every desktop design has to gofinger-friendly.” --Josh Clark (@globalmoxie)read this: Global Moxie blog
  50. 50. To build for the future, we need to makeour responsive designs more tablet-friendly.
  51. 51. Places primary navigation in easy range of fingers, on the sides or bottom.Example: Google +
  52. 52. Adjust designs for height to accommodate the dual display nature of tablets.read this: Luke W’s blog
  53. 53. uExample: Apple iPhoneAdjust designs for height to accommodate the dual display nature of tablets.
  54. 54. Use bigger touch target areas to accommodate finger / thumb input.Example: Good.isMIT researchshowed the averagefingertip is8 to 10 mm.~7 to 9 mmminimumrecommendedbased onmanufacturer.
  55. 55. Consider side-swipe navigation where appropriate.Example: Yale School of Management
  56. 56. Anchor content to the side of the browser (not just to the side of the body).Example: Quartz
  57. 57. Designing for speed
  58. 58. SKEUOMORPHICFLAT
  59. 59. Responsive design requires differentlayouts for different breakpoints.webster.edu
  60. 60. Layout means more design anddevelopment time per breakpoint...webster.edu
  61. 61. ...and multiply the breakpoints timesthe 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
  62. 62. Simpler design makes it easier to designacross layouts, devices, and browsers.
  63. 63. Page weight has a linear, negative impacton conversions, page views, bouncerate, and returning visitors.Source: Web Performance Today
  64. 64. Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.Source: Web Site Optimization
  65. 65. Speed touches nearly every measurablemetric of a web project.
  66. 66. That means speed is everyone’s problem.
  67. 67. Four things everyone on a web teamcan do to help with web performance.
  68. 68. 1. Learn how to check pageweight in your browser.
  69. 69. 2. Work to devise a solution the responsiveimages problem on the CMS level.
  70. 70. 3. Minimize the number of custom fontsand external widgets per page.
  71. 71. 4. Hire and talk to competent developers.
  72. 72. GOOD+FASTEXAMPLES
  73. 73. nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
  74. 74. ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
  75. 75. uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size
  76. 76. 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.
  77. 77. Further reading on web performance:www.stevesouders.comwww.igvita.comwww.dmolsen.com
  78. 78. USABILITY
  79. 79. “If you aren’t talking to your users and lettingthem have a say, you aren’t doing UX.Keep the user at the heart of our work.”--@TimothyWhalen
  80. 80. What is a minimum viable strategy forpostdesktop usability testing?
  81. 81. 1. If you can, always user testyour prototypes AND your alpha site.
  82. 82. 2. Perform critical path testing for eachbreakpoint where layout changes.mobile tablet desktop
  83. 83. 3. Test users on different devices toconfirm input types work intuitively—a minimum is mouse & trackpad vs. touch.
  84. 84. 4. Always do usability testsfor the mobile breakpoint.
  85. 85. Gotomeeting.com: make user the presenter, enable webcam, and record.
  86. 86. Pros:Works remotelyCons:Doesn’twork for mobileHack:Ask your desktop usersto make the browsermobile-sizedThis hack exposessome design flaws, butdoes not offer insightabout touch input.
  87. 87. uxrecorder.com: make user the presenter, enable webcam, and record.
  88. 88. Pros:Does mobile andtablets great!Cons:Does not work remotely
  89. 89. Source: MailChimpHack-ish:Laptop huggingto test mobile usersremotely
  90. 90. 1. User joins gotomeeting orother screen sharing softwarevia laptop.2. User shares laptop camera.3. User “reverse hugs” laptop,pointing laptop camera atmobile device
  91. 91. To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.
  92. 92. @DougGapinski mstoner.com responsive.lyTHANKS

×