Youssef Rahoui, profile picture
Uploaded byYoussef Rahoui
PDF, PPTX32,889 views

Mobile input lukew

The document discusses mobile input and forms. It makes three main points: 1. Put effort into input where there is the most payoff, such as on capable smartphones where input is easier. However, don't forget about SMS input which is widely used. 2. Take the pain out of forms by shortening them, using better layouts like top-aligned labels, defining clear input types, and using smart defaults to reduce input needed. 3. Look beyond traditional forms for input, such as using SMS, touch-friendly layouts, and leveraging new HTML5 input types. Focus on making input as easy as possible across different mobile devices.

Business◦
Related topics:
Web Design Insights•

Embed presentation

Download as PDF, PPTX
1 / 123
2 / 123
3 / 123
4 / 123
5 / 123
6 / 123
7 / 123
8 / 123
9 / 123
10 / 123
11 / 123
12 / 123
13 / 123
14 / 123
15 / 123
16 / 123
17 / 123
18 / 123
19 / 123
20 / 123
21 / 123
22 / 123
23 / 123
24 / 123
25 / 123
26 / 123
27 / 123
28 / 123
29 / 123
30 / 123
31 / 123
32 / 123
33 / 123
34 / 123
35 / 123
36 / 123
37 / 123
38 / 123
39 / 123
40 / 123
41 / 123
42 / 123
43 / 123
44 / 123
45 / 123
46 / 123
47 / 123
48 / 123
49 / 123
50 / 123
51 / 123
52 / 123
53 / 123
54 / 123
55 / 123
56 / 123
57 / 123
58 / 123
59 / 123
60 / 123
61 / 123
62 / 123
63 / 123
64 / 123
65 / 123
66 / 123
67 / 123
68 / 123
69 / 123
70 / 123
71 / 123
72 / 123
73 / 123
74 / 123
75 / 123
76 / 123
77 / 123
78 / 123
79 / 123
80 / 123
81 / 123
82 / 123
83 / 123
84 / 123
85 / 123
86 / 123
87 / 123
88 / 123
89 / 123
90 / 123
91 / 123
92 / 123
93 / 123
94 / 123
95 / 123
96 / 123
97 / 123
98 / 123
99 / 123
100 / 123
101 / 123
102 / 123
103 / 123
104 / 123
105 / 123
106 / 123
107 / 123
108 / 123
109 / 123
110 / 123
111 / 123
112 / 123
113 / 123
114 / 123
115 / 123
116 / 123
117 / 123
118 / 123
119 / 123
120 / 123
121 / 123
122 / 123
123 / 123
MOBILE INPUT LUKE WROBLEWSKI DESIGN FOR MOBILE 2010 @LUKEW 1
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 2
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 3
GROWTH = OPPORTUNITY Mobile Web growth has outpaced desktop Web growth 8x Smartphone sales will pass PC sales in 2012 PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+ 1990 2000 2010 2020 Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 4 Source: ITU, Mark Lipacis, Morgan Stanley Research.
5
During a typical day… 84% at home 80% during misc. times throughout the day 74% waiting in lines 64% at work 6 Flickr photo by Laughing Squid
Where phones used Whenever & wherever inspiration strikes Flickr photo by Steve Rhodes 7
Where Input Matters… •  Commerce: purchasing, maximizing sales •  Social: participating, growing communities •  Productivity: managing info, selling (or saving on) services 8
Input Matters Commerce •  Amazon: over $1 billion spent via mobile devices in the past 12 months •  PayPal: mobile transactions increased six-fold in 2009: $25M to $141M •  Best Buy mobile Web users doubling every year: 30M (10), 17M (09), 6M (08) Social •  Double-digit (28%) rise in social networking on mobile Web •  Twitter: 16% of all new users start on mobile •  Facebook: 150 million active mobile users Productivity •  Email activity is 41% of US mobile Internet time •  70% of smartphone users have accessed Email on their mobile device 9 Source: http://www.lukew.com/ff/entry.asp?1188
The rule of thumb is to limit the use of forms in the mobile context. Mobile Web Design & Development, O’Reilly 2009 Filling out forms for web based services on mobile devices is a very time consuming and frustrating task for users. ACM Pervasive and Mobile Computing, 2008 In general, using input elements is difficult for users. Avoid text input where possible. Sprint Web Style Guide, 2005 10
2006 High-end RAZR-inspired phone with class 12 EDGE high-speed data & WAP 2.0/xHTML Web browser. 2G network GSM 850 / 900 / 1800 / 1900 SMS, EMS, MMS, Email, Instant Messaging 2 megapixel camera Music player Resolution: 176 x 220 pixels Colors: 262,144 (18-bit) 11
4,932% Increase AT&T mobile data traffic increased 50x in 3 years Motorola Z3 iPhone iPhone 3G iPhone 3GS 2006 2007 2008 2009 12 Source: AT&T, Morgan Stanley Research.
30x the Mobile Traffic 1 iPhone 30 basic feature phones 13 Source: Cisco’s “Visual Networking Index Global Mobile Data Traffic Forecast Update”
Feature Phones Smart Phones •  4% browse the mobile •  35% browse the mobile Internet at least daily Internet at least daily •  6% have accessed social •  30% have accessed networks using their social networks using mobile browser their mobile browser •  12% have accessed Email •  70% have accessed on their mobile Email on their mobile Source: http://www.lukew.com/ff/entry.asp?1042 14
27% of searches come from 4% of users •  27% of all Yelp searches come from their iPhone application which had 1.4 million unique users in May 2010 •  That month Yelp had 32 million monthly unique users around the world Source: http://officialblog.yelp.com/2010/06/yelp-mobile 15
Devices are different. Sales in Q2 2010 87M 24M 11M 14M 8M Series 40 Symbian Blackberry Maemo Android iPhone HARDER Input Effort EASIER 16 Source: http://bit.ly/akk2U7
What Makes Input Easier? •  Screen Size •  Network Speeds •  Web Browser •  Device Capabilities 17
HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 18
Sales in Q2 2010 87M 24M 11M 14M 8M Series 40 Symbian Blackberry Maemo Android iPhone So what… no input here? HARDER Input Effort EASIER 19 Source: http://bit.ly/akk2U7
•  4.1 billion text messages sent per day in the US •  1 in 3 teens send more than 100 text messages a day •  72% of adults were sending and receiving texts in May 2010 •  61% of smartphone owners send or receive texts daily •  32% of feature phone owners send or receive texts daily Source: http://www.lukew.com/ff/entry.asp?1188 20
90M TWEETS PER DAY While smart phone clients are important, there are even more people who use the mobile Twitter web site and/or SMS. Source: http://blog.twitter.com/2010/09/evolving-ecosystem.html 21
SMS FAST FOLLOW Anyone in the US can receive Tweets on their phone even if they haven’t signed up for Twitter. Released August 2010 Source: http://blog.twitter.com/2010/08/introducing-fast-follow-and-other-sms.html 22
SMS Form Pattern •  Single-line field for the receiver's phone number •  Button (typically placed near the phone number's field, or in the soft-keys' menu) to allow users to choose a phone number from the device's phonebook •  Multi-line field to allow users to type the message body •  Button to send the SMS Source: http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_SMS_Form 23
Put Effort Where There’s Payoff •  Mobile Internet usage is growing rapidly •  Input on mobile devices has been difficult •  Capable devices have a disproportionate share of mobile Internet use •  There are many more opportunities for input on these devices •  But… don’t forget SMS! 24
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 25
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 26
Take the pain out of forms •  Length •  Layout •  Text Inputs •  Targets 27
Take the pain out of forms •  Length •  Layout •  Text Inputs •  Targets 28
29
30
Unnecessary Inputs Top Aligned Labels Smart Defaults Inline Help Text Input Types 31
32
33
34
Unnecessary Inputs Source: http://sender11.typepad.com/sender11/2008/06/the-anatomy-o-1.html 35
Version: Multiple Pages 36
Version: Single Page 37
Version: Inline Accordion Form 38
Testing Inline Multi-step Forms •  All four versions delivered 100% pass rate •  Conversion did not go up or down on the accordion form •  Using a one page, multiple pages, or an inline multi-step form does not impact inherently impact completion •  So what does? 39
Case study •  Compared two types of contact forms on its website. •  11-field Contact Us form •  4-field Contact Us form Impact •  160% increase in number of forms submitted •  120% increase in conversion ratio •  In addition, the quality of the submissions remained the same Source: http://www.imagescape.com/clients-like-you/contact-form/ 40
Case study •  Checkout form (page one) with two actions: Login or Register •  Changed Register to Continue with “you do not need an account to buy” message. Impact •  45% increase in number of purchasing customers •  $1.5M increase in first month •  $300M increase in first year Source: http://www.imagescape.com/clients-like-you/contact-form/ 41
Case study •  Added “optional” indicator on phone number field •  6-field Contact form Impact •  2x increase in conversion •  42% conversion rate jumped to 80% conversion rate •  Required phone number field had 37% drop off rate Source: http://blog.clicktale.com/2010/05/28/change-one-word-double-your-conversion-rate/ 42
LENGTH •  Evaluate every question you ask •  Strive for succinctness •  Multiple pages help organize but… •  Removing requirements has impact! •  Look for unnecessary inputs 43
Take the pain out of forms •  Length •  Layout •  Text Inputs •  Targets 44
45 Source: etre eye tracking tests.
46
47
48
49
Field Zoom on the iPhone 50
Field Zoom on the iPhone 51
Left Aligned Labels on Android 52
Top Aligned Labels •  When data being collected is familiar •  Minimize time to completion •  Flexibility for localization and complex inputs •  Easier to code: no floats or tables •  Accessibility: label, field in order •  Better format for mobile •  Support multiple screen resolutions •  Require more vertical space 53
Labels Within Input Fields 54
Labels Within Input Fields 55
Labels Within Input Fields 56
57
Focus on Input with Placeholder Text 58
59
60
61
Label Alignment on Android 62
Label Alignment on Blackberry 63
LAYOUT •  Avoid multiple column layouts •  Top-aligned labels on mobile Web pages •  Labels within inputs on capable devices •  Labels in native apps where there’s consistency! 64
Take the pain out of forms •  Length •  Layout •  Text Inputs •  Targets 65
Form Input Elements 66
Text Inputs Auto-capitalization •  Turn off on email, password, URL, and other case-sensitive inputs Auto-correct •  Turn off on email, password, URL, and other non-alpha inputs •  Trim trailing spaces that may come from auto-correct (thanks Barbara!) Language, Mode, Format •  Specify if supported by devices 67
Numerical Inputs •  Phones were designed for numerical input Number Declarations •  Define input mode using Wireless CSS or CSS-MP Phone Number •  Define input types using HTML5 or native OS declarations •  On devices without virtual keyboards, people will not have to switch into number mode. Common Numerical Inputs •  Use a single line field for phone numbers •  Don’t split up price fields (period is present on keyboards) 68
Text Fields on Blackberry •  Email Users can insert an at sign (@) or a period (.) in an email address field by pressing the Space key. •  Date and time Users can change the date or time on devices with a trackpad using the keyboard or by moving a finger vertically on the trackpad or swiping up or down on the screen (touch). •  Number The device switches to number lock mode so that users do not need to press the Alt key to type numbers or the number keyboard appears (touch). •  Password When users type in a password field, asterisks (*) appear instead of text •  Phone Number The device switches to number lock mode so that users do not need to press the Alt key to type numbers or the number keyboard appears (touch). •  Web Address Users can insert a period (.) in an address field by pressing the Space key. Source: http://www.blackberry.com/go/uiguidelines 69
HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 70
HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 71
HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 72
Flexible Inputs 73
Input Masks 74
Input Masks 75
76
Input Masks Surface formatting right up front Do not gradually reveal formatting as people enter input 77
Smart Defaults Personalized Mobile Use Case Most Common 78
Average input times Source: Automatic Form Filling on Mobile Devices Enrico Rukzio, Chie Noda, etc. 79
TEXT INPUTS •  Define input types & attributes •  Input masks to help formatting •  Smart defaults 80
Take the pain out of forms •  Length •  Layout •  Text Inputs •  Targets 81
Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 1.1 billion consumers with Nokia devices in 2009 2008 2009 2010 PROJECTED 82 Source: Nokia –deices sold. Nokia Capital markets day 2009.
Where phones used One-handed Touch Flickr photo by Steve Rhodes 83
84
85
Touch Targets Apple recommends a minimum target size: 29px wide 44px tall Source: Matt Legend Gemmell – mattgemmell.com 86
Touch Targets Recommended touch target size is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px Visual size is 60-100% of the touch target size 87
Target Sizes for Slipping Fingers If you tap and hold in the yellow area, button will highlight If you drag finger & release in green area, button will still trigger If you let go outside green area, button does not trigger Source: Matt Legend Gemmell – mattgemmell.com 88
TARGETS •  Accommodate touch target sizes •  Account for errors with flexibility 89
Take the pain out of forms •  Form Length •  Structure •  Label Placement •  Inputs •  Targets 90
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 91
Going Beyond Forms… 1.  Web Services for Instant Experiences 2.  Touch 3.  Location Detection 4.  Audio 5.  Images & Video 92
Typical Account Creation 93
Typical Account Creation 94
Re-create your identity & friends list 95
Simplified Account Creation 96
Web Services for Account Creation 97
Web Services for Account Creation 98
Instant-on Start Experience 99
Instant-on Start Experience 100
Web Services on Mobile 101
Instant on from the Mobile 102
Instant Purchasing 103
WEB SERVICES •  Remove barriers to account creation •  Don’t re-create what they’ve already done •  Deliver an instant-on start experience 104
Gestures as Input 105
Gestures as Input 106
TOUCH Consider core gestures for input 107
Voice as Input 108
109
AUDIO Voice commands can substitute text input 110
Location as Input 111
Location as Input 112
Location as Input 113
Location Systems Accuracy Positioning Time Battery Life GPS 10m 2-10 minutes (only 5-6 hours on outdoors) most phones WiFi 50m (improves with Almost instant No additional density) (server connect & effect lookup) Cell tower 100-1400m (based on Almost instant Negligible triangulation density) (server connect & lookup) Single Cell 500-2500m (based on Almost instant Negligible Tower density) (server connect & lookup) IP Country: 99% Almost instant Negligible City: 46% US, 53% Intl (server connect & ZIP: 0% lookup) Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS 114
LOCATION Location detection can deliver relevant content without requiring a lot of input 115
Images as Input 116
Images as Input 117
Images as Input 118
Images as Input 119
IMAGES & VIDEO Consider how photo and video integration simplify or extend input 120
Mobile Device Capabilities •  Multi-touch sensors •  Location detection •  Device positioning & motion: from an accelerometer •  Orientation: direction from a digital compass •  Gyroscope: 360 Degrees of motion •  Audio: input from a microphone; output to speaker •  Video & image: capture/input from a camera •  Dual cameras: front and back •  Device connections: through Bluetooth between devices •  Proximity: device closeness to physical objects •  Ambient Light: light/dark environment awareness 121
MOBILE INPUT 1.  Put in the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 122
More Information •  @lukew •  www.lukew.com Web Form Design •  www.rosenfeldmedia.com/ books/webforms/ •  Discount code: (25%) 123

