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

2. @malekontheweb
Forms Part 2 – Judgement Day?

3. @malekontheweb
Forms Part 2 –The Legend of Curly’s Gold?

4. @malekontheweb
Forms Part 2 – !

5. @malekontheweb
Input LeInput Lengths

6. @malekontheweb

7. @malekontheweb
ZIP Code Field Size
▪ “The size of the input communicates the length of the
content needed.”
–Andrew Coyle, Product Designer
–https://uxdesign.cc/design-better-input-fields-
3d02985a8e24
▪ “Thou shalt size the input fields according to their
expected input”
–Johan Ronsse, Designer
–https://mono.company/journal/design-practice/the-10-
commandments-of-good-form-design-on-the-web/

8. @malekontheweb
ZIP Code Field Size (2)
▪ However… don’t make the size too small
–Test with several browsers – font rendering may differ
–Test with maximum length of largest width character
(i.e. M orW)
–If users from other countries expected, test with other
ZIP / postal code formats

9. @malekontheweb
Single Column

10. @malekontheweb
https://baymard.com/blog/avoid-multi-column-forms

11. @malekontheweb
Multiple fields on one line

12. @malekontheweb
Multiple fields on one line

13. @malekontheweb
Are Two Columns Really Bad?
▪ Research by ConversionXL Institute
–https://conversionxl.com/research-study/form-field-
usability/
▪ “Survey participants completed the linear, single-
column form (n = 356) an average of 15.4 seconds
faster than the multi-column form (n = 346).This
was significantly faster at a 95% confidence
level.”

14. @malekontheweb
But There is an Exception…
▪ KathrynWhitenton of the Nielsen Norman Group
–https://www.nngroup.com/articles/web-form-design/
▪ “Exceptions to this rule: short and/or logically
related fields such as City, State, and Zip Code can
be presented on the same row.”
▪ If implementing, testing is still recommended…

15. @malekontheweb
“Text fields should be about the same size as the expected input
since it’s extremely error prone when users can’t see their full
entry.”
- Nielsen Norman Group

16. @malekontheweb
Too small!

17. @malekontheweb
*******
********** **
ACCOUNT
MANAGEMENT UX

18. @malekontheweb
Allow for a show password option (i.e. eBay)

19. @malekontheweb
Show Password JavaScript
▪ Angular – Bootstrap – ngx-show-hide-password
– https://github.com/osahner/ngx-show-hide-password
▪ Bootstrap Show Password
– https://github.com/wenzhixin/bootstrap-show-password
▪ jQuery hideShowPassword
– https://github.com/cloudfour/hideShowPassword
▪ react-password-mask
– https://www.npmjs.com/package/react-password-mask
▪ Vue-password
– https://github.com/skegel13/vue-password

20. @malekontheweb
Sign-on – confirm password field

21. @malekontheweb
Confirm Password Issues
▪ Jessica Enders, Principal of former design
consultancy Formulate
▪ “By having double entry for one or more fields on
a web form, we are asking the entire user
population to do more work, for the sake of
preventing what could be a very small number of
errors.”
–https://www.formulate.com.au/blog/double-entry-
form-fields

22. @malekontheweb
Confirm Password Field Case Study
▪ Formisimo, form analytics company
▪ “We noticed that over a two month period, our
password repeat field … was responsible for over
a quarter of all the people that abandoned our
sign up process:”
–https://www.formisimo.com/blog/case-study-small-
changes-lead-to-a-55-increase-in-conversions/

23. @malekontheweb
SMS 2FA (Two-Factor Authentication)
▪ Ensure code changes every time
▪ Keep verification code page free from distractions
▪ 4-6 digits to be typed typically fine; longer may
frustrate users
▪ Do not show the whole phone number – just
couple of digits

24. @malekontheweb

25. @malekontheweb

26. @malekontheweb
Credit Card Entry

27. @malekontheweb
Though it May Seem Obvious…
▪ Keep credit card entry quick
▪ Avoid distractions
▪ Describe all form fields
▪ Explain errors
▪ More ideas:
–https://designmodo.com/ux-credit-card-payment-
form/

28. @malekontheweb
Auto Detect Credit Card Type
▪ Stack Overflow discussion
–https://stackoverflow.com/questions/72768/
▪ credit-card-type
–https://github.com/braintree/credit-card-type
▪ jQuery Credit CardValidator
–https://github.com/PawelDecowski/jQuery-
CreditCardValidator/

29. @malekontheweb
Entering Credit Card Information
▪ “Errors during the checkout process are generally
problematic as they are likely to lead to cart
abandonments, and card validation errors are
even worse because users are particularly volatile
when entering sensitive information such as their
credit card data”
–Baymard Institute
–https://baymard.com/checkout-usability/credit-card-
patterns

30. @malekontheweb

31. @malekontheweb
Spacing Patterns and Formatting
▪ Card type, spacing patterns, etc. from Baymard
Institute
–https://baymard.com/checkout-usability/credit-card-
patterns
▪ NPM package to add spaces to credit card numbers
–https://www.npmjs.com/package/credit-card-space
▪ Angular-credit-cards
–https://github.com/bendrucker/angular-credit-cards
▪ React-maskedinput
–https://github.com/insin/react-maskedinput

32. @malekontheweb

33. @malekontheweb
Don’t Use Four Fields!
▪ ‘With split fields … it adds in an extra cognitive
load to the user.
"Do I need to manually jump to each field?“
"Will the system do it for me?“
"What if I hit tab myself but the form
automatically jumped - will it have jumped into
the 3rd field instead...?“’
–https://ux.stackexchange.com/questions/98914/

34. @malekontheweb

