Postdesktop Usability
by Doug Gapinski
chrome.com/racer
Debunk this!
mStoner.com
@DougGapinski
ME
SHARE
#heweb13 #uad8
STEAL
slideshare.net/thedougco
STEAL
slideshare.net/thedougco
Context
Screens
Planning and Design
Speed
Usability Testing
as coined by Mark Weiser of Xerox PARC
UBIQUITOUSCOMPUTING
UBIQUITOUSCOMPUTINGINTERNET
61%
39%
offline
online
How much of the
world’s population
is online?
Source: ITU
0
22.5
45
67.5
90
Americas Asia Pacific Middle East Africa
+28%
+45%
+55%
+82%
Americas
Asia-Pacific
Middle East
Africa
Whe...
0
750000000
1500000000
2250000000
Americas Asia Pacific
Total mobile
broadband
subscriptions,
2007 vs. 2013
268MILLION
2.1...
2020
The year Google predicts the
entire world will be online.
Source: CNN
61% of the world will be coming
online for the first time soon using
(mostly) cheap mobile devices.
Many of these users will intially be
mobile-only.
If you aren’t
providing users with
sites optimized for
mobile use, it’s time
to catch up.
SCREENS
Aakash Ubislate tablet
$69 ($20 for students in India)
Archos 35 Carbon smartphone
$120
Cheap devices and displays for bro...
Lower quality displays that display limited information
Pebble smartwatch
$150
Fitbit Zip fitness data collector
$60
In some objects, sensors + connectivity matter more than display
Fitbit Aria
transmits weight to app
Parrot Flower Power
t...
MULTI-DEVICEvs.RESPONSIVE
Dude, WTF? :(^
SEQUENTIAL+SIMULTANEOUSUSE
using more than one device
using more than one device at the same time
98% used more than one
device within 24 hours.
Source: Google
90% browsed sequentially:
beginning a task on one device
and finishing on another.
Source: Google
66% used more than one
device at the same time.
Source: Google
66% used more than one
device at the same time.
81% if you also
include televisions.
Source: Google
22% performed
complementary
activities.
For simultaneous users,
78% multi-tasked
Source: Google
MULTIPLEDEVICES&YOU
teehanlax.com: pixel density converter for handling images
PROTOTYPES
The primary purpose of a prototype
is to get to better, more useful work.
client educationbuy-in iterative building
early ...
The primary purpose of a prototype
is to get to better, more useful work.
IT’S CRAP!
“All our decisions should start from
content out, not canvas in.”
--@Viljamis (Viljami Salminen)
Read this: Valjami Salmin...
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 prototype
with an in-browser responsive style tile
+
Adobe Edge Reflow: import PSDs, edit/add media queries, and
export CSS to the editor of your choice
Foundation.zurb.com: responsive, front-end framework
pattern-lab.info: static site generator, pattern
starter kit, design and presentation system
TABLETS
The rise of the
Tablet traffic to the web surpassed
smartphone traffic in December 2012.
Source: Adobe
All countries saw tablet traffic double
(or more) in 2012.
Source: Adobe
Users spend 54% more time on tablets
than they do on smartphones.
Source: Adobe
Users view 70% more pages on tablets
than they do on smartphones.
Source: Adobe
Tablets: 14.6%
Smartphones: 65.1%
Desktops: 8.6%
Laptops: 11.6%
Predicted market share for Q4 2013
Source: IDC
“New rule: every desktop design
has to go finger-friendly.”
--Josh Clark (@globalmoxie)
Read this: Global Moxie blog
To build for the future, we need to make
our 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
u
Example: Apple iPhone
Adjust designs for height to accommodate the dual display nature of tablets.
Use bigger touch target areas to accommodate finger / thumb input.
Example: Good.is
MIT research
showed the average
fingerti...
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) to
augment the touch experience and add affordances.
Read this: Pasqua...
SKEUO
MOR
PHIC
FLAT
THEYAREBOTHTERRIBLE.
Talk about speed, not style.
Designing for speed
Responsive design requires different
layouts for different breakpoints.
webster.edu
Layout means more design and
development time per breakpoint...
webster.edu
...and multiply the breakpoints times
the browsers / devices you’re testing for.
Baseline browsers we test:
• IE 8+
• Fire...
Simpler design makes it easier to design
across layouts, devices, and browsers.
Page weight has a linear, negative impact
on conversions, page views, bounce
rate, and returning visitors.
Source: Web Per...
Tests at Amazon showed that every 100 ms
increase in load time decreased sales by 1%.
Source: Web Site Optimization
Speed touches nearly every measurable
metric of a web project.
That means speed is everyone’s problem.
What can you do?
1. Learn how to check page
weight in your browser.
Reading the nuances of the inspector:
slideshare.net/dmolsenwvu
Check out his blog at dmolsen.com.
2. Minimize the number of custom fonts
and external widgets per page.
3. Include designers and developers who
understand web performance
from 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 Hig...
Further reading on web performance:
www.stevesouders.com
www.igvita.com
www.dmolsen.com
USABILITY
“If you aren’t talking to your users and letting
them have a say, you aren’t doing UX.”
--@TimothyWhalen
What is a minimum viable strategy for
postdesktop usability testing?
1. If you can, always user test
your prototypes AND your alpha site.
2. Perform critical path testing for each
breakpoint where layout changes.
mobile tablet desktop
3. Test users on different devices to
confirm input types work intuitively—
a minimum is mouse & trackpad vs. touch.
4. Always do usability tests specifically
for the mobile breakpoint.
Two things that need to be impossible
to miss at any mobile breakpoint:
Two things that need to be impossible
to miss at any mobile breakpoint:
5. Test people on
their own devices.
Design for speed and simplicity.
@DougGapinski
mstoner.com
THANKS
Postdesktop Usability
Postdesktop Usability
Postdesktop Usability
Postdesktop Usability
Postdesktop Usability
Postdesktop Usability
Upcoming SlideShare
Loading in …5
×

