The ultimate UI design guide
Most decisions we make about our design lead the user
towards a link or button. This is only effective if the tap
target looks clickable and communicates visual hierarchy
Style links
and buttons
Size
B
uttons and links, much like
typography, should have
a few variations. After all,
not all actions are of an equal level
of importance and, as we discussed
earlier, colour is an unreliable method
of communication, so it cannot be the
main method of influencing visual
hierarchy. We also need to toy with size.
Generally, I would recommend that
button text be declared as 18px (same
as the body text) but that the buttons
themselves have three variations in size:
Normal: 44px in height (rounded
corners: 5px)
Large: 54px in height (rounded corners:
10px)
Extra large: 64px in height (rounded
corners: 15px)
This enables us to make certain buttons
appear to be more important without
reliance on colour and also to nest
buttons (for example, use a button inside
a minimal-looking form field).
Depth
Regardless of whether the tap target is
a button or a form field, shadows should
be used to increase depth and therefore
suggest interactivity. A single shadow
style for all variants of buttons and form
fields is fine.Interactivity
Each button type needs a variation to
indicate its hover state. This clarifies to
the user that what they’ve attempted to
do is totally fine and ensures that they
carry on without delay.
This is actually one of the more
complex aspects of maintaining visualconsistency because colour is often the
favoured style to change when it comes
to creating a state. Thankfully, these
state changes can be relatively subtle,
so it’s fine to change the colour into its
slightly lighter or darker variation –
that’s what they’re for. This applies to
links as well.
Deciding against this will cause us
to use a colour that either already has
significant meaning, resulting in users
becoming confused, or else deciding to
come up with another colour. Deciding
to use a secondary colour is totally fine
but it should be saved for marketing
visuals rather than UI elements. Less is
more (and easier).
Remember to repeat this step for every
artboard. Don’t include the branded CTA
buttons on the brand artboard – later on
we’ll cover what happens when certain
combinations don’t work.“Shadows should be
used to increase
depth and therefore
suggest interactivity”
What is visual
affordance
testing?A visual affordance test is a usability test
used to determine if tap targets appear
to be clickable. My favourite way to do
this, being an InVision Studio user, is to
sync the design from Studio to Freehand
(δίF), send the resulting URL to testers
and have them circle the elements they
believe to be clickable.
Non-InVision Studio users can use
Freehand too but InVision Studio users
can launch their designs into Freehand
seamlessly from InVision Studio, which
is why I think it’s the fastest and most
efficient way of acquiring visual feedback
from users.Above Increasing button size allows you to make
certain buttons appear to be more important without
reliance on colour