What Designers Should Know About Visual Perception and Memory

When a visitor lands on your web page and begins to look around you hope your message is communicated clearly and understood. On the surface this may seem like a simple one way transmission of ideas from your design to the viewer’s eye. The reality is more complex.

Visual perception is the result of complex interactions between external visual stimulus and prior knowledge, goals, and expectations. Understanding how we all perceive things visually will help designers communicate better.

This post will focus on the theory and science of visual perception and memory. Much of the information comes from the book Visual Language for Designers by Connie Malamed, which I recently read and recommend.

Visual Processing

Perception is the process of obtaining awareness and understanding of sensory data. We take in something visually and then need to process what we see in order to derive some meaning from it.

Our brains need to find meaningful patterns in our visual environment in order to make decisions about what to do and how to respond.

Human beings process sensory data in parallel as we interact with the world. Different regions of the brain are simultaneously activated through networks of neurons. This parallel processing allows visual perception to be both fast and efficient and it’s why designs can communicate quickly and efficiently as well.

Visual perception is a two way street. We see small details in the environment and take them all in to see the whole. We also bring to our environment knowledge and specific goals that determine where we look and influence our interpretation of sensory data.

How we perceive things is a combination of both bottom-up and top-down processes.

Bottom-Up Processing

The bottom-up process is driven by external stimuli.

The human fovea can only focus on a very small area at one time and we see through a series of saccadic movements of the eye.

We fixate on one location for a moment and then move on to the next fixation. We take in little at each fixation and it’s through a pattern of saccades that we take in our visual environment.

This all occurs quickly and early in the visual process without any conscious effort or attention on out parts. It happens so quickly we’re not even aware it’s happening.

At a glance we detect the following without conscious awareness.

• motion
• edges of shapes
• color
• contour
• contrast

Each therefore can be used to attract attention to something in your design. As we process the above information our brains

• discriminates figure/ground relationships
• groups elements together
• organizes textures into basic forms

This all occurs rapidly helping us to recognize and identify objects on the page. This information is quickly passed to other areas of the brain and influences where we place our attention next.

Top-Down Processing

The top-down process is driven by prior knowledge and expectations as well as our specific goals of the moment. What we know shapes our interpretation of the things we see. The task at hand influences where we look next.

We tend to disregard anything that isn’t meaningful or useful at the moment. In the image above the red letters spelling out “Everything is a matter of perception” clearly stand out due to the contrast in color.

Your mind is looking for words in a sea of letters as we generally expect a pattern of letters to form words and sentences, etc.

Most of the other letters fade into the background as you read the sentence in red.

Suppose though, I asked you to find all the occurrences of the letter “P” in the image? Now as you scan the image the letter “P” should start to stand out a bit more and it’s possible that even the highly visible red letters start to fade into the background. At the very least you likely aren’t noticing the words they spell out.

The task at hand is affecting your visual perception. You see more of what you’re looking for and less of what you aren’t. This top-down process so affects our visual perception that some suggest we see more with our mind than with out eyes.

What we know, what we expect, and what we want to do influence what we see.

Memory

We hold information in different kinds of memory. Sensory memory records fleeting impressions that last a few hundred milliseconds. This is long enough to hold the prominent features of what we see long enough to further process them.

When sensory information is auditory we call this echoic memory and when the information is visual we call it iconic memory.

Working Memory

Working memory is a mental workspace in which we analyze, manipulate, and synthesize information. We consciously perform each to support cognition and we do so both visually and verbally.

Working memory helps us make sense of the world as we compare what we see to what we know. We compare new information to previously held information. It’s a meeting of bottom-up and top-down processing.

When new information is presented we search our permanent store in memory. When we find a match we recognize objects and concepts and identify them. When there’s no match we make inferences about this new information based on our previously held knowledge.

What happens in working memory occurs quickly. New information fades rapidly unless it’s further processed. This is why you often have to repeat a phone number several times in order to remember it.

Several factors affect the constraints of working memory.

• age—the capabilities of working memory increase with maturity, but decrease with age
• processing speed—the quicker an individual processes information the more capability their working memory has
• distractibility—the less distraction the greater the capability of working memory
• expertise—the greater the knowledge of a subject the more capability to process information about that subject in working memoy

Cognitive Load

The demands we place on working memory are referred to as cognitive load. Some tasks like counting make little demand, while others like problem solving make greater demands.

As our cognitive load increases our ability to process information in working memory decreases. As designers we should work to reduce cognitive load where possible in order to better communicate information.

Long-Term Memory

