How microinteractions increase engagement in web design

Anna Lucas
Feb 21, 2017 · 5 min read

This morning, when the alarm on your phone went off and you reached over to hit snooze — that was a microinteraction.

Later in the day, when you hit send on an email in Gmail, and it popped up with a note asking if you meant to sent an attachment — that was a microinteraction, too. Every time you logged into a website or liked someone’s post, you were interacting with a brand or a product for one small moment, and it’s important to remember that all of those moments add up.

Image for post
Image for post

Essentially, a microinteraction is a single task-based interaction that you have with a device or interface. As a consumer, you experience microinteractions throughout the day — and if they’re designed well, you barely notice them. As a designer, you might be tempted to think they’re unimportant, or boring, or something that can be saved until the end, but don’t fall into that trap.

These microinteractions are just as important as the more detailed interactions you’ll design for your website or app, and because they’re so small, and can be so well-integrated into the life of your consumer — they can be an essential part of driving engagement.

What are microinteractions?

Microinteractions are intuitive.

They don’t require explanation or instructions; they’re intuitive. In a single action, there isn’t time to provide instructions, so everything needs to be clear at a glance.

Microinteractions are invisible.

They are as invisible and as seamless as possible. Microinteractions are integrated into the lives of their consumers, so they should fit right in without being distracting or clunky.

Microinteractions are versatile.

They need to work in a variety of environments. The more integrated the interaction is, the more likely it will pop up for people in multiple environments, so consider all possible use-cases.

In Dan Saffer’s book, Microinteractions: Designing with Details, he defines the basic four-part process of microinteractions:

  1. Trigger: Initiates an action
  2. Rules: What happens in the interaction
  3. Feedback: How you know what’s happening
  4. Loops and Modes: What happens next

Trigger:

In order to set system triggers, take a close look at user behavior during user testing. Can you identify the need for microinteractions that will improve the overall experience? Think of this as bringing some actions forward, so that you’re meeting the user where they are. For example, if the first thing most users do when they visit your site is check the weather report, can that information be displayed in a pop-up or alert? If users frequently toggle back and forth between two modes, can you design a microinteraction to make it as easy as possible to do so?

Rules:

Again, good microinteractions feel invisible, and this is a key thing to remember when setting the rules. They shouldn’t feel like rules. Instead they should feel like a natural part of the flow, something inevitable that occurs during the interaction.

Feedback:

Feedback is also the best place to add your personality and brand. Microinteractions provide an opportunity to demonstrate the “feel” of the brand — is the animation cute and friendly? Or sleek and elegant? The tone and style should deepen the brand personality. And remember you have more than just the screen to work with. What about the cursor, the scrollbar, or a button state?

Loops and Modes:

Image for post
Image for post

Remember not to overdesign!

  • The microinteraction must live through repeated use. Something that’s interesting the first time may become obnoxious the fiftieth time.
  • The microinteraction shouldn’t be more complicated than the action itself.
  • Any animation should be very simple and remain focused on providing some kind of feedback (i.e, it’s loading).
  • Maintain visual harmony with other design elements of the site or brand.

As technology becomes more entrenched in our lives, these microinteractions become more and more important. In fact, they may even begin to define the user’s experience with your brand or product — these small moments, that often happen over and over again, will either reinforce positive feelings about your product, leading to more engaged customers, or they’ll build frustration and send people to your competitors. Microinteractions might be small, but they’re mighty.

Featured image: Ylivdesign

Envato

Engaging, insightful stories about design and the creative…

Anna Lucas

Written by

Anna Lucas has enjoyed a long career in marketing and technology, and is always interested in hearing a good story.

Envato

Envato

Engaging, insightful stories about design and the creative community.

Anna Lucas

Written by

Anna Lucas has enjoyed a long career in marketing and technology, and is always interested in hearing a good story.

Envato

Envato

Engaging, insightful stories about design and the creative community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store