How microinteractions increase engagement in web design

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.

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:

The trigger initiates an action. This could be either a manual trigger, such as the click of a button or an icon, or a system trigger, which engages when a certain condition or set of conditions is met, such as the delivery of a new email. The best triggers are those that anticipate what the user will need without the user having to specifically ask for anything; they’re intuitive and invisible. Remember, the goal is to increase engagement, and the best way to do that is to to be there when and where a need arises.

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:

When designing a microinteraction, clear rules need to be established. When a user pushes a button or a system trigger is met, what happens? And in what order? The rules should be easy to articulate in one short sentence. And because this is a one-step action, the rules should be very simple, and there shouldn’t be many of them. If the rules you come up with for your microinteractions start to feel complicated — that’s probably a sign that you’re trying to do too much. Go back to user testing and see how you can simplify.

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:

Because the rules are invisible, feedback is extra important — it’s what allows a user to understand what’s happening. Feedback is most often visual, since we’re usually looking at the interface we’re interacting with, but it could also be aural, like a small beep, or haptic, like a vibration. Remember that less is more — a small animation that happens when you scroll over something is great, but too much happening on the screen will dilute the message or start to feel too cute or gimmicky.

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:

Modes should be used sparingly, and only in certain circumstances, when there is a very clear rationale to have more than one mode, such as logged-in or logged-out. But the loop simply refers to what happens next. Once the action has been completed, and the microinteraction is done, where does the user go? Also, does the microinteraction change based on the number of times it’s been engaged? Does it change and adapt — maybe learning and become even more attuned to the user’s experience and expectations? Thinking this through is an important part of designing any microinteraction.

Remember not to overdesign!

Now what you have all of this information about how to move forward, remember that simplicity is still key. While it’s important to think through the entire interaction, and make sure you have a good understanding of your consumer’s behavior and needs, it’s also important not to overdesign the interaction. Here are some important things to keep in mind:

• 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