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

Why Nobody Fills Out My Forms

Why Nobody Fills Out My Forms

Has your web form conversion rate hit a wall? Are users not receiving confirmation e-mails, getting pestered with password or data format warnings *after* they finish entering their information, or bailing after being asked the same questions multiple ways? Find out why not enough people are filling out your web forms, and learn suggestions of A/B tests you can try to help encourage more people to interact.

Andrew Malek

March 11, 2018

More Decks by Andrew Malek

Other Decks in Design


  1. Why Nobody Fills Out My Forms Andrew Malek http://malektips.com/ @malekontheweb

  2. @malekontheweb Did We Always Care About Web Form Design?

  3. @malekontheweb Usability? AltaVista 2001 – courtesy Internet Archive

  4. @malekontheweb Mobile devices?

  5. @malekontheweb So…Why Don’t People Fill Out Those Web Forms Now?

  6. @malekontheweb Why People Don’t Fill Out Forms? ▪ Too long

    ▪ Too hard to determine what must be entered ▪ Too hard to determine how to enter information –“Don’t Make Me Think!” ▪ Don’t display correctly everywhere
  7. @malekontheweb Don’t Take My Word For Things Here… TEST, TEST,

  8. @malekontheweb A/B Testing ▪ Calculate conversion rate percentage between control

    and experiment ▪ Options include: –Button colors –Form instruction wording –Number of form fields –Order of form fields
  9. @malekontheweb A/B Testing Considerations ▪ Results can be skewed –Demographics

    –Page speed –Browser / code issues –Unexpected traffic sources ▪ Can end test too soon if results prove conclusion too early
  10. @malekontheweb Testing Options – Open Source ▪ Alephbet - https://github.com/Alephbet/alephbet

    –JavaScript framework with Google Analytics support ▪ PlanOut - https://github.com/facebook/planout –Multiple language support - from Facebook ▪ Sixpack - http://sixpack.seatgeek.com/ –Multiple language support
  11. @malekontheweb Testing Options - Services ▪ Google Analytics Content Experiments

    - https://developers.google.com/analytics/solutions/ ▪ Kissmetrics - https://www.kissmetrics.com/ ▪ Optimizely - https://www.optimizely.com/ ▪ Unbounce - https://unbounce.com/ ▪ Visual Website Optimizer - https://vwo.com/
  12. @malekontheweb A/B Testing Resources ▪ https://marketingland.com/watch-false-positives-3-ways-get- better-testing-105386 ▪ https://www.smashingmagazine.com/2010/06/the-ultimate- guide-to-a-b-testing/

    ▪ https://conversionxl.com/blog/12-ab-split-testing-mistakes-i- see-businesses-make-all-the-time/ ▪ https://uxdesign.cc/how-netflix-does-a-b-testing-87df9f9bf57c ▪ https://www.nngroup.com/articles/ab-testing-and-ux-research/
  13. @malekontheweb

  14. @malekontheweb “People have trouble understanding required and optional signals …

    common practice to use a red asterisk ‘*’ … that didn’t work well enough, even in a survey of UX professionals” - https://www.nngroup.com/articles/qualitative-surveys/
  15. @malekontheweb ‘Asterisk as Required’ Issues ▪ Small asterisk can be

    easily overlooked ▪ Color-blind? Red asterisk may not stand out ▪ Some argue opposite - only labeling fields as optional –Users may skip all fields not marked as required –http://uxmovement.com/forms/why-users-fill-out- less-if-you-mark-required-fields/
  16. @malekontheweb “The worst problem about Reset is that users click

    the button by mistake when they wanted to click Submit …all your work is gone!” “The extra choice requires extra thinking…” https://www.nngroup.com/articles/reset-and-cancel-buttons/
  17. @malekontheweb Other Issues with Reset Button ▪ “Reset”, “Clear”, etc.

    adds clutter ▪ If “Clear” needed, show confirmation dialog ▪ Main CTA button should stand out ▪ “Submit” not clear – use verb or phrase –“Checkout”, “Join Now!”, “Send Comment”, “Post Message”, “Download”, “Ask Question” –http://blog.wishpond.com/post/103290853633/
  18. @malekontheweb ▪Is the SPAM block needed? ▪Too confusing? - “What’s

    an integer?” ▪Provide some white space ▪One positive: link to get help
  19. @malekontheweb

  20. @malekontheweb ▪Create account button in red ▪White space for mobile?

  21. @malekontheweb

  22. @malekontheweb ▪Never repeat a question ▪Show or hide questions as

    needed – “progressive disclosure” –https://ux.stackexchange.com/questions/31082/
  23. @malekontheweb

  24. @malekontheweb Why is the United States not selected? Why isn’t

    it the first option?
  25. @malekontheweb Why are “Select One” and “-----” options? Make the

    label “Select a State”?
  26. @malekontheweb Automate Address by IP Location ▪ https://www.ip2location.com/ ▪ http://dev.maxmind.com/geoip

    ▪ Not reliable when proxy, VPN, anonymizer, etc. used
  27. @malekontheweb Automate Address by Geolocation ▪ https://dev.w3.org/geo/api/spec-source.html ▪ Reverse geocode

    lat / long to location –https://developers.google.com/maps/documentation/ javascript/examples/geocoding-reverse –http://www.geonames.org/ ▪ Requires user giving share permission ▪ Location can be faked…
  28. @malekontheweb Common Form Issue – Phone Numbers ▪ What you

    want: –1234567890 ▪ What you get: –123-456-7890 –(123) 456-7890 –123.456.7890 –(123)-456-7890 –….etc
  29. @malekontheweb

  30. @malekontheweb 213 4 21 212

  31. @malekontheweb Other Split Phone Number Issues ▪ User could use

    “Next” and “Previous” buttons on mobile phone keyboard to switch between parts –Few did in Baymard Institute e-commerce study ▪ Split fields make users question what is required if one part of multi-part input is labeled “Required” –https://baymard.com/blog/mobile-form-usability- single-input-fields
  32. @malekontheweb What Else Could Be Split? ▪ Name ▪ ZIP

    Code ▪ Birthdate (some debate on this one) ▪ Address (house number and street fields)
  33. @malekontheweb

  34. @malekontheweb ▪ Good description ▪ “Free” ▪ No SPAM guarantee

    ▪ No sharing information guarantee ▪ Easy to unsubscribe
  35. @malekontheweb ▪Really necessary (should ask this about every field)? ▪Provide

    option “Not specified”? –https://ux.stackexchange.com/questions/25826/
  36. @malekontheweb Form Length and Conversions ▪ Reducing contact form from

    11 to 4 fields caused 120% conversion ▪ Expedia removed one field - $12million profit ▪ Asking for age caused a 3% dip in conversions –https://unbounce.com/conversion-rate- optimization/how-to-optimize-contact-forms/ ▪ Ask only what is needed and NO MORE!
  37. @malekontheweb ▪User never gets confirmation email ▪How to prevent this

  38. @malekontheweb Validate Email Before User Submits ▪ mailcheck.js – can

    suggest common domains if user misspells them –https://github.com/mailcheck/mailcheck ▪ Regular expression validation –https://stackoverflow.com/questions/46155/
  39. @malekontheweb

  40. @malekontheweb ▪Enforce strong passwords? ▪Let the user know what is

    “strong” during form submission
  41. @malekontheweb However... ▪ “[S]trict password rules can cause an 18.75%

    checkout abandonment rate among existing account users as they try to sign in” –Baymard Institute –https://baymard.com/blog/password-requirements- and-password-reset ▪ You’ll have to decide…
  42. @malekontheweb –https://github.com/kartik-v/strength-meter –https://github.com/ablanco/jquery.pwstrength.bootstrap –https://github.com/dropbox/zxcvbn

  43. @malekontheweb Can combine jquery.pwstrength.bootstrap and zxcvbn for complex strength estimator

    and a visual meter
  44. @malekontheweb

  45. @malekontheweb

  46. @malekontheweb What can we learn? ▪More descriptive error messages inside

    the form, not just above or below ▪Test on multiple devices 
  47. @malekontheweb Inline Validation is Good ▪ Can see errors at-a-glance

    while typing ▪ No waiting for slow form submission ▪ Error message should change as user alters field ▪ Yet 40% of “major” e-commerce sites lack this –https://baymard.com/blog/inline-form-validation (9/27/2016) ▪ …but can one go too far?
  48. @malekontheweb Invalid email address. Invalid email address. Your email addresses

    do not match. Your email addresses do not match. [email protected] [email protected] [email protected] t [email protected] [email protected] t This field cannot be empty. This field cannot be empty.
  49. @malekontheweb Showing Error Messages Prematurely ▪ Showing errors before user

    fills out fields ▪ Clutters up form ▪ Confusing and distracting ▪ Users feel “scolded”, especially with messages in red text or ALL CAPS
  50. @malekontheweb How Not to Show Errors Too Early ▪ Show

    errors after user leaves a field (JavaScript ‘blur’) ▪ Confirmation fields - show errors after user leaves both fields, and on form submit if user forgets field ▪ OK to show suggestions at first for complicated fields (password restrictions, max field length, etc.) –https://ux.stackexchange.com/questions/74531/ –https://baymard.com/blog/inline-form-validation
  51. @malekontheweb

  52. @malekontheweb Pros: Inline Placeholders as Labels ▪ Fit more fields

    on small mobile screens ▪ Could increase conversions? –Form appears smaller –Screen less cluttered –User might not swipe through longer form
  53. @malekontheweb Cons: Inline Placeholders as Labels ▪ As user fills

    out form, instruction label disappears –In a study, users often “deleted their entire input just to see the label again” ▪ Inline validation shows, but label name gone –https://ux.stackexchange.com/questions/9220/ –https://baymard.com/blog/mobile-forms-avoid-inline-labels ▪ “The opposite of helpful” –http://www.uxbooth.com/articles/the-new-rules-of-form- design/
  54. @malekontheweb Cons(2): Inline Placeholders as Labels ▪ People might confuse

    placeholder text as a filled- out field and ignore it –https://www.nngroup.com/articles/form-design- placeholders/ ▪ Light-gray placeholder text may be hard to see –Not enough color contrast with background –Accessibility issues
  55. @malekontheweb Could These Inline Placeholders Work? ▪ Some argue if

    yes – if very few form fields –i.e. just username and password ▪ Or – what if placeholder labels don’t completely disappear…
  56. @malekontheweb “Infield Top Aligned Form Label” ▪Label doesn’t disappear ▪Form

    smaller, may be easier to scan? –http://uxmovement.com/forms/why-infield-top-aligned- form-labels-are-quickest-to-scan/
  57. @malekontheweb “Float Label Pattern” Last Name Last Name Jones

  58. @malekontheweb Float Label Pattern ▪ Inline form label moves inside

    box when user selects field and starts typing –http://mds.is/float-label-pattern/ –https://css-tricks.com/float-labels-css/ –https://codepen.io/chriscoyier/pen/CiflJ –https://codepen.io/collection/IjFib/
  59. @malekontheweb https://github.com/bkzl/vue-float-label (Vue.js)

  60. @malekontheweb

  61. @malekontheweb Redundant Placeholder as Label ▪ Could be useful to

    draw attention? –https://ux.stackexchange.com/questions/83380/ ▪ Or does it clutter the form with redundancy? ▪ Previously mentioned placeholder issues…
  62. @malekontheweb Placeholder Hints with Labels ▪ Pros: –Use less screen

    real estate to display instructions –Guide users to desired input format ▪ (i.e. “Phone Format: nnn-nnn-nnnn”) ▪ Cons: –Previously mentioned placeholder issues…
  63. @malekontheweb A Matter of Trust ▪ LinkedIn lost 167 million

    account credentials in data breach –http://fortune.com/2016/05/18/linkedin-data-breach- email-password/ ▪ 360 million Myspace accounts breached –https://www.usatoday.com/story/tech/2016/05/31/360- million-myspace-accounts-breached/85183200/ ▪ Every single Yahoo account was hacked - 3 billion in all –http://money.cnn.com/2017/10/03/technology/business/ya hoo-breach-3-billion-accounts/index.html
  64. @malekontheweb How to Increase Trust? ▪ Contact information –Phone and

    postal – not just email ▪ Guest checkout option ▪ No SPAM guarantees ▪ Shorter forms or progress indicators
  65. @malekontheweb How to Increase Trust? ▪ Social media profiles ▪

    Testimonials / reviews ▪ Trust seals –https://conversionxl.com/research-study/trust-seals/ ▪ Website stability
  66. @malekontheweb User Trust Studies and Resources ▪ https://baymard.com/blog/perceived-security-of- payment-form ▪

    https://blog.kissmetrics.com/first-step-of-checkout/ ▪ https://designshack.net/articles/ux-design/create-a- ui-that-users-can-trust/ ▪ https://www.koozai.com/blog/search-marketing/6- essential-trust-signals-for-your-website-to-follow/
  67. @malekontheweb

  68. @malekontheweb Test, Test, Test! ▪ Can we save users time?

    –Automate tasks –Inline validate the right way and not too early –Shorten forms ▪ Can we focus users on the right tasks? –Required vs. optional fields –More descriptive “Submit” / CTA button
  69. @malekontheweb Test, Test, Test! ▪ Can instructions be made easier?

    ▪ Can redundant questions be removed? ▪ Are SPAM Blocks / CAPTCHAs not needed? ▪ Can we test on different devices?
  70. @malekontheweb

  71. @malekontheweb http://malektips.com @malekontheweb