screen and context: usability in the postdesktop world
DESCRIPTION
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.TRANSCRIPT
Screen and Contextby Doug Gapinski
chrome.com/racer
SHARE#heweb13 #uad8
STEALslideshare.net/thedougco
STEALslideshare.net/thedougco
Context
Screens
Planning and Design
Speed
Usability Testing
as coined by Mark Weiser of Xerox PARC
UBIQUITOUS COMPUTING
UBIQUITOUS COMPUTINGINTERNET
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
Where is the biggest growth in mobile broadband (2010 to 2013)?
Source: ITU
0
750000000
1500000000
2250000000
3000000000
Americas Asia Pacific
Total mobile broadband subscriptions,2007 vs. 2013
268 MILLION
2.1 BILLION
in 2007
in 2013
Source: ITU
2020The 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’tproviding users withsites 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 browsing
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 Ariatransmits weight to app
Parrot Flower Powertransmits plant
data to app
MULTI-DEVICE vs. RESPONSIVE
Dude, WTF? :(^
SEQUENTIAL + SIMULTANEOUS USEusing 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% performedcomplementary activities.
For simultaneous users, 78% multi-tasked
Source: Google
MULTIPLE DEVICES & 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 user testing visualizing content strategy
The primary purpose of a prototype is 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’s blog
Ask your clients to focus on typography, legibility, and real content in prototypes.
Styletil.es: style prototypes mStoner: our own in-browser version
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 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: 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 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
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 researchshowed the average
fingertip is8 to 10 mm.
~7 to 9 mmminimum
recommendedbased on
manufacturer.
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: Pasquale D’Silva on Medium
SKEUOMORPHIC
FLAT
THEY ARE BOTH TERRIBLE.
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+• 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
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 Performance Today
Tests at Amazon showed that every 100 msincrease 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 + FAST EXAMPLES
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 Education RWD Directory at weedygarden.net.
Further reading on web performance:www.stevesouders.com
www.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 test your 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 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 ontheir own devices.
Design for speed and simplicity.
