Co-Authored with Marisa Bigelow
You’ve Got Content
Early in my career as a designer at America Online (AOL), I worked in content creation where users would read articles that had various banners and ads around the webpage. AOL made money through ads and banners that were meant to provide additional resources for the user or directly sell them something. When done well, the ads were there to support the content on the page. When done poorly, the ads were perceived to be in the way. In order to make AOL succeed as a company, we had rules where the ads had to be placed on the page. There was always an ad at the top of the page at a specific size and an ad in the 2nd and 5th spots on the right rail. When designing the content for the pages, the template we would use already had the ads in their proper location and we would work our designs into that template. The ads were not the most important element on the page, but they did matter.
Getting people to focus on what is important is a challenge, and negotiating between what they find important and how it is presented matters. This challenge is a balance for designers because it can be difficult to know what somebody finds important and how to visually prepare that information. We as humans have evolved to quickly perceive and pinpoint the most important aspects of a scene while staying aware of potentially relevant changes in our environment. Selective attention allows us “to select and focus on particular input for further processing while simultaneously suppressing irrelevant or distracting information” (Stevens, Bavelier, 2011). The difficult part is distinguishing what is important as the foreground against a dynamic background, especially when users tend to discount the banner areas usually reserved for ads (Cherry, 2020). “When observers scan a visual scene or display, they tend to look at ‘informative’ area” (Woods, 1984). It is important to understand that central areas and sections with high salience (i.e. bolded font, high contrast color, different styling than normal) will draw the eye, though it may be ignored if it resembles an advertisement too closely.
Understanding Human Perception
Banner blindness “is a long-known web user behavior: it describes people’s tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads” (Pernice, 2018). Banner blindness affects perception and access to content because it activates preconceptions about what is important. Users were ignoring page content because they assumed it was a banner ad. People naturally learn to ignore certain parts of the screen especially if something looks like an ad. “Banner blindness is an instance of selective attention: people direct their attention only to a subset of the stimuli in the environment — usually those related to their goals” (Pernice, 2018). This can be challenging when designing software with no advertisements because users have still learned selective attention behavior. “Users don’t look around much. They often stay highly focused on the screen section that they’re engaging with or assume contains the answer to their problem” (Nielsen, 2012).
This assumption is what can make design difficult. If important information is being overlooked, then the user will have a less effective experience. They may miss the most important elements on the page altogether. The issue we faced is that ads are generally perceived to be bad or annoying, especially if they don’t seem appropriate for the content the user is reading. The reality is that not all ads are bad. AOL was pretty good at making sure the ads were meaningful to the user. When designed with the correct intention, the webpage and ad designers intended the advertisements to be helpful to the audience. Knowing how visual and selective attention works can enable us as designers to help direct and understand why “people [can] overlook something that’s right there on the screen” (Nielsen, 2012).
Because of the number of ads and their placement, we learned to design the main content to be visually appealing and meaningful. It was essential to making non-ads look distinctly different from the ads. Since we did not know what the ads were going to be, we learned specific styles that would work in most situations. Through A/B and multivariate testing, we determined what layouts and visual styles were most effective.
Designing with Intention
One way we can design with intention is to utilize a technique called “visual momentum.” Visual momentum “captures knowledge about the mechanisms that support the identification of ‘relevant’ data in human perception so that display system design can support an effective distribution of user attention” (Woods, 1984). Visual momentum is important because it is how people understand a new page in an application. “When the viewer looks to a new display there is a mental reset time; that is, it takes time for the viewer to establish the context for the new scene” (Woods, 1984). Once the audience understands the layout of a page and they go to a new one. If certain elements look similar but are new, the user might overlook those elements and not realize that the function has changed. When designing, if changes are meant to be noticeable from page to page, it’s important to make them obvious. Improving the salience of the area by changing the layout, color, headlines, and/or placement of elements will draw users’ attention to the critical aspects that differ from their expectations.
When designing interfaces it is important to follow best practices. “With this approach, classes of data are identified and assigned to specific screen locations so that the viewer can learn to link spatial location with data type; for example, message or menu areas” (Woods, 1984). For layouts, logos should be placed in the top left, main navigation in the header, and utility nav in the top right. Web pages should have a visual page hierarchy composed of distinctive levels for font size, color, and placement. A “fixed format” allows the user to process each screen quickly to understand where the “important” information is (Woods, 1984).
Here also lies the trap – elements that stand out grab attention even when they are not the most critical. Because the user processes pages that look the same so quickly and look for just the “important” information, other elements of the page that are important can easily be overlooked (Nielsen, 2012). To avoid this, we as designers need to be very intentional in how we create interfaces. Important information should stand out from the background. Breaking the visual pattern spatially can draw attention to different areas, as well as changing the salience through layout, color, and placement from page to page. “Once an object is identified in a scene, we may quickly know the kind of company it keeps” (Biederman, 1981, p. 239). Users will perceive the value of our design if we conscientiously understand and direct their attention, even to ads.
Connect With Us
Users’ attention is one of the most valuable resources for a product – without it, the project is sure to fail. Our web applications are intentionally designed with human perception and motivation in mind. If you’re interested in learning more about our design techniques and how we can positively direct your users’ attention, please contact us to set up a demo and conversation.
References
BIEDERMAN, 1. (1981). On the semantics of a glance at a scene. In Kuaow, M. & POMERANTZ, J. R., Eds, Perceptual Organization. Hillsdale, New Jersey: Lawrence Erlbaum Associates.
CHERRY, K. How We Use Selective Attention to Filter Information and Focus. https://www.verywellmind.com/what-is-selective-attention-2795022. Retrieved Aug 31, 2021.
NIELSEN, J. (Aug 26, 2012). Tunnel Vision and Selective Attention. https://www.nngroup.com/articles/tunnel-vision-and-selective-attention/. Retrieved Aug 31, 2021.
PERNICE, K. (Apr 22, 2018). Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop. https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/. Retrieved Aug 31, 2021.
STEVENS, C. BAVELIER, D. (Nov 9, 2011). Developmental Cognitive Neuroscience. The role of selective attention on academic foundations: A cognitive neuroscience perspective. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3375497/. Retrieved Aug 31, 2021.
WOODS, (Sept, 1984). Visual Momentum: A Concept to Improve the Cognitive Coupling of Person and Computer. International Journal of Man-Machine Studies.
