Should You Advocate for Micro Animations?
Not everyone might be familiar with the term micro animation — sometimes referred to as microinteractions — but most encounter them everyday in the digital world. Micro animations are brief animations designed to direct the user through her tasks as she interacts with a digital product. They integrate seamlessly into a product’s UX and improve pathways therein.
Micro animations are small but powerful. When the curtain is pulled back to reveal how, when, and why designers implement micro animations in software, it’s hard to envision a world without them.
Micro Animations Make Data Digestible
Users encounter enough information everyday to make their eyes gloss over. But successful micro animations bring all of this data to life. Sifting through that data becomes digestible and even enjoyable thanks to micro animations.
Humans have body language as a means of subtle communication. User interfaces rely on micro animations. Micro animations keep people coming back to great software.
How Micro Animations Bolster UX Design
Jakob Nielsen’s Usability Heuristics inform the work of many UI designers. Two of his tenets inform the implementation of micro animations in particular. This important UI element helps software better communicate the following:
- System status. With a flash here and a twitch there, the user always knows where she stands thanks to micro animations. They assist users through software at key junctures.
- Recognition. Movements, objects, and options prompt the user to take action in a way that doesn’t weigh on that user’s memory load. The goal here is to prompt recognition of patterns, as opposed to recall of process.
Micro animations make effective UI elements because they:
- Enhance the user’s sense of direct manipulation
- Help people visualize the results of their actions
Micro Animations And Nowhere
Almost everyone has benefited from the increasing presence of micro animations in more software environments — they just might not realize it.
That’s because successful micro animations actually fall into the background of the UX. Those that are disruptive will actually take away from the quality of the UX.
So designers must work with users and developers alike to ensure that incorporating micro animations into software neither disrupts coding nor distracts users from the task at hand.
Why Micro Animations Require More Foresight from Stakeholders
Planning every detail of product design and development is neither helpful nor possible — especially for lean UX teams. Besides, the thinking is often that the most creative solutions are also the most organic and unexpected. It’s part of design’s beauty.
But it’s also part of the challenge of aligning expectations between business leaders and their technical teams.
Setting aside some resources so designers can add necessary UX/UI optimizations — like micro animations — helps teams solve for key usability problems without disrupting overall budget and progress later on.
Securing such flexibility requires a high level of trust between project stakeholders. Yet the effort needed to get there is well worth it. Teams that can identify and make the case for optimizations like micro animations are are better equipped to take an application from functional to phenomenal.
Effective Micro Animations Demand Better Design Strategy
Business leaders that engage with designers in software development generally have a sense of the look and feel of the features their MVP must support. But MVPs are by definition unfinished, and if Agile software development and Lean UX have anything to teach, it will still take some amount of unplanned work to really bring the final product to life from a design perspective.
Add Design Details While Minding Your Budget
Too often, project estimations don’t account for small yet important details like micro animations.
Loading screens, hover states, deleted/disappearing content, favorited items — these micro animations are considered essential to not only designers, but users, too. These and design elements are such “no-brainers” that product owners and designers alike could fail to specifically call out their important when mapping a development strategy.
Estimation needs to account for at least some miscellaneous development and design work. But accommodating pivots does not have to mean coming out over-budget or with a lackluster MVP.
When it comes to working in the creation of elements like micro animations, understanding the tools at hand can help keep projects and budgets on track despite any pivots made.
Designers Should Advocate for UI Optimizations
Experienced designers will anticipate and alert product owners of these additional tasks and their impact. But others may come across them later in the software lifecycle, forcing them either to retool the project scope for the client or eat the costs in order to implement them.
With time, designers will know how to create room in their estimates for these important features and teach product owners their importance early on in design engagements.
Wise Product Owners Will Understand Why They Need Micro Animations
Either way, product owners are wise to account for UI improvements as they organize project roadmaps with their technical counterparts.
Having the expectation of gaining new information and improving processes at every step of the way, everyone will understand how important micro animations and other design features will be down the road.
Off-the-Shelf Micro Animations Don’t Need to be Customized in Order to Be Effective
CodePen is a code repository for designers and front end developers. For anyone in a pinch, this active design and development community offers open source code for micro animations and more.
With such accessibility, teams pressed for time, resources, and/or skills, can find and implement effective animations for very little effort.
Those with a little more time and skill can customize an off-the-shelf micro animation package. Even subtle changes in size or color can make an open source micro animation feel polished.
When Custom Could Be Worth It
Business with larger budgets that target making larger splashes with consumers usually choose more customized micro animations. They know there’s a case to be made for subtle yet surprising UIs can capture users’ attention in ways that off-the-shelf solutions can’t.
Micro animations can bring to life simple tasks like drag and drop, letting the user know she executed an action correctly.
Adobe After Effects is designers’ go-to tool for custom micro animations. Yet a powerful tool like this one requires more time to master. While efforts put in are well worth it, small teams that are pressed for time or projects with limited budgets and room for error may not feel the benefits of investing in customization in the short term.
But not accounting for these touched in the estimation process can make it difficult to convince some stakeholders of these features’ worth later on in the design and development process.
Whether budgets are big or small, it’s never a bad idea to think ahead to how elements like micro animations should factor into project scope and cost estimations.
Take These Steps to Avoid Bogging Down Developers When Launching Micro Animations
- Avoid customization where possible.
- Protect part of the software discovery phase to identify and understand the need for design optimization and its impact on development.
- Focus on distinct product features, how they will evolve, and their evolution over a product’s lifetime.
- Target critical functions and what they need to do to ease the user’s interaction with it. Add microinteractions as necessary in order to call attention to the feature and its evolving functions over time.
- Allow agile process to inform which micro animations to optimize through customization. This is how you test and ensure your team’s efforts are being put to the right tasks.
Image Source: Scott Webb on Unsplash
Original post can be found here.
Innovate with us. Click here to access all of our free resources.
Authored by Jake Nelsen.
Jake designs with one goal in mind; making great experiences. With 10+ years in product design, Jake believes that user-focused problem solving is the best way to create those experiences. When he’s not designing, Jake can usually be found hanging out with his Corgi, Cooper.
