Cognitive Psychology for UX: Perception

Perception stands as a cornerstone of cognition, making it vital for product teams to grasp and integrate their understanding of it into their work. Alongside perception, cognition comprises other essential elements such as Memory, Attention, Motivation, Emotion, and Learning. These components are intertwined, yet to understand them fully, it's necessary to dissect and examine each one separately, starting with perception.

Defining Perception

In its simplest form, perception is the brain's mechanism for recognizing patterns and constructing mental representations of the world around us. Like other facets of cognition, perception is a potent tool but prone to errors. It's crucial to note that perception isn't solely driven by the visual system, although this aspect takes precedence in discussions related to UX.

Perception is a Three-level Process

Breaking down the process reveals three levels: Sensation, Perception, and Cognition.

  1. Sensation: The raw input received from our senses.

  2. Perception: The interpretation and organization of sensory information.

  3. Cognition: Our past knowledge and expectations that influence how we perceive the world.

It may seem logical to assume that this process unfolds straightforwardly: first, there's sensation (visual or auditory stimuli), then perception (recognizing patterns), and finally, our cognition (our prior knowledge or experience). However, this process is a two-way street. It's often the case that our cognition influences our perception system. For instance, users may express expectations about where they anticipate certain elements to appear on our product. This expectation is rooted in their prior knowledge.

3 levels of perception

Perception is Subjective

Understanding your users, including their prior knowledge, needs, motivations, and expectations, is pivotal for influencing their perception while interacting with your product, company, or service. Tailoring your approach accordingly can significantly impact success.

Also, to read: UX Can't Be Designed

In essence, humans don't directly perceive reality but construct a mental model of it.

Many instances showcase false positives in human perception. A relatable example occurs when walking at night on a dimly lit street, mistaking a shadowy figure for a person, only to realize it's merely a shadow cast by an object like a tree or lamppost. Initially perceiving a potential threat triggers feelings of fear or unease, highlighting how caution and preconceptions shape our perception.

Gestalt Principles of Perception

One big idea in Gestalt psychology is that people see the whole picture, not just its parts. So, product teams need to make sure everything in a product fits together nicely. This means arranging things in a way that makes sense and looks good.

In modern product and UX design, using Gestalt principles is super important. These principles help teams make products that are easy to understand and use. Gestalt principles also help with organizing information. For example, grouping similar things or making sure important stuff stands out. This makes it easier for people to find what they need.

In short, using Gestalt principles helps create products that are easy to use, look nice, and make people happy. Here are several of them:

  • Emergence

  • Closure

  • Common Region

  • Continuity or Continuation

  • Proximity

  • Multistability

  • Figure/Ground

  • Invariance

  • Pragnanz

  • Similarity

  • Symmetry and Order

  • Common Fate

  1. Emergence

Instead of looking closely at each part of the picture one by one, we usually try to find something important among the different shapes and objects quickly. In this situation, we see the Dalmatian in what seems like a random group of shapes at first.

Example of Emergence in Gestalt Principles
  1. Closure

Our eyes prefer complete shapes. So, when we see something like this, we tend to connect the dots and fill in the missing parts. That's why we might see a triangle in this case.

Example of Closure in Gestalt Principles
  1. Common Region

Our minds like to make quick connections and fill in missing pieces. We also tend to see things that are close together as a group. Look at the picture below. All the dots are the same distance apart, but we see the first two columns on the left as separate from the rest because they're in a closed area.

Example of Common Region in Gestalt Principles
  1. Continuity or Continuation

Our eyes naturally follow a route. In the picture below, we start at the red dots at the top and follow them down to the white dots at the bottom. We might not notice that the dots on the right side are also red because they're not part of the path we're following.

Example of Continuity in Gestalt Principles
  1. Proximity

The law of proximity means we see things as a group when they're near each other. In the picture below, we notice four groups. There's one big group on the left with 24 dots, and three smaller groups next to it, each with 8 dots.

