UI & UX Micro-Tips: Volume

Three

A co le tion of 30 powe ful tips to

help i prove your designs i stantly

By Marc A drew

1
l­
m­
c­
n­
r­
n­
 When cr a ing e cient, a ces ible, and bea t ful UIs, it takes only the sma lest

tweaks to i prove your designs.

In this handy little guide, I’ve brought t get er a co le tion of my easy to put

into pra tice UI & UX m cro-tips.

Tips that can, with little e fort, help i prove both your designs, and the user ex-

pe ence.

Let’s dive in…

2
r­
i­
c­
e­
m­
t­
f­
fi­
i­
f­
c­
s­
m­
o­
h­
u­
i­
l­
c­
l­
 1. Lo er that text co trast when work-
ing with Dark themes.

This tip a plies to me on a much more pe so al level. I su fer from a co d tion

called Asti ma ism, so wor ing on and vie ing a Dark themed design can be

troubl some som times, with an e fect called Ha tion co ing into play.
So when pure white text is set against a pure black bac ground, the text can

a pear (to me pe so ally) to have a strange kind of ‘shi me ing’, and ‘hal ing’ ef-

fect, which makes things pa ti larly troubl some when vie ing Dark text-heavy

sites, or apps.

To i prove things for users with Asti ma ism (of which there are many more

than I rea ised), se ting your White text to around 85-90% op city (as well as avoid-

3
p­
m­
e­
l­
p­
w­
g­
t­
e­
r­
t­
n­
k­
r­
c­
u­
f­
g­
t­
n­
e­
r­
w­
n­
l­
a­
m­
m­
k­
a­
r­
w­
f­
o­
n­
i­
 ing those pure black bac grounds) can i prove things si n antly for users with

this co d tion.

4
n­
i­
k­
m­
g­
i­
fi
c­
 2. Present your Icons with L bels for
ea er co pr he sion.

Try not to leave those Icons all by the selves. For the b n t of your users, they

need some co pany in the form of L bels.

In some ci cu stances, yeah, you can get away with a sneaky lone icon (Search
fun tion an one?). Shhh! We won’t me tion Ha bur ers here.

But for Pr m ry Na g tion e ments, it aids u abi ty and brings ea er co pre-

he sion to have a L bel alon side its a co p n ing Icon and not have the user

se ond-gues ing things.

5
c­
n­
c­
s­
i­
i­
r­
y­
a­
s­
m­
m­
v­
m­
i­
a­
a­
e­
l­
e­
g­
n­
a­
n­
m­
c­
m­
s­
m­
a­
l­
i­
y­
g­
e­
a­
e­
fi
s­
i­
m­
 3. Use co pl me tary bo der r dius-
es. Avoid ma ing things look ‘off’.

It pays to keep your bo der r d uses co sis ent and co pl men ary and avoid that

slightly ‘off’ fee ing wit in your designs.

Tigh e ing up those bo der r d uses can cr ate a much more plea ant vis al
ha mony between el ments in your design, with only the sma lest tweaks r quired

to make them look co pl men ary to one a ot er.

Give your designs a much more r ned and pr fe sio al look and avoid those

‘Ooh, som thing looks off here?’ fee ing from your users.

6
r­
t­
n­
e­
l­
m­
e­
m­
h­
r­
r­
e­
k­
e­
a­
a­
t­
i­
i­
e­
fi
l­
n­
n­
t­
n­
e­
h­
o­
s­
n­
r­
m­
e­
l­
t­
a­
s­
e­
u­
 4. Use e v tions co rec ly when work-
ing with Dark themes.

When wor ing on Dark themes, use dark greys rather than black to co m ni ate

an el ment’s e e tion co rectly and e fec ively.

The closer an el ment is to you (and in the real world, closer to a light source),
the ligh er that el ment should be against the bac ground to co m ni ate depth

well.

U ing this simple met od, you can e fec ively e press depth wit in your design,

and if you choose so, without the need for sha ows of any kind.

7
s­
e­
t­
k­
l­
e­
v­
l­
a­
e­
e­
h­
a­
r­
f­
f­
t­
t­
r­
d­
x­
t­
k­
h­
m­
u­
m­
c­
u­
c­
 5. Make your long-form co tent more
a ce s ble with the Atki son Typ face.

