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.
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 crafter 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:
a. Subtle, but constant background animation can help accentuate static imagery.
b. Character animation incentivizes the type of action that users will need to perform to receive a coupon, recipe, or discount.
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.
a. Flashing and flipping animation of tiles.
b. Bumping animation on tiles/sliders on a Slide to Reveal, for instance, makes it clear which direction the tiles will move, and also provides a preview of additional content underneath each slider.
c. Animating the result of a potential user action.
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.
a. Outer glow on tapped items.
b. Plus sign animating to an x shows both confirmation of tap as well as a cue to the next action.
c. In gaming units, animating positive and negative consequences of user actions can go a long way in reducing user frustration. In this case, the subtle animation of the lime bouncing around the edge of the cans visualize why the user missed.
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