HOW TO COMBAT BANNER BLINDNESS

HOW TO COMBAT BANNER BLINDNESS

January 17, 2018

Topics

Kentaro Oi

Animated banners have been around for quite some time, but when it comes to the specific intentions behind each animation, there’s more here than meets the eye.

Adding flair to simple things (CTA buttons, arrows, copy, etc.), otherwise known as micro-animations, helps interactive ad designers achieve a brand’s main objective: encouraging user engagement.

Depending on the type of execution, making purposeful decisions about which elements to animate is crucial for accomplishing a brand’s goal and relevant KPI's. It’s a designer’s job to design with intent, using thoughtful and contextual animations that guide the user through an ad experience.

The following three design benchmarks should be considered to fulfill the desired metrics for your mobile ad units.

1. Attention

Recent studies suggest that people now generally lose concentration after 8 seconds (A shorter attention span than that of your average goldfish). This fact is even more striking when you consider banner blindness, which is when users subconsciously ignore banners or anything that seems like an ad on their mobile devices. Persistent ads attempting to break through these barriers via annoying animations can cause negative feelings towards the brand amongst users.

When designing to capture attention, the most important thing to keep in mind is contextualizing the environment in which the ad is served. Paired with recent findings from our Feed vs. Read study, slower scroll times, premium placements in editorial, and well crafted animations provide a higher value for each ad. Since consumers are primarily on sites to consume content, it's important to find a happy medium between grabbing user attention and being non-intrusive.

How can animations help leave a lasting impression? Although our units are designed with a well-defined visual hierarchy, animation of specific elements allows the user to understand what to pay attention to, or what to interact with first:

2. Preview

Affordances are visual cues that intuitively imply an object’s use or function. Choiceful animations can indicate the desired user action. This can be accomplished via simple gestures or animations without the need for explicit copy instructions. Less copy also calls for a simplified and less cluttered canvas.

3. Feedback

Once you initiate an interaction with the unit, it’s also a good practice to visually confirm that their interaction was successful (or unsuccessful, if it’s a gaming unit).

Visual animation of an element upon engagement provides feedback to the user on whether they were successfully able to interact with the unit (whether it’s a swipe, tap, shake, etc.). Allowing users to see the direct results of their actions leads to a positive user experience and maintains engagement.

Lastly, I’ve found it helpful to think personally. Put yourself in the consumer’s shoes — "how would I respond to this animation? This interaction?" It’s a consumer-first approach that ensures that the target audience has a positive experience with the ad and, ultimately, the brand.

Resources:

https://www.nngroup.com/articles/usability-101-introduction-to-usability/

https://www.webdesignerdepot.com/2015/04/6-types-of-digital-affordance-that-impact-your-ux/

http://time.com/3858309/attention-spans-goldfish/

http://www.yoose.com/news/how-to-overcome-banner-blindness-in-mobile-advertising