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

More Decks by Joe McGill

Other Decks in Programming


  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!