Can you feel that? It’s visual discomfort.

Tension. That nagging itch. The mental discomfort of someone invading your personal space. Even though I recognize that I’m hyper sensitive to my personal space boundaries, I’m sure you’ve felt this before.

Imagine you just sat down in an empty theater. It’s the middle of a weekday and you’ve got the place all to yourself. Just as the previews come up, someone comes into the theater and finds a place to sit – in your row, two seats away.

Are you as creeped out as I am?

I’m getting a little freaked out even as I write this. It’s not that the person smells bad or shakes their dandruff over my popcorn. It’s a feeling I just can’t put my finger on, but it’s there.

I also have a magnet that attracts people on empty buses. It doesn’t matter if I choose a spot surrounded by 20 empty seats; the intoxicated, mentally deranged, and loud cell phone talkers take their place very near my lap.

In the world of design, I call this visual discomfort.

There’s a design principle called visual tension, which can be used to heighten drama or direct the flow of energy in a layout, but I’m talking about something a little different. Visual discomfort is that thing in a design that gives you a nagging itch that something is wrong, even if you can’t name it.

Let’s compare some very basic examples:

visual discomfort 01-01

While this is a fairly boring design, there’s nothing inherently wrong with it.

It’s very similar to a sign design I did long ago. After seeing the design proof, the client asked that I “fill” the space on the sign. He wanted the letters to be as large as possible so it could be seen from the street. It was perfectly reasonable that he would want the biggest letters possible.

However, we were limited to the dimensions on the light box that housed the sign. If we increase the size of the letters, we get this:

visual discomfort 01-02

How does that feel to you? Are you feeling some discomfort looking at this? It just doesn’t feel right, does it? Two people sat down a little too close on the bus. For this client, the answer isn’t “increase the size of the letters,” rather it’s, “get a bigger sign.”

Here’s an example of another uncomfortable sign design that I see too often (click on these to see them bigger):

visual discomfort 02-01

Well, we’ve certainly used the space, haven’t we? Got our money’s worth on real estate you might say. Let’s take a another look:

visual-discomfort-02-02

First of all, I hate putting things in ovals (which is a personal preference, not a design principle). But if I have to use an oval space, the elements should be placed in a way that won’t make people feel all itchy. The sign on the right could still be improved, but at least we don’t feel claustrophobic when we look at it.

Also, note how I made the word “coffee” the biggest word on the sign. When most people are driving around, they aren’t looking for Peggy. They’re looking for coffee. Coffee first, Peggy second, shop third (we can probably guess it’s a shop, but it’s in the name).

You’re already a smartypants

It’s amazing how much you already know about good design and bad design, isn’t it? Visual discomfort is the same as that creepy bus seat feeling. It’s not something you need to memorize from a design book. Maybe you can’t articulate why something looks unprofessional, but you feel it. Trust your gut.

But just for kicks, here’s a little something for you to digest:

Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance. source: Digital Web Magazine, The Principles of Design

Got all that? Right. Me, too.

There’s nothing wrong with this definition. If you’re studying to be a designer, that is.

This is precisely why understanding the difference between good design and bad design is so difficult for people who don’t spend their days immersed in the field. It’s not that non-designers are stupid, it’s the insane notion that someone who runs a bakery or a copywriting business has the time or inclination to memorize all the rules. Rules! How we love our rules.

The difference between a professional design and an amateur design isn’t about following rules. It’s not about being fancy or loud or filling space, or creating complexity with gradients and trendy splashes. It’s about usability and clear communication.

If people feel uncomfortable looking at a logo, sign, or web site header, their vision of the product or service is already skewed.

Or skewered, you might say.

Scratch that itch

So if you ever get some design work done and you’re feeling uncomfortable looking at it, trust that feeling. If you’re feeling that something’s not kosher, you can bet your customers will feel it, too. Talk to your designer about it.

How do you know if you’re getting the best help with your problem?

An amateur designer will get defensive. They’ll try to tell you how much you don’t understand about the principles of design. They’ll try to convince you of their extensive experience and training – and why you should listen to them.

A professional designer will be able to explain every design decision they’ve made and why. They’ll listen to your concerns and respect your itchy feelings. If you’re asking for a change that they don’t agree with, they should be able to articulate their reasons. They’ll be able to offer a compromise that gets you what you want without sacrificing the usability and communication.

This is what I know about visual discomfort. I still haven’t figured out how to maintain my space on the bus.

3 Responses to Can you feel that? It’s visual discomfort.

  1. Naomi Niles says:

    Good one. I'm very sensitive with personal space too. I love the analogy here. I also like what you mention about it not quite feeling right and I think that's good too. Sometimes things just don't work and it's good to listen to that feeling.

    I get new web designers asking me every once in awhile to critique their designs. Most of the time, the designs aren't really bad, but they make the same mistake. I tell them, “give it margins and paddings and even it all out”. Which, is pretty much the techie css way of stating what you are saying – give it room to breath and make it symmetrical.

    Amazing how much better a design becomes just by doing that alone.

  2. Naomi Niles says:

    Good one. I'm very sensitive with personal space too. I love the analogy here. I also like what you mention about it not quite feeling right and I think that's good too. Sometimes things just don't work and it's good to listen to that feeling.

    I get new web designers asking me every once in awhile to critique their designs. Most of the time, the designs aren't really bad, but they make the same mistake. I tell them, “give it margins and paddings and even it all out”. Which, is pretty much the techie css way of stating what you are saying – give it room to breath and make it symmetrical.

    Amazing how much better a design becomes just by doing that alone.

  3. […] friend Sparky wrote this post about visual discomfort a few weeks ago. In it, he talks about how spacing things too tightly in a […]

(818) 835-2585 Woodland Hills, California | sparky@sparkyfirepants.com

Like Sparky on Facebook!
Follow Sparky on Twitter!
Sparky Instagram