I me tioned Atki son in a r cent ar icle but just wanted to namecheck it again if

you’re loo ing for et i al ways to i prove your long-form co tent for users with

Low Vi ion.
Atki son H pe legible (the clue is in the name) is a Typeface cr ated to im-

prove rea a i ity and i crease legi i ity, e p cially when cr a ing long-form con-

tent.

For long pa sages of text, Atki son is a highly r co me ded choice. It is the

best I’ve come across for legi i ity for users with low vi ion and just all users in gen-

e al to be ho est.

8
r­
c­
n­
n­
s­
s­
d­
k­
y­
s­
b­
n­
i­
l­
r­
n­
h­
c­
n­
e­
b­
l­
n­
b­
m­
t­
l­
s­
e­
e­
n­
m­
s­
n­
n­
e­
t­
n­
e­
e­
 6. Cut out the noise. Make those mes-
sages short, and to the point.

A ways keep your me saging short and to the point and r duce the co ni ive e fort

r quired by your site or app's users.

If there's no real need for a more d tailed me sage, then trim it down, and
keep your me sages short and to the point.

Presen ing the user with clear and straigh fo ward me sages will help them

achieve their o jec ives more e fec ively.

10
e­
l­
t­
s­
b­
t­
s­
f­
t­
e­
t­
r­
s­
s­
e­
g­
t­
f­
 7. When to use R dios, and when to
use Dro downs in your Pro uct list-
ings.

When it comes to product lis ings, there can be some co f sion on the best i put

choice to use when di pla ing a product’s o fe ings.

R dio bu tons vs Dro downs. Fight!

With screen real e tate pretty tight when it comes to e-co merce and avoi ing

the most cr cial part; i for tion ove load for the user, simply user R dio bu tons

for around four o tions or less, and any more (4+), go with a Dro down.

11
a­
t­
u­
p­
p­
s­
p­
s­
n­
y­
m­
a­
t­
a­
r­
f­
r­
m­
n­
d­
u­
p­
a­
d­
t­
n­
 8. Avoid those ‘d fault’ sha ow choic-
es, and make things a pear more ‘real-
world’.

When wor ing with el ments on a co oured ca vas, try and avoid black drop shad-

ows, and make things a little more real-world if you can.

In the real world, If you have an el ment placed above a co oured bac ground,

then the sha ow pr je ted by that el ment will have touches of the bac ground

co our blee ing through.

So avoid those fake-loo ing sha ows and bring a little of the bac ground’s col-

our into the mix to make things look more co vi cing.

12
l­
k­
d­
d­
o­
e­
c­
k­
d­
e­
e­
l­
e­
n­
p­
n­
n­
d­
l­
k­
k­
k­
 9. Cr a ing a Dark-themed d sign?
Don’t fo get to sof en up that White
also.

As I me tioned in a pr v ous set of tips, ne er opt for pure black when cr a ing

Dark themed designs as it can a fect u a i ity for many users. Soften up that black

when you can.

Si i ar rules a ply whene er you d cide to add White voured el ments into

a Dark design.

If your Whites are pure white, they can feel ja ring to the eye against dark-

themed el ments and make for a poor vis al e pe ence, so soften up those Whites

and bring them down in co trast a little to provide som thing much eas er on the

user’s eye.

13
m­
l­
n­
e­
e­
p­
t­
r­
e­
i­
v­
n­
f­
e­
s­
t­
b­
u­
l­
v­
x­
r­
r­
i­
fl
e­
a­
e­
e­
i­
e­
t­
 10. Present your Pro ucts the right
way, with the very best i agery.

Great Type and fan as ic I agery are corne stones of great product presen tions

and a ways d serve as much love as you can give them.

You can have the very best text co tent, prese ted with an i pe cable Type
choice, but if your product i ages sat alon side it suck, things could fall at very

quickly.

Use the best shots you can nd and present your product in the pe fect way.

15
l­
e­
t­
t­
m­
fi
m­
n­
d­
r­
g­
n­
m­
m­
r­
c­
fl
t­
a­
 11. Don’t rely on colour alone to com-
m n cate e ror states in your Forms.

When it comes to A ces i i ity with your Forms, don’t rely on co our alone to com-

m ni ate di fe ent states to the user.