More Related Content

PPTX
Future of Web is Mobile by Dag Olav Norem
byMobileMonday Norway
 
PDF
Indonesia, Internet Now! (Fact, Figure, Profile & Condition)
byICT Watch - Indonesia
 
PDF
Mobile first luke wroblewski
byJakub Horoszko
 
PPT
Mobile reading comes of age (NISO Forum)
byBrian O'Leary
 
PDF
Mobile Marketing Slides
byKaren_Canaterra
 
PDF
10 reasons why now is the perfect time to get serious about the mobile web
byTijs Vrolix
 
PDF
Chinnovations on China's new media
byGreat Wall Club
 
PDF
Mobile Recruiting (October 2011)
byDavid Lee
 
Future of Web is Mobile by Dag Olav Norem
byMobileMonday Norway
 
Indonesia, Internet Now! (Fact, Figure, Profile & Condition)
byICT Watch - Indonesia
 
Mobile first luke wroblewski
byJakub Horoszko
 
Mobile reading comes of age (NISO Forum)
byBrian O'Leary
 
Mobile Marketing Slides
byKaren_Canaterra
 
10 reasons why now is the perfect time to get serious about the mobile web
byTijs Vrolix
 
Chinnovations on China's new media
byGreat Wall Club
 
Mobile Recruiting (October 2011)
byDavid Lee
 

