PROJECTS
UX patterns
RESOURCES FOR
IMPROVING FORM UX
RESOURCESWCAG-Compliant Forms
https://www.w3.org/WAI/tutorials/forms/
The WCAG (Web Content Accessibility Guidelines) are the
most concise resource for designing accessibility. The form
section outlines what is expected of designers and developers
alike in order to ensure form UIs are completely accessible to
disabled users.Best Practices for Mobile Form Design
https://www.smashingmagazine.com/2018/08/best-practices-for-
mobile-form-design/
Smashing Magazine author Nick Babich dives into the finer details
of designing mobile forms, also covering specific user flows like
ecommerce checkout and how forms impact conversions.Awwwards – Forms and Input
https://www.awwwards.com/websites/forms-and-input/
A compilation of websites with innovative and/or high-usability
forms. If you’re looking for form design inspiration and you’d like to
actually self-test the examples, bookmark this resource.disclosure or collecting information that’s
accessible without the user specifically offering it
(suc h as location, accessed ser ver-side). Hidden
input fields essentially have no type at the time
autofill comes into effect, resulting in it being
skipped over entirely.FORM SPLITTING
Split forms are long forms broken down into
sections; for example, one section for delivery
address and another section for billing information.
This concept actually makes total sense and has been
used (successfully) for a really long time.
Naturally, the main benefit of form splitting is the
reduction in cognitive overload; however the misuse
of form splitting can actually have an adverse effect.
For instance, when implemented with login forms,
forcing users to flow through two steps when there’s
only one field in each step (email and password) is
unnecessary, not to mention the fact it breaks the
autocomplete benefits.
Autocomplete works in harmony with other
input fields. For instance, when users type in
their email address to log in, the password field
will conveniently autocomplete with the correct
combination saved for that email address but
when dividing related fields into different steps,
the browser cannot autocomplete what isn’t
there. Autofill may save the day but the outcome
really depends on the browser making the correct
assumptions (ie if the user has multiple logins for
the same website or app, the browser may choose the
wrong combination).Solution: make forms boring!
Forms are boring and they always will be. Rather
than trying to make them interesting, the most
user-centred design decision we can make about
forms is to make them quicker and easier to
use. When it comes to form splitting, the best
implementation of the technique is to use it only
when dividing up unrelated fields.MAGIC LINKS
Staying on the topic of login forms, magic links
are a new-ish trend where after inputting the
email address, the user is emailed a link that will
automatically log them in. If you’ve ever used Slack,
you’ll already be familiar with the concept, which, on
mobile, saves you having to type in your password.
Some may say the concept is a bit tiresome, as the
user has to actually switch app to log in, although
admittedly the UX flow is a little better than
receiving temporary login details that the user needs
to copy into said application in order to log in. In