For e ample, with E ror states, if you only co m ni ate an i sue with co our
alone, someone with some form of co our blin ness may co pletely miss this.

That’s not cool.

A ways try to i co po ate a co bi tion of icons and some form of e ror mes-

sage to aid A ces i i ity and not leave many users in the dark about the i sue that’s

b ing co m ni ated to them.

16
e­
l­
u­
u­
c­
x­
m­
i­
f­
u­
c­
n­
r­
c­
s­
r­
b­
c­
r­
l­
r­
r­
s­
b­
l­
m­
n­
a­
l­
m­
d­
u­
c­
s­
m­
l­
r­
s­
l­
 12. I prove the UX of your Forms with
sa ple va ues.

It's proven that u ing plac hol er copy in your Form elds i creases form co ver-

sions and i proves user e pe ence... when done the right way.

But. You can take it a step fu ther with... Sa ple va ues.

I stead of just op ing for plac hol er copy such as 'E ter your email', present a

real-world e a ple, ie; 'he lo@ma ca drew.me', to i prove the user e p r ence,

and use plac hol ers the way that they were i ten ed.

17
n­
m­
m­
m­
x­
e­
m­
s­
d­
t­
l­
x­
e­
l­
r­
e­
r­
i­
d­
d­
r­
n­
m­
n­
l­
d­
n­
m­
fi
n­
x­
e­
i­
n­
 13. You don’t need a D gree in Colour
Th ry to make things look c h sive.

If you’ve got a design pr ject that’s e abling you a little more fre dom in the way

of co our choices, don’t a ways feel i clined to pack it with a rai bow of co ours.

If you go down the rai bow route, you may nd that things can start to look
vis ally mi matched very quickly.

Simply u ing a Base co our and then Tints and Shades of that chosen co our

can add un for ity, c he iv ness, and a much more pr fe sio al look to your

designs, without those shiny rai bows and the need for a D gree in Co our Th ory.

Oh. Want to quic ly pr duce Tints & Shades from your ch sen Base colour?

You need to check out my old favourite https://make intsan shades com.

18
u­
l­
e­
o­
s­
s­
i­
m­
k­
o­
n­
o­
l­
o­
l­
s­
e­
n­
n­
n­
fi
e­
t­
o­
e­
d­
o­
o­
s­
n­
n­
e­
e­
.­
l­
l­
l­
e­
 14. Make those s lec ed items stand
out and grab the user’s a te tion.

UIs can be clean, stripped back, and straigh fo ward. No doubt. But not at the ex-

pense of a ne lected user e pe ence.

For som thing as simple as a menu of o tions, make sure that a s le ted item
can be ea ily ide t ed with a quick glance.

You don’t have to go crazy here. Simple but bold wins the day and a lows the

user to ea ily di ti guish which item they’ve s le ted and that their i put has been

r co nised.

20
e­
g­
e­
s­
s­
g­
s­
n­
n­
i­
fi
x­
r­
i­
e­
p­
t­
t­
e­
r­
c­
t­
n­
e­
n­
c­
l­
 15. U ing a lighter font weight? Dark-
en up that text if you can.

When it comes to long-form co tent, you may be i clined (b cause all the cool

kids are d ing it) to go with a mid-shade of Grey, which can be all good u til you

start u ing a ligh er font-weight, a fec ing legi i ity in a big way on screens of all
sizes.

Don’t have users with r duced vi ion reac ing for the back bu ton, and quickly

x this i sue by dar e ing the text and ma ing it more a ces ible to ever one.

With Typefaces that have a ligh er weight, just dar e ing things down a few

notches can si n antly i prove their legi i ity.

21
fi
s­
s­
o­
s­
g­
i­
t­
fi
c­
k­
n­
e­
m­
t­
n­
s­
f­
t­
k­
h­
b­
l­
b­
l­
k­
n­
n­
c­
s­
t­
e­
y­
n­
 16. Give the most i po tant e ments
on the screen more prom nence.

You want the user’s eye to be drawn to the most i por ant el ments on the screen

quickly, e ciently, and with mi i al co ni ive e fort every time.

By u ing vis al hie archy pri ciples such as Font Size, Weight, Co our, and Lay-
out, to name but a few, you can ea ily give pro i ence to the most e se tial ele-

ments.

