$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Andrew Malek

Other Decks in Design

Transcript

  1. @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
  2. @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
  3. @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
  4. @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
  5. @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/
  6. @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/
  7. @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/
  8. @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/
  9. @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/
  10. @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/
  11. @malekontheweb ▪Is the SPAM block needed? ▪Too confusing? - “What’s

    an integer?” ▪Provide some white space ▪One positive: link to get help
  12. @malekontheweb ▪Never repeat a question ▪Show or hide questions as

    needed – “progressive disclosure” –https://ux.stackexchange.com/questions/31082/
  13. @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…
  14. @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
  15. @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
  16. @malekontheweb What Else Could Be Split? ▪ Name ▪ ZIP

    Code ▪ Birthdate (some debate on this one) ▪ Address (house number and street fields)
  17. @malekontheweb ▪ Good description ▪ “Free” ▪ No SPAM guarantee

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

    option “Not specified”? –https://ux.stackexchange.com/questions/25826/
  19. @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!
  20. @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/
  21. @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…
  22. @malekontheweb What can we learn? ▪More descriptive error messages inside

    the form, not just above or below ▪Test on multiple devices 
  23. @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?
  24. @malekontheweb Invalid email address. Invalid email address. Your email addresses

    do not match. Your email addresses do not match. [email protected] [email protected] test@exam t [email protected] test@exam t This field cannot be empty. This field cannot be empty.
  25. @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
  26. @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
  27. @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
  28. @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/
  29. @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
  30. @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…
  31. @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/
  32. @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/
  33. @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…
  34. @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…
  35. @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
  36. @malekontheweb How to Increase Trust? ▪ Contact information –Phone and

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

    Testimonials / reviews ▪ Trust seals –https://conversionxl.com/research-study/trust-seals/ ▪ Website stability
  38. @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/
  39. @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
  40. @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?