99
by Doug Gapinski Speed & Simplicity

Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 1: Speed and Simplicity: Design and Usability for Multi-device Websites

by Doug

Gapinski

Speed &Simplicity

Page 2: Speed and Simplicity: Design and Usability for Multi-device Websites

chrome.com/racer

Page 3: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 4: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 5: Speed and Simplicity: Design and Usability for Multi-device Websites

@DougGapinski mstoner.com responsive.ly

ME

Page 6: Speed and Simplicity: Design and Usability for Multi-device Websites

SHARE#mstoner @DougGapinski

Page 7: Speed and Simplicity: Design and Usability for Multi-device Websites

mstonerblog.com

STEAL

Page 8: Speed and Simplicity: Design and Usability for Multi-device Websites

STEALmstonerblog.com

Page 9: Speed and Simplicity: Design and Usability for Multi-device Websites

Ubiquitous internet

Planning

Design

Tablets & Touch

Speed

Usability

Page 10: Speed and Simplicity: Design and Usability for Multi-device Websites

as coined by Mark Weiser of Xerox PARC

UBIQUITOUS COMPUTING

Page 11: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 12: Speed and Simplicity: Design and Usability for Multi-device Websites

UBIQUITOUS COMPUTINGINTERNET

Page 14: Speed and Simplicity: Design and Usability for Multi-device Websites

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?

Page 15: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 16: Speed and Simplicity: Design and Usability for Multi-device Websites

2020The year Google predicts the

entire world will be online.

source: CNN

Page 17: Speed and Simplicity: Design and Usability for Multi-device Websites

What are some of the realities of ubiquitous internet?

Page 18: Speed and Simplicity: Design and Usability for Multi-device Websites

SCREENS

Page 19: Speed and Simplicity: Design and Usability for Multi-device Websites

“The technology required for ubiquitous computing: cheap, low-power computers that

include equally convenient displays...”

--Mark Weiser of Xerox PARC

Page 20: Speed and Simplicity: Design and Usability for Multi-device Websites

Aakash Ubislate tablet$69 ($20 for students in India)

Archos 35 Carbon smartphone$120

Cheap devices and displays for browsing

Page 21: Speed and Simplicity: Design and Usability for Multi-device Websites

Lower quality displays that display limited information

Pebble smartwatch $150

Fitbit Zip fitness data collector$60

Page 22: Speed and Simplicity: Design and Usability for Multi-device Websites

In some objects, sensors + connectivity matter more than display

Fitbit Ariatransmits weight to app

Parrot Flower Powertransmits plant

data to app

Page 23: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 24: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 25: Speed and Simplicity: Design and Usability for Multi-device Websites

That’s only the tablets!

Page 26: Speed and Simplicity: Design and Usability for Multi-device Websites

SEQUENTIAL + SIMULTANEOUS USEusing more than one device

using more than one device at the same time

Page 32: Speed and Simplicity: Design and Usability for Multi-device Websites

for different screen sizes

PLANNING

Page 33: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 34: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 35: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 36: Speed and Simplicity: Design and Usability for Multi-device Websites

teehanlax.com: pixel density converter for handling images

Page 37: Speed and Simplicity: Design and Usability for Multi-device Websites

PROTOTYPES

Page 38: Speed and Simplicity: Design and Usability for Multi-device Websites

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

REMEMBER!

Page 39: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 40: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 41: Speed and Simplicity: Design and Usability for Multi-device Websites

Ask your clients to focus on thereading experience and typography

as the most important design choice.

Page 42: Speed and Simplicity: Design and Usability for Multi-device Websites

styletil.es: style prototypes our own in-browser version

Page 43: Speed and Simplicity: Design and Usability for Multi-device Websites

typecast.com: typography prototypes

Page 44: Speed and Simplicity: Design and Usability for Multi-device Websites

typecast.com: can also generate style guides

Page 46: Speed and Simplicity: Design and Usability for Multi-device Websites

uxpin.com: multi-device, in-browser prototypes

Page 47: Speed and Simplicity: Design and Usability for Multi-device Websites

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

JUNE 17Coming

Page 48: Speed and Simplicity: Design and Usability for Multi-device Websites

foundation.zurb.com: responsive, front-end framework

Page 49: Speed and Simplicity: Design and Usability for Multi-device Websites

TABLETS

The rise of the

Page 54: Speed and Simplicity: Design and Usability for Multi-device Websites

Tablets are predicted to outpace desktop and laptop combined sales around 2015.

source: Gartner

Page 55: Speed and Simplicity: Design and Usability for Multi-device Websites