Fo lo ing these pri ciples will help i prove the user e pe ence and help lead

the user through your product in a much more strea lined ma ner.

22
l­
s­
w­
f­
fi­
u­
r­
n­
n­
n­
m­
s­
m­
g­
m­
t­
f­
m­
r­
m­
n­
m­
i­
x­
t­
r­
i­
e­
n­
l­
e­
l­
s­
n­
 17. Don’t have the user se ond-guess-
ing the next step. Keep them in-
formed.

B fore a user takes a tion, e p cially on some types of Calls to A tion, make sure

they’re not left in the dark as to what may ha pen next.

A ways keep the user well i formed b fore an a tion is taken as to what they

can e pect when clic ing on that shiny, sparkly CTA of yours.

I prove the user’s e pe ence every step of the way and don’t leave them

second-gues ing at any point in their jou ney.

23
m­
e­
l­
x­
s­
k­
c­
x­
r­
i­
n­
s­
e­
e­
r­
p­
c­
c­
c­
 18. R serve one colour for your Calls
to A tion. Be sel sh with that CTA.

The Call to A tion (CTA) needs to be one of, if not the most cr cial el ment on the

screen. Make it shine in its own coat of paint!

Don’t have the user co fuse it with any ot er kind of el ment on the screen (ie,
N t tions or Tags). It needs to be ea ily di ti guis able between those ele-

ments, and that can be achieved by simply r serving one co our for the CTA and

not ing else.

Of course, you can go a step fu ther with si ing, shape and more, but just re-

serving that one co our for your CTA, and that alone, can r duce most fri tion.

24
o­
h­
i­
fi
c­
a­
c­
e­
c­
l­
n­
r­
f­i
h­
s­
z­
e­
s­
n­
e­
h­
e­
l­
u­
e­
c­
 19. Go Soft, not Hard with your Grid
spa ing.

Do you go Hard or Soft when u ing a Grid sy tem of some kind in your designs?

My a vice to you. Keep it Soft.

When I’ve cr ated designs b fore (u ing som thing like the 8 Point Grid Sys-
tem), I’ve a ways o ted to use the ‘Soft Grid’ a proach, where you simply mea ure

8pt sp cing i cr ments between i d vid al el ments in your design.

As o posed to the ‘Hard Grid’ a proach, which places el ments into a r gid

grid pa tern de ned in 8pt i cr ments which I nd not pra ti al for when it comes

time to pass your design over to d velopers.

25
d­
p­
a­
t­
c­
l­
e­
n­
fi
e­
p­
n­
e­
s­
e­
p­
n­
e­
i­
s­
u­
s­
e­
p­
e­
fi
c­
e­
c­
i­
s­
 20. Try and pr vide i stant fee back
a ter Form i te a tions.

When it comes to Forms, e p cially those co sis ing of quite a few i put elds, it

can be e cou aging for the user to see i stant fee back as they make their way

through it.
Just keep it simple. Not ing too fancy. Just keep users in the loop as to wheth-

er an i te a tion with a sp ci c eld was su ces ful or not.

A simple icon and, in some cases, a short text hint is all that's needed to

provide much-i proved a ces i i ity and just a ge e al i proved user e pe ence

when it comes to Forms.

26
f­
n­
n­
r­
c­
r­
m­
h­
n­
e­
c­
s­
f­i
o­
e­
s­
r­
fi
b­
l­
c­
n­
c­
n­
n­
s­
t­
n­
d­
r­
m­
d­
n­
x­
fi
r­
i­
 21. Stru gling with choo ing colour
schemes? Keep it Ana gous.

I’ve me tioned An lo ous co ours pr v ously, but I just wanted to touch upon them

again as I know how b n cial they can be for folks stru gling with choo ing col-

our schemes for their pr ject.

An lo ous co ours, also r ferred to as a j cent or neig bou ing hues, are

simply three (but this can be more if you choose) co ours that sit next to each ot er

on the co our wheel, co posed of one do i ant co our (som times known as the

Mot er co our), then su por ing co ours sat either side.

Wor ing with An lo ous Co ours can help you nd an ha m n ous co our

scheme that e ables your designs to look un form and co sis ent, with much less

e fort and fru tr tion on your part.

