Creating Intuitive Microinteractions

January 30, 2018

How do you make an application easy to use?  You definitely know it when you experience it — and it seems like it should be obvious to identify.  But the reality is that it can be quite difficult to pinpoint for most people.

To be successful at creating great user experiences, you need to blend objectivity and restraint with meaningful insights. And, most importantly, you must set your personal preferences aside.

One key to the process is designing intuitive microinteractions. Microinteractions are moments centered around accomplishing a single task. These are the tiny details that make up the collective experience of a site.

Example microinteraction: Zillow screen showing heart icon is filled after it is clicked

Example microinteraction: Saving a property on Zillow

An example of a microinteraction is when you save a property on Zillow. I think this particular microinteraction is very effective. Here’s what happens: you click the hollow heart icon and it becomes a filled heart; at the same time, the label changes from “SAVE” to “SAVED”.  This microinteraction succeeds because the user knows immediately and without any confusion what just happened. It’s crystal clear and it’s even kind of fun.

By combining intuitive microinteractions like this with thoughtful strategy and structure, you will be on the right track.

What is Intuitive?

Before going any further, we need to define the word intuitive:

“Using or based on what one feels to be true even without conscious reasoning.”
– Oxford Living Dictionary

To make your application intuitive, start with what your users already know. For example, the Home button requires very little conscious reasoning since users have previously encountered it countless times on countless websites. When your user needs to go to the Home page, she already knows how to do that without even thinking about it.

Building from Components

Since the vast majority of us don’t create experiences for the Facebooks and Amazons of the world, our target users are not going to be intimately familiar with our application.  Instead, they will have an entirely new context to understand.

This only further underscores the importance of building upon things users already know. Luckily, there’s a pretty common set of components you’ll need for most interactions — and there’s no need to reinvent the wheel. We use Code libraries like Material Design and Bootstrap because they come with everything from toggle buttons to expanding menus to animation effects. Tweak them to match your brand and you’re all set.

Libraries and tools like these can help to unofficially standardize common microinteractions from site to site across the web. The more familiar users become with a common interaction, the more intuitive it is for them.

How to Differentiate

We’ve often heard clients insist, “I don’t really think we need a ‘Home’ button.  Isn’t it obvious by now?”  User testing is the only way to be sure, but we always feel safe betting that many users would become frustrated.

Another common concern we hear is that the site is going to be too much like other sites, or too boring. It’s understandable to have this concern since you want your site to stand out from the rest. But keep in mind that your familiarity with the site is not a factor for your users. They typically are not there to be entertained or bored. Rather, they use your site to accomplish a goal and your job is to help them.

So, let the wow-factor come in the form of superb design, performance, and content. If that still seems too boring, it may be that your business goals are at odds with your users’ goals — and that’s a much bigger issue to resolve.

Each site is unique, though, and you may have unique challenges to solve. You may have a very good reason for introducing an atypical kind of interaction — or a brand new kind of functionality.  Go for it! But proceed without preconceived conclusions and be sure to test with actual users before declaring that you’ve nailed it.

The bottom line is that you’ll succeed when users can accomplish their tasks and feel positively about their experience. That is what can truly differentiate you from the competition.

If you’d like to learn more about how well designed microinteractions can help take your application to the next level, get in touch with us to start a conversation.

By Tony Johnson
Senior Front-end Developer

Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.

View Tony's Bio


Let us know your name and email address and we’ll send you our newsletter.

First Name

Last Name

Email Address



Thank you!