5 Pro Tips For Better Micro Interaction Design That You Can Benefit From Starting Today

Designing in static canvas makes designers overlook the most important part of UX — Delightful experiences happen in time.

Furthermore, UI design is adopting advanced motion design techniques. Fluent, fluid, or material, call it how you want. All big players are already vitally using motion in their design systems, especially when it comes to micro interactions.

Micro interactions are subtle moments centered around accomplishing a single task. Today we are going to share lessons to take your design skills to the next level.

Use storyboard to design user flows

Avoid being stuck on static screen. Storyboards are great way to design user flow. You can follow when delivering a sequence of screens, think about fluidity in which user experience happens, sketch high fidelity storyboards focused on small moments of interaction.

What states the UI element has and what happens between its change? It keeps animation in interface subtle and purposeful. These effects can increase understanding and enjoyment.

Memorize these 8 places and where to use it.

The rule of thumb says — When a micro interaction doesn’t add a value, it shouldn’t be there.Excessive animation can make people feel disconnected or distracted. These little moments can increase understanding and enjoyment, but you cannot design somebody’s experience. You can optimise for the best experience.

Use micro interaction

Visual aid between views

Enhance emotional response

Hints what will happen when user complete actions

Hierarchical relationships between elements

Visual distraction

Highlight Changes

Visualize Input

Enhance the sense of direct manipulation

Interaction for changing view providing a sense of information hierarchy (by Leo Zakour https://dribbble.com/shots/2247219-Map-Directions)

Give user hint what happens (by Jakub Antalík https://dribbble.com/shots/3949985-Cards-interactions)

Jump into After Effects

Be on the top of “best tool discussion”. Principle, Flinto, Invision studio, After Effects… each tool has its own pros and cons. As an expert you need to master each one and then pick which one suits your job the best. After effects offers most advanced controls to design high fidelity interactions, and it has certainly a place in the design workflow. But remember — keep it real, somebody will need to code it.

Tip: try to inspect source files of other designers to understand and learn faster.

Be on the top of “best tool discussion”. Principle, Flinto, Invision Studio, After Effects… each tool has its own pros and cons.

Use Motion blur and Motion stretch

Sometimes too fast animation can appear laggy on the display. Use 60 FPS rate to make motion appear smoother. If it doesn’t qualify to use good ol’ animation techniques — use Motion Blur, or manually Stretch the object.

Test it, until it “feels right”

Use the physics, lighting, speed and velocity to achieve most realistic results. When designing use principles from real world, so people can relate and understand virtual objects they interact. If you swipe up to pull out detail card, you should be able to dismiss it with revert movement.

Use consistent animation across the whole interface. Always test the motion in the interface to make sure it works well. Still not enough? If you are eager to go deeper into micro-interaction design, we have prepared for you a UI Motion Kit for After Effects.

Thanks for the 50 clap 👏🏻 if you enjoyed this article. This will tell us to write more on this topic! Also let us know your thoughts in the comments.