27
f­
a­
h­
k­
g­
n­
l­
l­
s­
l­
n­
a­
g­
a­
a­
g­
g­
e­
p­
m­
o­
e­
fi­
e­
t­
l­
l­
l­
e­
i­
m­
d­
a­
n­
i­
l­
o­
fi
l­
l­
s­
g­
n­
h­
r­
e­
t­
r­
o­
i­
s­
l­
h­
 22. Make your Type look be ter o ti-
ca ly. Bend those Grid rules.

If you’ve read any of my ar icles, you’ll know I’m a big fan-boy of Grid Sy tems, the

8pt var ety in pa ti lar, but I’ve also rea ised, and e p cially when it comes to

alig ing Type, that you need to bend those grid rules from time to time.
We all want to present our UIs the best way we can o ti ally, and som times

stic ing to a grid r gidly will not a ways a low for that. So, if your Hea ing needs

16px of left pa ding but your par graph needs 2px more to make them look more

o ti ally aligned, big deal! Just do it!

Don’t feel you have to stick to the Grid every single time. Go off-grid on o ca-

sion.

29
p­
k­
n­
c­
l­
i­
d­
r­
i­
c­
u­
t­
a­
l­
l­
l­
s­
p­
e­
c­
t­
p­
d­
e­
s­
c­
 23. Keep those Search elds wide. Fit
in the full search query.

Whene er po sible, try to make that Search eld large enough to a co mo ate a

user’s full search query.

No one likes to see their query va is ing into the depths of the search eld
and scrolling h r zon ally like a tic er tape (kee ing it web circa 1995 right there).

For co tent-heavy sites e p cially, you can opt for a wide Search eld in the

Hero se tion or, in ot er cases, simply a Search icon that, when clicked, di plays a

nice, wide search eld enough to a co mo ate the user’s full search query.

31
n­
v­
c­
s­
o­
i­
fi
t­
h­
s­
e­
k­
c­
n­
h­
m­
d­
fi
p­
fi
c­
fi
m­
fi
s­
d­
 24. Make those Na g tion Bars sticky
when quick a cess in nee ed.

For those short-on-scroll kinda sites, it’s cool to tuck away that Nav Bar as the user

makes their way down.

But for longer web pages and e p cially when quick a cess is needed, for ex-
ample, with an i por ant call to a tion such as a Sign Up or Buy Now bu ton, it’s al-

ways wise to give that bar some stic ness.

Don’t have the user scrolling fu ther and fu ther away from that i por ant CTA

in the Na i tion bar. Keep it sticky. Keep it avai able at all times for quick a cess.

32
v­
g­
a­
m­
t­
c­
r­
s­
c­
e­
k­
i­
v­
i­
r­
a­
l­
d­
c­
m­
t­
t­
c­
 25. Help the user get to re vant con-
tent in the quic est way.

In-Page links (som times r ferred to as Jump links) have in the past been frowned

upon by ce tain se tions of the UX co munity. Still, if they’re i pl me ted well,

they can si n antly i prove the user e pe ence when it comes to lengthy con-
tent on a single page.

Say, for e ample, on a very long ar icle, and I’m tal ing one with many se tions,

each with plenty of co tent i side, ha ing a table of co tents of some kind can

help the user na i ate to the se tion they need fast without en less scrolling to

nd that point of i terest for them.

A plied well, In-Page links can provide quick a cess to the co tent of i terest

for the user and much i prove di co e a i ity and e gag ment with your co tent.

33
fi
p­
x­
g­
r­
i­
fi
c­
v­
n­
e­
g­
c­
m­
m­
n­
e­
n­
k­
c­
s­
t­
v­
r­
v­
m­
b­
x­
l­
r­
i­
c­
k­
n­
l­
e­
e­
n­
n­
m­
d­
e­
n­
c­
n­
n­
 26. Keep co si tent, and clear with
your bu ton l bels throug out.

Firstly, you should a ways try to give d scrip ive l bels to your bu tons d scri ing

the next step when the user taps that lil' bu ton. Secondly, and this is the one that

gets ne lected som times, is to keep co sis ent, and clear with the bu ton l bel
na ing throug out your site or app.

I've o ten seen (and been guilty of it m self) i co sis ent, som times vague la-

belling for bu tons that i volve the same a tion. 'Join Now’, 'Let's do this’. Same ac-

