Microinteractions: What They Are and Some Examples

What is a microinteraction?

A microinteraction is “a contained product moment that revolves around a single use case or task” according to Dan Saffer, author of the book Microinteractions: Designing with Details.

A microinteraction happens when the user interacts with design – that moment when the user swipes, hits the ‘Like’ button, or pulls down to refresh a page, for example. They are important in web development as they can encourage user engagement, instantly communicate feedback, or direct the user’s attention (just to name a few things!).

Examples of when to use microinteractions in web development

Call to Action (CTA)

Whether you want the user to click the ‘buy’ or ‘share’ button, a little nudge via a microinteraction can encourage the user to do so. For example, adding subtle animation can draw the user’s attention to a button, encouraging interaction.

Downloading / Loading

As we become more accustomed to faster internet speeds (and instant gratification, really!) microinteractions on the loading page can make the experience less boring and also provide reassurance to the user that the task is in fact happening and will be completely shortly. Showing a simple, yet fun animation (or how about displaying an inspiring quote!) is so much better than a blank loading screen and makes the user experience less boring.

Data Input

Consider a sign up form, whether it’s to subscribe to a newsletter or to create an account. If a user enters data into a field but in an incorrect format (i.e. data validation in web development) or forgets to enter data into a field completely, a common microinteraction would be for the fields to become outlined in red, alerting the user. When it comes to setting up a password, having a visual indicator of the password ‘strength’ as the user is typing helps to provide instant feedback. It also keeps the user engaged and helps them to accomplish the task.

Whether you need a website that’ll wow your customers, or a custom application to streamline your business processes, we love to discuss all things web development. Get in touch and let’s get the conversation started.