Optical Adjustment – Logic vs. Designers

Posted 1 year ago by Luke Jones

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.

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.

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.

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.

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.

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.

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.

UI / Visual designer with a focus on user-centred design and research. Currently working at Hudl. Follow me on Twitter @lukejones and check out my work.

Related Posts

Collaboration between designers and developers is essential for creating great products. Every company has different organizational structures for designers and developers. Some companies have designers and developers on two separate teams. Those development teams may also break up developers in sub-teams as well. For example, they may separate by front-end developers and back-end developers. In other companies, designers and developers… Read More →

A good product is a lot about the problem that you pick & the ideas that you implement. But a well-sorted & deliberate design-development process can play more than a handy role; ironing out quite a few wrinkles that can cause unnecessary escalations and ad-hoc duct-taping later during the execution phase. “As designers, we are the guardians of execution and… Read More →

A mechanical engineer by training, I’ve always chaffed at using the word process to describe something as messy and nonlinear as design. At MIT, I learned about processes for solving problems like how quickly heat moves through a block of metal, or how to calculate the impedance in an electrical circuit. To me, a process is something with a set… Read More →