What's hot

PDF
Addicted to connectivity - Perspectives on the global mobile consumer - Delo...
byRomain Fonnier
 
PPTX
whatsapp ppt
bySwati Luthra
 
PDF
Mobile Web Vs Mobile Apps
byJoe Hass
 
PPTX
Facebook vs whats app
byDiksha Garg
 
PDF
Inc pres (dma bristol messaging) 24 jun11 v1.0
byJason Cross
 
PDF
山东移动全业务运营的竞争策略探讨 P P T38
bywoyaozhangda
 
PPT
Success of the iPhone (April 2009)
byJoel West
 
PPTX
Hot house istrategy_presentation_february_2012_original-1
byiStrategy
 
PDF
The Mobile Internet is Awesome.
byConrad Lisco
 
PDF
Inc pres (dma bristol apps) 24 jun11 v1.1
byJason Cross
 
PPTX
Van wyk hothouse mobile 2012 sydney
byiStrategy
 
PDF
Push notifications
bySALESmanago AI driven CDXP
 
PPT
Web 3 Tom Gruber
byMediabistro
 
PDF
Kelsey: Top 5 Mobile Trends
byBen Allen
 
PDF
50 Stunning Mobile Statistics
byVala Afshar
 
PDF
From Neo to Trinity: The Matrix Reinvented
byThe Difference Engine
 