Postdesktop Usability

1,222
-1

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. As we enter 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 session will examine how screen and input types are changing:
• multi-screen design
• prototyping
• new input types
• usability testing

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

No Downloads
Views
Total Views
1,222
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Postdesktop Usability

  1. 1. Postdesktop Usability by Doug Gapinski
  2. 2. chrome.com/racer
  3. 3. Debunk this! mStoner.com
  4. 4. @DougGapinski ME
  5. 5. SHARE #heweb13 #uad8
  6. 6. STEAL slideshare.net/thedougco
  7. 7. STEAL slideshare.net/thedougco
  8. 8. Context Screens Planning and Design Speed Usability Testing
  9. 9. as coined by Mark Weiser of Xerox PARC UBIQUITOUSCOMPUTING
  10. 10. UBIQUITOUSCOMPUTINGINTERNET
  11. 11. 61% 39% offline online How much of the world’s population is online? Source: ITU
  12. 12. 0 22.5 45 67.5 90 Americas Asia Pacific Middle East Africa +28% +45% +55% +82% Americas Asia-Pacific Middle East Africa Where is the biggest growth in mobile broadband (2010 to 2013)? Source: ITU
  13. 13. 0 750000000 1500000000 2250000000 Americas Asia Pacific Total mobile broadband subscriptions, 2007 vs. 2013 268MILLION 2.1BILLION in 2007 in 2013 Source: ITU
  14. 14. 2020 The year Google predicts the entire world will be online. Source: CNN
  15. 15. 61% of the world will be coming online for the first time soon using (mostly) cheap mobile devices.
  16. 16. Many of these users will intially be mobile-only.
  17. 17. If you aren’t providing users with sites optimized for mobile use, it’s time to catch up.
  18. 18. SCREENS
  19. 19. Aakash Ubislate tablet $69 ($20 for students in India) Archos 35 Carbon smartphone $120 Cheap devices and displays for browsing
  20. 20. Lower quality displays that display limited information Pebble smartwatch $150 Fitbit Zip fitness data collector $60
  21. 21. In some objects, sensors + connectivity matter more than display Fitbit Aria transmits weight to app Parrot Flower Power transmits plant data to app
  22. 22. MULTI-DEVICEvs.RESPONSIVE
  23. 23. Dude, WTF? :(^
  24. 24. SEQUENTIAL+SIMULTANEOUSUSE using more than one device using more than one device at the same time
  25. 25. 98% used more than one device within 24 hours. Source: Google
  26. 26. 90% browsed sequentially: beginning a task on one device and finishing on another. Source: Google
  27. 27. 66% used more than one device at the same time. Source: Google
  28. 28. 66% used more than one device at the same time. 81% if you also include televisions. Source: Google
  29. 29. 22% performed complementary activities. For simultaneous users, 78% multi-tasked Source: Google
  30. 30. MULTIPLEDEVICES&YOU
  31. 31. teehanlax.com: pixel density converter for handling images
  32. 32. PROTOTYPES
  33. 33. 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
  34. 34. The primary purpose of a prototype is to get to better, more useful work. IT’S CRAP!
  35. 35. “All our decisions should start from content out, not canvas in.” --@Viljamis (Viljami Salminen) Read this: Valjami Salminen’s blog
  36. 36. Ask your clients to focus on typography, legibility, and real content in prototypes.
  37. 37. Styletil.es: style prototypes mStoner: our own in-browser version
  38. 38. Typecast.com: typography prototypes
  39. 39. Typecast.com: can also generate style guides
  40. 40. Seesparkbox.com: mobile-first content prototype with an in-browser responsive style tile +
  41. 41. Adobe Edge Reflow: import PSDs, edit/add media queries, and export CSS to the editor of your choice
  42. 42. Foundation.zurb.com: responsive, front-end framework
  43. 43. pattern-lab.info: static site generator, pattern starter kit, design and presentation system
  44. 44. TABLETS The rise of the
  45. 45. Tablet traffic to the web surpassed smartphone traffic in December 2012. Source: Adobe
  46. 46. All countries saw tablet traffic double (or more) in 2012. Source: Adobe
  47. 47. Users spend 54% more time on tablets than they do on smartphones. Source: Adobe
  48. 48. Users view 70% more pages on tablets than they do on smartphones. Source: Adobe
  49. 49. Tablets: 14.6% Smartphones: 65.1% Desktops: 8.6% Laptops: 11.6% Predicted market share for Q4 2013 Source: IDC
  50. 50. “New rule: every desktop design has to go finger-friendly.” --Josh Clark (@globalmoxie) Read this: Global Moxie blog
  51. 51. To build for the future, we need to make our responsive designs more tablet-friendly.
  52. 52. Places primary navigation in easy range of fingers, on the sides or bottom. Example: Google +
  53. 53. Adjust designs for height to accommodate the dual display nature of tablets. Read this: Luke W’s blog
  54. 54. u Example: Apple iPhone Adjust designs for height to accommodate the dual display nature of tablets.
  55. 55. 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.
  56. 56. Consider side-swipe navigation where appropriate. Example: Yale School of Management
  57. 57. Anchor content to the side of the browser (not just to the side of the body). Example: Quartz
  58. 58. Bonus round: use transitional interfaces (carefully) to augment the touch experience and add affordances. Read this: Pasquale D’Silva on Medium
  59. 59. SKEUO MOR PHIC FLAT THEYAREBOTHTERRIBLE.
  60. 60. Talk about speed, not style.
  61. 61. Designing for speed
  62. 62. Responsive design requires different layouts for different breakpoints. webster.edu
  63. 63. Layout means more design and development time per breakpoint... webster.edu
  64. 64. ...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
  65. 65. Simpler design makes it easier to design across layouts, devices, and browsers.
  66. 66. Page weight has a linear, negative impact on conversions, page views, bounce rate, and returning visitors. Source: Web Performance Today
  67. 67. Tests at Amazon showed that every 100 ms increase in load time decreased sales by 1%. Source: Web Site Optimization
  68. 68. Speed touches nearly every measurable metric of a web project.
  69. 69. That means speed is everyone’s problem.
  70. 70. What can you do?
  71. 71. 1. Learn how to check page weight in your browser.
  72. 72. Reading the nuances of the inspector: slideshare.net/dmolsenwvu Check out his blog at dmolsen.com.
  73. 73. 2. Minimize the number of custom fonts and external widgets per page.
  74. 74. 3. Include designers and developers who understand web performance from the beginning.
  75. 75. GOOD+FASTEXAMPLES
  76. 76. nd.edu 23 network requests / 333 KB mobile size / 2.8 MB desktop size
  77. 77. ct.edu 21 network requests / 410 KB mobile size / 420 KB desktop size
  78. 78. uvm.edu 38 network requests / 451 KB mobile size / 753 KB desktop size
  79. 79. 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.
  80. 80. Further reading on web performance: www.stevesouders.com www.igvita.com www.dmolsen.com
  81. 81. USABILITY
  82. 82. “If you aren’t talking to your users and letting them have a say, you aren’t doing UX.” --@TimothyWhalen
  83. 83. What is a minimum viable strategy for postdesktop usability testing?
  84. 84. 1. If you can, always user test your prototypes AND your alpha site.
  85. 85. 2. Perform critical path testing for each breakpoint where layout changes. mobile tablet desktop
  86. 86. 3. Test users on different devices to confirm input types work intuitively— a minimum is mouse & trackpad vs. touch.
  87. 87. 4. Always do usability tests specifically for the mobile breakpoint.
  88. 88. Two things that need to be impossible to miss at any mobile breakpoint:
  89. 89. Two things that need to be impossible to miss at any mobile breakpoint:
  90. 90. 5. Test people on their own devices.
  91. 91. Design for speed and simplicity.
  92. 92. @DougGapinski mstoner.com THANKS

×