Top Banner
DESIGNING FOR THE MOBILE WEB Dan Seward 2011 1
22
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Dan seward peak usability mobile slides for squiz

DESIGNING FOR THE MOBILE WEB

Dan Seward 2011

1  

Page 2: Dan seward peak usability mobile slides for squiz

90% of everything is crap.

2  

STURGEON’S LAW

Page 3: Dan seward peak usability mobile slides for squiz

TODAY, YOU GET:

Mobile WEB usability:

•  Case for mobile •  Platform selection •  Mobile web mindset •  Design tips

3  

Page 4: Dan seward peak usability mobile slides for squiz

DO I WANT TO GO MOBILE?

•  Probably •  But maybe you don’t…

… but you probably do.

50%+ Aussie smartphone penetration 20

15

477,000,000 new smartphones Asia-Pacific

computerworld.com.au

Page 5: Dan seward peak usability mobile slides for squiz

DESIGN FOR… SOMETHING?

Page 6: Dan seward peak usability mobile slides for squiz

FIRST, RESEARCH

Start here (or get here)

fluff

core value

Page 7: Dan seward peak usability mobile slides for squiz

MOBILE MINDSET

Environments + Burstiness

Bed

Breakfast

Bus

Sidewalk

Park bench

Work desk

Sofa

Laundromat Car (passenger of course)

At the Gabba

…etc

Page 8: Dan seward peak usability mobile slides for squiz

THEN, BUILD

don’t panic.

focused

basic

clean

Page 9: Dan seward peak usability mobile slides for squiz

PRIMARY USE PATH

I just want some pants.

Page 10: Dan seward peak usability mobile slides for squiz

LAYOUT

•  Single column •  Fluid horizontal

Page 11: Dan seward peak usability mobile slides for squiz

PROVIDE CONTACT DETAILS

…hello…?

Page 12: Dan seward peak usability mobile slides for squiz

ACCESS TO THE FULL SITE

and back again.

Page 13: Dan seward peak usability mobile slides for squiz

MEANINGFUL INTERACTION

“Every tap [or click] should have a payoff.”

-Josh Clark (tapworthy)

Page 14: Dan seward peak usability mobile slides for squiz

TARGET SIZE AND PADDING

7mm

Page 15: Dan seward peak usability mobile slides for squiz

LARGE FONTS

Glance test

Page 16: Dan seward peak usability mobile slides for squiz

BUMP THE CONTRAST

If you can’t read it nobody else can either

Page 17: Dan seward peak usability mobile slides for squiz

IMAGES & TEXT CONTENT

is is a picture of a kitten

Page 18: Dan seward peak usability mobile slides for squiz

18  

Page 19: Dan seward peak usability mobile slides for squiz

HTML 5 INPUT TYPES

Use them.

search tel url email datetime date

month week time datetime-local number range

Page 20: Dan seward peak usability mobile slides for squiz

BANANA REPUBLIC

Bo#om  

Page 21: Dan seward peak usability mobile slides for squiz

PROTOTYPING

Punchcut (screen res mockups) http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions

Paper sketches + Peak sketch holder

Smashing Mag wireframing kit roundup http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

Page 22: Dan seward peak usability mobile slides for squiz

See our mobile usability whitepaper at peakusability.com.au

07 3839 9593 [email protected]