UX patterns
Despite forms being one of the most dreaded aspects of
interacting with an interface, they’re also one of the most
important. Most apps and online services are rendered
inaccessible if the user cannot fill out a form, making them one of
the biggest contributors to sub-optimal conversions if designed
incorrectly. Keep these usability tips in mind:O Group related fields (especially when form splitting)
O Remember that two-column forms have low conversion rates,
especially since they stack incorrectly on mobile screens
O Pre-fill fields with common or expected values
O Enable users to tab through fields for faster completion
O Placeholders should never replace labels, since they disappear
when the form field is focused upon (but using both is fine)
O Never use dropdown boxes when radio inputs work fine
O Style field widths to match their expected values
O Communicate clearly how values should be formatted or format
them programmatically behind-the-scenes as necessary
O Provide clear error messages to reduce frustration or, so that
the user is none-the-wiser, fix the errors programmatically
O Implement logical sequencing (ie CVV after expiry date)
O Communicate which fields are optional and which are required
O Generally speaking, omit any fields that aren’t requiredGENERIC FORM UX TIPS
TIPSAbove: Focused email fields on mobile will display a version of the keyboard where
the @ symbol is immediately available and URL fields will display .com“If we’re making modals
accessible, then they should
be easily dismissed by
hitting the esc key”
link to these forms during communications, which
makes things very difficult for both customers and
customer service representatives.
Password managers
Password managers (either in-browser or as
standalone apps) sometimes remember login details
on a screen-by-screen basis, so if the user is able to
log in from wherever they are in the app or website,
it may be difficult to retrieve their login details
if said details were saved when the user was at a
different URL.
Solution: don’t render forms inside modals.
Rendering forms inside modals comes with more
issues than it solves and although some forms are
so basic that it makes the screen look virtually
empty, users filling out forms are unlikely to
care. You’re a user too, so you already know that
the immediate response to a form is ‘I hope this
doesn’t take long,’ not ‘this form doesn’t look
interesting enough’.
Prioritise helping users move onto what they
really came for.
UNSEMANTIC MARKUP
Elements aren’t created equal. Semantic markup
ensures that there are different code markups for
every occasion; for example, even though a standard
input field may look the same as an email field, app
and browser vendors know the difference and their
behaviour is duly adapted depending on what the
expected input is.
Focused email fields on mobile will display a
version of the keyboard where the @ symbol is
immediately available, whereas standard input fields
won’t behave like this. Just to reinforce the concept,
password fields will visibly replace user input with
asterisks – for security reasons – and URL fields will
display .com on the keyboard, for convenience.
But because these differences are so subtle,
semantics are often forgotten about, especially by
designers who aren’t aware of these differences due
to not being involved in ‘the code side’.
Solution: implement semantic markup.
Without the use of semantic markup, users
are unable to reap these time-saving usability
benefits, which is why I always recommend that
designers communicate to developers how certain
UI elements should behave, either during handoff
or otherwise.
Developers and designers should also beware
of hiding input fields (ie
or equivalent), a concept used for progressive