mobile first luke wroblewski
DESCRIPTION
TRANSCRIPT
![Page 1: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/1.jpg)
1
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011
![Page 2: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/2.jpg)
2
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011
![Page 3: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/3.jpg)
3
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011
![Page 4: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/4.jpg)
4
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011
![Page 5: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/5.jpg)
5
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011
![Page 6: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/6.jpg)
6
@LUKEW
![Page 7: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/7.jpg)
7
Web products should be designed for mobile first.
Flickr photo by @kevinv033
![Page 8: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/8.jpg)
8
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 CEO
![Page 9: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/9.jpg)
9
We're just now starting to think about mobile first and desktop second for a lot of our products.”-Kate Aronowitz, Design Director Facebook
Flickr photo by gscottolson
![Page 10: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/10.jpg)
10
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
Flickr photo by jdlasica
![Page 11: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/11.jpg)
11
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 12: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/12.jpg)
12
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 13: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/13.jpg)
13
1990
PC
100M+
2010 2020
Mobile Consumer
10B+
2000
Desktop Internet
1B+
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.
GROWTH = OPPORTUNITYMobile Web growth has outpaced desktop Web growth 8x
Global mobile data traffic should grow 26x over next 5 years
![Page 14: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/14.jpg)
14
Commerce
• 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
Social
Source: http://www.lukew.com/ff/entry.asp?1188
• Amazon: over $1 billion spent via mobile devices in the past 12 months
• eBay: global mobile sales $2 billion in 2010, $600 million in 2009
• Best Buy: mobile Web users doubling every year: 30M (10), 17M (09), 6M (08)
Productivity & Media
• Google: mobile searches grew 130% in Q3 2010
• Pandora: 50% of total user base subscribes to the service on mobile
• Email: 70% of smartphone users have accessed email on mobile device
![Page 15: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/15.jpg)
15
2005 2006 2007 2008 2009 2010E 2011E 2012E
700
600
500
400
300
200
100
0
PC vs. Smartphone ShipmentsG
lob
al S
hip
men
ts in
MM
SMARTPHONES
PCS
2013E
Q42010 2012E
Smartphones passed PC shipments in Q42010
Source: http://bit.ly/gIqKm9Source: http://bit.ly/g5ktGq
![Page 16: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/16.jpg)
16Source: http://read.bi/efrmCj
Home usage of PC since 2008-20%
40
35
30
25
20
15
10
5
02006 2008 2010
Smartphones & tabletsWhy?
Shift in Usage
![Page 17: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/17.jpg)
17Source: http://bit.ly/hJdtty
Shift in Usage
Visitors to Web-based email sites declined-7%
Visitors accessing email on mobile devices increased+36%
![Page 18: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/18.jpg)
18Source: http://bit.ly/hw0Xtb
• 35% of all Yelp searches come from their mobile applications which had 3.2 million unique users in Feb 2011
• That month Yelp had 45 million monthly unique users around the world
35% of searches come from 7% of users
![Page 19: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/19.jpg)
19Source: http://www.lukew.com/ff/entry.asp?1131 Source: http://www.lukew.com/ff/entry.asp?1178
• Every other second a consumer calls a local business and generates driving directions from a Yelp mobile app.
Additional Usage
• 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 (250M active) are twice as active on Facebook than non-mobile users.
![Page 20: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/20.jpg)
20
SMARTPHONES
Don’t most people just use native mobile applications to access the Internet?
![Page 21: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/21.jpg)
21
Twitter Usage
347% INCREASE IN MOBILE BROWSER USERS (4.7M) JAN 2010
TWITTER.COM
M.TWITTER.COM
SMS
TWITTER ON IPHONE
TWITTER ON BLACKBERRY
78%
14%
8%
8%
7%
• 40% of tweets sent via mobile
• 16% of new users start on mobile
• What are the top two Twitter mobile clients?
![Page 22: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/22.jpg)
22Source: http://www.mobiadnews.com/?p=5133 Source: http://www.lukew.com/ff/entry.asp?1013
• Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013
• 600% growth in traffic to mobile websites in 2010
• Avg smartphone user visits up to 24 Web sites visits per day
• Top 50 websites constitute only 40% of all mobile visits
• Opera Mini traffic up 200% yr/yr
Mobile Web Usage
![Page 23: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/23.jpg)
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
![Page 24: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/24.jpg)
24
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 25: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/25.jpg)
25
CONSTRAINTS
• Size of Screen• Speed of Networks• Modes of Use
![Page 26: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/26.jpg)
26
320x4801024x768
![Page 27: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/27.jpg)
27
In iPhone apps, the main function should be immediately apparent. Minimize the number of controls from which users have to choose. –iPhone Interface Guidelines
![Page 28: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/28.jpg)
28
![Page 29: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/29.jpg)
29
![Page 30: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/30.jpg)
30
![Page 31: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/31.jpg)
31
![Page 32: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/32.jpg)
32
![Page 33: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/33.jpg)
33
Know your audience
![Page 34: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/34.jpg)
34
![Page 35: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/35.jpg)
35
![Page 36: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/36.jpg)
36
![Page 37: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/37.jpg)
37
![Page 38: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/38.jpg)
38
CONSTRAINTS
• Size of Screen• Speed of Networks• Modes of Use
![Page 39: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/39.jpg)
39
![Page 40: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/40.jpg)
40
• Use proper http headers for caching
• Load contents lazily• Use application cache for local content storage• Use CSS3 and canvas tag instead of images where
possible
Reduce Requests & File Size
Take Advantage of HTML5, etc.
Source: Make the mobile web faster, Jeremy Weinstein
• Eliminate redirects
• Use CSS sprites to serve multiple images• Consolidate CSS & Javascript into a single file• Reduce dependencies on heavy Javascript libraries• Minify your code
![Page 41: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/41.jpg)
41Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
Fastest 10% of users stay 50% longer than slowest 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
![Page 42: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/42.jpg)
42
CONSTRAINTS
• Size of Screen• Speed of Networks• Modes of Use
![Page 43: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/43.jpg)
43
Power Supply
Consistent Network
Keyboard
Mouse
Big Screen
Desk
Chair
Coffee Mug
![Page 44: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/44.jpg)
44
Small Screen
Battery
Inconsistent Network
Fingers
Sensors
INTENSELY PERSONAL
![Page 45: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/45.jpg)
45
WHERE ARE WE MOBILE?
84% at home80% during misc. times74% waiting in lines64% at work
EVERYWHERE & ANYWHERE
Photo by Steve Rhodes
![Page 46: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/46.jpg)
46
![Page 47: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/47.jpg)
ONE THUMB
ONE EYEBALL
Partial attention requires focused design
PHOTO BY STEVE RHODES
![Page 48: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/48.jpg)
48
When are we mobile?
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Computer users
Source: http://bit.ly/hGrQMy
![Page 49: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/49.jpg)
49
When are we mobile?
iPhone users
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Source: http://bit.ly/hGrQMy
ANYTIME
![Page 50: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/50.jpg)
50
When are we mobile?
iPad users
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
Source: http://bit.ly/hGrQMy
![Page 51: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/51.jpg)
51
When are we mobile?
Linkedin Overall users
Source: http://bit.ly/hGrQMy
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
![Page 52: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/52.jpg)
52
When are we mobile?
Linkedin Mobile users
Source: http://bit.ly/hGrQMy
1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 910 11 12 10 11 12
![Page 53: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/53.jpg)
53
CONSTRAINTS
• Size of Screen• Speed of Networks• Modes of Use
![Page 54: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/54.jpg)
54Source: XKCD http://xkcd.com/773/ & http://www.dmolsen.com/mobile-in-higher-ed/?p=197
“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 don’t have are the admissions application.”
![Page 55: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/55.jpg)
55
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 56: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/56.jpg)
56
Landscape Mode
![Page 57: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/57.jpg)
57
Landscape Mode
![Page 58: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/58.jpg)
58
![Page 59: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/59.jpg)
59
![Page 60: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/60.jpg)
60Source: http://vimeo.com/1540283
![Page 61: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/61.jpg)
61
Safari Gyroscope Access
Source: http://bit.ly/gAXCeL
![Page 62: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/62.jpg)
62
Location Detection
![Page 63: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/63.jpg)
63
Accuracy Positioning Time Battery Life
GPS 10m 2-10 minutes (only outdoors)
5-6 hours on most phones
WiFi 50m (improves with density)
Almost instant (server connect & lookup)
No additional effect
Cell tower triangulation
100-1400m (based on density)
Almost instant (server connect & lookup)
Negligible
Single Cell Tower
500-2500m (based on density)
Almost instant (server connect & lookup)
Negligible
IP Country: 99%
City: 46% US, 53% Intl
ZIP: 0%
Almost instant (server connect & lookup)
Negligible
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS
Location Systems
![Page 64: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/64.jpg)
64
Location Detection
![Page 65: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/65.jpg)
65
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?
![Page 66: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/66.jpg)
66
Indirect Manipulation
TRACKPAD
KEYPAD
TRACKBALL
KEYBOARD
![Page 67: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/67.jpg)
67
Direct Manipulation
TRACKPAD
![Page 68: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/68.jpg)
68Source: Nokia –deices sold. Nokia Capital markets day 2009.
Nokia smartphone mixKeypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH
2008 2009 2010 PROJECTED
![Page 69: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/69.jpg)
69Images: Dan Willis Research: Craig Villamor & LukeW
www.lukew.com/touch
![Page 70: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/70.jpg)
70
Touch Gesture Cards
![Page 71: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/71.jpg)
71
Drag to Reveal
![Page 72: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/72.jpg)
72
![Page 73: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/73.jpg)
Drag to Refresh
73
![Page 74: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/74.jpg)
Drag to Reveal
74
![Page 75: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/75.jpg)
Drag to Reveal
75
• Feature overview
![Page 76: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/76.jpg)
76
![Page 77: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/77.jpg)
77
Natural User Interfaces (NUI)
• Content is the UI (the action)
• Reduce the distance as much as possible between user & content
• Enable direct manipulation of objects & content
• Guessable, predictable, physical, realistic
• Reduce Visuals that are Not Content
Source: http://www.lukew.com/ff/entry.asp?770
“NUI exploits skills that we have acquired through a lifetime of living in the World” –Bill Buxton
![Page 78: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/78.jpg)
78
Challenging Ourselves
![Page 79: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/79.jpg)
79
Mobile Device Capabilities• Device positioning & motion: from an accelerometer
• Gyroscope: 360 degrees of motion
• Location detection
• Multi-touch sensors
• Orientation: direction from a digital compass
• Video & image: capture/input from a camera
• Dual cameras: front and back
• Audio: input from a microphone; output to speaker
• Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• NFC: Near Field Communications through RFID readers
![Page 80: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/80.jpg)
80
Direction Detection
Location Detection
![Page 81: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/81.jpg)
81
320x480
![Page 82: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/82.jpg)
82
![Page 83: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/83.jpg)
83Source: AcrossAir
![Page 84: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/84.jpg)
84
When discovered by users boosted their sustained traffic by 40 to 50 percent.
“It was sort of beyond our expectations. We had no idea.”
Yelp CEO, Jeremy Stoppelman
![Page 85: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/85.jpg)
85
Native App Mobile Web
• Location detection
• Device orientation
• Digital compass
• Video camera access
• Location detection
• Device orientation
![Page 86: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/86.jpg)
86
Android 3.0 (ish)
HTML Media CaptureAllows web applications to access audio, image and video capture capabilities of the device.
Device Orientation Event Allows web applications to listen to DOM events that provide information about the physical orientation and motion of the device.
![Page 87: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/87.jpg)
87
Awkward Interactions
SCAN TO CHECKOUT
Flickr photo by Nokia Point & Find
![Page 88: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/88.jpg)
88
![Page 89: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/89.jpg)
89
![Page 90: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/90.jpg)
90
![Page 91: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/91.jpg)
91
![Page 92: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/92.jpg)
92
Images as Input
![Page 93: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/93.jpg)
93
Images as Input & Output
![Page 94: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/94.jpg)
94
![Page 95: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/95.jpg)
95
Nerd.Found.
Flickr photo by Nokia Point & Find
![Page 96: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/96.jpg)
96
![Page 97: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/97.jpg)
97
![Page 98: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/98.jpg)
98
![Page 99: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/99.jpg)
99
Mobile Device Capabilities• Device positioning & motion: from an accelerometer
• Gyroscope: 360 degrees of motion
• Location detection
• Multi-touch sensors
• Orientation: direction from a digital compass
• Video & image: capture/input from a camera
• Dual cameras: front and back
• Audio: input from a microphone; output to speaker
• Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• NFC: Near Field Communications through RFID readers
![Page 100: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/100.jpg)
100
MOBILE FIRST1. GROWTH2. CONSTRAINTS3. CAPABILITIES
= OPPORTUNITY = FOCUS = INNOVATION
![Page 101: Mobile first luke wroblewski](https://reader033.vdocuments.us/reader033/viewer/2022051611/54b7a97f4a79594b258b4618/html5/thumbnails/101.jpg)
MOBILE FIRST
• @lukew• www.lukew.com
Mobile First!• October 18th• abookapart.com