Online shopping can be such a frustrating experience. Continuous loading times on pages, scrolling through long product lists, figuring out the contents of your shopping bag or trying to understand the current order status … It’s exhausting. On top of that, the animation can easily feel like a 1930s cartoon. But if you use animation correctly, you could ease the frustration. By reducing distractions to make the path to conversion smooth – and thus providing a more pleasant experience for the user – animation is becoming the basis of effective interaction design.
A cartoon-like UI on the pizza order process by Cuberto
Introducing Motion in UI Design
Life is constant motion. We walk, run or cycle, and things around us move in (often) predictable ways. So, it isn’t strange that we can’t imagine our routine without movement. Our eyes pay attention to moving objects, almost like a reflex. And we can take advantage of this fact by introducing animation in UI.
By doing this, we take a human-centered design approach. After all, it directly engages the user and helps him to experience transitions and interactions more natural and intuitive. The best website animations have both purpose and style, and create a feeling and perception close to what a person experiences when interacting with a physical object in real life. They tell simple stories like Hey, look at this now or Hurrah! Your order has been placed. Done right, animation isn’t merely entertaining the user, but also helps to understand what’s going on or explains how to use the site most effectively.
Nowadays, interfaces are no longer series of static screens, but help bridge the gap between software and human nature by adding the dimension of time.
Use Animation to Visualize Processing
When interacting with a (digital) product, you want to know what’s going on at every single step. If you make your customers wait in uncertainty, you’ll risk losing them. Often, it’s not enough to let users know that the process is loading, thus avoid loading indicators. They are only a reminder that they’re waiting. Make the wait more pleasant by using the skeleton together with a subtle animation for loading content to keep customers engaged. By informing the user about the level of progress, unpleasant notifications can become an entertaining element.
Setting expectations for how fast the action will be processed
Use Animation to Show That the Action Is Done
While some animations show the process, it can also show its finalization. The user needs to understand quickly and clearly that the action is done and know that the system responded to it. One of the easiest examples is “the button”: when pressing it – regardless of what it looks like – you expect something will happen. The usability of the product design really suffers if this sort of feedback is not provided noticeably. Harrods uses animation to illustrate the product’s movement to the shopping bag after clicking the button Add to shopping bag. The shopping-bag-icon expands to a box where the checkout button has been made visible. The button title changes into Added with a check mark, which disappears in a few seconds. This saves the user from wondering if the item was added or not and allows the user to go to the checkout page without visiting the cart overview first.
Providing visual feedback on an action
Use Animation to Aid Understanding
When we think of error states, the screens that are shown when something is wrong, it’s important to make them obvious to users. For entering data, animation can be used with a horizontal shake to deny input. We associate shaking in UI with a head shake gesture. The user spends less effort or energy comprehending the behavior of the site.
Visualizing the result of an action
Use Animation to Enhance Stories
Many e-commerce sites display their products in a product wall. Without providing focus, the user can experience indecisiveness and get lost in details. Simply Chocolate, a Danish shop that sells chocolate bars, shows – not tells – the specific characteristics of the product. The vibrant design of the site gives every product enough space to shine. Just as in real life, you can unwrap the bar with a sliding movement to see how it looks. The ingredients of the bar animate gently in the background. While the effect is very in-your-face, the overall experience works because only little information is displayed in the background per product.
Layout of Simply Chocolate
As for everything that’s put in the interface, animation requires a thoughtful approach and a clear purpose. Done right, animation helps retailers to provide a pleasant and frustration-free user experience. You can guide your user through tasks, give clear visual cues and even provide him with a little bit of fun. The advantages of using animation need to outweigh possible disadvantages. It should be the icing on the cake, not a fly in the ointment.