UX patterns
ģDxwrĽoo#pd|#vdyh#wkh#
day but the outcome
really depends on the
browser making the
correct assumptions”
addition to breaking autofill and/or autocomplete,
unfamiliar conventions can be confusing for users.
Solution: make magic links optional or secondary.
There’s not much wrong with magic links and they
can certainly be useful to mobile users who would
rather not type; however the convention makes
too many assumptions about how the user has
their email set up. To ensure the best results, make
magic links optional.
TWO-FACTOR AUTHENTICATION
Two-factor authentication (or 2FA) is something of
a double-edged sword. On one hand, it increases
security by asking users to approve login attempts
via SMS, email or some kind of 2FA authentication
app; on the other hand, it forces users to approve
login attempts via SMS, email or some kind of 2FA
authentication app – urgh!
As human psychology dictates, we’re more
concerned with the problems we have right now, so
it’s difficult to care about the benefits of security
until our account has actually been hacked. Most
users don’t want 2FA until they need it.
Solution: don’t enforce 2FA or, at the very least,
offer convenient ways to enforce it, such as via
WiFi or email.
If 2FA isn’t required, at least make it optional (ie
the user has to switch it on via the settings of said
app or website).
Let’s say that the user is abroad. They won’t
have access to their day-to-day mobile data;
however, they may have access to WiFi, so email
or a 2FA auth app such as Google Authenticator
would be much more convenient than SMS-based
authentication. And if the user can turn it off
temporarily, even better!DYNAMIC PLACEHOLDERS
Input labels have a really unfair reputation because
they can make forms look clunky and we’re taught to
believe that less is more. But this isn’t one of those
times. A common UI design trend over the last few
years is to have the placeholder text transition into
the label when the input field is clicked. However
placeholders and input labels actually serve two
very different functions and one cannot replace
the other, no matter how cool you might think the
animation looks.
Placeholders are used to show the user what is
considered an acceptable value, whereas a label is
simply a short description of what the input field is
for. Here’s an example combination:
Label: “Name” Placeholder: “John Doe”
If your short-term memory isn’t fantastic, you
have likely had a moment at some point where
you’ve forgotten what you were supposed to type
halfway through filling out a form field. It’s a very
common scenario.Solution: keep at least the label visible at all times.
By keeping the label visible, you can ensure form
fields remain easy to fill out correctly, even for
users with different accessibility needs or for
individuals under an increased cognitive load in
noisy, distracting or stressful environments.Above left Forcing users
to flow through two steps
when there’s only one field
in each step (email and
password) is unnecessary
Above With magic links,
after inputting an email
address the user is sent
a link via email that will
automatically log them in