Online animations have been around since the early days of the internet but today their use is expanding from entertainment to eCommerce. The application of animated icons or micro-animations, to the Customer Experience (CX) can emphasize the brand, improve user experience, and boost conversions. In this article, we’ll explore options for integration of micro animations and recommend some best practices for merchants using animation in their buyer journey.
First, let’s make a distinction between “gamification” elements and “micro-animations”. Gamification is the strategy of incorporating interactive game elements into the users' experience in order to incentivize the user to take action. Some examples of Gamification are colorful “badges” that a user can earn that are tied to discounts or prizes. A game such as a prize-wheel, or countdowns that provide for discounts or gifts.
"In 2020, gamification will 'go deeper' as marketers will seek for ways to make the desired behaviors enjoyable instead of stimulating action solely with rewards and gifts.” –Yu-kai Chou, author of "Actionable Gamification" (Forbes)
The micro-animations that we are focused on are much simpler and more subtle than traditional gamification. We are not adding a new feature to the user experience we are just enhancing page elements to provide a more robust shopper journey.
Before we jump in, let’s touch on human psychology and how we are hard-wired to react to animated images. Numerous studies have shown the benefits of using animation to influence behavior, such as:
A study by Adform discovered that animated HTML5 had 297% more viewers than traditional banners ads.
Smashing Magazine says that “...more and more designers are incorporating animation as a functional element that enhances the user experience. Animation is no longer just for delight; it is one of the most important tools for successful interaction.”
They go on to say that “Jakob Nielsen’s first heuristic for UI design states, “The system should always keep users informed about what is going on, through appropriate feedback in a reasonable time.” The app shouldn’t keep the user guessing — it should tell the user what’s happening, and micro-interactions can help you make that known via appropriate visual feedback.” Read the full article.
“Start the story.” This refers to the user's first interaction with an animated icon or micro-animation. From this point on, the user will consciously or subconsciously be primed and looking for similar animations throughout the purchase process. When they find the next one, the user will be rewarded with the animation and primed to find the next one. All the micro-animations that a user will encounter, tell a story that leads to a successful purchase or completion of a business goal.
If we divide the purchase process into a linear path as in the illustration above, we begin with the home page, and then go through the search or category page to land on a product page, from there we go to the cart and checkout process. The following are a few examples of how to integrate micro-animation elements in this path.
Next steps? Talk with Kensium about how you can improve your CX through the addition of micro-animations.