Information that is processed in working memory might get transferred to long-term memory. A certain amount of this will happen automatically, however the more information is processed, the more likely that information will be transferred to long-term memory.

Also the more we make some kind of meaningful association (encoding) between new information and what’s already located in long-term memory, the more likely the information will be transferred.

This encoding occurs in one of two ways.

• maintenance rehearsal—repeating information like phone numbers
• elaborative rehearsal—analyzing new information

The more ways new information is connected to previously stored knowledge, the more likely it will later be recalled. This is why analogy and metaphor work so well.

We’re only conscious of what’s stored in long term memory when it’s brought back into working memory and we have multiple structures for how information is stored

• Semantic memory—Stores facts and concepts that add to our general knowledge about the world
• Episodic memory—Stores events and associated emotions, which are autobiographical and related to experiences
• Procedural memory—Stores how to do things and leads to skills and procedures to accomplish tasks

Depth of Processing

How deeply we process information affects how likely that information can be recalled later. When our focus is only on the physical aspects of a graphic we tend not to store the information as deeply as when we attach semantic meaning to the same graphic.

Semantic encoding is superior to perceptual encoding.

For example focusing on the shapes and colors of a graphic is not as effective as studying the graphic and taking in the explanations of that graphic. We want to connect meaning to the aesthetic.

Schemas

Schemas are mental frameworks of information. They’re abstract representations of what we know about the world and they become the context or frame for interpreting new information. We quickly activate schemas to process information. We use schemas to classify and store information by deciding what the information means to us.

New information is ultimately “fit into” existing information and as it is the schema changes and adapts. Again there’s a two way relationship. Schemas influence how we process information which then alter the schema.

Information retrieval begins with some kind of cue. It might be a fact you hear, an emotion you feel, or some kind of visual stimulus. That cue activates an associated schema which then spreads to related schemas.

Assuming the correct schema is activated the information is retrieved. With some schemas this becomes automatic through practice and use. Think reading or riding a bicycle.

Mental Models

Mental models are broader conceptualizations of how things work and they explain cause and effect. Mental models can be easily transferred from one object to another as long as the objects use the same paradigm.

For example interface menus work mostly the same across different software. Similar are links and website navigation. We have a mental model of how these things work, which makes it easy to use them when we encounter them in a different place.

Mental models help us build conventions.

Designers should consider the schemas and mental models of their audience. Both show how an audience might understand and interpret visual communication.

Objects, shapes, colors, etc. will activate the schemas and mental models of your audience, which leads to inferences about how to interpret those objects, shapes, and colors

While we can’t know an audience’s exact schemas and mental models in advance, we can be aware of an audience’s cognitive characteristics which can give us clues.

• Development level—You might categorize your audience as beginner, intermediate, or advanced and design appropriately.
• Distractibility—Less distraction means more focus. Create designs that distract less.
• Visual literacy—The knowledge of symbols used and familiarity with convention of your audience can help you decide which symbols to use.
• Motivation—The goals of your audience will help determine their motivation. More motivation leads to more focus, which leads to a greater understanding of your message.
• Culture—Many cognitive skills are culturally based. Culture sets context for meaning and interpretation. Think of the differences in how colors are interpreted across cultures.
• Reading skills—Better reading skills lead to better understanding of you visual hierarchy. This affects how well people read captions, titles, decks, pull quotes, etc.

Implications for Design

Before designing we need to ask ourselves what are we trying to communicate. What is the informational purpose of a graphic or a design?

With the answer we can strategically organize graphics and design for the most appropriate mental process.

If the purpose is

• To enhance recognition —You need to call attention to objects using things like contrast, scale, and dominance
• To extend knowledge and reasoning—You want to make things clear. Connect your design to possible schemas and mental modes. Create clean and organized graphics that are easy to interpret

Think about your overall design and also your individual design elements and think about what their purpose is. You probably want your logo to be remembered and recognized. You likely want your content to be understood.

In order to create successful designs we must think about the cognitive tasks of our visitors. We must also think about the visual queries our designs and graphics aim to support.

Summary

This post has tried to give you an overview of how we all perceive things visually. The key is to understand that there’s a 2-way process at work and that each end of the process affects the other end.

From the bottom-up we see a series of small details that work their way into and modify our prior understanding of the visual environment. From the top-down we hold preconceived ideas of the visual environment around us that direct where we look and interpret what we see.

Visual perception happens quickly, but a very complex set of interactions occurs in a short time span in order for it to happen.

By understanding how this process works we can make choices to direct the eye and have our visitors attach meaning to our visual elements enabling them to better remember and understand our message.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.