Example of Proximity in Gestalt Principles
  1. Multistability

The Necker cube in the picture below is a good example of the multistability gestalt principle. It means we can see it in two different ways like you see on the right side of the image. When we look at something that can be seen in two or more ways, we can't see them all at once, but switching between those versions is called multistability.

Example of Multistability in Gestalt Principles
  1. Figure / Ground

Rubin's Vase is a famous example of a figure/ground gestalt principle. When we look at the white part, we see a vase. But if we focus on the black part, we see two faces looking at each other.

Example of Figure in Gestalt Principles
  1. Invariance

The invariance gestalt principle says that we usually see basic things as the same, even if they look a little different because of changes like transformation, rotation, or lighting.

Example of Invariance in Gestalt Principles
  1. Pragnanz

The pragnanz gestalt principle says we prefer to make things less complicated. So, when we look at the Olympic rings, we see them as linked together because rings are simple shapes. Even though we could say the logo is made of 5 "C" shapes, our brains don't see it like that. Instead, our minds try to make things simpler, so we see the rings as linked together because that's easier for us to understand.

Example of Pragnanz in Gestalt Principles
  1. Similarity

The similarity gestalt rule is crucial for UI design. It means our eyes like to group things that look alike. That's why designers often use a specific style or color for buttons in their designs.

Example of Similarity in Gestalt Principles
  1. Symmetry and Order

Our eyes like symmetry, so they naturally group symmetrical things. This is important for designers because it helps them arrange things neatly on a website. When things are symmetrical, users can easily see important sections or groups of elements.

Example of Symetry and Order in Gestalt Principles
  1. Common Fate

The human tendency to see visual elements moving together or in the same direction is called the principle of common fate. Even if the visuals aren't moving, we might still perceive motion. This can be shown through cues like arrows or the angle of rotation, which indicate the direction we think the elements are moving.

Example of Common Fate in Gestalt Principles

Designing for the User's Mind, Not Just Their Eyes

When you're creating interfaces, keep in mind that It's essential for users to quickly grasp what they're seeing and easily find what they're looking for, that's why understanding Gestalt Principles is crucial for user experience (UX) design and product teams.

Importance of Testing

Despite understanding the subjectivity of perception, building products remains challenging due to differing perceptions within the target audience. Constant iteration supported by regular testing is essential for refining products and aligning them with users' perceptions.

Summary

  • Perception is the brain's mechanism for recognizing patterns.

  • Perception is subjective and can be misleading.

  • There are 3 levels in a perception process: Sensation, Perception, and Cognition.

  • Perception is a two-way street, it can work both as a top-down and bottom-up process.

  • Our prior knowledge drives our expectations which influences our perception.

  • Gestalt principles of perception are essential for any type of visual communication or design.

  • Designing for something subjective is difficult, test as much as you can.

References

  1. Interaction Design Foundation - IxDF. "What are the Gestalt Principles?" Interaction Design Foundation - IxDF, 2016, https://www.interaction-design.org/literature/topics/gestalt-principles.

  2. Hodent, Celia. "The Gamer's Brain: How Neuroscience and UX Can Impact Video Game Design, 1st Edition." 2017. Official Book Website: https://thegamersbrain.com/

  3. UserTesting. "7 Gestalt Principles of Visual Perception." UserTesting, https://www.usertesting.com/blog/gestalt-principles.

  4. “Perception” Wikipedia: The Free Encyclopedia, Wikimedia Foundation, 14 March 2024, https://en.wikipedia.org/wiki/Perception

  5. “Gestalt psychology” Wikipedia: The Free Encyclopedia, Wikimedia Foundation, 24 March 2024, https://en.wikipedia.org/wiki/Gestalt_psychology

Copyright ©2023 Jovan Marinkovic

Copyright ©2023 Jovan Marinkovic

Copyright ©2023 Jovan Marinkovic