Visually distorted - when symmetrical UI looks all wrong

I’ve been gifted with a questionable super-power to spot visual defects at first glance.
It’s like having a spider-sense for distortions, I get this tingling feeling in the back of my skull, every time I see something that’s not aligned, twisted or unaesthetic.

It happens to me when I meet people (look at those gigantic hands! her head is tiny! OMG those fingernails! they look like they belong to a mole!), and as much as I’m trying to make it stop - I just can’t fight my own super-powers.

It also happens when I look at user interfaces: whether I’m working on something new, advising others, or just using a product - I can’t help but spotting design issues the minute I look at things.

So, as an attempt to get rid of this overweight - I decided to create this collection of common UI distortions caused by optical illusions and other design reasons, along with my proposed fixes, hoping that it will help the world create better-looking interfaces (and help me get rid of this unwanted “gift").


Enjoy the freak show!
(I know I won’t)

1. This label is too light  

Ever noticed how the color of your text seems lighter when placed next to a filled shape? 

That’s the font smoothing effect that makes the text feel lighter than its’ original color, and the smaller the font is - the stronger this visual effect becomes.

Here’s an example:

On the left - the green label seems to be lighter than the green button. 

On the right - by cheating a little bit and using a slightly darker green color, this problem is magically solved.

2. Tiny fonts seem too skinny

Those small text labels continue to challenge our UI, but it's very important to design them perfectly. UX writing and microcopy are now a fundamental part of any design, and a great microcopy can definitely boost your product's conversion rate, so those labels must look perfect!

In certain font families, using a small size causes the text to feel skinny and semi-transparent (font smoothing again).

If you insist on using tiny font size (sometimes it makes sense) - do yourself a favor and make it bold:

By using a bold font - the design stays clean, the label remains tiny but more noticeable and definitely easier to read.

3. Unreadable text over a background image 

Placing a text over a background image is a common pattern, but if the images change dynamically - you need a way to ensure that the text will remain readable regardless of the background color.

This can be achieved by ensuring adequate contrast with a gradient back color:

A semi-transparent gradient layer is a nice method to make sure the text remains readable even if it’s placed over a light-colored background image.  

This article provides a few more ways to increase the contrast without affecting the overall aesthetic of your design. 

BTW, I see this problem a lot when looking at presentations, so this technique should also be applied when designing presentation slides.

  

4. Wrong leading space 

Speaking of text, here’s an important one, taken from my 40 rules for writing and designing text in products.

When dealing with large fonts, the leading space might become a bit of an issue:

A good rule of thumb is to set the leading space to be 2pt-5pt larger than the type size, depending on the typeface (source).


While you're here, check out my crazy collection of 84 cognitive biases to help you design better-converting products with over 40 right/wrong design snippets.

Dealing with shapes:  

Placing different shapes next to one another can cause some unexpected optical illusions. 

Here’s an example, known as the Müller-Lyer illusion: 

The first 2 shapes feel misaligned, although they are perfectly aligned. 

The 2 arrows feel like they have different lengths although the lines are absolutely identical (I know, I copied/pasted them!). 

Sometimes those optical illusions can make your design feel inaccurate, which is a bummer given that you worked so hard to make it 100% accurate.

In such cases, you may have to cheat a little bit, nudge some elements around, make one of the lines longer than the other - do whatever it takes to eliminate the optical illusion and make things look aligned: 

Let’s dive into some real-life UI examples:

5. Misaligned elements

This one is a classic:

On the left - an optical misalignment effect, caused by the rounded edges of the button. 

On the right - the fix for this problem: a technique called ‘Overshooting’ (often used in fonts) that fixes the misalignment illusion by nudging the button a little bit to the left.

6. Inconsistent form alignment

When a form uses different elements (with different shapes, borders, or horizontal alignments) - an optical illusion is likely to happen and make the form feel a bit misaligned:

On the left - every element has a slightly different design (some have rounded borders, some don’t) and although there is a clear alignment strategy - the result feels all twisted.

There are many possible fixes - I chose to turn all rounded corners into sharp corners and align all the labels to the borders.

Once the elements look more consistent, the left alignment works better and the entire form feels cleaner and well-designed.

Check out my devious collection of 20 dark patterns to avoid when designing websites and products.

Working with icons

Ever felt like the icons you’re using are misaligned?  

Here are a few icons that are all coming from the same collection and have the exact same size and alignment, and yet, due to the nature (and optical weight) of each icon, the collection doesn’t fee very much aligned:

7. Misaligned icons 

Sometimes you just need to cheat a little and move/resize some of your icons in order to make them feel aligned:

On the left - some icons feel too big (phone, radio), while some icons feel misaligned (hands) due to their different designs and physical centers. 

One optional fix is to select icons that share similar shapes so they look more consistent (for example a set of circle-shaped icons). 

Another solution (presented above) is to slightly modify each of the icons so they work better when placed side by side.

Yes, it means you may need to place the icons in your actual design, modify some of them and repeat this experiment a few times until the design looks perfect.

8. Asymmetric shapes

When working with asymmetric shapes like triangles, the geometrical center causes an optical illusion that makes it feel like the shape is misplaced.

Here’s a classic example of the ‘play’ button:

While the left example is perfectly centered (geometrically speaking), the right example looks better.

The solution is to nudge your asymmetric object until you reach an optical alignment. 

Here’s a great article that talks about the play button including some practical tricks for creating a perfect optical alignment.

9. Different icon themes

If you are using ready-made icons, it’s important to select icons that feel like they were taken from the same collection pack. 

Often enough, we get caught in a long exploratory process, searching for the best looking icons, and don’t pay enough attention to visual differences between each one.

Here’s what can happen:

As you can see from the above example: using icons from different collections (different shapes, different weights) makes the UI feel unprofessional. 

Users may not be experienced enough to say what’s wrong, but they will notice something is wrong… 

Make sure to select icons that share the same color palette, theme shape, weight, and line width.

10. Multiline button labels  

There are times where design wins over copy. 

Here’s an example:

Sure, “add to favorites” explains the action of the button better than just “favorite", but having 2 lines of text below the button is just unacceptable.

Not only it looks misaligned, but it is also likely to complicate any content that will be placed below these buttons. 

When such things happen, the design should win and the copy should be changed to fit the design constraints: either you change the labels of all the buttons to fit 2 lines or you shorten the “add to favorites” label to be “favorite”.

11. Long copy

And speaking of microcopy - check out my 40 rules for designing and writing text in products for more UX writing and microcopy examples.

UX writing should be part of the design process. Some design considerations will dictate the text length and some text considerations will dictate the design. 

As a rule of thumb, the text should concise:

As they say: "writing is easy, all you have to do is cross out the wrong words…”

12. Tap target is too small

12 years later, and designers (and developers) are still creating buttons that are too small to tap:

According to Nielsen Norman: Interactive elements must be at least 1cm × 1cm (0.4in × 0.4in) to support adequate selection time and prevent fat-finger errors.

Apple said it 12 years ago, but it’s still pretty easy to find buttons that are not easily tapped. 

The fix is obvious: the button size should be larger than the visual content size (be it an icon or a text).

Check out the best of the mobile spoon

13. Annoying border radiuses 

Ever heard of the Jastrow illusion (AKA: Boomerang illusion)?

Sure, the radius of the inner shape looks bigger, but that’s only an optical illusion. In fact, both radiuses are identical, but the eye just doesn’t catch it.
The same thing happens when you place a rounded button inside a rounded frame:

In the example above, the frame and the button both have the same rounded edges but they look inconsistent.
The “cheat” in this case is to use a completely different corner radius for the frame which eliminates the optical illusion.

14. Annoying borders (in general)

And speaking of borders - too many lines make your design look crowded.
Designers talk a lot about white spaces, but often enough, as the product evolves and new features are added (sometimes without going through a proper design process), frames and borders are mysteriously added:

Get rid of the borders and use whitespaces instead to separate each group of elements without creating unnecessary clutter.

15. Using Gray instead of opacity 

Many designs use different shades of gray to create a hierarchy between titles, subtitles, and body text. 

Unfortunately, when text is placed over colorful elements (for example background images) - the gray no longer works, and instead - white color with certain transparency should be used to let the elements absorb the background colors:

Using transparency instead of pure Gray colors will make your semi-transparent elements combine with the background colors and feel more natural.

It’s a small design hack that can result in much better results.

Bonus track: the annoying dark mode

So I actually wrote this post a few months ago, and since writing it, iOS 13 was released and Dark Mode was added with a lot of smoke and mirrors.

Apple claims it’s "thoughtfully designed to make every element on the screen easier on your eyes”, but if you used dark mode for a while you probably noticed this is not the case. 

There’s a reason for that: iOS dark mode uses pure black as the background, and pure black causes eye strain.

According to UX Movement: "White has 100% color brightness and black has 0% color brightness. Such a big contrast in color brightness leads to a disparity in the light levels users see. This causes their eyes to work harder to adapt to the brightness when they read."

The solution is to use dark gray instead of using pure black:

Unfortunately, Apple default apps and most apps I’ve tried so far are all using pure black as a background, causing overstimulation.

2 apps that implemented dark mode using a dark gray background are Slack and Notion, so hopefully more apps will adopt this alternative and create dark themes that are actually easier on the eyes. 

That's it for today's collection.

Make sure to subscribe to my occasional newsletter and become 23% more awesome than average!