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

1. Screen and Context
by Doug Gapinski

2. chrome.com/racer

4. Debunk this!
mStoner.com

5. @DougGapinski mstoner.com responsive.ly
ME

6. SHARE
#psuweb13 @DougGapinski

7. STEAL
slideshare.net/thedougco

8. STEAL
slideshare.net/thedougco

9. Context
Screens
Planning and Design
Speed
Usability Testing

10. as coined by Mark Weiser of Xerox PARC
UBIQUITOUSCOMPUTING

12. UBIQUITOUSCOMPUTINGINTERNET

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 (2010 to 2013)?

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. “First order of business is getting
all of our content on mobile, in a format
that’s readable, navigable, and searchable.”
--@KarenMcGrane

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

24. MULTI-DEVICEvs.RESPONSIVE

25. Dude, WTF? :(^

26. 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

27. 1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
1200x1920
800x1280
768x1280
600x1024
600x800
1536x2046
6 basic screen
sizes* for 22 of
the most popular
tablets
Screensiz.es

28. That’s only the tablets!

29. SEQUENTIAL+SIMULTANEOUSUSE
using more than one device
using more than one device at the same time

30. 98% used more than one
device within 24 hours.
Source: Google

31. 90% browsed sequentially:
beginning a task on one device
and finishing on another.
Source: Google

32. 66% used more than one
device at the same time.
Source: Google

33. 66% used more than one
device at the same time.
81% if you also
include televisions.
Source: Google

34. 22% performed
complementary
activities.
Source: Google
For simultaneous users,
78% multi-tasked

35. MULTIPLEDEVICES&YOU

39. teehanlax.com: pixel density converter for handling images

40. PROTOTYPES

41. The primary purpose of a prototype
is to get to better, more useful work.
REMEMBER!

42. 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

43. The primary purpose of a prototype
is to get to better, more useful work.
IT’S CRAP!

44. “All our decisions should start from
content out, not canvas in.”
--@Viljamis (Viljami Salminen)
Read this: Valjami Salminen’s blog

45. Ask your clients to focus on typography,
legibility, and real content in prototypes.

46. Styletil.es: style prototypes mStoner: our own in-browser version

47. Typecast.com: typography prototypes

48. Typecast.com: can also generate style guides

49. Seesparkbox.com: mobile-first content prototype
with an in-browser responsive style tile
+

50. Uxpin.com: multi-device, in-browser prototypes

51. Adobe Edge Reflow: import PSDs, edit/add media queries, and
export CSS to the editor of your choice
JUNE17
Coming

52. Foundation.zurb.com: responsive, front-end framework

53. TABLETS
The rise of the

54. Tablet traffic to the web surpassed
smartphone traffic in December 2012.
Source: Adobe

55. All countries saw tablet traffic double
(or more) in 2012.
Source: Adobe

56. Users spend 54% more time on tablets
than they do on smartphones.
Source: Adobe

57. Users view 70% more pages on tablets
than they do on smartphones.
Source: Adobe

58. Tablets are predicted to outpace desktop
and laptop combined sales around 2015.
Source: Gartner

59. “New rule: every desktop design
has to go finger-friendly.”
--Josh Clark (@globalmoxie)
Read this: Global Moxie blog

60. To build for the future, we need to make
our responsive designs more tablet-friendly.

61. Places primary navigation in easy range of fingers, on the sides or bottom.
Example: Google +

62. Adjust designs for height to accommodate the dual display nature of tablets.
Read this: Luke W’s blog

63. u
Example: Apple iPhone
Adjust designs for height to accommodate the dual display nature of tablets.

64. 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.

65. Consider side-swipe navigation where appropriate.
Example: Yale School of Management

66. Anchor content to the side of the browser (not just to the side of the body).
Example: Quartz

67. Bonus round: use transitional interfaces (carefully) to
augment the touch experience and add affordances.
Read this: Pasquale D’Silva on Medium

68. Designing for speed

69. SKEUO
MOR
PHIC
FLAT
THEYAREBOTHTERRIBLE.

70. Talk about speed and relevance, not style.

71. Responsive design requires different
layouts for different breakpoints.
webster.edu

72. Layout means more design and
development time per breakpoint...
webster.edu

73. ...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

74. Simpler design makes it easier to design
across layouts, devices, and browsers.

75. Page weight has a linear, negative impact
on conversions, page views, bounce
rate, and returning visitors.
Source: Web Performance Today

76. Tests at Amazon showed that every 100 ms
increase in load time decreased sales by 1%.
Source: Web Site Optimization

77. Speed touches nearly every measurable
metric of a web project.

78. That means speed is everyone’s problem.

79. What can you do?

80. 1. Learn how to check page
weight in your browser.

82. Reading the nuances of the inspector:
slideshare.net/dmolsenwvu
Check out his blog at dmolsen.com.

83. 2. Minimize the number of custom fonts
and external widgets per page.

84. 3. Work on a solution to the responsive
images problem on the CMS level.

85. 4. Include designers and developers who
understand web performance
from the beginning.

86. GOOD+FASTEXAMPLES

87. nd.edu 23 network requests / 333 KB mobile size / 2.8 MB desktop size

88. ct.edu 21 network requests / 410 KB mobile size / 420 KB desktop size

89. uvm.edu 38 network requests / 451 KB mobile size / 753 KB desktop size

90. 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.

91. Further reading on web performance:
www.stevesouders.com
www.igvita.com
www.dmolsen.com

92. USABILITY

93. “If you aren’t talking to your users and letting
them have a say, you aren’t doing UX.”
--@TimothyWhalen

94. What is a minimum viable strategy for
postdesktop usability testing?

95. 1. If you can, always user test
your prototypes AND your alpha site.

96. 2. Perform critical path testing for each
breakpoint where layout changes.
mobile tablet desktop

97. 3. Test users on different devices to
confirm input types work intuitively—
a minimum is mouse & trackpad vs. touch.

98. 4. Always do usability tests specifically
for the mobile breakpoint.

99. Two things that need to be impossible
to miss at any mobile breakpoint:

100. Two things that need to be impossible
to miss at any mobile breakpoint:

101. 5. Test people on
their own devices.

102. Source: MailChimp
Hack-ish:
Laptop hugging
to test mobile users
remotely

103. 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

104. Design for speed and simplicity.

105. @DougGapinski
mstoner.com
responsive.ly
THANKS