PDF
The Smart Future - An Amárach Research Report
byAmarach Research
 
PDF
Mobile computing application risks in Zimbabwe
byIOSR Journals
 
Addicted to connectivity - Perspectives on the global mobile consumer - Delo...
byRomain Fonnier
 
whatsapp ppt
bySwati Luthra
 
Mobile Web Vs Mobile Apps
byJoe Hass
 
Facebook vs whats app
byDiksha Garg
 
Inc pres (dma bristol messaging) 24 jun11 v1.0
byJason Cross
 
山东移动全业务运营的竞争策略探讨 P P T38
bywoyaozhangda
 
Success of the iPhone (April 2009)
byJoel West
 
Hot house istrategy_presentation_february_2012_original-1
byiStrategy
 
The Mobile Internet is Awesome.
byConrad Lisco
 
Inc pres (dma bristol apps) 24 jun11 v1.1
byJason Cross
 
Van wyk hothouse mobile 2012 sydney
byiStrategy
 
Push notifications
bySALESmanago AI driven CDXP
 
Web 3 Tom Gruber
byMediabistro
 
Kelsey: Top 5 Mobile Trends
byBen Allen
 
50 Stunning Mobile Statistics
byVala Afshar
 
From Neo to Trinity: The Matrix Reinvented
byThe Difference Engine
 
The Smart Future - An Amárach Research Report
byAmarach Research
 
Mobile computing application risks in Zimbabwe
byIOSR Journals
 

Similar to Mobile input lukew

PDF
Mobile first. Luke Wroblewski
byACGM Business Talisman
 
PDF
Mobile strategies for the tourism industry
byJames Burnes
 
PDF
Ten reasons why now is the perfect time to get serious about the mobile web
byTijs Vrolix
 
PDF
Taking Your Website Mobile
bynijsitecore
 
PDF
Leveraging digital insights via mobile channels
byMerlien Institute
 
PPTX
Hot house istrategy_presentation_february_2012_original-1
byiStrategy
 
PPT
Mobile 101
byFaveQuest - MyEventApps
 
PDF
Mobile Web Design & Development 2012 Lecture
byDave Wallace
 
KEY
Mobile Web Presentation
byjustinyates
 
PPTX
Start of Mobile Marketing - June 2012
byGreg Stuart
 
PDF
Mobile, Mobile, Mobile
byPaul Golding
 
PDF
Bruce / The Seminar: In the Pocket
bymarkee
 
PDF
NEC Mobile meets the Cloud
byDiego Sánchez-Aparisi Moral
 
PDF
Future:apps&mobile - mobile landscape and development platforms
byJurgis Kirsakmens
 
PDF
Look Again At Mobile 2009
byKatie Lips
 
PPTX
Mobile Trends - Sosyal Medya Akademi
byYagmur Anish
 
KEY
Mobile Revolution and Assessment - ATP 2011
byPeter Pascale
 
PPTX
Mobile marketing101
byWebProfitEngineer
 
PDF
BCU Making Mobile Marketing Work Intro: Mark Brill
bysamanthayep
 
PPTX
The Mobile Marketing Future - Why Your Brand Needs To Be Mobile Now
byLessing-Flynn Advertising
 
Mobile first. Luke Wroblewski
byACGM Business Talisman
 
Mobile strategies for the tourism industry
byJames Burnes
 
Ten reasons why now is the perfect time to get serious about the mobile web
byTijs Vrolix
 
Taking Your Website Mobile
bynijsitecore
 
Leveraging digital insights via mobile channels
byMerlien Institute
 
Hot house istrategy_presentation_february_2012_original-1
byiStrategy
 
Mobile 101
byFaveQuest - MyEventApps
 
Mobile Web Design & Development 2012 Lecture
byDave Wallace
 
Mobile Web Presentation
byjustinyates
 
Start of Mobile Marketing - June 2012
byGreg Stuart
 
Mobile, Mobile, Mobile
byPaul Golding
 
Bruce / The Seminar: In the Pocket
bymarkee
 
