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:

• Engaging users' attention to improve understanding & reduce drop-offs.
• Improving viewer retention.
• Focusing users on important tasks.
• Improving the perception and credibility of the business/brand.

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.

Opportunities For Animating The ECommerce Experience.

“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.

• A “SALE” icon that turns into a “20%” sign on rollover or load, draws attention and emphasizes the offer.
• A “Shipping” icon like a truck or package that moves across the icon element - literally drives home the concept that the product will be shipped to the customer increasing anticipation.
• A “Checkout” process that animates each step so the user knows where they are in the process increases and confirms the understanding of your customer.
• An “Add to Cart” button that animates to show that the customer's click has been received improves user comprehension.

7 General Best Practices To Use As A Guideline.

1. Make sure icons are designed consistent with the brand. Don’t mix icon styles or animation styles. If your brand is sophisticated then consider soft transitions and fades. If your brand message is “active” then transitions and graphic styles can be appropriately energized.
2. You may want to purchase an existing icon library, such as livicons and use it as is, or customize it via the parameters it allows. You may want to design your own icon set. Once this has been determined make sure to add them to your corporate style guide so you can leverage them wherever appropriate.
3. Make sure the code base is compatible with your page code. Also, set a maximum icon Kb size to ensure they will be fast-loading.
4. Icons should be used in a consistent manner. If you are animating your Add to Cart buttons make sure they are all animated from your Category, Quick View, and Product Detail screens. If you’re animating your checkout process, make sure that each step in the process is displayed consistently and visually rewards users for completing the process.
5. Don't use animations for the sake of using animations. Strategically plan out the customer paths and identify the best positions to insert icons in order to accomplish your business goals. Also, make a distinction between icon behavior, use on hover, looped, and on click animations appropriately.
6. Don’t overuse icons. We don’t want to overwhelm the customer experience (CX) with a fireworks display of animations. The user won’t know what to focus on in most cases we will want to animate only when the user scrolls to an area of the page or when a user rolls over or interacts with a page element.
7. When in doubt use A/B testing to ensure you’re maximizing conversions.

Next steps? Talk with Kensium about how you can improve your CX through the addition of micro-animations.