Screen and Contextby Doug Gapinski
chrome.com/racer
Debunk this!mStoner.com
@DougGapinski mstoner.com responsive.lyME
SHARE#psuweb13 @DougGapinski
STEALslideshare.net/thedougco
STEALslideshare.net/thedougco
ContextScreensPlanning and DesignSpeedUsability Testing
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
61% of the world will be comingonline for the first time soon using(mostly) cheap mobile devices.
Many of these users will intially bemobile-only.
“First order of business is gettingall of our content on mobile, in a formatthat’s readable, navigable, and searchable.”--...
SCREENS
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...
MULTI-DEVICEvs.RESPONSIVE
Dude, WTF? :(^
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
MULTIPLEDEVICES&YOU
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!
“All our decisions should start fromcontent out, not canvas in.”--@Viljamis (Viljami Salminen)Read this: Valjami Salminen’...
Ask your clients to focus on typography,legibility, and real content in prototypes.
Styletil.es: style prototypes mStoner: 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 designhas to go finger-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
Bonus round: use transitional interfaces (carefully) toaugment the touch experience and add affordances.Read this: Pasquale...
Designing for speed
SKEUOMORPHICFLATTHEYAREBOTHTERRIBLE.
Talk about speed and relevance, not style.
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.
What can you do?
1. Learn how to check pageweight in your browser.
Reading the nuances of the inspector:slideshare.net/dmolsenwvuCheck out his blog at dmolsen.com.
2. Minimize the number of custom fontsand external widgets per page.
3. Work on a solution to the responsiveimages problem on the CMS level.
4. Include designers and developers whounderstand web performancefrom the beginning.
GOOD+FASTEXAMPLES
nd.edu 23 network requests / 333 KB mobile size / 2.8 MB desktop size
ct.edu 21 network requests / 410 KB mobile size / 420 KB desktop size
uvm.edu 38 network 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.”--@TimothyWhalen
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 tests specificallyfor the mobile breakpoint.
Two things that need to be impossibleto miss at any mobile breakpoint:
Two things that need to be impossibleto miss at any mobile breakpoint:
5. Test people ontheir own devices.
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...
Design for speed and simplicity.
@DougGapinskimstoner.comresponsive.lyTHANKS
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Upcoming SlideShare
Loading in …5
×

Screen and Context: Usability in the Postdesktop World

763 views

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.

This presentation is a duplicate of the original posted here: http://www.slideshare.net/thedougco/screen-and-context-usability-in-the-postdesktop-world

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
763
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Screen and Context: Usability in the Postdesktop World

  1. 1. Screen and Contextby Doug Gapinski
  2. 2. chrome.com/racer
  3. 3. Debunk this!mStoner.com
  4. 4. @DougGapinski mstoner.com responsive.lyME
  5. 5. SHARE#psuweb13 @DougGapinski
  6. 6. STEALslideshare.net/thedougco
  7. 7. STEALslideshare.net/thedougco
  8. 8. ContextScreensPlanning and DesignSpeedUsability Testing
  9. 9. as coined by Mark Weiser of Xerox PARCUBIQUITOUSCOMPUTING
  10. 10. UBIQUITOUSCOMPUTINGINTERNET
  11. 11. 61%39%offlineonlineHow much of theworld’s populationis online?Source: ITU
  12. 12. 022.54567.590Americas Asia Pacific Middle East AfricaSource: ITU+28%+45%+55%+82%AmericasAsia-PacificMiddle EastAfricaWhere is the biggest growthin mobile broadband (2010 to 2013)?
  13. 13. 075000000015000000002250000000Americas Asia PacificTotal mobilebroadbandsubscriptions,2007 vs. 2013268MILLION2.1BILLIONin 2007in 2013Source: ITU
  14. 14. 2020The year Google predicts theentire world will be online.Source: CNN
  15. 15. 61% of the world will be comingonline for the first time soon using(mostly) cheap mobile devices.
  16. 16. Many of these users will intially bemobile-only.
  17. 17. “First order of business is gettingall of our content on mobile, in a formatthat’s readable, navigable, and searchable.”--@KarenMcGrane
  18. 18. SCREENS
  19. 19. Aakash Ubislate tablet$69 ($20 for students in India)Archos 35 Carbon smartphone$120Cheap devices and displays for browsing
  20. 20. Lower quality displays that display limited informationPebble smartwatch$150Fitbit Zip fitness data collector$60
  21. 21. In some objects, sensors + connectivity matter more than displayFitbit Ariatransmits weight to appParrot Flower Powertransmits plantdata to app
  22. 22. MULTI-DEVICEvs.RESPONSIVE
  23. 23. Dude, WTF? :(^
  24. 24. 6 basic screensizes* for 22 ofthe most populartablets1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 2046Screensiz.es
  25. 25. 1200 x 1920800 x 1280768 x 1280600 x 1024600 x 8001536 x 20461200x1920800x1280768x1280600x1024600x8001536x20466 basic screensizes* for 22 ofthe most populartabletsScreensiz.es
  26. 26. That’s only the tablets!
  27. 27. SEQUENTIAL+SIMULTANEOUSUSEusing more than one deviceusing more than one device at the same time
  28. 28. 98% used more than onedevice within 24 hours.Source: Google
  29. 29. 90% browsed sequentially:beginning a task on one deviceand finishing on another.Source: Google
  30. 30. 66% used more than onedevice at the same time.Source: Google
  31. 31. 66% used more than onedevice at the same time.81% if you alsoinclude televisions.Source: Google
  32. 32. 22% performedcomplementaryactivities.Source: GoogleFor simultaneous users,78% multi-tasked
  33. 33. MULTIPLEDEVICES&YOU
  34. 34. teehanlax.com: pixel density converter for handling images
  35. 35. PROTOTYPES
  36. 36. The primary purpose of a prototypeis to get to better, more useful work.REMEMBER!
  37. 37. The primary purpose of a prototypeis to get to better, more useful work.client educationbuy-in iterative buildingearly user testing visualizing content strategy
  38. 38. The primary purpose of a prototypeis to get to better, more useful work.IT’S CRAP!
  39. 39. “All our decisions should start fromcontent out, not canvas in.”--@Viljamis (Viljami Salminen)Read this: Valjami Salminen’s blog
  40. 40. Ask your clients to focus on typography,legibility, and real content in prototypes.
  41. 41. Styletil.es: style prototypes mStoner: our own in-browser version
  42. 42. Typecast.com: typography prototypes
  43. 43. Typecast.com: can also generate style guides
  44. 44. Seesparkbox.com: mobile-first content prototypewith an in-browser responsive style tile+
  45. 45. Uxpin.com: multi-device, in-browser prototypes
  46. 46. Adobe Edge Reflow: import PSDs, edit/add media queries, andexport CSS to the editor of your choiceJUNE17Coming
  47. 47. Foundation.zurb.com: responsive, front-end framework
  48. 48. TABLETSThe rise of the
  49. 49. Tablet traffic to the web surpassedsmartphone traffic in December 2012.Source: Adobe
  50. 50. All countries saw tablet traffic double(or more) in 2012.Source: Adobe
  51. 51. Users spend 54% more time on tabletsthan they do on smartphones.Source: Adobe
  52. 52. Users view 70% more pages on tabletsthan they do on smartphones.Source: Adobe
  53. 53. Tablets are predicted to outpace desktopand laptop combined sales around 2015.Source: Gartner
  54. 54. “New rule: every desktop designhas to go finger-friendly.”--Josh Clark (@globalmoxie)Read this: Global Moxie blog
  55. 55. To build for the future, we need to makeour responsive designs more tablet-friendly.
  56. 56. Places primary navigation in easy range of fingers, on the sides or bottom.Example: Google +
  57. 57. Adjust designs for height to accommodate the dual display nature of tablets.Read this: Luke W’s blog
  58. 58. uExample: Apple iPhoneAdjust designs for height to accommodate the dual display nature of tablets.
  59. 59. 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.
  60. 60. Consider side-swipe navigation where appropriate.Example: Yale School of Management
  61. 61. Anchor content to the side of the browser (not just to the side of the body).Example: Quartz
  62. 62. Bonus round: use transitional interfaces (carefully) toaugment the touch experience and add affordances.Read this: Pasquale D’Silva on Medium
  63. 63. Designing for speed
  64. 64. SKEUOMORPHICFLATTHEYAREBOTHTERRIBLE.
  65. 65. Talk about speed and relevance, not style.
  66. 66. Responsive design requires differentlayouts for different breakpoints.webster.edu
  67. 67. Layout means more design anddevelopment time per breakpoint...webster.edu
  68. 68. ...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
  69. 69. Simpler design makes it easier to designacross layouts, devices, and browsers.
  70. 70. Page weight has a linear, negative impacton conversions, page views, bouncerate, and returning visitors.Source: Web Performance Today
  71. 71. Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.Source: Web Site Optimization
  72. 72. Speed touches nearly every measurablemetric of a web project.
  73. 73. That means speed is everyone’s problem.
  74. 74. What can you do?
  75. 75. 1. Learn how to check pageweight in your browser.
  76. 76. Reading the nuances of the inspector:slideshare.net/dmolsenwvuCheck out his blog at dmolsen.com.
  77. 77. 2. Minimize the number of custom fontsand external widgets per page.
  78. 78. 3. Work on a solution to the responsiveimages problem on the CMS level.
  79. 79. 4. Include designers and developers whounderstand web performancefrom the beginning.
  80. 80. GOOD+FASTEXAMPLES
  81. 81. nd.edu 23 network requests / 333 KB mobile size / 2.8 MB desktop size
  82. 82. ct.edu 21 network requests / 410 KB mobile size / 420 KB desktop size
  83. 83. uvm.edu 38 network requests / 451 KB mobile size / 753 KB desktop size
  84. 84. 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.
  85. 85. Further reading on web performance:www.stevesouders.comwww.igvita.comwww.dmolsen.com
  86. 86. USABILITY
  87. 87. “If you aren’t talking to your users and lettingthem have a say, you aren’t doing UX.”--@TimothyWhalen
  88. 88. What is a minimum viable strategy forpostdesktop usability testing?
  89. 89. 1. If you can, always user testyour prototypes AND your alpha site.
  90. 90. 2. Perform critical path testing for eachbreakpoint where layout changes.mobile tablet desktop
  91. 91. 3. Test users on different devices toconfirm input types work intuitively—a minimum is mouse & trackpad vs. touch.
  92. 92. 4. Always do usability tests specificallyfor the mobile breakpoint.
  93. 93. Two things that need to be impossibleto miss at any mobile breakpoint:
  94. 94. Two things that need to be impossibleto miss at any mobile breakpoint:
  95. 95. 5. Test people ontheir own devices.
  96. 96. Source: MailChimpHack-ish:Laptop huggingto test mobile usersremotely
  97. 97. 1. User joins gotomeeting orother screen sharing softwarevia laptop.2. User shares laptop camera.3. User “reverse hugs” laptop,pointing laptop camera atmobile device
  98. 98. Design for speed and simplicity.
  99. 99. @DougGapinskimstoner.comresponsive.lyTHANKS

×