📹 New!

Remote User Testing - Get video + voice feedback on designs and prototypes
Read more

Visual Design

Optical Adjustment – Logic vs. Designers

When it comes to alignment and computers vs humans - who wins?

In my early days as a designer, I relied on Photoshop or CSS to tell me whether

something was right or wrong. If Photoshop indicated that two shapes were aligned,
then they were aligned. If two different shapes were the same size, then that was the
case. If two colours had the same hex values, then they looked the same colour.

This approach seemed logical, but it was an incorrect way of working.

The calculations software makes are rational, but software cannot take into account
the way humans perceive shape, colour, and size — that is to say the software cannot
understand the context of an object in relation to other objects, in the context of an
overall visual language, or how a human would perceive the object.

The irrational mind of a human needs to decide whether something looks optically
correct or not, because we can see and understand a context when a computer can’t.
Understanding these subtle differences and knowing how to adjust them is what
makes a good designer even better — few will notice if it has been considered, but
many will notice if it hasn’t.

Let’s take a look at a small number of examples of this in action.

Alignment + Visual Weight

Computers cannot figure out where the weight of an object lies in an accurate way, it
can only rely on certain information such as the width, height, or x/y position. As
designers, we need to compensate for this through something called optical
adjustment.
The triangle in a play icon is centre-aligned in the circle right? Wrong. Drawing a
rectangle around the play icon reveals that it’s off-centre.

The left play icon appears centrally-aligned, despite it being off-centre when wrapped
in a rectangle

Whilst the ‘correct’ play icon doesn’t appear off-centre, it is clear here that it is, and
not just by a little bit. Why? Visual weight. The weight or mass in the triangle lies in its
left-hand side, this creates an optical illusion of being off-centre even when it isn’t.

To solve this, we have to manually nudge the triangle until it appears central.

Colour

Optical adjustments in colour are more subtle. Once again, it is about the weight of
the object, and how much of the colour appears.

In short: the same green might be used for a filled-icon and some text, but one of
them will look lighter than the other.
 The left icon + text combo uses the same hex value, the right combo uses two
different values. To achieve this, I decreased the brightness of the green in the ‘HSB’
values in Sketch.

It is subtle, but you can see that the icon is heavier than that of the text. To adjust this,
either make the icon colour lighter, or make the text darker — I suggest picking
whichever colour will help you meet AA accessibility guidelines.

I would recommend using the HSB colour values instead of RGB in your design
application. One huge benefit is allowing a designer to swiftly change the brightness
of a colour.
Scale
Scale is about how our brains perceive the size of objects, text included. If we think
about this in terms of circles and squares, a 120 × 120 pixel square has a larger
surface area than a 120 × 120 pixel circle, so the circle must be larger to compensate.

The left shapes are both 120 × 120 pixels, which makes the circle feel too small. The
right circle is 126 × 126 pixels, to compensate for the larger surface area of the square

As with all other adjustments this is subtle, but the adjustments help the overall
design look right. This is very much fine-tuning of an element — nudging values up
and down by 1 pixel until it feels right.
 Notice how the tops/bottoms of curves on Didot go above the x-height and drop
below the baseline. This can be seen on 7 different letters here

This is also true in typography, where overshoots on curved letters drop or rise above
the cap-height, baseline, etc. If you write a line of text in Garamond and draw a line
on the baseline and x-height of the text, you would see the curved shapes
overhanging these lines. If these overshoots didn’t exist, the individual characters
would feel too small next to their siblings.

Uppercase text
A final, quick example of where optical adjustment is necessary: when setting
uppercase text next to standard case text. Uppercase text is more prominent than
standard case text, and needs to be adjusted to compensate.
 The uppercase text in the top example seems larger than the text it is next to, the
uppercase text in the bottom example has been adjusted by 2 pixels to make it feel
the same size

Unless the aim of this design aspect is for the uppercase text to be more prominent,
uppercase text should always be reduced by a small number of pixels, e.g. 16 pixels
to 14 pixels or 12 pixels to 11 pixels.

When working on a large interface each of these tiny design details add up and will
affect the overall feel of the website. This attention to detail is what makes a good
design great.

Once it becomes part of a workflow, reducing text size by 2 pixels or nudging a

triangle 10 pixels to the right takes moments, but these are the things that make a
design feel pixel perfect.
Computers or even AI cannot understand the context of a piece of design, so it
cannot make the accurate adjustments that a designer can make. Until a computer
can make a rational judgement about an isolated component within the context of an
entire visual language, it cannot be relied on to make complex design decisions.

We shouldn’t rely on computers to do all the thinking for us, we should rely on our
eyes and our instincts. Designers hone their instincts with every working day, so we
should trust them, even when a computer tells us otherwise.

I’m a bit of a nerd when it comes to stuff like this, so if you have any interesting
examples that you’ve had to fix then please shoot me a tweet. Or is it that I am totally
wrong? If I am, please call me out on it, I want to talk about it!

This post was originally posted on Luke’s Medium profile.

Further reading:

An A-Z List of Tech Terms You Need to Know as a UX Designer

Object-Oriented UX

UX Design Principles That Help You Shape The Best User Experience

Your Body Text Is Too Small

The Basic Principles of Visual Design