Upload
doug-gapinski
View
105
Download
2
Tags:
Embed Size (px)
DESCRIPTION
We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information. This webinar focused on how new realities are changing web design, web design process, and usability standards. Session Outline • Ubiquitous computing, ubiquitous internet • Sequential and simultaneous browsing • The rise of the tablet • Flat design for a lumpy web • Speed matters • Usability strategies
Citation preview
by Doug
Gapinski
Speed &Simplicity
chrome.com/racer
@DougGapinski mstoner.com responsive.ly
ME
SHARE#mstoner @DougGapinski
mstonerblog.com
STEAL
STEALmstonerblog.com
Ubiquitous internet
Planning
Design
Tablets & Touch
Speed
Usability
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
source: ITU
+28%+45%
+55%
+82%
Americas
Asia-Pacific
Middle East
Africa
Where is the biggest growth in mobile broadband?
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
What are some of the realities of ubiquitous internet?
SCREENS
“The technology required for ubiquitous computing: cheap, low-power computers that
include equally convenient displays...”
--Mark Weiser of Xerox PARC
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
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
1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
6 basic screen sizes* for 22 of
the most popular tablets
Screensiz.es
That’s only the tablets!
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.
source: Google
For simultaneous users, 78% multi-tasked
for different screen sizes
PLANNING
teehanlax.com: pixel density converter for handling images
PROTOTYPES
The primary purpose of a prototype is to get to better, more useful work.
REMEMBER!
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!
Ask your clients to focus on thereading experience and typography
as the most important design choice.
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
JUNE 17Coming
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 are predicted to outpace desktop and laptop combined sales around 2015.
source: Gartner
“New rule: every desktop design has to gofinger-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
Designing for speed
SKEUOMORPHIC
FLAT
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.
Four things everyone on a web teamcan do to help with web performance.
1. Learn how to check page weight in your browser.
2. Work to devise a solution the responsive images problem on the CMS level.
3. Minimize the number of custom fonts and external widgets per page.
4. Hire and talk to competent developers.
GOOD + FAST EXAMPLES
nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
uvm.edu 38 page 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.
Keep the user at the heart of our work.”
--@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 for the mobile breakpoint.
Gotomeeting.com: make user the presenter, enable webcam, and record.
Pros:Works remotely
Cons:Doesn’t
work for mobile
Hack: Ask your desktop users
to make the browser mobile-sized
This hack exposessome design flaws, butdoes not offer insight
about touch input.
uxrecorder.com: make user the presenter, enable webcam, and record.
Pros:Does mobile and
tablets great!
Cons:Does not work remotely
Source: MailChimp
Hack-ish: Laptop hugging
to test mobile usersremotely
1. User joins gotomeeting orother screen sharing software
via laptop.
2. User shares laptop camera.
3. User “reverse hugs” laptop, pointing laptop camera at
mobile device
To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.
@DougGapinski mstoner.com responsive.ly
THANKS