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.
7. @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 MeThink!”
▪ Don’t display correctly everywhere
9. @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
10. @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
11. @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
15. @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/
16. @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/
17. @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/
18. @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/
19. @malekontheweb
▪ Is the SPAM block needed?
▪ Too confusing?
–“What’s an integer?”
▪ Provide some white space
▪ One positive: link to get help
27. @malekontheweb
Automate Address by IP Location
▪ http://ip2location.com
▪ http://dev.maxmind.com/geoip
▪ Not reliable when proxy,VPN, anonymizer, etc.
used
28. @malekontheweb
Automate Address by Geolocation
▪ http://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…
29. @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
32. @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”
–http://baymard.com/blog/mobile-form-usability-
single-input-fields
33. @malekontheweb
What Else Could Be Split?
▪ Name
▪ ZIP Code
▪ Birthdate (some debate on this one)
▪ Address (house number and street fields)
37. @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
–http://unbounce.com/conversion-rate-
optimization/how-to-optimize-contact-forms/
▪ Ask only what is needed and NO MORE!
39. @malekontheweb
Validate Email Before User Submits
▪ mailcheck.js – can suggest common domains if
user misspells them
–https://github.com/mailcheck/mailcheck
▪ Regular expression validation
–http://stackoverflow.com/questions/46155/
▪ Could do MX record validation, but beware DoS
–https://www.npmjs.com/package/legit
42. @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
–http://baymard.com/blog/password-requirements-
and-password-reset
▪ You’ll have to decide…
47. @malekontheweb
What can we learn?
▪More descriptive error messages inside
the form, not just above or below
▪Test on multiple devices
48. @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
–http://baymard.com/blog/inline-form-validation
(9/27/2016)
▪ …but can one go too far?
49. @malekontheweb
Invalid email address.
Invalid email address.
Your email addresses do not match.
Your email addresses do not match.
test@example.com
test@example.com
test@examt
test@example.cotest@examt
This field cannot be empty.
This field cannot be empty.
50. @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
51. @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.)
–http://ux.stackexchange.com/questions/74531/
–http://baymard.com/blog/inline-form-validation
53. @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
54. @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
–http://ux.stackexchange.com/questions/9220/
–http://baymard.com/blog/mobile-forms-avoid-inline-labels
▪ “The opposite of helpful”
–http://www.uxbooth.com/articles/the-new-rules-of-form-
design/
55. @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
56. @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…
57. @malekontheweb
“InfieldTop 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/
59. @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/
–http://codepen.io/chriscoyier/pen/CiflJ
–https://codepen.io/collection/IjFib/
62. @malekontheweb
Redundant Placeholder as Label
▪ Could be useful to draw attention?
–http://ux.stackexchange.com/questions/83380/
▪ Or does it clutter the form with redundancy?
▪ Previously mentioned placeholder issues…
63. @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…
64. @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
–http://www.usatoday.com/story/tech/2016/05/31/360-
million-myspace-accounts-breached/85183200/
▪ Yahoo hack: 1 billion accounts compromised
–https://www.theguardian.com/technology/2016/dec/14/ya
hoo-hack-security-of-one-billion-accounts-breached
65. @malekontheweb
How to Increase Trust?
▪ Contact information
–Phone and postal – not just email
▪ Guest checkout option
▪ No SPAM guarantees
▪ Shorter forms or progress indicators
66. @malekontheweb
How to Increase Trust?
▪ Social media profiles
▪ Testimonials / reviews
▪ Trust seals
–http://conversionxl.com/research-study/trust-seals/
▪ Website stability
67. @malekontheweb
User Trust Studies and Resources
▪ http://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/
69. @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
70. @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?