Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Screen and Context: Usability in the Postdesktop World

256
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 …

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
256
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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