Shapes in Web Design: The Psychology of Visual Perception
If you are a designer, you have likely heard things like “the rectangle emphasizes stability and confidence,” “the circle represents closure and unity,” “the triangle means movement and progress.” Among logo designers, this belief is almost an obsession. Well, some may be upset to learn that this approach is wrong.
Why is it wrong, and what is the right one?
Stereotypes are bad
Designers can’t be bothered with studying the intricacies of human visual perception. You say the square represents reliability? No problem, here’s some quadrangular reliability! Except for some reason the users are hesitant to rely on it.
This approach is wrong because it is based on an automatic application of principles that worked for someone else at some point. If you don’t know what is behind these principles, you are bound to make serious mistakes.
Here is an example. In all honesty, do you associate Malevich’s black square with reliability, trust, and calm?
Strangely enough, the famous masterpiece makes many people inexplicably scared and confused. It has even been called a “portal to hell.”
Obviously, logos don’t hang in museums and are perceived differently. Much depends on the environment, context, and comprehensibility. But even more depends on the initial goals. Malevich accomplished his goals. We, too, must set our design goals and look for ways of accomplishing them.
The use of shapes in design must be conscious and purposeful.
What should designers know about visual perception when creating shapes?
Visual perception is an active process
Any process takes place in time, even if it takes a split second. We do not look at objects mindlessly. If something enters our field of vision, our brain starts a background scan of the object, looking for relevant experiences in memory, bringing up associations, assessing threats, evaluating potential harms or benefits. Once the brain decides the object is harmless, it looks for possible practical applications. The brain is also curious, actively seeking out new things and riddles to solve.
(At this point, your Practical Brain may be asking how any of this is relevant to design. Tell it to keep reading.)
Object perception takes time.
We can make the object perception time shorter or longer, depending on what we need. Simplicity is good when we want to inform the user. Complexity is good when we want to interest the user and keep them from leaving the page. The choice between simple and complex shapes depends on the goals of the design.
Let’s take a “slow-mo” look at what goes on in the user’s brain when they look at a visual object.
It’s a multi-stage process.
1. The brain assesses whether the objects are safe
In the first split second, the brain scans for threats instead of admiring the design. To the brain, design can be threatening. For example, broken lines are perceived as aggressive and restless, suggesting anxiety and danger. It doesn’t mean we have to avoid them. Anything that looks threatening and dynamic is an instant attention-grabber, which is very valuable in design. However, such elements must be used sparingly, carefully, and thoughtfully.
2. The brain looks for associations
While scanning for good and evil, the brain compares the object with things it has encountered before, recorded in the memory banks. What rules should we follow in choosing visual associations?
- associations must be immediate
The brain needs time to search for and create associative bonds. Keep it in mind when you create your design. The simpler the shape, the easier it is to read unless its perception is hampered by other elements or distracting background. The longer it takes the user to visually read the shape, the more complex it will appear to them.
The type of lines and the presence of angles are also important. Each angle attracts the eye and slows down the time it takes to “read” the image. Ninety percent of the shape’s complexity lies in the number of angles.
The eye gets bogged down at every sharp turn:
- associations must be in line with the concept
Other people’s associations might not meet your expectations. Where a designer draws a sun, a user might see a fried egg. So you’d do well to ask yourself: what else does your shape look like? It’s a good idea to test it out.
Even the grandmasters of design make mistakes. It’s doubtful that Pepsi’s designers were thinking of a large belly.
- associations must not be primitive
Overly simplistic and obvious associations are forgettable. But if the shapes contain a spark, an original idea, they draw the eye and are instantly memorable.
Here’s an example:
If the point of your design is to draw attention, you can use unexpected associations. Which doesn’t mean they have to be shocking or nonsensical.
- associations must be emotional
This is the secret to creating attractive designs. It’s not the shape that triggers emotions but the associations brought up by looking at the shape. So your choice of shapes must depend on the associations you want the users to have.
3. The brain looks for meaning
A creative drawing of a fried egg in place of the sun will certainly attract attention, but it will also confuse the users. The brain is constantly trying to make sense of what it sees. Shape design must express the meaning relevant to the brand / task / project.
The meaning must be immediately clear unless the whole point is creating a puzzle design.
4. The brain loves organization
To comprehend what we are seeing, our mind tries to organize the objects, mentally combining the ones that are close together, visually grouping similar elements and separating dissimilar ones.
Shapes are not merely elements of the visual composition. It’s a tool for organizing content, one that separates or groups design elements. A clear hierarchy, grouping into blocks, visual guidelines — all this makes the design easier to comprehend.
5. The brain completes the picture
We don’t need many details to recognize an object. Our brain will gladly “fill the gaps,” mentally adding the missing details to the image. The more concise your picture is, the shorter the recognition time. This is why designers often use simple, minimalistic illustrations.
6. The brain loves novelty
The brain enjoys new and surprising things. New stuff usually makes us happy and excited. A predictable design with nothing new or at least mildly special to offer deprives the user of this excitement. Feel free to experiment with shapes, creating interesting combinations of familiar geometric figures and lines.
7. The brain seeks interaction
People have a materialistic view of things, and it extends even to the virtual world. We mentally touch everything, even if it’s physically impossible. We look at an image of a thing and interact with it in our mind. For example, we see a drawing of a doorknob and mentally turn it. We see an ice cream and can taste its sweetness and coolness on our tongue. We see a photo of a dumbbell and feel its weight in our hand. It all happens too fast for us to acknowledge. “What can I do with this thing?” is the question that pops into our brain every time.
It’s essential for designers to recognize this feature of human perception. Everybody knows about buttons “just begging to be pushed.” But it applies to any design, in all its shapes and elements. The shapes that are just begging to be “touched” are the best.
In conclusion
Visual perception is more than just a human feature. It’s a process of changes that take place in human sensory organs being affected by the physical qualities of a visual object. By knowing how perception works we can influence the speed and quality of this process. Which will enable us to create designs that users will love at first sight.
The choice of shapes should not be driven by stereotypes. Good shapes:
- signal safety;
- are quickly readable;
- are well-organized;
- are exciting;
- trigger emotional associations;
- provoke the desire to interact.
