Say you’ve just visited a website for the first time. Every time you go to click a button, there’s no indication that it’s clickable. There’s no progress bar to the right and you’re left quite unsure as to how far the page goes and how much information is available for you to sift through. Where are the microinteractions?

You click on one of those buttons to go to the About page to figure out what the website can offer you, and it start loading, but there’s no loading screen or indication of how much time is left. You grow impatient, weary, distracted, and move on to the next website.

The problem with the aforementioned website, and a problem plaguing many apps, is that they feature no microinteractions, those invisible functions that make up the tiny details of your service.

Think about using your mail app and never knowing you have new emails without that red circle with the numbers inside of it, or knowing there’s something new about your app, some crucial update, without alerting the user with some visual cue. Imagine pressing the mute button on your iPhone and having no way of knowing if you successfully muted your phone.

What is a microinteraction and why should you use them?

A microinteraction is the differentiator between your big picture idea and the little details that make them up. Think of it this way: the features of your app are why the user downloaded it in the first place. The details are how the user knows they’re getting what they want to get out of the experience, are kept up to date on information, and know the app is working for them.

They give feedback and create a sense that information is being found. It can instill in a user trust that everything is working the way that it should. It enhances the users concept of engagement with the app and its manipulation, and that a small task has been completed. It helps them visualize those interactions and prevent them from errors that might make them turn away from the app.

Essentially, they’re those little things that you don’t really notice when using a website or an app, but whose absence would be noticeable.

Microinteractions make your app user-focused. They’re an acknowledgement that whatever service or product you’re offering is centered around the very human experience of engagement, intuition, interaction, and experience. They can guide your user throughout; they’re basically a map, and a set of notifications that they’re going the right way.

They can even help set your app apart from the competitors. Those little details build up in a big way.

Where and how should I use microinteractions?

 1: Show the User the Status of your App or Website’s System

Users desire immediacy. They don’t have time to wait around, even if they plan on using your app for a long time. They want results, and they want to know that clicking a button or scrolling through a page is working for them.

• Utilize progress bars on the side, but don’t make them too big.
• Implement loading screen animations that work.
• It might help to wireframe and locate or illustrate specific instances of where microinteractions could come in handy

2: Display visual cues, color coordination, animations, and beautiful graphics.

Users don’t just want an app or a website for its features. They want to be wowed by the colors you’re using, the cohesion of theme to color, and an exciting means of interaction. Make sure that changes are highlighted in a visually appealing way. Microinteractions help you make the controls and usability of the app or website tangible by showing the user what they’re doing.

• Make buttons change color according to the color scheme you’re using.
• Provide a drop-down refresh animation.
• Use morphing icons that save the user time and you space.
• Create visual connections between the features and details – make navigation clear and easy by cohesively connecting your theme, whether color-based or design/look/feel-based, to the details. This helps add to the entirety of the experience.

3: Call to Actions, Updates, Navigation, and Information Hierarchies

Guide your user through the app or website. Help them understand how to use the app in an intuitive manner that isn’t too distracting. Information hierarchies are crucial (the order through which you present your information from most important to least important) and microinteractions can help the user navigate from place to place so they know immediately the places where they want and need to go.

• Encourage your user to interact with the functions of the app by implementing buttons and visual cues that alert them.
• Use icons like red buttons with numbers that notify the user that there is some kind of update.
• Use animations (albeit sparingly) to indicate loading, a function was successfully performed, a new page is opening, or new information is being presented to the user. Make notifications and updates clear to the user.
• Loading screens and progress bars on the side indicate to the user that the system is functioning.
• Keep them coming back with notifications about loyalty programs.

Final thoughts on microinteractions.

• Think long-term and don’t overload the user with microinteractions. Think not only about the experience of distracting and heavy-handed constant notifications of their engagement, but also the practical side of how microinteractions can slow down your app or website. Remember that they should work primarily in the background. If you use too many, they’ll begin to notice them, and can be distracted from the features that they’re using your app for in the first place. Also, don’t make them boring. Users want something fun, something they’re used to.
• Keep it simple. This is crucial. Don’t make the progress bar take up half of the screen, and don’t make a button perform ten million animations before allowing the user to click on it. Make a button change colors, or slide up and down, but don’t give it too many details.
• Don’t start from scratch, and use your competitors as a guide. Think about what your favorite details are for competitor apps and websites, and where you think they’re lacking. Don’t reinvent the wheel here: you don’t need to create an entirely new system of microinteractions that will inevitably confuse the user and distract them because of your non-intuitive navigation. Use what works, and improve on it.
• Mention them in your pitch deck to investors. It shows you’ve thought through the biggest ideas and the smallest details.

 And, most importantly, think about the humans. Think about why you’re creating the app in the first place. It’s to solve a common or niche problem that your users have with a solution only you can provide. Think about what people want to see and want to use. Think about what they commonly use as guides to navigate and experience apps – you want to make sure it’s intuitive enough that they know what buttons do and what progress bars mean. Essentially, you want to make sure that your microinteractions work best by not even being noticed.