Professional Documents
Culture Documents
@LUKEW
Google programmers are doing work on mobile applications first, because they are better apps and that's what top programmers want to develop. Eric Schmidt, Google Chairman
We're just now starting to think about mobile first and desktop second for a lot of our products. -Kate Aronowitz, Design Director Facebook
We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution. -Kevin Lynch, CTO Adobe
Designing the mobile app first forced us to strip down to essentials. -Bill DeRouchey, BankSimple
Flickr photo by by WebVisions Event
6
MOBILE FIRST
1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION
MOBILE FIRST
1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION
GROWTH = OPPORTUNITY
Mobile Web growth has outpaced desktop Web growth 8x Global mobile data traffic should grow 26x over next 5 years
PC
Desktop Internet
Mobile Consumer
100M+
1B+
10B+
1990
2000
2010
2020
9
Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 Source: ITU, Mark Lipacis, Morgan Stanley Research.
Commerce
Amazon: over $1 billion spent via mobile devices in the past 12 months eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009 Best Buy: mobile Web users doubling every year: 30M (10), 17M (09), 6M (08)
Social
Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago
Source: http://www.lukew.com/ff/entry.asp?1188
10
SMARTPHONES
11
Shift in Usage
40 35 30
-20%
Why?
Source: http://read.bi/efrmCj
12
Shift in Usage
-7%
+36%
Source: http://bit.ly/hJdtty
13
Source: http://bit.ly/hw0Xtb
14
Additional Usage
Every other second a consumer calls a local business and generates driving directions from a Yelp mobile app. Viewing active listings 45% more often from mobile devices (audience is primarily active buyers, on location or scoping out neighborhoods) People that use Facebook on their mobile devices (350M active) are twice as active on Facebook than nonmobile users.
Source: http://www.lukew.com/ff/entry.asp?1131 Source: http://www.lukew.com/ff/entry.asp?1178
15
SMARTPHONES
Dont most people just use native mobile applications to access the Internet?
16
Twitter Usage
347% INCREASE IN MOBILE BROWSER USERS (4.7M) JAN 2010 78% of tweets sent via mobile 40% 16% M.TWITTER.COM of new users start on mobile 14% What are the top two Twitter SMS mobile clients? 8%
TWITTER ON IPHONE TWITTER.COM
8%
TWITTER ON BLACKBERRY
7%
17
18
Facebook Usage
112% INCREASE
IN MOBILE BROWSER USERS (251M) JAN 2010
NON MOBILE
67% 33% of posts sent via mobile M.FACEBOOK.COM 18% What are the top two Facebook mobile clients? ANDROID 4%
IPHONE
4%
BLACKBERRY
4%
19
20
21
22
MOBILE ONLY?
UK: 22% BY 2015
NEVER/INFREQUENT MORE MOBILE THAN PC DESKTOP USE NEVER/INFREQUENT DESKTOP USE
Asia: 50+%
DONT USE INTERNET ON PC
India: 49%
NEVER/INFREQUENT DESKTOP USE
Africa: 50+%
DONT USE INTERNET ON PC
Source: http://www.lukew.com/ff/entry.asp?1391
23
My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website. Joe Hewitt
24
MOBILE FIRST
GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION
1.
25
CONSTRAINTS
Size of Screen Speed of Networks Modes of Use
26
1024x768
320x480
27
28
29
30
31
32
33
34
35
36
37
CONSTRAINTS
Size of Screen Speed of Networks Modes of Use
38
39
40
100ms delay results in 1% sales loss. (potential $191M in lost revenue in 2008) 400ms delay results in 5-9% drop in fullpage traffic. 500ms delay drops search traffic by 20%. The cost of slower performance increases over time. 1s delay results 4% drop in revenue
CONSTRAINTS
Size of Screen Speed of Networks Modes of Use
42
Big Screen Power Supply Consistent Network Keyboard Mouse Chair Desk
43
Small Screen
Battery
Fingers
Sensors
44
45
ONE EYEBALL
ONE THUMB
10
11
12
10
11
12
Source: http://bit.ly/hGrQMy
47
ANYTIME
10
11
12
10
11
12
Source: http://bit.ly/hGrQMy
48
10
11
12
10
11
12
Source: http://bit.ly/hGrQMy
49
10
11
12
10
11
12
Source: http://bit.ly/hGrQMy
50
10
11
12
10
11
12
Source: http://bit.ly/hGrQMy
51
Tablet
Smartphone
12
15
18
21
24
Source: http://bit.ly/qL5NdX
52
CONSTRAINTS
Size of Screen Speed of Networks Modes of Use
53
I was looking at the right side of the Venn diagram I thought, That looks like a lot of the current and planned content for our mobile site. I think the only thing we dont have are the admissions application.
54
MOBILE FIRST
1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION
55
Landscape Mode
56
Landscape Mode
57
Source: http://bit.ly/gAXCeL
58
TOUCH
1.03M touchscreen phones sold per day (2009) 88K iPads sold per day (2011) 194K iPhones sold per day (2011) 500K Android devices activated per day (2011) What about RIM & Nokia?
59
Indirect Manipulation
TRACKBALL KEYBOARD
TRACKPAD KEYPAD
60
Direct Manipulation
TRACKPAD
61
2008
Source: Nokia deices sold. Nokia Capital markets day 2009.
2009
PROJECTED
2010
62
63
44px/pt 44px/pt
64
65
Touch Targets
44px
66
67
Touch Gestures
Tap Double Tap Drag Flick Pinch Spread Press Press & Tap Press & Drag Rotate
Platforms
iPhone OS Android Web OS Windows Phone 7 OS X Windows 7 RIM 6.0 Ubuntu And more...
68
Tap
Briefly touch surface with fingertip.
Double Tap
Rapidly touch surface twice with fingertip.
69
Drag
Move fingertip over surface without losing contact.
Flick
Quickly brush surface with fingertip.
70
Pinch
Touch surface with two fingers and bring them closer together.
Spread
Touch surface with two fingers and move them apart.
71
Press
Touch surface for extended period of time.
72
Rotate
Touch surface with two fingers and move them in a clockwise or counterclockwise direction.
73
74
75
76
www.lukew.com/touch
77
Drag to Reveal
78
79
Drag to Refresh
80
Drag to Reveal
81
Drag to Reveal
Feature overview
82
83
Source: http://www.lukew.com/ff/entry.asp?770
84
Location Detection
85
Location Systems
Accuracy
GPS 10m
Positioning Time
2-10 minutes (only outdoors)
Battery Life
5-6 hours on most phones
WiFi
No additional effect
Negligible
Negligible
IP
Negligible
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS
86
Location Detection
87
88
Direction Detection
Location Detection
89
320x480
90
320x480
91
320x480
92
93
94
Source: AcrossAir
It was sort of beyond our expectations. We had no idea. Yelp CEO, Jeremy Stoppelman
95
Native App
Mobile Web
96
HTML Media Capture Allows web applications to access audio, image and video capture capabilities of the device.
97
Awkward Interactions
SCAN TO CHECKOUT
Flickr photo by Nokia Point & Find
98
99
100
101
102
Images as Input
103
104
Images as Input
105
Images as Input
106
Nerd. Found.
107
108
109
110
MOBILE FIRST
1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION
111
MOBILE FIRST
@lukew www.lukew.com
Mobile First!
abookapart.com