In today’s emoji-centric world, the way that we communicate, on- and off-line, has changed dramatically. Pair that communication shift with technology advances, and the outcome is a brand new way to reach and influence your interface users. Enter micro animations; this feature might have a small name, but it packs a big punch.
Digital interface animation, as a concept, is not new. In fact, if you are old enough to have been around during the birth of the Internet, you might remember the gloriously awful animations that were included even on the earliest websites. We’ve come a long way, baby, and digital interface animation has been reborn.
Micro animations are momentary, artfully-crafted visual cues that are meant to guide users through their digital experience by providing feedback, clarity, and confirmation during interactions. It allows designers to use their creativity to convey messaging without crowding an interface with words, which helps manage the user’s focus and provides them with instant gratification for their action.
Micro animations work best when they are functional within the interface so that they can create delightful moments for users. Here’s what micro animations should accomplish:
- Enhance navigation
- Offer tips that enhance the user experience
- Provide users with status updates and feedback on their progress
- Drive user attention while providing them with augmented control
- Confirm actions by showing results
- Establish an emotional connection between the brand and the user
A few basic examples of micro animation use include:
- Status Bars. These can be used on forms, in galleries, and during uploads and downloads. It not only reassures the user that their action has registered, but it calls attention to the progress they are making, which can be rewarding.
- Calls-to-Action. Micro animations have the ability to attract and hold attention. This makes them ideal for use with and around your calls-to-action. Whether you are persuading them to take a starting action or a continuing action, highlight it with a subtle-but-effective animation.
- Kudos. When used with some restraint, micro animations can also be a great way to offer rewards to your users. Maybe they completed a form, or checked off a task, or they were the first or fastest person to do something; whatever small achievement they had, offer them kudos with a fun, brand-centric micro animation. This can be as simple as a thumbs up or even clapping hands.
- Swiping. Touch-screen devices have ushered in the ‘swipe’ culture and made ‘tapping’ yesterday’s news. Swiping can be used to move between pages or images, and to access additional information about a product or service.
However you decide to use micro animations, remember that less is more. Too many animations will just clutter the interface and your branding and messaging will get lost. Instead, work through a system where you define which triggers you want to include micro animations. Once defined, establish a set of rules for each trigger, and be sure to discuss which user-facing feedback needs to be communicated as well.