The devil is in the details. The saying sounds especially true when applied to mobile design and UX. One single mistake in your UX can lead to disastrous consequences, increasing churn and uninstall rates, thus causing negative reviews.

On the other hand, well-crafted UX details can add a unique competitive edge, setting you apart from the other apps on the market and driving user attention.

That’s why we would like to draw your attention to one more aspect of a good app UX. Namely, let’s talk about microinteractions.

Microinteractions in UX design

Microinteractions is an important but often overlooked aspect of a good UX. They are the tiniest details (usually animated) that facilitate interactions between the user and a piece of software. Despite being practically invisible, they can have a huge impact on how users see the application. They can make the user experience more fun, engaging, efficient, and humane.

There are multiple examples of microinteractions we see every day:

• default switch buttons in iOS and Android (changes when turning on/off)
• vibration signals when muting your phone
• animated reactions on Facebook
• error highlights in online forms (e.g. an incorrect email or when lacking information)

Some examples of microinteractions in app design

As defined by Dan Saffer, who was the first to introduce this concept in his book, “microinteractions are contained product moments that revolve around a single use case.” Thus, microinteractions always have a specific purpose.

They can make the interactions between the user and an app more intuitive by:

• providing feedback on a certain interaction
• highlighting the status changes within the app
• visualizing the outcomes of user actions
• serving as a call to action

Let’s put the given use cases in context.

• Buy/Add to Cart button animations

There are two simple rules for creating a good “buy” button. The first being, it should be visible, but not overly aggressive. Secondly, it provide the user with some real visual feedback when they click on it.

You don’t want your potential customer to leave, being left unable to make a purchase only because he or she couldn’t figure out how to make the purchase.

In the example depicted above, we could have simply changed the text on the button after the item was added to the cart. However, such visual feedback in response to a user’s action is far more engaging and encouraging from a usability point.

• “Download” animations

Progress bars and animated “download” buttons serve a simple purpose. They keep the user entertained. Watching an animation while waiting for a file to upload simply fills a user’s time better than it does staring at a blank screen. Additionally, users are comforted by a visual representation of the progress being made, and it gives them an understanding as to when the process will end.

It is a huge UX mistake if this animation isn’t clear enough or if the element (button) remains unchanged throughout the download. It needs to show that progress is being made, either through an element of time or with an animation.

For example, the “check” sign that we see in the end of the first example and the color change as represented in the second case show that the action was successful.

• “Like” animations

Social media apps is one of the spheres where microinteractions have proven to be the most useful. Introducing small animations can help users interact with the app in a more fun and engaging manner, and can be crucial for initial user engagement and long-term user retention.

On the other hand, make sure to understand when fun and vivid animations are appropriate and when it’s better to choose less fancy ones. For example, professional networks like LinkedIn keep the microinteractions subtle and to the point, while on Facebook we can see a number of bold and vibrant animations related to “liking” a post.

This can be represented by the given animations, as they show a visual response to a user’s action (liking a post) in a simple yet delightful manner.

• Animated “Menu” items

In addition to helping the user navigate within the app or website, these microinteractions can also serve as a call to action as well. For instance, in the first case the menu icon turns into a “close” button, and in the second, it shows a user how to navigate themselves back to where they came from in an app.

Thus, users won’t find themselves lost and unable to return to the home screen when navigating through your app or website. Resolving navigation problems with simple yet intuitive animated elements is a good way to reduce churn.

• An animated “share” button

Another use case for microinteractions is to keep your app’s UI clean by hiding elements of secondary importance behind smaller UI items. As in the example above, the full list of social media icons is visible only when a user shows intent to use them, keeping the overall experience uncluttered. The same case goes for action buttons on Android (Material Design).

However, there is an opinion that such an approach might discourage the user from completing the action, because of the extra step added to the process (for example, the need to hover over/click on the element to see the full list of social media). Yet, from a UX standpoint this option is still preferred.

• “Switch” control animations

As mentioned above, various switch buttons that show a transition from one state to another are often turned into microinteractions. In this case, they don’t just indicate the result of an action, but also show the process of transition for a more engaging experience.

Furthermore, such elements help you create a feel of direct manipulation with the app’s interface and make your app more intuitive and “alive” by echoing the real-world analogs (physical switches).

The dos and don’ts of designing effective microinteractions

• Don’t overcrowd your app with unnecessary elements and microinteractions.  Every element should serve a purpose.
• Don’t force it. Make sure every microinteraction fits naturally into your app’s UX and that it matches the overall style of your design.
• Make microinteractions almost invisible. While it might sound self-contradictory, the best microinteractions are subtle, otherwise they can become annoying.
• Keep your UX consistent. If a feature triggering a certain microinteraction is repeatedly used within the app, the corresponding animation should be used in all cases (e.g. on/off switches in the settings).
• Aim for an instant response. As with animations, an immediate reaction to a user’s action is the key to a good microinteraction. That is why you should pay attention to the app’s speed and performance.
• Design for repeated use. What might seem fun at first, may become annoying after the 100th use. For example, using subtle tips to help onboard users is a good idea, but you don’t want to show these elements every time the user launches your app.

Wrapping up

Well-designed microinteractions can make an app feel crafted, adding a final touch to a great UX. Yet, to design such an experience, you will need professional help from a skilled UX designer.

We at Eastern Peak have vast experience creating custom design solutions for mobile and web projects across a number of domains. From gathering your requirements and creating interactive visual prototype for your app, to developing custom branding and crafting UX design, including animations and microinteractions; We provide professional design services to startups and businesses around the world.

To receive expert advice on design and app development, contact us now.

Read also:

• 7 Obvious Reasons for a Website Redesign that Businesses Keep Ignoring (and Why You Shouldn’t)
• How to improve your website for lead generation: Web Design Tips for Great User Experiences
• Mobile app design: from blueprint to masterpiece
• User Onboarding: Do-s and Don’t-s for a great UX