Why You Should Design for Mobile First_wroblewski-Tues-talk
-
Upload
michael-vom-walde -
Category
Documents
-
view
216 -
download
0
Transcript of Why You Should Design for Mobile First_wroblewski-Tues-talk
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
1/58
Luke Wroblewski, LukeW Ideation & Design
Why You Should Design for Mobile FirstTuesday, November 9, 2010
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
2/58
Why You Should Design for Mobile First
Luke Wroblewski, LukeW Ideation & Design | Most of this sessions content isdifferent from Lukes full-day workshop.
According to Luke, Web products should be designed for mobile first. For years,most Web teams have designed for the desktop. Mobile, if it even happened,was a port off the desktop version, designed and built before anyone evenconsidered the mobile experience. This made perfect sense for a while.Browsing the Web on mobile phones was painful; carriers controlled access tothe Web on their devices; and mobile network speeds made everything oftengrind to a halt.
But things have changed so dramatically over the past few years that startingwith the desktop may be an increasingly backwards way of thinking about a
Web product. Designing for mobile first can not only open up new opportunitiesfor growth, it can lead to a better overall user experience for a Web site orapplication.
In this session, Luke Wroblewski will dig into the three key reasons to considermobile first: mobile is seeing explosive growth; mobile forces you to focus; andmobile extends your capabilities.
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
3/58
1!
1
MOBILEFIRSTLUKE WROBLEWSKIUI15 BOSTON 2010
@LUKEW
2
Web products should be designed for mobile first.
(Even if no mobile version is planned.)
Flickr photo by @kevinv033
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
4/58
2!
3
Mobile First at Google
Google programmers are doing workon mobile applications first, because
they are better apps and that's whattop programmers want to develop.
Eric Schmidt, Google CEO
4
MOBILE FIRST
1.GROWTH2.CONSTRAINTS3.CAPABILITIES
= OPPORTUNITY
= FOCUS
= INNOVATION
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
5/58
3!
5
Mobile Design Considerations
Multiple screen sizes & densitiesPerformance optimizationTouch targets, gestures, and actionsLocation systems
Device capabilities
6
MOBILE FIRST
1.GROWTH2.CONSTRAINTS3.CAPABILITIES
= OPPORTUNITY
= FOCUS
= INNOVATION
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
6/58
4!
7
1990
PC
100M+
2010 2020
Mobile Consumer
10B+
Mobile Web growth has outpaced desktop Web growth 8x
Smartphone sales will pass PC sales in 2012
2000
Desktop Internet
1B+
Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25Source: ITU, Mark Lipacis, Morgan Stanley Research.
GROWTH = OPPORTUNITY
8
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
7/58
5!
9
2006
High-end RAZR-inspiredphone with class 12 EDGE
high-speed data & WAP2.0/xHTML Web browser.
2G network GSM 850 / 900 / 1800 / 1900SMS, EMS, MMS, Email, Instant Messaging
2 megapixel cameraMusic playerResolution: 176 x 220 pixels
Colors: 262,144 (18-bit)
10
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
8/58
6!
11Source: AT&T, Morgan Stanley Research.
4,932% Increase
2006 2007 2008 2009
AT&T mobile data traffic increased 50x in 3 years
iPhone iPhone 3G iPhone 3GS
www.lukew.com/ff/
Motorola Z3
12
27% of all Yelp searches come fromtheir iPhone application which had
1.4 million unique users in May 2010
That month Yelp had 32 millionmonthly unique users around the
world
Source: http://officialblog.yelp.com/2010/06/yelp-mobile
27% of searches come from 4% of users
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
9/58
7!
13
Facebook on the iPhone
Create a product, dontre-imagine one for small
screens. Great mobileproducts are created,
never ported.Brian Fling
14
My goal was initially just to make a mobile companion, but Ibecame convinced it was possible to create a version of Facebook
that was actually better than the website.Joe Hewitt
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
10/58
8!
15
MOBILE FIRST
1.GROWTH2.CONSTRAINTS3.CAPABILITIES
= OPPORTUNITY
= FOCUS
= INNOVATION
16
SCREEN SIZEFocus on core actionsKnow your usersUse scalable design
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
11/58
9!
17
320x4801024x768
Screen Size
18
Focus on Core Elements
In iPhone apps, the main function
should be immediately apparent.Minimize the number of controls
from which users have to choose.iPhone Interface Guidelines
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
12/58
10!
19
20
Southwest Airlines Mobile App
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
13/58
11!
21
22
Screen Size
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
14/58
12!
23
Screen Size
24
Know your audience
i k p o o i
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
15/58
13!
25
Expedia Itinerary
26
Expedia Itinerary
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
16/58
14!
27
28
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
17/58
15!
29
Designing For Multiple Screen Sizes
320x480
30
iPhone 320x480 3.5 in 164ppi
Palm Pre 320x480 3.1 in 186ppi
Palm Pixie 320x400 2.63 in 194ppi
T-Mobile G1
MyTouch 3GHTC Hero
320x480 3.2 in 180ppi
Motorola Droid 480x854 3.7 in 264ppi
Nexus One
HTC Desire
480x800 3.7 in 252ppi
Nokia N97 360x640 3.2 in 229ppi
Nokia N900 800x480 3.5 in 266ppi
iPhone4 640x960 3.5 in 329ppi
Smartphone Screen Sizes
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
18/58
16!
31
The Impact of PPI
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
32
The Impact of PPI
Cinema Display 1920x1200 24 in 94ppi
Nokia N900 800x480 3.5 in 266ppi
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
19/58
17!
33
Designing for Multiple Screen Sizes
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
1.Define device groups
tiny: 84, 96, 101, 128, 130, 132small: 160, 176
medium: 208, 220, 240large: 320, 360, 480+
desktop: 800+
34
Designing for Multiple Screen Sizes
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
1.Define device groups2.Create a default reference design
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
20/58
18!
35
1.Define device groups2.Create a default reference design3.Define rules for content and design adaptation
Designing for Multiple Screen Sizes
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/
36
Designing for Multiple Screen Sizes
1.Define device groups2.Create a default reference design3.Define rules for content and design adaptation4.Opt for web standards and a flexible layout
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://www.alistapart.com/articles/switchymclayout/
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
21/58
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
22/58
20!
39
Hardware Control for Menu
40
Make Content the Action
You should not view the large iPad screen as an invitation to bring
back all the functionality you pruned from your your iPhoneapplication. iPad Interface Guidelines
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
23/58
21!
41
42
Design Matters on the iPhone
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
24/58
22!
43
SPEEDKeep performance top of mindTake advantage of HTML5
44
Connection Speed
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
25/58
23!
45
Performance Tips
Load contents lazilyUse application cache for local content storageUse CSS3 and canvas tag instead of images where
possible
Reduce Requests & File Size
Take Advantage of HTML5
Source: Make the mobile web faster,Jeremy Weinstein
Eliminate redirectsUse CSS sprites to serve multiple imagesConsolidate CSS & Javascript into a single fileMinify your code
46
Performance Matters!
Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
Fastest 10% of users stay 50% longer thanslowest 10%
500ms delay drops search traffic by 20%.The cost of slower performance increases
over time.
100ms delay results in 1% sales loss.(potential $191M in lost revenue in 2008)
400ms delay results in 5-9% drop in full-page traffic.
1s delay results 4% drop in revenue
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
26/58
24!
47
CONTEXTQuick bursts everywhereOne-handed
48
During a typical day84% at home
80% during misc. times throughout the day
74% waiting in lines
64% at work i k p o o a in i
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
27/58
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
28/58
26!
51
Where phones used
One-handed touch
i k p o o o
52
MOBILE FIRST
1.GROWTH2.CONSTRAINTS3.CAPABILITIES
= OPPORTUNITY
= FOCUS
= INNOVATION
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
29/58
27!
53
TOUCHSimplify your user interfaceDont count on hovers
54Source: Nokia deices sold. Nokia Capital markets day 2009.
Nokia smartphone mix
2008 2009 2010PROJECTED
Keypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH
1.1 billion consumers with Nokia devices in 2009
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
30/58
28!
55
Touch Targets
Source: Matt Legend Gemmell mattgemmell.com
Apple recommends aminimum target size:29px wide44px tall
56
Touch Targets
Recommended touchtarget size is 9mm/34px
Minimum touch targetsize is 7mm/26px
Minimum spacingbetween elements is2mm/8px
Visual size is 60-100% ofthe touch target size
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
31/58
29!
57
58
Target Sizes for Slipping Fingers
Source: Matt Legend Gemmell mattgemmell.com
If you tap and hold in theyellow area, button will
highlight
If you drag finger & release ingreen area, button will stilltrigger
If you let go outside greenarea, button does not trigger
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
32/58
30!
59
Basic Touch Gestures
Tap
Double Tap
Drag
Flick
Pinch
Spread
Press
Press & Tap
Press & Drag
Rotate
Touch Gestures Platforms
iPhone OS
Android
Web OS
Windows Phone 7
OS X
Windows 7
RIM 6.0
Ubuntu
And more...
60
Basic Touch Gestures
Images: Dan Willis Research: Craig Villamor & LukeW
TapBriefly touch surface with fingertip.
Double TapRapidly touch surface twice with fingertip.
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
33/58
31!
61
Basic Touch Gestures
Images: Dan Willis Research: Craig Villamor & LukeW
DragMove fingertip over surface without losing contact.
FlickQuickly brush surface with fingertip.
62
Basic Touch Gestures
Images: Dan Willis Research: Craig Villamor & LukeW
PinchTouch surface with two fingers and bring them closer together.
SpreadTouch surface with two fingers and move them apart.
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
34/58
32!
63
Basic Touch Gestures
Images: Dan Willis Research: Craig Villamor & LukeW
PressTouch surface for extended periodof time.
Press & DragPress surface with one finger and move second finger over surface without losingcontact.
Press & TapPress surface with one finger andbriefly touch surface with secondfinger.
64
Basic Touch Gestures
Images: Dan Willis Research: Craig Villamor & LukeW
RotateTouch surface with two fingers and move them in a clockwise orcounterclockwise direction.
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
35/58
33!
65
System-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW
66
Object-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
36/58
34!
67
Navigation-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW
www.lukew.com/touch
68
Specialized Touch Gestures
Source: User-Defined Gestures for Surface Computing
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
37/58
35!
69
Gestures as Input
70
Pop-Up Menus on iPhone
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
38/58
36!
71
Pop-Up Menus on Android
72
Multi-Field Pop-Up Menus on iPhone
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
39/58
37!
73
Multi-Field Pop-Up Menus on Android
74
Hover Details & Actions
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
40/58
38!
75
76
Tooltip with Hover
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
41/58
39!
77
LOCATIONPositioningFiltering
78
Location as Input
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
42/58
40!
79
Location as Input
80
Location as Input
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
43/58
41!
81
Accuracy Positioning Time Battery LifeGPS 10m 2-10 minutes (only
outdoors)5-6 hours onmost phones
WiFi 50m (improves withdensity)
Almost instant(server connect &lookup)
No additionaleffect
Cell tower
triangulation
100-1400m (based ondensity)
Almost instant(server connect &lookup)
Negligible
Single Cell
Tower
500-2500m (based ondensity)
Almost instant(server connect &lookup)
Negligible
IP Country: 99%City: 46% US, 53% IntlZIP: 0%
Almost instant(server connect &lookup)
Negligible
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS
Location Systems
82
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
44/58
42!
83
AND MOREOrientationAudio & VideoThe List Goes On
84
Mobile Device Capabilities
Application cache for local storage CSS3 & Canvas for performance optimization Multi-touch sensors Location detection Device positioning & motion: from an accelerometer Orientation: direction from a digital compass Audio: input from a microphone; output to speaker Video & image: capture/input from a camera Push: real-time notifications instant to user Device connections: through Bluetooth between devices Proximity: device closeness to physical objects Ambient Light: light/dark environment awareness RFID reader: identify & track objects with broadcasted identifiers Haptic feedback: feel different surfaces on a screen Biometrics: retinal, fingerprint, etc.
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
45/58
43!
85
Multiple Orientations
86
iPad Orientation
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
46/58
44!
87
Standard Orientation
88
Pivot Orientation
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
47/58
45!
89
Orientation Detection in Firefox 3.6
Source: http://hacks.mozilla.org/2009/10/orientation-for-firefox/
90
Tilt Scrolling in Instapaper
Source: http://vimeo.com/1540283
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
48/58
46!
91
Voice as Input
92
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
49/58
47!
93
Location & Orientation as Input
94
Location & Orientation as Input
When discovered by users
boosted their sustained trafficby 40 to 50 percent.
It was sort of beyond our
expectations. We had no idea.
Yelp CEO,Jeremy Stoppelman
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
50/58
48!
95
Awkward Interactions
SCAN TO CHECKOUT
Flickr photo by Nokia Point & Find
96
Images as Input
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
51/58
49!
97
SnapTell on iPhone
98
Images as Input
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
52/58
50!
99
Images as Input
100
Images as Input
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
53/58
51!
101
Nerd.Found.
Flickr photo by Nokia Point & Find
102
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
54/58
52!
103
iPhone RFID Reader
104
Location Check-in
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
55/58
53!
105
Facebook Presence
106
Mobile Device Capabilities
Application cache for local storage CSS3 & Canvas for performance optimization Multi-touch sensors Location detection Device positioning & motion: from an accelerometer Orientation: direction from a digital compass Audio: input from a microphone; output to speaker Video & image: capture/input from a camera Push: real-time notifications instant to user Device connections: through Bluetooth between devices Proximity: device closeness to physical objects Ambient Light: light/dark environment awareness RFID reader: identify & track objects with broadcasted identifiers Haptic feedback: feel different surfaces on a screen Biometrics: retinal, fingerprint, etc.
Gyroscope: 360 degrees of motion Dual cameras: front & back facing
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
56/58
54!
107
MOBILE FIRST
1.GROWTH2.CONSTRAINTS3.CAPABILITIES
= OPPORTUNITY
= FOCUS
= INNOVATION
108
Mobile Design Considerations
Multiple screen sizes & densitiesPerformance optimizationTouch targets, gestures, and actionsLocation systemsDevice capabilities
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
57/58
55!
109
More Information
@lukewwww.lukew.comWeb Form Design
www.rosenfeldmedia.com/books/webforms/
Discount code: (25%)
-
8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk
58/58
510 Turnpike Street, Suite 102North Andover, MA 01845978-327-5561 or 800-588-9855http://www.uie.com
User Interface Engineering
EVENTS
Learn the design, information architecture, and usability insights used by todays most suc-cessful websites. UIEs monthly Virtual Seminars will give you the chance to hear the latestperspectives in the world of design from the field's premier experts, right from your office,without the expense of traveling.
UIE Virtual Seminars uie.com/events/virtual_seminars
PUBLICATIONS
UIEtips Email Newsletter uie.com/uietipsUIEs free email newsletter highlighting our latest research, products, and public speakingengagements.
UIE Podcast
UIE Reports
A variety of recorded podcasts to download or listen online. Topics focus around user experi-ence with interviews from leading experts to useful tips and techniques for improving your sitesuser experience.
uie.com/brainsparks/topics/podcasts
Our in-depth reports detail the latest happenings in the world of design.
UIE Brain Sparks Blog
UIEs place to share our latest research and musings with you. Well be sharing our latest ideasand observations in the hope of sparking the same in you.
uie.com/reports
uie.com/brainsparks
COMPANY BACKGROUND
User Interface Engineering is a leading think tank, specializing in website and product usabil-ity. Jared M. Spool founded the company back in 1988 and has built User Interface Engineeringinto the largest research organization of its kind in the world. With our in-depth research findingsbased on user observation, we empower development teams to create usable web sites thatincrease customer satisfaction and loyalty.