Mockplus - Design Faster. Collaborate Better.

Subscribe to our blog

To get the latest and most quality design resources!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free

Handoff Designs with Accurate Specs, Assets, Code Snippets Automatically.

Get Started for Free
Start prototyping and collaboration
Blog > Interaction design > Micro Interaction Design: Create Micro Animations to Improve UX

Micro Interaction Design: Create Micro Animations to Improve UX


A good web/app design does well in displaying their products nicely, as well as providing a better user interaction. A good display brings target users to your site/app. While thoughtful and innovative micro animations solidify your successful future in a way which leaves a good impression on users and makes your service stand out among the same. Therefore, exceptional micro interaction design is the key to joyful user experiences.

When designing an app, we should think from the perspective of users. Playable micro animations amuse users, which makes them more willing to spend time in using an app/the web. For designers, it’s vital to know how to apply micro interaction design in work.

What Is Micro Interaction Design Exactly And Who Put Forward It First?

Simply put: Micro Interactions are a collection of some certain interactions that exist when a user does a small transaction. Micro Interactions are small bits of communications that assist users in a basic task. That is to say, Microinteractions is hardly noticed. However, the existing of microinteractions brings a simplified and intuitive user experience. No wonder it’s so popular and widely used nowadays.

It’s Dan who initially introduced micro Interaction design in his book. There list four basic functions that Microinteraction works:

*Providing feedback, or showing a result of an action to users.

*Inform users of the finish of an individual task.

*Enhance the sense of an operation.

*Visualize operations to prevent error operations.

Use micro animations to enhance user experiences

Let’s take two examples of micro interaction design in app design style here:

1.When muting iPhone 7 Plus, you feel smartphone vibration immediately. At the same time, a mute icon shows in the middle of the screen.

2.When a mouse is hovering over an icon, its color changes to imply it’s clickable.

Mute iPhone 7 to sense micro interaction design

The Logic Behind Micro Interactions

Micro Interactions function well, since it perfectly interests people in exploring more and desiring more. Users get in-time visual feedback the moment they operate, which encourages users to explore. Thanks to the logic, Micro Interactions are commonly seen in first-time using guides. We just follow auto Microinteractions commands to learn an application, or get accustomed to how to get a job done.

Apply Micro Interactions to Your Designs

There are many situations where Micro Interactions can be applied to improve user experiences. Or it seems that all interactions can be designed to a Micro Interaction. While it’s usual in below cases:

1. Display System Status

Jakob Nielsen emphasizes that any system should always tell users where they are at all times, no matter what task is executing, in his “10 Heuristics for User Interface Design”. Users always want to go to the next stage immediately. When it comes to some processing, e.g. loading Information, it has to keep users waiting for some time. In the case, adding a few interesting Micro Interactions will buy you some time. Or users probably go crazy, complaining a lot. Below is one of micro interactions examples.

An example of micro animations displaying status

Remember: Don’t let your users feel tired! To keep them know about current status is necessary. (Using a progress bar to show where a program runs.)

2. Highlight Status Changing

When a message is coming, we must ensure users see it right away. Micro animations happen to perform it well. It’s ideal to draw users’ attentions, alerting important messages that are easy to be ignored.

In many cases, micro animations can successfully catch users’ eyes, but it still needs to obey “KISS Rules” to keep micro interaction design brief and light.

About KISS Principles:

KISS is the highest standard for evaluating user experiences. To briefly explain the rules: we are required to display product nicely and simply, which allows even a fool to fully understand it at the first sight. Thus, it’s also called “Layman Principle”. In other words, it’s the principle that "Simplicity is indeed a beauty." David ushered in "KISS" concept into film theory initially, and it evolves and spreads to other fields.

3. Fluent Scene Swap

In order to show users how element organizes and rows in the interface, it's crucial to utilize fluent and friendly scene swaps. Smartphone or smart watch need it most, as this kind of device screen gives limited space to display information.

Keep a clear navigation in different interfaces and users can easily predict what kind of contents may display hereby and where to read next. Make sure the conversion between two different interfaces is clear, fluent and concise. Generally speaking, it’s best to unify all interactions under the same theme.

4. Visual Input

Data input is the most key process for any app. A well designed Micro Interaction will make the dull process vivid and lifelike. Micro Interactions effectively display information, assisting users to finish any operation.

5. Inspire User

Micro Interactions can be used to navigate users as well as inspire users. It empathizes with users and products. It’s required to ensure all Micro Interactions suit your clients. Besides, you should consider tiredness in a long term.

It's advised to take culture and user research into account when you design a product. And also take a user’s point of view to feel and modify your design.

Tips Related to Micro Interaction Design: Micro-interactions: why, when and how to use them to improve the user experience

A Few Things You Need to Keep In Mind:

*Micro Interaction is the guide-interpreter, commonly used in operation feedback, message alerts and navigating operations.

*Micro Interactions are designed to help users capture information effectively. So we should keep it simple to get client’s attention. Never make it complex.

*Fully understand your clients and use proper scenes to make your Micro Interactions accurate and effective.

*Micro Interactions need to be used in a long term. Some funny micro interactions may be abandoned by its users.

*Always thinking about human nature when designing Micro Interactions. Visual balance must be taken seriously in design. Micro animations can only feel lifelike and vivid when it’s simple and fluent.


Get started by thinking of your users when you design micro interactions and create micro animations. Step into the shoes of your clients, and think ahead of possible issues. Designing to every detail is the key to making a good human-machine interaction. Function and easy usability matter much. Micro interaction design improves UX dramatically.

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

Design Faster. Collaborate Better.

Designing the best user experience. Mockplus does it all!

Interactive prototyping

Painless collaboration

Scalable design systems

Let's chat