Bottom-Up Visual Perception: What Saccadic Eye Movements Suggest For Designers

Posted: 31 Mar 2014 05:30 AM PDT

A lot happens when you take in your visual world. Your eyes dart about before fixating on a small area. Visual information is processed with some stored for later retrieval. Previously held information, your interest of the moment, something in your visual world that calls attention, all potentially direct your eye where to move next and the process begins again.

A few weeks ago LeFred left a comment regarding the free sample from my design fundamentals book (PDF) . The sample talks about about direction and movement and LeFred wondered if some of the information is invalidated by what we now know about saccadic eye movement and visual perception.

I don’t think so, but it made sense to dive into the subject a little and make sure. How does visual perception work? How do we take in visual information, process it, and store it for later use? More importantly what does it suggest we can do when designing to guide the eye to what we want it to see?

There’s a lot to cover so hopefully you won’t mind if I again take more than a single post on the topic. Today we’ll talk about how we perceive our visual surroundings. Next week we’ll look at how the visuals we perceive are processed and stored in memory. Throughout we’ll think about how we can improve our designs based on what we know about visual perception.

Visual Perception is a 2-Way Process

It seems so easy and natural, but how do we take in visual information? How does raw data about the shape and color and size of an object become something meaningful? How does it become something we act on or store for later?

No matter what’s in your field of a view, a 2-way process is occurring. You could be looking at a painting, the design of a website, trees in the middle of a forest, or anything else that interests you. Internal and external information moves back and forth to determine where to look next or interpret what’s been seen.

Bottom-Up — Senses take in data, process some, and store some of what’s processed for long-term use
Top-Down — Long-term memory works back to the senses to interpret information being processed and to direct the eye where to look next.

Some objects grab attention quicker and we recognize them more easily, even when they’re in the periphery of our visual field

The bottom-up process is driven by external stimuli and occurs without conscious attention. Your eyes move about, landing here or there momentarily to take information in.

Your brain quickly distinguishes background and foreground. It groups and organizes elements and patterns. It determines where the next landing spot will be and what information gets stored in long-term memory.

The top-down process works in reverse. It’s driven by internal stimuli and demands on our attention. Memories, expectations, intentions, and desires all push back down the stack directing our eyes to look for what’s meaningful or useful in the moment.

Together these processes lead to the complex interactions that make up visual perception as new information from our visual world enters our brain and information previously stored helps shape what it all means.

The Fovea and Saccadic Eye Movements

The process for making sense of our visual environment starts with light which find its way to our retinas. Our retina then convert the light energy into electrical impulses for our brain to interpret.

At the center of your retina is the fovea, which gives sharpness to vision. Anything in the range of your fovea is seen clearly. Anything outside it’s range is far less than clear. You might distinguish a shape of sorts, but the detail necessary to recognize the object isn’t there.

The fovea can distinguish size, color, shape, and a variety of other characteristics. Unfortunately the fovea is small. It can take in about 15 degrees of vision so only a small part of our visual world is seen clearly at any given moment. Most of the visual information available exists in our periphery.

To increase the clarity od what we see, our eyes must continuously and frequently move about. These rapid eye movements are called saccades and they allow us to select what we want to pay attention to visually.

Saccades are straight, but jagged darts of the eye. They occur about 3–5 times each second. In between saccades we allow our eyes to briefly fixate on one location and we extract visual data before starting the next saccade. As we decide where to move and look next, we become active participants in what we see around us.

Saccades are among the fastest movements produced by the body. They happen so quickly we aren’t consciously aware they’re occurring and once a saccade has started it can’t be altered.

When we visually encounter a new scene, our eyes move around to locate the most interesting parts. At the same time we build a or the scene mental map based on what we see. We don’t take in all the information we need in a single pass. We alternate saccades and fixations over the scene and move attention from one location to the next, picking up new data and processing it at each stop.

Strategies for Seeing Clearly

There’s a limited amount of area the fovea can see at any one time. To compensate, our eyes devised strategies to find what we want as quickly as possible. We get our eyes near what we want to see and then find the details we want.

