Mobile Friendly Forms

A primer on how to tackle a mobile redesign of your web forms. Given at the HighEdWeb Pittsburgh regional conference on April 9, 2014.

Transcript

1. Creating Mobile Friendly Web Forms @joemcgill
2. November 1995 A sweet, sweet fantasy
3. Few Tools, Many Uses • Text • Checkbox • Radio • Select • Textarea
4. Joe McGill (just now) “Forms exist to help USERS complete tasks. Make them easy and enjoyable.”
6. Why Mobile Matters
7. The Mobile Moment @Luke (goo.gl/OQqP6B)
8. The Mobile Moment @Luke (goo.gl/OQqP6B) | 1TNW (http://goo.gl/D3hOc8) • Facebook: 101 million (78%) • Twitter: 76% of users monthly1 • Amazon: > 50% of shopping was mobile during 2013 holiday season. • Yelp: 60% of all searches (Sept. 2013)
9. The Mobile Moment Pew (goo.gl/3O9mqh & goo.gl/lSGRhZ) 79% of 18-24 year olds 
 in the U.S. own smartphones 74% of 12-17 year olds 
 are mobile internet users
10. The Mobile Moment 38% of web traffic to admissions.wustl.edu was mobile during announcement week 
 in 2014. (+23% from 2013)
11. Time to Audit your forms
12. Reasons to audit • Identify opportunities for improvement • Understand the technical/human challenges • Compare against peers • Makes you look smart to say, “I’m conducting an audit.”* ! * Not really a reason
13. Questions to Ask • Why do we need this info? (#1 question) • Functional needs/tools required • Style patterns • Organization methods • HTML elements in use • Content patterns
14. Redesigning 101
15. Limit Inputs < 7 Conversion rates decrease as more inputs are added. ! Select boxes and text areas are 
 the hardest to use. Dan ZarElla (goo.gl/RZYqSa)
16. Use PERK To Reduce the number of inputs • Postpone
 Only ask questions when you need it • Eliminate
 If you don’t need it, don’t ask it • Reduce
 Combine Inputs or deduce from one • Keep
17. @lukew (http://goo.gl/pYEJzM) Credit card inputs
18. Label placement (you are using labels, right!?)
19. <label for=“topping”> What goes on a salad? </label> <input type=“text” id=“topping”> example Label Markup
20. label Location Top Alignment UX Movement (goo.gl/KeiNZU)
21. label Location Right Alignment UX Movement (goo.gl/lGAN7X)
22. label Location Inline Labels • Make focus obvious • Don’t lose context • Replace empty fields • Placeholders don’t replace labels Baymard (goo.gl/8vKh6i)
23. Organization
24. Organize Inputs into 
 Familiar Groups
25. Y0UR M1ND 15 R34D1NG 7H15 4U70M471C4LLY W17H0U7 3V3N 7H1NK1NG 4B0U7 17
26. Use Multi-screen Forms to Reduce Clutter ! ! ! ! ! ! Use progress bars
 between pages
 ! ! ! ! ! ! Hide steps behind accordions
27. Usability Improvements
28. Use appropriate inputs • Use checkboxes for yes/no and 
 true/false inputs • Use radios If a person has to select an option (and set smart defaults) • Use selects instead of radios when users are selecting from greater 
 than 3 items
29. Apple suggests 44x 44 px ! iOS HIG
 (goo.gl/dQJuje) Use touch-friendly targets
30. Make Completion Obvious • Buttons should look like buttons • Make primary actions stand out using size, color or contrast • Place primary actions in the path of completion
31. Flexible Styles • Use CSS instead of tables to align 
 your forms • Set inputs to max-width: 100% in your CSS to make inputs flexible • Mobile frameworks like Bootstrap or Foundation are good references
32. Eliminate distractions, detours and Dead ends • Provide help text when a question is uncommon or unnerving • Don’t interrupt the flow 
 by incentivizing exits (e.g. coupon codes) • Provide inline validation to cut down on mistakes and backtracking
33. Validation Tips • Validate and normalize inputs when a user exits focus • Make errors obvious so they’re easy 
 to correct • Save progress after an error • Remove captchas!!
34. Captchas are evil • They take users 9+ seconds to solve
 Stanford Study (goo.gl/8vKh6i) • Increased fail rate
 moz.com (goo.gl/MxHjKc) • Only use spam filtering if you have a spam problem
35. Be mindful of accessibility • Good accessibility is good usability • Test from different input devices (mouse, keyboard, touch, voice) • Use ARIA Role Tags as an way to make accessible forms MORE accessible
36. Level Up
37. USE HTML5 Input types • HTML5 introduced new input types: (search, email, url, date, tel …) • Gives browsers more info about the data you’re expecting: • Custom UI controls • Better Mobile Keyboards • Automatic Validation • Old browsers treat them like `text` HTML5 Doctor (goo.gl/XJmUsZ)
38. Custom Keyboards Search
39. Custom Keyboards Tel
40. Custom Keyboards email
41. Custom UI Components Mikkel Bo Schmidt - Tradeshift (goo.gl/h2H1sl)
42. Progressive enhancement Test for features instead of 
 browser detection ! • History of the browser uA string
 WebAIM (goo.gl/fK13Fh) • Cutting the mustard
 BBC (goo.gl/Zd1BxX) • Grade components, not browsers Filament Group (goo.gl/GMHKvo)
45. 7H4NK5!