How to Create Delightful Microinteractions in App UI Design
24 Sep 2021
Every business needs to stay constantly connected with their app users in this very fast-paced world of technology. So it’s easy to throw everything but the kitchen sink into your app in a bid to stay current – but do you know when to stop?
In this article, we’re discussing how to sprinkle just the right amount of microinteractions in your app without overwhelming users.
What are microinteractions?
In a nutshell, microinteractions are small, subtle changes within an app that signal a task has been performed either successfully or unsuccessfully – think App Store’s circular download progress bar.
Check out our previous article on microinteractions to understand more about what microinteractions are, how they work, and where to implement them in your mobile app.
Key Principles to Keep In Mind
Microinteractions are so much more than just a way to delight app users, they’re functional tools that make the UX more enjoyable. Adding a touch of motion in your UI can help you tell your story in less time and with more clarity.
In order to use microinteractions to your full advantage, it’s important to delve deeper into the key benefits of motion within UI. As doing so can help you understand how each can be used functionally to create a better UX.
1. Set the Scene
Well-designed microinteractions can lead the eye to the important content as they go from one screen to another. Such animations, known as staging, bring focus to actions that should be taken next or potential interactions to be initiated, creating a smooth action flow for the user.
Side note: Transitional microinteractions that are too fast or abrupt can leave users confused, so be sure to keep it subtle or even unnoticeable.
2. Make a Point
This may contradict our previous point, but there are times when exaggerated microinteractions are appropriate. For instance, when you want to draw attention to an interaction error – think a shaking pop-up box in response to a password input error. Such microinteractions direct focus and make it clear that attention is needed.
By definition, microinteractions are meant to… well, interact; they’re supposed to make the user feel something in response to their activities.
For example, when using the Dictation feature on Noted, the wave response to the surrounding sound changes whenever you speak or pause. The size of the wave also fluctuates to your speech volume. This gives instant responsive feedback to the user’s actions, assuring them that the feature is working properly and they can expect results from it.
As you can see, successful microinteractions not only solve problems but have an emotional pull, too. Whether it’s a raise of eyebrows, a clench of lips, or a light chuckle, if your microinteractions are able to produce a reaction from the user, then you’ve successfully created a memorable experience and built character for your brand, which is what keeps users coming back to your app time and again. After all, isn’t that what we all want?
Don’t Overdo It
As the name suggests, microinteractions should be micro. Therefore, it’s best to keep them simple and minimal, and not to overdo it because you don’t want the user to get tired of having to deal with animations slowing them down.
When overdone, microinteractions can become tedious, especially if they’re too detailed and/or get used frequently. The user doesn’t want fairy dust to appear every time they tap on a button, so striking a balance with genuine value that communicates how the interface should work is key.
Likewise, microinteractions shouldn’t be so complex that it takes too much time to load. Instead, they should be simple and interactive so it makes users feel the same whether they’re seeing it for the first time or the hundredth time. They should also be seamlessly integrated into the style of app UI so they feel natural and organic without distracting the user’s attention.
Above all, look for ways to make these interactions as delightful as possible whilst communicating status and providing instant feedback. Consider how you can transform important but generic functions, such as tapping, refreshing, loading, and scrolling with microinteractions. Find a way to turn these regular and often mundane actions into moments of delight – and you’ve nailed your UX.