“New rule: every desktop design has to gofinger-friendly.” --Josh Clark (@globalmoxie)

read this: Global Moxie blog

Page 56: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 57: Speed and Simplicity: Design and Usability for Multi-device Websites

Places primary navigation in easy range of fingers, on the sides or bottom.

Example: Google +

Page 58: Speed and Simplicity: Design and Usability for Multi-device Websites

Adjust designs for height to accommodate the dual display nature of tablets.

read this: Luke W’s blog

Page 59: Speed and Simplicity: Design and Usability for Multi-device Websites

u

Example: Apple iPhone

Adjust designs for height to accommodate the dual display nature of tablets.

Page 60: Speed and Simplicity: Design and Usability for Multi-device Websites

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.

Page 61: Speed and Simplicity: Design and Usability for Multi-device Websites

Consider side-swipe navigation where appropriate.

Example: Yale School of Management

Page 62: Speed and Simplicity: Design and Usability for Multi-device Websites

Anchor content to the side of the browser (not just to the side of the body).

Example: Quartz

Page 63: Speed and Simplicity: Design and Usability for Multi-device Websites

Designing for speed

Page 64: Speed and Simplicity: Design and Usability for Multi-device Websites

SKEUOMORPHIC

FLAT

Page 65: Speed and Simplicity: Design and Usability for Multi-device Websites

Responsive design requires different layouts for different breakpoints.

webster.edu

Page 66: Speed and Simplicity: Design and Usability for Multi-device Websites

Layout means more design and development time per breakpoint...

webster.edu

Page 67: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 68: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 69: Speed and Simplicity: Design and Usability for Multi-device Websites

Page weight has a linear, negative impact on conversions, page views, bounce

rate, and returning visitors.

Source: Web Performance Today

Page 70: Speed and Simplicity: Design and Usability for Multi-device Websites

Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.

Source: Web Site Optimization

Page 71: Speed and Simplicity: Design and Usability for Multi-device Websites

Speed touches nearly every measurable metric of a web project.

Page 72: Speed and Simplicity: Design and Usability for Multi-device Websites

That means speed is everyone’s problem.

Page 73: Speed and Simplicity: Design and Usability for Multi-device Websites

Four things everyone on a web teamcan do to help with web performance.

Page 74: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 75: Speed and Simplicity: Design and Usability for Multi-device Websites
Page 76: Speed and Simplicity: Design and Usability for Multi-device Websites

2. Work to devise a solution the responsive images problem on the CMS level.

Page 77: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 78: Speed and Simplicity: Design and Usability for Multi-device Websites

4. Hire and talk to competent developers.

Page 79: Speed and Simplicity: Design and Usability for Multi-device Websites

GOOD + FAST EXAMPLES

Page 80: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 81: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 82: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 83: Speed and Simplicity: Design and Usability for Multi-device Websites

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.

Page 84: Speed and Simplicity: Design and Usability for Multi-device Websites

Further reading on web performance:www.stevesouders.com

www.igvita.comwww.dmolsen.com

Page 85: Speed and Simplicity: Design and Usability for Multi-device Websites

USABILITY

Page 86: Speed and Simplicity: Design and Usability for Multi-device Websites

“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

Page 87: Speed and Simplicity: Design and Usability for Multi-device Websites

What is a minimum viable strategy forpostdesktop usability testing?

Page 88: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 89: Speed and Simplicity: Design and Usability for Multi-device Websites

2. Perform critical path testing for eachbreakpoint where layout changes.

mobile tablet desktop

Page 90: Speed and Simplicity: Design and Usability for Multi-device Websites

3. Test users on different devices toconfirm input types work intuitively—

a minimum is mouse & trackpad vs. touch.

Page 91: Speed and Simplicity: Design and Usability for Multi-device Websites

4. Always do usability tests for the mobile breakpoint.

Page 92: Speed and Simplicity: Design and Usability for Multi-device Websites

Gotomeeting.com: make user the presenter, enable webcam, and record.

Page 93: Speed and Simplicity: Design and Usability for Multi-device Websites

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.

Page 94: Speed and Simplicity: Design and Usability for Multi-device Websites

uxrecorder.com: make user the presenter, enable webcam, and record.

Page 95: Speed and Simplicity: Design and Usability for Multi-device Websites

Pros:Does mobile and

tablets great!

Cons:Does not work remotely

Page 97: Speed and Simplicity: Design and Usability for Multi-device Websites

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

Page 98: Speed and Simplicity: Design and Usability for Multi-device Websites

To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.

Page 99: Speed and Simplicity: Design and Usability for Multi-device Websites

@DougGapinski mstoner.com responsive.ly

THANKS