Visual Design is all about Fight or Flight

Visual Design preys upon the base human instinct of “Fight or Flight.” It’s the instinct we have to constantly evaluate our surroundings and assess if there is a threat, how significant the threat is, and determine whether we have the power of overcome the threat or should we escape from it.

Without thinking about it, whether aware or not, humans will inspect what is in front of them to determine if there is a threat before continuing on their task. We begin by inspecting what is nearby first then move to further out objects. This can all happen in just milliseconds, but it’s how our ‘eye’ works.

Even if the distant object is bigger or more lethal, we inspect nearby objects before assessing distant threats

Even if the distant object is bigger or more lethal, we will inspect nearby objects first before assessing distant threats out of reach. For example, tripping over a nearby stone would have to be avoided before addressing an assailant well out of arms reach, so some initial glance at the near field will occur before assessing and dealing with the remote threat. This process all takes place in an instant, but it happens constantly while moving from location to location or whenever presented with new scenery.

It is this human characteristic that visual design preys upon.

Cues In Nature

There are a number of cues in nature that humans use to determine what is near and far, which sets up the sequence they will be inspected. These cues are what Visual Design leverages to cause your attention to follow a sequence in content or in a complex UI.

:: Size

Objects that appear larger are generally nearer, so we inspect them first. Based on that, using size alone you practically can be forced to read content in any particular order, even out of logical order, as seen on the right.

:: Contrast

The average person might not be aware they are using contrast as a cue. The atmosphere fades things that are in the distance, so we ‘read’ higher contrast elements as being nearer, therefore tend to prioritize them first in our attention.

Contrast alone can cause you to read content in a particular order and sometimes even out of logical order. Button states are a good example of how contrast is commonly used to control the eye when all other things are ‘equal’.

:: Overlap

When an object is in front of another, often the object in front visually will overlap the distant object.

Tangents flatten space and are seen as a whole

Without sufficient overlap, things that are in tangent will flatten in space and make it difficult to tell what is near. Tangents put all things on an equal plane, making it harder for the eye to figure out what to look at first, and instead it will be seen as a single whole.

With overlap, even if the distant object is the same or larger in size, we will perceive the overlapping object as closer and give it higher priority for inspection before moving forward.

Even if the distant object is bigger in size, we will perceive the overlapping object as closer

A good example of overlap in visual design is indicating tabs that are selected, as often seen in browsers. (The particular example here also uses contrast with overlap to improve the effect.)

By way of comparison, without overlap or contrast, it becomes much more difficult to quickly discern which tab is selected. There is just a hint of size differential here, but not quite enough to be a quick read for the eye.

:: Color Recession

This is also related to the contrast effect. In addition to reducing the contrast, the atmosphere also makes things in the distance appear more blue. Mountains covered with trees and rocks are really green and brown when standing on them, yet from a great distance they appear blue.

Earthen and green forested mountains become blue with distance through the atmosphere

Pure hues aligned to Munsell greyscale values, showing color recession

Color recession is part of where color encoding of warnings and alerts comes from. The notifications are naturally prioritized for our eye by the color hue being used.

:: Line

Another element that humans inspect before continuing on their task is sharp objects, or lines ending in a point. Because of this, the human eye will follow a line until it terminates. Regardless of how much other content is on a page, if a line is brought in from the edge of a page and terminates somewhere inside the page, your eye will go there at some point. All I have to do is put my message at the end of that line and I can be reasonably certain you will read it.

Visual Design is all about Fight or Flight

As outlined here, Visual Design preys upon the base human instinct of “fight or flight” — the instinct we have to constantly evaluate our surroundings and assess if there is a threat and determine whether we can overcome the threat or should escape from it. The way Visual Design employs “fight or flight” is by leveraging the natural visual cues of size, contrast, color and line that help us determine what is near and far and set the order in which we will inspect our environment.

In a future article, I’ll show how these elements can be combined and applied to lend some measure of usability to an application, even without completely redesigning the user interface.