Cognitive shortcuts every designer should know

On the web, you’ll find many articles on designing web and mobile application interfaces. Some are based on personal experience, others on established design patterns, and some focus on trendy innovations from platforms like Dribbble or Behance.

This article emphasizes insights from cognitive psychology, providing practical examples for your interface design projects. Understanding human perception of colors, shapes, and faces is critical for creating effective and user-friendly graphic interfaces.

Today, I’ll introduce the phases of perception.

Phase 1: Sensory registration

Icons by flaticon.com/authors/anatoly

During sensory registration, external stimuli become neural impulses reaching our brains. Specialized neurons called feature detectors respond to specific attributes like shape, color, and size.

Feature detectors are neurons or neuron groups that encode meaningful perceptual stimuli. They start with basic properties, becoming increasingly complex at higher cognitive stages.

Source: Wikipedia

These feature detectors specialize in properties like motion, color, or shape. According to Lindsay and Norman (1984), these detectors exist in sensory organs or higher neural pathways.

Sensory registration is subconscious—these details aren’t accessible to our conscious awareness.

How does the brain recognize shapes?

Canadian psychologist Donald O. Hebb described perception as a phased sequence of neural processes. According to his theory, recognizing a shape like a rectangle starts by detecting elementary features.

Perception of basic shape features

Initially, the eye identifies the rectangle’s corners sequentially, creating a comprehensive perception loop. Different objects focus attention on different distinctive curves or points.

This sequence of acquiring shape information is called a phase sequence.

Phase 2: Emotional evaluation

Icons by flaticon.com/authors/anatoly and flaticon.com/authors/baianat

Emotional evaluation determines the emotional significance of a stimulus. This subconscious process begins in subcortical brain structures responsible for emotion.

Face detection

Expanding on feature detectors, one theory suggests humans have specialized face detectors. The following exercise demonstrates emotional evaluation through face detection:

Look briefly at the center of each nose below:

Source: rstb.royalsocietypublishing.org

We instantly identify which faces seem friendlier without focusing closely on their differences. This rapid emotional evaluation is based on subtle facial features.

Practical tip: When selecting photos for your project, choose faces that immediately inspire trust—critical for user decision-making.

Perceptual defense

In 1947, Jerome S. Bruner and Leo Postman observed participants took longer to read offensive words compared to neutral ones—a phenomenon known as perceptual defense.

Perceptual defense is a psychoanalytic term describing subconscious avoidance of anxiety-provoking stimuli.

Practical tip: Even when communicating dramatic content, be cautious with extreme language. Harsh words don’t necessarily enhance memorability.

Phase 3: Stimulus recognition

Icons by flaticon.com/authors/anatoly

In this phase, stimuli are categorized based on existing mental patterns. Our brain continuously searches memory for the best match.

For example, when choosing a babysitter, we instinctively categorize candidates, aiming to justify rational and responsible decisions based on previous experiences or stereotypes.

Phase 4: Metaphorical meaning

Perception is influenced by cultural and environmental contexts and personal experiences. Metaphors help us understand complex or new situations by relating them to familiar concepts.

Symbols and gestures can have varying meanings in different cultures.

Example: The “horns” hand gesture

Source: huffingtonpost.com

• USA: Approval, “rock on.”
• Italy, Brazil, Spain: Indicates infidelity.
• Poland: Associated with satanic symbols.

As designers, verify metaphorical understanding within your target audience to avoid miscommunication, especially when designing icons or symbols.

Summary

Understanding perception phases helps designers create intuitive and effective graphic interfaces. Cognitive psychology provides insight into common design patterns and supports innovation. Base your creativity on solid psychological principles.

References:

• Bruner, J.S., Postman, L. (1947). Emotional selectivity in perception and reaction. Journal of Personality, 16, 70–77.
• Bruner, J. S. (1973). Beyond the Information Given. New York: W. W. Norton & Company.
• Hebb, D.O. (1972). Textbook of psychology. Philadelphia: Saunders.
• Lindsay, P. H., & Norman, D. A. (1977). Human information processing. New York: Academic Press.
• Maruszewski, T. (2011). Psychologia poznania. Gdańsk: GWP.
• Oman, A. (1987). The psychophysiology of emotion. Advances in Psychophysiology, 2, 79–127.
• Sternberg, S. (1969). Processing stages discovery. Acta Psychologica, 30, 276–315.