Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Friendly Forms

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.


Joe McGill

April 09, 2014


  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.”
  5. None
  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

  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

 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)
  43. None
  44. None
  45. 7H4NK5!