We begin with an initial overview of the surroundings and make big movements. We’re looking for context and to get us close to what we want. Once in the right area, we make finer movements examining the details. This visual search process runs through 3 loops.

Move and scan loop
Eye movement control loop
Pattern-testing loop

Assuming we know what we’re looking for the move and scan loop looks something like the following.

Move to a general area
Initiate fixation
Move to a new area
Initiate fixation
Continue until desired object/information is found

To determine where to move next during the moments of fixation we have an eye movement control loop. It determines targets to find based on their elementary properties of form (size, color, shape, etc.). Think about that. The form of an object, it’s color, it’s size, affect whether the eye moves to the object.

The final loop, the pattern testing loop, comes into play while we’re fixating on an object. We test the pattern we see with patterns we have stored. We’ll make several pattern tests during each fixation to help us identify known objects and make connections between unknown objects and known information.

Moving the Eye with Your Design

Throughout this bottom-up process our eyes alternate between moving and fixating. We take in visual information, process it, and decide where to move and fixate our eyes next.

Some things grab our attention quicker and we recognize them more easily, even in the periphery of our visual field. A blinking light for example doesn’t need to be directly in front of you to recognize it as a blinking light.

Knowing this we can help the eye find information during saccadic movements by making them more attention getting and recognizable. For example if someone is looking for the sun in a painting then a yellow ball is a strong visual cue that would grab the eye and attract attention.

The part of the brain that processes visual information is the primary visual cortex. Any features or characteristics that are processed by the visual cortex are easier to retrieve. Hardwired, features like color, size, orientation, shape, motion, and stereoscopic depth can be used to attract the eye.

When a feature of an object stands apart from the same feature in surrounding objects it becomes visually distinct. Make the characteristic different enough (30 degrees of orientation for example) and it becomes quick and easy to find. This is called the pop out effect.

It only takes a single fixation (less than 1/10th of a second) to observe a pop out. Items that don’t pop out might take several fixations (between one and a few seconds) to be discovered. That’s a big difference in how quickly something might be seen and recognized.

If making things distinct and making them stand out gets them noticed, it suggests that contrast is how we attract attention to the objects we want seen.

In deciding how much contrast is needed, we consider the surrounding objects. How much variation is there across objects where a feature is concerned? The less variation across the surrounding objects, the smaller the degree of contrast needed to cause an element to pop out. More variation in the feature and more contrast will be needed for pop out to occur.

You aren’t limited to contrasting only a single feature of an object. You can use different a color, a different size, and a different shape for example. The more you make different, the more the object will pop out. You can use any or all of the primary features in any combination to help make an element stand out.

If an object contrasts enough in one or more of these visual channels, it will stand out and it can be processed fast enough to direct eye movement.

Other Types of Eye Movements

Throughout this post I’ve been focused on one type of eye movement, saccadic eye movement. There are actually four ways in which the eye might move.

Saccadic movements — are the rapid movements and moments of fixation we’ve been talking about all along.
Smooth pursuit movements — are slower tracking movements to keep an object on the fovea at all times while it’s in motion
Vengeance movements — align the fovea of each eye with targets located at different distances from the observer
Vestibulo-ocular movements — stabilize the eyes. They compensate for head movements and keep our eyes stable to the and visual world

Hopefully you can see how saccadic eye movements are the ones we’re most concerned with, given our sites don’t need their movement tracked and our head probably isn’t moving around too much when viewing a website.

Summary

We don’t have to think about it. Visual information is around us and our eyes take it in. We don’t consciously think about how it all works, but what seems so natural is really part of 2 complex processes.

In the bottom-up process our eyes alternate between quick movements (saccades) and short durations where we fixate on objects in our surroundings. We need this alternation of movement and fixation because only a small part of our visual world can be seen clearly at any given time.

Contrast is a strong signal to help an object get noticed and you can contrast any of the features processed by the visual cortex to make an object easier to fixate on.

Next week I want to look at the process that moves in the other direction. I want to consider how visual data gets processed and stored in memory before considering how previously stored data influences where our eyes look next.

Download a free sample from my book Design Fundamentals.

The post Bottom-Up Visual Perception: What Saccadic Eye Movements Suggest For Designers appeared first on Vanseo Design.