35. @malekontheweb
Credit Card Expiration Date
▪ “The greater the difference between the format
of the expiry date on the card and the format of
the expiry date in the UI, the greater the cognitive
load on users when transcribing and validating
their transcription.”
–Jeffrey Morgan, UI Designer and developer
–http://usabilityetc.com/2015/03/credit-card-
expiration-date-user-interface/

36. @malekontheweb
Credit Card Expiration Date (2)
▪ Label the month and year fields
▪ 2-digit year recommended – that is what is seen
on cards, though many use 4-digits
▪ If showing the month name, show the number
first, i.e. “02 – Feb” for ease of scanning
▪ Pulldowns require extra clicks / presses, though
reduces need to verify for invalid input – A/B test

37. @malekontheweb

38. @malekontheweb

39. @malekontheweb
https://developers.google.com/web/fundamentals/design-and-
ux/input/forms/

40. @malekontheweb
https://stackoverflow.com/questions/25163891/

41. @malekontheweb
Grouping Fields

42. @malekontheweb
Which Approach?
▪ Group related fields into sections and show all on
one long page
▪ Group related fields into sections that collapse /
expand, allowing the user to show / hide each
section
▪ Put different sections of input on separate pages

43. @malekontheweb
One Page, Split into Sections
▪ One page has a smaller “interaction cost” – fewer
clicks / presses as one doesn’t have to navigate
between pages
▪ Easier to see all answers before submitting
without relying on separate “Review” screen for
multi-page forms.
–Raluca Budiu, Director of Research
–Nielsen Normal Group
–https://www.nngroup.com/articles/wizards/

44. @malekontheweb

45. @malekontheweb
Accordion-Style Checkout Issues
▪ Consider automatically collapsing other sections
when opening new sections, to simplify display
▪ Browser back button should not go to previous
webpage, but previous accordion section
▪ Auto-scroll users when opening a section
▪ Animate step changes
–Baymard Institute
–https://baymard.com/blog/accordion-checkout-usability

46. @malekontheweb
Argument for “One Thing Per Page”
▪ Adam Silver, designer and coder
▪ “Six years later (2014), when I was at Just Eat, the
same thing happened.We redesigned the single-
page checkout flow so that each section became
its own page. …
The result was an extra 2 million orders a year.”
–https://www.smashingmagazine.com/2017/05/better-
form-design-one-thing-per-page/

47. @malekontheweb
Accessibility Argument – Multi-Page
▪ “This helps make long forms less daunting and
easier to understand, particularly for people who
are less experienced using computers or who
have various cognitive disabilities.”
–W3CWeb Accessibility Initiative
–https://www.w3.org/WAI/tutorials/forms/multi-page/

48. @malekontheweb

49. @malekontheweb

50. @malekontheweb
https://uxplanet.org/the-18-must-do-principles-in-the-form-
design-fe89d0127c92

51. @malekontheweb
Let Users Save Their Work
▪ Provide a “Save” button so users can fill out the
form later
▪ Ensure it stands out from “Continue” button, but
placed near button so user can find it easily
–Raluca Budiu, Nielsen Normal Group
–https://www.nngroup.com/articles/wizards/

52. @malekontheweb
One More Thing… Prepare Users
▪ Depending on purpose, warn users of
approximate time needed
▪ If IDs, cards, information needed, prompt users
–BizTesty
–https://bitzesty.com/2017/03/20/web-form-ux-
making-long-complex-forms-easier-users/

53. @malekontheweb

54. @malekontheweb
Styling FormsStyling FormsStyling FormsStyling Forms

55. @malekontheweb
General Form Styling Notes
▪ Ensure a pressed button appears different
▪ Don’t cram form elements together – white space
is your friend
▪ Blur / gray out read-only fields
▪ Consistent look-and-feel throughout website
▪ Highlight active field

56. @malekontheweb
Bootstrap - https://getbootstrap.com/

57. @malekontheweb
Material Design -
https://material.io/guidelines/components/text-fields.html

58. @malekontheweb
Material Design Libraries
▪ Angular Material
–https://material.angular.io/
▪ Material – UI (React)
–http://www.material-ui.com/
▪ MUI (VanillaJS, Angular, React)
–https://www.muicss.com/
▪ Vue Material
–https://vuematerial.io/

59. @malekontheweb
Semantic UI - https://semantic-ui.com/

60. @malekontheweb
Miscellaneous

61. @malekontheweb
Autofocus First Field
▪ Autofocus on first form field
<input type="text" name= " name" autofocus>
▪ Combine with highlighting or differentiating
active field
▪ Lets user know where they are in form and
immediately start typing

62. @malekontheweb
Which Would You Prefer?
▪ “The form has been submitted. A newsletter
should arrive shortly.”
▪ “Thank you for taking the time to sign up for our
newsletter!You should receive your first
newsletter soon!”
▪ “Design Better Form”
–https://lollypop.biz/blog/2017/august/design-better-
form

63. @malekontheweb

64. @malekontheweb
WHY NOT ALL CAPS?
▪ “The more nonparallel edges your text has, the
higher the shape contrast it has. High shape
contrast makes words easier for users to
recognize.”
–Anthony, UX Movement
–http://uxmovement.com/content/all-caps-hard-for-
users-to-read/

65. @malekontheweb
Remember Everything During a Process
▪ Retyping information frustrates users
▪ Too much may drive them elsewhere
▪ For complicated, multi-step forms, users will try
different paths than what you expected

66. @malekontheweb
Dark Patterns

67. @malekontheweb
What are “Dark Patterns”?
▪ According to Harry Brignull of
http://darkpatterns.com/ :
–“Dark Patterns are tricks used in websites and apps
that make you buy or sign up for things that you
didn't mean to.”

68. @malekontheweb

69. @malekontheweb

70. @malekontheweb

71. @malekontheweb

72. @malekontheweb

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