NEC Mobile meets the Cloud
byDiego Sánchez-Aparisi Moral
 
Future:apps&mobile - mobile landscape and development platforms
byJurgis Kirsakmens
 
Look Again At Mobile 2009
byKatie Lips
 
Mobile Trends - Sosyal Medya Akademi
byYagmur Anish
 
Mobile Revolution and Assessment - ATP 2011
byPeter Pascale
 
Mobile marketing101
byWebProfitEngineer
 
BCU Making Mobile Marketing Work Intro: Mark Brill
bysamanthayep
 
The Mobile Marketing Future - Why Your Brand Needs To Be Mobile Now
byLessing-Flynn Advertising
 

More from Youssef Rahoui

PDF
Innovation report: Artificial Intelligence
byYoussef Rahoui
 
PDF
Innovation report in a nutshell: Artificial Intelligence
byYoussef Rahoui
 
PDF
[Madmagz] The Blockchain
byYoussef Rahoui
 
PDF
[Madmagz] Blockchain in a nutshell
byYoussef Rahoui
 
PDF
Corum group: Paris Presentation
byYoussef Rahoui
 
PDF
Corum annual report 2017
byYoussef Rahoui
 
PDF
B2B Sales For Startups by @techalamenthe
byYoussef Rahoui
 
PDF
Courrier de L'Atlas n°92 avec Youssef Rahoui, dirigeant de Madmagz et fondate...
byYoussef Rahoui
 
PDF
Vendre en B2B : inbound marketing et lead generation pour startups
byYoussef Rahoui
 
PDF
How google works
byYoussef Rahoui
 
PDF
Prez best tips recruiting for SME
byYoussef Rahoui
 
PDF
Why do people share online?
byYoussef Rahoui
 
PDF
Iab internet advertising_revenue_report_2012
byYoussef Rahoui
 
PDF
Chiffres cles des_annonceurs_2012
byYoussef Rahoui
 
PDF
Du recrutement au contrat de travail
byYoussef Rahoui
 
PDF
Le référencement multilingue
byYoussef Rahoui
 
PDF
Guide Google de la Rentrée 2012
byYoussef Rahoui
 
PPTX
Prez Tech à la menthe sur les télécommunications d'entreprise
byYoussef Rahoui
 
PPTX
Gouvernance & pilotage
byYoussef Rahoui
 
PDF
The US digital future in focus
byYoussef Rahoui
 
Innovation report: Artificial Intelligence
byYoussef Rahoui
 
Innovation report in a nutshell: Artificial Intelligence
byYoussef Rahoui
 
[Madmagz] The Blockchain
byYoussef Rahoui
 
[Madmagz] Blockchain in a nutshell
byYoussef Rahoui
 
Corum group: Paris Presentation
byYoussef Rahoui
 
Corum annual report 2017
byYoussef Rahoui
 
B2B Sales For Startups by @techalamenthe
byYoussef Rahoui
 
Courrier de L'Atlas n°92 avec Youssef Rahoui, dirigeant de Madmagz et fondate...
byYoussef Rahoui
 
Vendre en B2B : inbound marketing et lead generation pour startups
byYoussef Rahoui
 
How google works
byYoussef Rahoui
 
Prez best tips recruiting for SME
byYoussef Rahoui
 
Why do people share online?
byYoussef Rahoui
 
Iab internet advertising_revenue_report_2012
byYoussef Rahoui
 
Chiffres cles des_annonceurs_2012
byYoussef Rahoui
 
Du recrutement au contrat de travail
byYoussef Rahoui
 
Le référencement multilingue
byYoussef Rahoui
 
Guide Google de la Rentrée 2012
byYoussef Rahoui
 
Prez Tech à la menthe sur les télécommunications d'entreprise
byYoussef Rahoui
 
Gouvernance & pilotage
byYoussef Rahoui
 
The US digital future in focus
byYoussef Rahoui
 

Recently uploaded

PDF
Botswana Diamonds plc Corporate Presentation Jan 2026
byJames AH Campbell
 
PDF
Artificial Intelligence and the Great Divergence, a report by the White House
byChris Skinner
 
PDF
Derek Maxfield - A Founding Board Member Of Saprea
byDerek Maxfield
 
PPTX
PDYN Investor Presentation - January 2026.pptx
byPalladyne AI
 
PDF
_The Ultimate Guide to Buying Twitter Accounts Safely.pdf
byp7u0tz3g7favwxkjrlwm
 
PDF
Equinox Gold - January Investor Presentation.pdf
byEquinox Gold Corp.
 
PDF
How to Buy Twitter Accounts_ A Step-by-Step Guide (2).pdf
byp7u0tz3g7favwxkjrlwm
 
PDF
IT Administration Staffing Jobs in Albany,Ny.pdf
byThe Sculpt Aesthetics Sculpt Cosmetic Surgery
 
PPT
Business Process outsourcing SMPBPO101_003 v2013 QCCI.ppt
bycmaranan
 
DOCX
Proven Ways to Buy Verified PayPal Accounts in Los Angeles Safely.docx
byUsaservicepoint
 
PDF
V3Cube On-Demand House Cleaning App Solution
byV3CUBE TECHNOLABS
 
PDF
Camil Institutional Presentation_Jan26.pdf
byCAMILRI
 
PDF
9 Best Sites to Buy Old Gmail Accounts (PVA & Aged).pdf
byhttps://propvaservice.com/product/buy-old-gmail-accounts/
 
PPTX
Production and Ops - 1 Unit-I-Foundation to Production and Operations Managem...
byDavies Chacko
 