tion. Di f rent L bels. Try to avoid it.

Keep your l bels co si tent throug out. R duce the co n tive e fort (ho e er

small) for the user and let them achieve their goals wit out se ond-gues ing.

35
m­
f­
f­
g­
e­
a­
t­
h­
a­
t­
l­
n­
e­
s­
n­
n­
a­
s­
h­
e­
y­
n­
c­
e­
t­
t­
n­
t­
n­
a­
t­
h­
h­
g­
i­
c­
e­
f­
t­
s­
w­
t­
e­
v­
b­
a­
 27. Try to mi imise r du dant tasks
when it comes to longer forms.

Some forms can get pretty long, e p cially when it comes to E-co merce and

those that i volve the user’s shi ping and billing d tails.

Make things a little more strea lined for the user and mi i ise r dun ant
tasks, such as i pu ting d tails for both a d li ery a dress and billing a dress,

which will be the same in most cases.

So make it much less time-co su ing for the user with som thing as simple as

a chec box that a lows them to d pli ate their pr v ously entered data, pre-po u-

late elds, and move swiftly through your form.

37
fi
k­
n­
n­
l­
t­
n­
e­
n­
p­
m­
m­
u­
s­
c­
e­
e­
e­
v­
e­
e­
n­
i­
d­
e­
n­
m­
e­
m­
d­
d­
p­
 28. A ways place the L bels above
Fields on longer Forms.

Ok. For short forms, fo lo ing the f mi iar eye-sca ning Z-Pa tern and pla ing la-

bels to the left of the eld is a cep able as there’s not much co tent to scan

through, but for longer forms, a ways keep those l bels at the top.
Ha ing those longer forms use the more co mon F-Pa tern a lows the user to

scan the form in a much more na u al way and achieve their goal quic er.

Don’t build those longer forms pur ly with ae the ics in mind when your aim is

to get the user through it with the least amount of fri tion.

38
v­
l­
l­
fi
w­
l­
t­
c­
r­
e­
a­
t­
l­
m­
s­
a­
a­
t­
n­
c­
t­
t­
l­
n­
k­
c­
 29. Try not to clu ter your UIs with un-
ne e sary words.

Our goal is to get the user from point A to point B in the quic est time po sible,

and avoi ing u n ce sary words is one of the simple ways you can achieve that.

If the a tion they have to take ( ll out a form and sign up for your se vice) is
pretty o v ous, a simple title ie; ‘R gister Now’, is more than enough to guide them

fo ward.

There’s not ing wrong in hand-hol ing the user from time to time, but when

som thing’s self-e pla a ory, you can go ahead and cut out those u n ce sary

words.

39
r­
e­
c­
c­
b­
d­
s­
i­
h­
n­
e­
x­
s­
n­
t­
fi
e­
t­
d­
k­
r­
n­
e­
s­
s­
 30. Avoid the ‘s per-mi mal’ look
with ce tain UI e ments.

When it comes to ce tain UI el ments, e p cially som thing like Dow load I di at-

ors, and ho ever temp ing it may be, it’s not a ways wise to go with the s per min-

i al look, e p cially on Des top.

Try to make those lil’ i di a ors as i for a ive and i te ac ive as po sible, which

can be achieved simply via the use of co our, a pe cen age ure (on la ger

screens, more so) to show the cu rent pr gress, and a simple icon from where they

can ca cel the pr cess at any time.

Try and mi i ise, but not at the e pense of the user e pe ence.

40
m­
n­
n­
w­
s­
m­
e­
r­
o­
r­
n­
t­
c­
t­
k­
e­
r­
u­
x­
n­
l­
e­
m­
s­
o­
t­
e­
l­
l­
n­
n­
i­
x­
e­
r­
r­
t­
r­
i­
t­
fi
s­
g­
n­
u­
n­
r­
c­
 I hope with this co le tion of m cro-tips, you've rea ised how the sma lest of a just-

ments to your designs can pr duce be ter re ults for both you self and your users.

Oh. And if you’re wan ng more aw some tips like these then you can Join my

Wee ly New letter here - https://www ma ca drew.me

Many thanks

Marc

41
k­
s­
l­
c­
t­
i­
o­
i­
e­
.­
t­
r­
s­
n­
l­
r­
l­
d­