In order to design for the human mind, it’s helpful to understand how attention guides a person to perceive and then comprehend information while learning. Outside of research circles, one under discussed phenomenon is bottom-up and top-down processing. The theory provides an insightful look at how the brain works and how we can apply this to learning and visual design. It starts during perception.
Remember Psych 101?
In your first psychology or biology class, you probably learned that perception is becoming aware of something through the senses. The Encyclopedia of Perception defines it like this, “Perception comprises an integration of top-down and bottom-up information, with their relative importance determined as a function of the available sensory information, the task at hand, the perceiver’s goals, and past experiences.” These ideas become more clear if you look at each type of processing.
Bottom-up Processing
Bottom-up processing refers to information coming through the senses that influences perception. Some refer to this as stimulus-driven or data-driven perception. If you notice a brightly colored painting before noticing a subdued one, it is probably due to bottom-up processing. Bottom-up processing occurs early in the perceptual process without conscious attention or effort.
For vision, our brain first perceives what are known as primitive features. These are size, color, depth, shape, motion and orientation. Early in the vision process, we also discriminate foreground from background, group elements together, and organize textures into basic forms. This occurs rapidly, helping us to recognize and identify objects. In terms of audition, we may notice the loudness, pitch (higher or lower) and the location of a sound.
Top-down Processing
On the other hand, the top-down theory of processing explains that a person’s cognitive system actively influences perception. That means that previous knowledge, experience, motivation, emotions, and expectations influence your perception. Some refer to this as goal-driven perception.
An example researchers use is the phenomenon of perceptual constancy. When we look at an object from different distances, lighting, and angles, we interpret the object as having a consistent location, shape, and size. According to the theory, this is because the brain is interpreting the information on the basis of experience and expectations. This allows us to recognize objects under varying conditions, which is quite convenient.
Implications of Top-Down Processing
When you observe someone disregarding perceptual information they need, and attending to information they prefer, the cause may be top-down processing. It means that internal factors are influencing the person’s perception. The internal factors of top-down processing may include:
- what we already know about the information
- what we expect to see and hear
- our motivation and goals at the moment
- and our bias toward the information.
This is known as our perceptual set. Perceptual set refers to an anticipatory mindset or “readiness to perceive certain objects or events rather than others (APA Dictionary).” Here’s an example. An instructional designer who is observing and analyzing a training lecture on equipment safety will have a different perceptual set than a person in the class who uses the equipment every day at work.
The Integration of Bottom-Up and Top-Down Processing
Perception is a complex and nuanced interaction between bottom-up and top-down processing. Eye movements, which often direct attention, may be influenced by both bottom-up and top-down effects. The senses take in and process raw data, which are the noticeable features of a stimulus—that is, bottom-up processing. Information from higher cognitive processes interpret the information and guide our attention to what is most relevant—that is, top-down processing (Itti & Koch, 2001). In other words, information flows in both directions. Knowing this, how can we influence perception when someone is learning?
Designing for Bottom-up Processing
There are a few features of our cognitive architecture to keep in mind when designing for bottom-up processing. First, sensory perception occurs in a massively parallel process. It’s fast and efficient. We recognize objects and interpret what we see before we are even aware of it.
Second, the sensory output from bottom-up processing quickly passes on to other areas of the brain and influences where we place our attention. Third, attention is often guided by our eyes. By leveraging bottom-up processing through visual design, we can direct eye movements to the most important information and make that the focal point. One way to do this is by accentuating the primitive features of any visual display (eLearning screens, individual graphics, presentation slides, participant manuals, etc.)
Make Use of Primitive Features and Grouping
Primitive features are the unique properties that allow a visual element to pop out of an image during a search because they are the most salient or prominent. Examples of primitive features are color, motion, orientation, shape, and size. You can use these features to attract the eye by contrasting them with surrounding objects. Also, we quickly merge the features of an object into meaningful elements through the guidance of our focused attention. Here are some ways to create contrast so that objects pop and to show groupings in your designs.
- Design with aesthetically pleasing contrasts in color, orientation, shape, or size to create a focal point that immediately pops out to the viewer. Example: Accentuate the size of an important area on a technical diagram to show that it is the focus of a text explanation.
- Use the primitive feature of motion with care. Example: Use a pulse animation 2-3 times to grab attention to an object. However, avoid continuously repeating an animation as this would be distracting.
- Direct attention to the focal point by using a visual cue like an arrow or a contrasting color highlight. See Use Visual Cues to Enhance Learning.
- Avoid using color alone for contrast to accommodate color vision deficiency. Instead, contrast other features too, like size or texture.
- Group related information together to show relationships. Example: Place the bars of a graph close together to help viewers know which data should be compared.
- Draw a boundary around examples that are related. Example: When learners select examples of a concept, a boundary line forms around the examples to group them. Nonexamples are left out of the group. See The Power of Visual Grouping for more.
This approach to design should also speed information acquisition. When the audience is given a cognitive kick-start, the intended message is more likely to be clear at the beginning of the process and there will be fewer opportunities for miscomprehension.
Designing for Top-Down Processing
When you follow a full instructional design process, you are inherently designing for top-down processing. In order to meet the cognitive and emotional characteristics of the audience, you may choose to:
- Address motivation so that participants see the relevance of a learning experience
- Consider the social ramifications of learning in the participant’s workplace environment
- Encourage participants to set realistic goals
- Identify current knowledge and skills to tie new information to existing schemas
- Align learning with participants interests and culture
- Challenge participants so that learning is effortful
- Provide opportunities for discussion and debate
- Simulate decision-making scenarios while learning in a safe space
Sidenote
As with most research, there is some debate as to wether the top-down/bottom-up dichotomy is complete. A paper by Reiner (2019) describes other theories that explain factors that may be missing. For example, embodied perception refers to the ways that the body’s capacity to act in the environment influences our perceptions of the world. See the reference below for more on this.
References:
- Bruner, J. S. (1957). On perceptual readiness. Psychological Review, 64(2), 123-152.
- Bruner, J. (1992). Another look at New Look. American Psychologist, 47(6), 780-783.
- Bruner, J. S., Postman, L., & Rodrigues, J. (1951). Expectation and the perception of color. American Journal of Psychology, 64(2), 216-227.
- Fodor, J.A. (1983). The modularity of mind. Cambridge, MA: MIT Press.
- Goldstein, E. Bruce, ed. Encyclopedia of Perception. Sage Publications, 2010.
- Hegarty, M. (2011). The Cognitive Science of Visual Spatial Displays. Topics in Cognitive Science. https://onlinelibrary.wiley.com/doi/10.1111/j.1756-8765.2011.01150.x
- Itti, L. & C. Koch (2001). Computational modelling of visual attention. Nature Reviews Neuroscience. Mar;2(3):194-203.
- Malamed, C. Visual Language for Designers. Rockport Publishers, 2011.
- Misa Fukuoka, Kazuhisa Miwa, Akihiro Maehigashi. Experimental Investigation on Top-down and Bottom-up Processing in Graph Comprehension and Decision. Graduate School of Informatics, Nagoya University, Japan
- Reiner, C. (2019). New Approaches and Debates on Top-Down Perceptual Processing. Teaching of Psychology 46(3):267-272.
The article discusses the phenomena of bottom-up and top-down processing, providing insight into how the brain works and how we can apply it to learning and visual design. The article describes how perception is a complex interaction between both types of processing, and how attention is often guided by our eyes. By leveraging bottom-up processing through visual design, we can direct eye movements to the most important information and make that the focal point. Overall, this article provides valuable information for designers who wish to design for the human mind.
Hi Michael,
A book I wrote in 2009, Visual Language for Designers, covers more of the cognitive science behind visual design if that interests you. And some of the articles on this site do too, but not all of the design articles do (look under the Multimedia menu). I’m sure you can find the book used by now and not very expensive. Thanks for writing.
Connie
I really liked this post, and I’m obsessed with learning more about visual design (I’m an instructional designer and a nurse working in clinical education for a healthcare organization). To build upon my Master’s degree in Instructional Design, I like to attend many different webinars and workshops about visual design for both slide design, presentation design, eLearning design, etc. The principles covered in these webinars and workshops usually cover the bottom-up principles you mentioned, but they never cover the theory behind why the principles work; it reminds me of the CRAP mnemonic for visual design: Contrast, Repetition, Alignment, Proximity. It’s nice to read your succinct post about the psychology behind the “Why” they work and how it works in the brain. The other instructional design or visual design elements seem to be addressed in the top-down principles.
Thank you.
Thanks for your comment Robert. I am endlessly fascinated by this topic too. I first came across it when doing research for my first book, Visual Language for Designers. That was more than 10 years ago and I’ve been meaning to write an article about it ever since! So it felt good to write this, yet it’s difficult to distill it all into one article. From your experience and readings, what else would you add to this?
Connie
Thank you for a most excellent, clearly and concisely written article. As an older, retired Human Factors Psychologist and Instructional Technology practitioner, I have long been fascinated by the interaction between display attributes and information processing, retention, recall, and application since the 1980s. You hit on almost all of the factors I believe one needs to consider in designing excellent instructional and training design programs. My most sincere compliments.
Cordially,
Robert A Steinmetz
Robs1501@outlook.com
818 633 2984