DOCX
Buy Tripadvisor Reviews From $15 Per Review _ 100% Safe.docx
bymarketing
 
DOCX
Legal Status & Safety of Verified Cash App Accounts Explained (Year 2026).docx
byBuy Verified Cash App Accounts
 
PDF
Dr. Michael T. Conner - Serves As CEO
byDr. Michael T. Conner
 
PDF
Where and why Buy Verified Binance Accounts With Full KYC ....pdf
byhttps://propvaservice.com/
 
DOCX
Buy Verified PayPal Account Online_ A Comprehensive ....docx
byBusiness
 
DOCX
How to Buy Apple ID Accounts in 2026.docx
byDigital Marketing in the USA
 
Botswana Diamonds plc Corporate Presentation Jan 2026
byJames AH Campbell
 
Artificial Intelligence and the Great Divergence, a report by the White House
byChris Skinner
 
Derek Maxfield - A Founding Board Member Of Saprea
byDerek Maxfield
 
PDYN Investor Presentation - January 2026.pptx
byPalladyne AI
 
_The Ultimate Guide to Buying Twitter Accounts Safely.pdf
byp7u0tz3g7favwxkjrlwm
 
Equinox Gold - January Investor Presentation.pdf
byEquinox Gold Corp.
 
How to Buy Twitter Accounts_ A Step-by-Step Guide (2).pdf
byp7u0tz3g7favwxkjrlwm
 
IT Administration Staffing Jobs in Albany,Ny.pdf
byThe Sculpt Aesthetics Sculpt Cosmetic Surgery
 
Business Process outsourcing SMPBPO101_003 v2013 QCCI.ppt
bycmaranan
 
Proven Ways to Buy Verified PayPal Accounts in Los Angeles Safely.docx
byUsaservicepoint
 
V3Cube On-Demand House Cleaning App Solution
byV3CUBE TECHNOLABS
 
Camil Institutional Presentation_Jan26.pdf
byCAMILRI
 
9 Best Sites to Buy Old Gmail Accounts (PVA & Aged).pdf
byhttps://propvaservice.com/product/buy-old-gmail-accounts/
 
Production and Ops - 1 Unit-I-Foundation to Production and Operations Managem...
byDavies Chacko
 
Buy Tripadvisor Reviews From $15 Per Review _ 100% Safe.docx
bymarketing
 
Legal Status & Safety of Verified Cash App Accounts Explained (Year 2026).docx
byBuy Verified Cash App Accounts
 
Dr. Michael T. Conner - Serves As CEO
byDr. Michael T. Conner
 
Where and why Buy Verified Binance Accounts With Full KYC ....pdf
byhttps://propvaservice.com/
 
Buy Verified PayPal Account Online_ A Comprehensive ....docx
byBusiness
 
How to Buy Apple ID Accounts in 2026.docx
byDigital Marketing in the USA
 

