LAB NOTES

Using Micro-Interactions to Enhance Mobile App Design

Worry Free LabsUsing Micro-Interactions to Enhance Mobile App Design
Using Micro-Interactions to Enhance Mobile App Design
Worry Free LabsUsing Micro-Interactions to Enhance Mobile App Design
With an increasingly crowded mobile app market, great app design is no longer a nice to have but its imperative to attract and engage users.
Great app design requires a blend of art and science that consistently delights the user; it’s not only visually pleasing and stimulating but its designed with the end user in mind – and may include little things that humanize the experience and make it feel more personalized. It requires more than simply adding the features that users want or need. It requires focus on the details that make using an app a pleasurable experience. Often, these details come in the form of micro-interactions.

Micro-Interactions Defined

Micro-interactions are one of the hottest UI design trends today. In the simplest of terms, these are the tiny details within the app that serve a single, important function. Taken together, these micro-interactions contribute to the overall experience of using an app, but on their own, they would be all but invisible.
Micro-interactions usually serve one of several important functions, including:
  • Providing a visualization of a user’s action;
  • Providing a sense of actual manipulation;
  • Communicating the results of a specific task; or
  • Accomplishing a specific task.
Micro-interactions can take many forms. The most common are on-screen animations, sounds, or vibrations that serve as an indicator that you have either accomplished what you’re trying to do – log in to an account or change a setting, for example – or that you need to correct an error. The overall purpose of these micro-interactions is to give the user a sense of well-being and control over the app. A simple animation indicating what needs to be filled in next on a form, for instance, gives the user confidence that what he or she is doing is correct, and will reduce frustration.

_______________________________________________

WANT TO LEARN MORE ABOUT APP DESIGN?

Check out our blog on The Future of UX / UI Design

_______________________________________________


Most of us have dozens of these micro-interactions every day, without even realizing it. Some common ones include:
  • When using Facebook, you like a friend’s photo. When you like a friend’s photo, the like icon briefly turns blue and gets larger – and you hear a “pop” sound to indicate you’ve completed the action.
  • When changing the settings on your phone to silent and back again, the phone vibrates briefly to let you know you’ve made a change.
  • You enter your credit card information into a digital wallet, and as you do, your name and card number appear on a digital animation of the card, giving you a visual representation for comparison.
  • When you enter information, or begin a download, you see an animation indicating the progress.
  • Your apps provide context: The Captcha asks you to answer a question related to the site’s theme, or the animated clock on your home screen shows the actual time instead of a static time.
These are just a few examples of micro-interactions – small things that add up to create a great user experience.
micro-interactions in your mobile app

Incorporating Micro-interactions Into Your App

One of the trickiest aspects of using micro-interactions in app design is that for all their importance, micro-interactions need to be invisible. They need to feel natural, while still serving an important purpose. You don’t want to annoy users with unnecessary clutter or bog down the performance of the app, so the key to a successful micro-interaction is making it feel normal…expected.
There are a few areas where micro-interactions tend to be most useful.
Visualizing input. Going back to the credit card example above, allowing users to clearly see what they are inputting into the app is a perfect micro-interaction. Another example of this is using calendars; when users must choose a date in the app, give them a full calendar so they can see what they are selecting.
Highlight changes. When users navigate through the app, use animation or color to highlight changes. This helps guide the user through the experience, and makes your app easier to use.
Show Progress. The first principle of usability is to keep the user informed, and micro-interactions are ideal for this. Whether you are showing the progress of an interaction using a graphic or a sound — or even showing bad news, like a failure to upload — always keep the user up-to-date on what is happening.
Bringing in personality. Micro-interactions give you a chance to strengthen your brand with little quirks that reveal some personality. For example, one tech site gives feedback on password strength by indicating the amount of time it would take to hack. Another site offers far more options than usual in the dropdown box for gender. Use your micro-interactions to add some fun to your app and show more personality to delight users.
Most micro-interactions take place around specific interactions in the app, but you can be creative and add them throughout to create an overall positive user experience. These details have the potential to take what might otherwise be an uninspiring experience and turn it into a remarkable one, all the while giving your app a little more personality and pizazz. Please reach out if you want to learn more.
To connect with one of Worry Free Labs’ technology experts, or to learn more about this blog topic (or our digital strategy, design, development, and/or management services), Contact Us.  

Related Posts

Drop us a note
we're just an email away!
470-223-4370