Mobile input lukew

  • 1.
  • 2.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 2
  • 3.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 3
  • 4.
    GROWTH = OPPORTUNITY MobileWeb growth has outpaced desktop Web growth 8x Smartphone sales will pass PC sales in 2012 PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+ 1990 2000 2010 2020 Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 4 Source: ITU, Mark Lipacis, Morgan Stanley Research.
  • 5.
  • 6.
    During a typicalday… 84% at home 80% during misc. times throughout the day 74% waiting in lines 64% at work 6 Flickr photo by Laughing Squid
  • 7.
    Where phones used Whenever& wherever inspiration strikes Flickr photo by Steve Rhodes 7
  • 8.
    Where Input Matters… • Commerce: purchasing, maximizing sales •  Social: participating, growing communities •  Productivity: managing info, selling (or saving on) services 8
  • 9.
    Input Matters Commerce •  Amazon:over $1 billion spent via mobile devices in the past 12 months •  PayPal: mobile transactions increased six-fold in 2009: $25M to $141M •  Best Buy mobile Web users doubling every year: 30M (10), 17M (09), 6M (08) Social •  Double-digit (28%) rise in social networking on mobile Web •  Twitter: 16% of all new users start on mobile •  Facebook: 150 million active mobile users Productivity •  Email activity is 41% of US mobile Internet time •  70% of smartphone users have accessed Email on their mobile device 9 Source: http://www.lukew.com/ff/entry.asp?1188
  • 10.
    The rule ofthumb is to limit the use of forms in the mobile context. Mobile Web Design & Development, O’Reilly 2009 Filling out forms for web based services on mobile devices is a very time consuming and frustrating task for users. ACM Pervasive and Mobile Computing, 2008 In general, using input elements is difficult for users. Avoid text input where possible. Sprint Web Style Guide, 2005 10
  • 11.
    2006 High-end RAZR-inspired phone withclass 12 EDGE high-speed data & WAP 2.0/xHTML Web browser. 2G network GSM 850 / 900 / 1800 / 1900 SMS, EMS, MMS, Email, Instant Messaging 2 megapixel camera Music player Resolution: 176 x 220 pixels Colors: 262,144 (18-bit) 11
  • 12.
    4,932% Increase AT&T mobiledata traffic increased 50x in 3 years Motorola Z3 iPhone iPhone 3G iPhone 3GS 2006 2007 2008 2009 12 Source: AT&T, Morgan Stanley Research.
  • 13.
    30x the MobileTraffic 1 iPhone 30 basic feature phones 13 Source: Cisco’s “Visual Networking Index Global Mobile Data Traffic Forecast Update”
  • 14.
    Feature Phones Smart Phones •  4% browse the mobile •  35% browse the mobile Internet at least daily Internet at least daily •  6% have accessed social •  30% have accessed networks using their social networks using mobile browser their mobile browser •  12% have accessed Email •  70% have accessed on their mobile Email on their mobile Source: http://www.lukew.com/ff/entry.asp?1042 14
  • 15.
    27% of searchescome from 4% of users •  27% of all Yelp searches come from their iPhone application which had 1.4 million unique users in May 2010 •  That month Yelp had 32 million monthly unique users around the world Source: http://officialblog.yelp.com/2010/06/yelp-mobile 15
  • 16.
    Devices are different. Sales in Q2 2010 87M 24M 11M 14M 8M Series 40 Symbian Blackberry Maemo Android iPhone HARDER Input Effort EASIER 16 Source: http://bit.ly/akk2U7
  • 17.
    What Makes InputEasier? •  Screen Size •  Network Speeds •  Web Browser •  Device Capabilities 17
  • 18.
    HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 18
  • 19.
    Sales in Q22010 87M 24M 11M 14M 8M Series 40 Symbian Blackberry Maemo Android iPhone So what… no input here? HARDER Input Effort EASIER 19 Source: http://bit.ly/akk2U7
  • 20.
    •  4.1 billiontext messages sent per day in the US •  1 in 3 teens send more than 100 text messages a day •  72% of adults were sending and receiving texts in May 2010 •  61% of smartphone owners send or receive texts daily •  32% of feature phone owners send or receive texts daily Source: http://www.lukew.com/ff/entry.asp?1188 20
  • 21.
    90M TWEETS PERDAY While smart phone clients are important, there are even more people who use the mobile Twitter web site and/or SMS. Source: http://blog.twitter.com/2010/09/evolving-ecosystem.html 21
  • 22.
    SMS FAST FOLLOW Anyone in the US can receive Tweets on their phone even if they haven’t signed up for Twitter. Released August 2010 Source: http://blog.twitter.com/2010/08/introducing-fast-follow-and-other-sms.html 22
  • 23.
    SMS Form Pattern •  Single-line field for the receiver's phone number •  Button (typically placed near the phone number's field, or in the soft-keys' menu) to allow users to choose a phone number from the device's phonebook •  Multi-line field to allow users to type the message body •  Button to send the SMS Source: http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_SMS_Form 23
  • 24.
    Put Effort WhereThere’s Payoff •  Mobile Internet usage is growing rapidly •  Input on mobile devices has been difficult •  Capable devices have a disproportionate share of mobile Internet use •  There are many more opportunities for input on these devices •  But… don’t forget SMS! 24
  • 25.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 25
  • 26.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 26
  • 27.
    Take the painout of forms •  Length •  Layout •  Text Inputs •  Targets 27
  • 28.
    Take the painout of forms •  Length •  Layout •  Text Inputs •  Targets 28
  • 29.
  • 30.
  • 31.
    Unnecessary Inputs Top AlignedLabels Smart Defaults Inline Help Text Input Types 31
  • 32.
  • 33.
  • 34.
  • 35.
    Unnecessary Inputs Source: http://sender11.typepad.com/sender11/2008/06/the-anatomy-o-1.html 35
  • 36.
  • 37.
  • 38.
  • 39.
    Testing Inline Multi-stepForms •  All four versions delivered 100% pass rate •  Conversion did not go up or down on the accordion form •  Using a one page, multiple pages, or an inline multi-step form does not impact inherently impact completion •  So what does? 39
  • 40.
    Case study •  Compared two types of contact forms on its website. •  11-field Contact Us form •  4-field Contact Us form Impact •  160% increase in number of forms submitted •  120% increase in conversion ratio •  In addition, the quality of the submissions remained the same Source: http://www.imagescape.com/clients-like-you/contact-form/ 40
  • 41.
    Case study •  Checkout form (page one) with two actions: Login or Register •  Changed Register to Continue with “you do not need an account to buy” message. Impact •  45% increase in number of purchasing customers •  $1.5M increase in first month •  $300M increase in first year Source: http://www.imagescape.com/clients-like-you/contact-form/ 41
  • 42.
    Case study •  Added “optional” indicator on phone number field •  6-field Contact form Impact •  2x increase in conversion •  42% conversion rate jumped to 80% conversion rate •  Required phone number field had 37% drop off rate Source: http://blog.clicktale.com/2010/05/28/change-one-word-double-your-conversion-rate/ 42
  • 43.
    LENGTH •  Evaluate every question you ask •  Strive for succinctness •  Multiple pages help organize but… •  Removing requirements has impact! •  Look for unnecessary inputs 43
  • 44.
    Take the painout of forms •  Length •  Layout •  Text Inputs •  Targets 44
  • 45.
    45 Source: etre eyetracking tests.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
    Field Zoom onthe iPhone 50
  • 51.
    Field Zoom onthe iPhone 51
  • 52.
    Left Aligned Labelson Android 52
  • 53.
    Top Aligned Labels •  When data being collected is familiar •  Minimize time to completion •  Flexibility for localization and complex inputs •  Easier to code: no floats or tables •  Accessibility: label, field in order •  Better format for mobile •  Support multiple screen resolutions •  Require more vertical space 53
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
    Focus on Inputwith Placeholder Text 58
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
    Label Alignment onBlackberry 63
  • 64.
    LAYOUT •  Avoid multiplecolumn layouts •  Top-aligned labels on mobile Web pages •  Labels within inputs on capable devices •  Labels in native apps where there’s consistency! 64
  • 65.
    Take the painout of forms •  Length •  Layout •  Text Inputs •  Targets 65
  • 66.
  • 67.
    Text Inputs Auto-capitalization •  Turn off on email, password, URL, and other case-sensitive inputs Auto-correct •  Turn off on email, password, URL, and other non-alpha inputs •  Trim trailing spaces that may come from auto-correct (thanks Barbara!) Language, Mode, Format •  Specify if supported by devices 67
  • 68.
    Numerical Inputs •  Phones were designed for numerical input Number Declarations •  Define input mode using Wireless CSS or CSS-MP Phone Number •  Define input types using HTML5 or native OS declarations •  On devices without virtual keyboards, people will not have to switch into number mode. Common Numerical Inputs •  Use a single line field for phone numbers •  Don’t split up price fields (period is present on keyboards) 68
  • 69.
    Text Fields onBlackberry •  Email Users can insert an at sign (@) or a period (.) in an email address field by pressing the Space key. •  Date and time Users can change the date or time on devices with a trackpad using the keyboard or by moving a finger vertically on the trackpad or swiping up or down on the screen (touch). •  Number The device switches to number lock mode so that users do not need to press the Alt key to type numbers or the number keyboard appears (touch). •  Password When users type in a password field, asterisks (*) appear instead of text •  Phone Number The device switches to number lock mode so that users do not need to press the Alt key to type numbers or the number keyboard appears (touch). •  Web Address Users can insert a period (.) in an address field by pressing the Space key. Source: http://www.blackberry.com/go/uiguidelines 69
  • 70.
    HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 70
  • 71.
    HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 71
  • 72.
    HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 72
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
    Input Masks Surface formatting right up front Do not gradually reveal formatting as people enter input 77
  • 78.
    Smart Defaults Personalized Mobile Use Case Most Common 78
  • 79.
    Average input times Source:Automatic Form Filling on Mobile Devices Enrico Rukzio, Chie Noda, etc. 79
  • 80.
    TEXT INPUTS •  Defineinput types & attributes •  Input masks to help formatting •  Smart defaults 80
  • 81.
    Take the painout of forms •  Length •  Layout •  Text Inputs •  Targets 81
  • 82.
    Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 1.1 billion consumers with Nokia devices in 2009 2008 2009 2010 PROJECTED 82 Source: Nokia –deices sold. Nokia Capital markets day 2009.
  • 83.
    Where phones used One-handedTouch Flickr photo by Steve Rhodes 83
  • 84.
  • 85.
  • 86.
    Touch Targets Apple recommends a minimum target size: 29px wide 44px tall Source: Matt Legend Gemmell – mattgemmell.com 86
  • 87.
    Touch Targets Recommended touch targetsize is 9mm/34px Minimum touch target size is 7mm/26px Minimum spacing between elements is 2mm/8px Visual size is 60-100% of the touch target size 87
  • 88.
    Target Sizes forSlipping Fingers If you tap and hold in the yellow area, button will highlight If you drag finger & release in green area, button will still trigger If you let go outside green area, button does not trigger Source: Matt Legend Gemmell – mattgemmell.com 88
  • 89.
    TARGETS •  Accommodate touchtarget sizes •  Account for errors with flexibility 89
  • 90.
    Take the painout of forms •  Form Length •  Structure •  Label Placement •  Inputs •  Targets 90
  • 91.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 91
  • 92.
    Going Beyond Forms… 1. Web Services for Instant Experiences 2.  Touch 3.  Location Detection 4.  Audio 5.  Images & Video 92
  • 93.
  • 94.
  • 95.
    Re-create your identity& friends list 95
  • 96.
  • 97.
    Web Services forAccount Creation 97
  • 98.
    Web Services forAccount Creation 98
  • 99.
  • 100.
  • 101.
    Web Services onMobile 101
  • 102.
    Instant on fromthe Mobile 102
  • 103.
  • 104.
    WEB SERVICES •  Removebarriers to account creation •  Don’t re-create what they’ve already done •  Deliver an instant-on start experience 104
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
    AUDIO Voice commands cansubstitute text input 110
  • 111.
  • 112.
  • 113.
  • 114.
    Location Systems Accuracy Positioning Time Battery Life GPS 10m 2-10 minutes (only 5-6 hours on outdoors) most phones WiFi 50m (improves with Almost instant No additional density) (server connect & effect lookup) Cell tower 100-1400m (based on Almost instant Negligible triangulation density) (server connect & lookup) Single Cell 500-2500m (based on Almost instant Negligible Tower density) (server connect & lookup) IP Country: 99% Almost instant Negligible City: 46% US, 53% Intl (server connect & ZIP: 0% lookup) Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS 114
  • 115.
    LOCATION Location detection candeliver relevant content without requiring a lot of input 115
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
    IMAGES & VIDEO Considerhow photo and video integration simplify or extend input 120
  • 121.
    Mobile Device Capabilities •  Multi-touch sensors •  Location detection •  Device positioning & motion: from an accelerometer •  Orientation: direction from a digital compass •  Gyroscope: 360 Degrees of motion •  Audio: input from a microphone; output to speaker •  Video & image: capture/input from a camera •  Dual cameras: front and back •  Device connections: through Bluetooth between devices •  Proximity: device closeness to physical objects •  Ambient Light: light/dark environment awareness 121
  • 122.
    MOBILE INPUT 1.  Putin the effort where there’s payoff. 2.  Take the pain out of forms. Put it on yourself. 3.  Look beyond forms for input. 122
  • 123.
    More Information •  @lukew • www.lukew.com Web Form Design •  www.rosenfeldmedia.com/ books/webforms/ •  Discount code: (25%) 123