What exactly is microinteraction? Is it something new, or has it always existed? What does it mean for design? And why should I care?

Microinteractions are those tiny little touches that designers add to websites and apps to improve user experience. They range from subtle animations to simple interactions, such as swiping left/right to dismiss a dialog box.

Think of UX microinteractions as emotional connections.

They are everywhere: in the devices we carry, the appliances in our house, and in the apps on our phones and desktops.

If Facebook came out with a product that didn’t have a “Like” button, you would think, “Why did they get rid of the ‘Like’ button?” Facebook’s “Like” is an example of a successful microinteraction.

The "like" button is a microinteraction
The "like" button is a microinteraction
Microinteractions are what happen when people use small pieces of functionality in place of larger features.

Microinteractions make a huge difference to customer experience, yet they usually don’t appear in surveys or feedback sections. They are easily overlooked but they pack a punch when it comes to their benefits.

Ever heard the statement 'dynamite comes in small packages'?

As brands get more connected socially, they miss taking advantage of more micro-moments. Many of them push out their communication via marketing channels and squander an opportunity to connect with customers on a micro level. A more personal level.

Microinteractions are all these little moments and can be vital to your product's UI and UX. You should use them as an opportunity to connect with your customers.

Let's discuss them in more detail.

  • What Is A Microinteraction?🤷‍♀️
  • Types Of Microinteractions🔎
  • Why Do Microinteractions Work?🔥
  • Effective Microinteraction: Do’s And Don’ts😬
  • What To Consider When Designing Microinteractions🤔
  • The Structure Of Microinteractions🏠
  • Testing Microinteractions🧪
  • Examples Of Using Microinteractions In UI Design😍
  • The Value Of Microinteractions For Your Product UX🤩
  • Concluding Thoughts🧠
  • Important disclosure: we're proud affiliates of some tools mentioned in this guide. If you click an affiliate link and subsequently make a purchase, we will earn a small commission at no additional cost to you (you pay nothing extra). For more information, read our affiliate disclosure.

    What Is A Microinteraction?🤷‍♀️

    All day long, we interact with each other and with machines (is anybody else glued to their phone or laptop? or is it just me?). And all those small moments in time and interactions affect the rest of our day and how we perceive brands and experiences.

    💡
    What happens if designers don’t pay attention to the finer details? Then these little things add up and can ruin your day.

    For example, think of when you plan to draw some cash and stick your bank card into a local ATM. But instead of processing the transaction, the screen displays a message: “We are dealing with your request. Please wait.” No doubt that somebody wanted this to be perceived as “I’m working on it.” but it comes across as your issue.

    These are microinteractions that we have with technology, with machines — they feel like they don’t matter when you create them. But they do.

    We are humans, which means we are emotional creatures and that we attach meaning to the smallest of things.

    By definition, a microinteraction is an event in your interface that has only one function.

    When you come home at the end of the day, you do an unconscious inventory of microinteractions. Because sometimes the machines like to blame us for their shortcomings: it’s like they’re saying it’s not me, it’s you.

    If you don’t think about these roundabout interactions as emotional connections, a tiny error will set your customers off, and they will view your brand with a jaundiced eye. Often it’s the tiny things that make a big difference.

    Microinteractions are small moments that can be dull and forgettable, or fun and engaging.

    Interaction designer and author Dan Saffer wrote a book called “Microinteractions: Designing with Details”. According to Saffer, when microinteractions are designed well, they can make our lives easier. And I agree.

    Microinteractions happen through the functional, interactive details of a product. And details aren’t just the details; they are the design.

    💡
    Details can make engaging with the product easier and more enjoyable — even if we don’t consciously remember them.

    The devil is in the details: the difference between a product you love and a product you tolerate is often in the microinteractions. A lack of attention to a seemingly tiny detail can quickly create a domino effect of customer discontent (Uh oh).

    Microinteractions are rooted in a user-centered design approach, where the user is the prime focus. They create a feeling of happiness once users discover them.

    Types Of Microinteractions🔎

    Microinteractions are simple, brief, and should be almost effortless.

    In case you're still a bit confused, let me give you an example. A music player is a feature; adjusting the volume is a microinteraction inside that feature.

    Every microinteraction within the interface performs its function, and several groups of microinteractions perform the same function.

    The different groups of microinteractions
    The different groups of microinteractions

    Why Do Microinteractions Work?🔥

    Microinteractions usually get little attention. After all, nobody comes to your app to enjoy the password change functionality. They come for the major features and value add.

    Microinteractions are usually referred to as ‘product hygiene’ because users just expect them to be there.

    With microinteractions, you can take what is usually dull and transform it into UX and UI that's enjoyable and noteworthy. Hence, product adoption and customer loyalty will increase.

    If you care about user experience, you should care about microinteractions.

    Jakob Nielsen formulated 10 general interaction and user interface design principles called “heuristics,” and these are:

    1. Visibility of the system status
    2. System and real-world match
    3. User control
    4. Consistent standards
    5. Error prevention
    6. Focus on recognition
    7. Efficient use
    8. Simple aesthetics
    9. Help users recover from errors
    10. Helpful resources and documentation

    These heuristics help you to design the best user interface you can. One that is seamless and engaging.

    Visibility of system status is the first principle and the one that closely links to microinteractions. In layman's terms, this heuristic states that the device should always keep users informed about what is going on.

    Microinteractions are indispensable for providing the right feedback within a reasonable time.

    Often they take the form of micro-animations on the interface.

    With the help of micro-animations, the user can see the interface elements within the larger hierarchy. Micro-animations create a focus and save time, instantly giving an insight into each operation in a way that does not distract the user.

    UX microinteractions work because they appeal to the user’s natural desire for acknowledgment. The users instantly know their action was accepted and get a visual reward.

    Similarly, microinteractions can guide users in how to work the device. Such as a fingerprint stencil appearing as a prompt to use your thumbprint to make a payment.

    A simple microinteraction
    A simple microinteraction

    Effective Microinteraction: Do’s And Don’ts😬

    It’s not enough to use beautiful animations to create delightful microinteractions. You need to pay attention to the details.

    Be careful: an excess of animations will “blur” your hierarchy, and the message you want to transmit will be cheapened. In her article “Your UI isn’t a Disney Movie” Sophie Paxton explained this.

    You wouldn’t make every sentence of a document into a heading. The same principle applies to animation. Consider every animated element in your UI to be the equivalent of a heading in a written document.

    It should be used to signal the importance of an element.

    When you create a visual design containing the elements discussed above, keep a few things in mind:

    • Make UX microinteractions invisible and completely functional. Make sure animations fit a functional purpose and don’t feel awkward or annoying. For common and minor actions, the response can be modest. For occasional and major actions, the response should be solid.
    • Keep longevity in mind . Microinteractions must live through long-term use. What seems fun the first time might become stressful after the 100th use.
    • Follow the KISS principle (keep it simple, stupid!). Over-designing a microinteraction can be lethal. Microinteractions shouldn’t overload the screen, causing a long loading process. Instead, they should save time by communicating valuable information right away.
    0:00
    /
    Image source: Dribbble
    • Micro-animation is an ideal way to tell the users your visual story on a small screen. It creates not only an attractive interface, but also gives your story you're telling the desired mood.
    • Don’t start from zero. You almost always know something about your target audience and the context. Using this knowledge can make your microinteractions more effective and powerful.
    • Create visual harmony with other UI elements. It is not enough to use beautiful animation to create a delightful microinteraction; you need to pay attention to the details.
    • Absorb Complexity. Start by figuring out where the core complexity lies, then decide which parts of that the user would like to have, and when in the overall process. Then, if control is necessary, provide it at that time.
    • Coordination. UX principles are built on physical principles. It seems that human eyes have special mechanisms for seeing lines. According to Fitts’s law, we may see horizontal and vertical lines better than oblique lines or circles.
    • Evolution. Take into account that your micro-animation should not behave the same way each time it is used. Here’s a great example of how you can keep things interesting. If you want your design to shine, you need to be enthusiastic about little details that make a big impact.

    What To Consider When Designing Microinteractions🤔

    The intertwined history of interaction design and human-computer interaction consists of microinteractions.

    We interact with the tiny things daily on desktops, laptops, and mobile gadgets, which create novel microinteractions.

    💡
    Everything from saving a document and organizing files in folders to connecting to a WiFi network had to be designed. Even “basics” tasks like scrolling and opening tabs had to be designed and engineered.

    Microinteractions play a part in our lives — in both the digital and analog worlds. Most are so simple we don’t even notice when we’re doing them.

    If you’ve pressed the logo of your favorite soda on a vending machine, you’ve performed a microinteraction. You didn’t need to follow a step-by-step manual. You just knew.

    UX microinteractions on a website need to function in this same intuitive way.

    Follow these steps to create great microinteractions:

    1. Identify the situations properly. This requires great observational skills: watching people interact, watching yourself interact, identifying the pain points, identifying logical sequences, and then determining what things make sense to bring together.
    2. Implement the final model by the design team. A good microinteraction design model includes the context of those interactions. It develops empathy with the user. It uses knowledge of how to combine different aspects of the product into a single, smooth microinteraction.

    Just as 404 is shorthand for “Page not Found” — it usually happens when we follow a link to get to a specific website landing page.

    What no one tells you is that a 404 page is a broken experience on the Web. It’s the default page you get when you ask a website for something, and it can’t find it. It’s a feeling of a broken relationship when you go through it.

    Image source: Pixar

    A 404 page is not what you’re looking for.

    That is why, if the designers put some inspiration on their 404 page, it can remind the customers why they should love the product. Have a little fun with a bad situation — there are humans on both sides, and you don’t have to ruin their day.

    After all, doing things right for the user is what great design is all about.

    To create well-crafted microinteractions, you must bring together the Do’s And Don’ts and the structure of microinteractions.

    The Structure Of Microinteractions🏠

    What makes effective microinteractions is not only their size, but also their structure. In his brilliant book “Microinteractions: Designing with Details”, Dan Saffer describes four parts of microinteraction.

    Those are triggers, rules, feedback, and loops and modes.

    1. Trigger

    The trigger is what starts a microinteraction.

    This can be a manual control, such as when a user clicks a button, an icon, or a form that a user has to fill out. The environment and convention often dictate manual triggers: a search field is a search field.

    But there is another kind of trigger that is even more interesting: the system trigger.

    The system triggers engage when a certain condition or set of conditions is met. The best system triggers assume what the user wants without the user having to articulate it. So watch what the user does (collect user behavioral data) and make assumptions about what that data means.

    Every time an email arrives and Google thinks the message is a phishing email, it shows a fishing hook or warning sign instead of a profile picture.

    Authors own Gmail account.

    Here's another example, every morning, I log into a stock portfolio app and check a particular stock, so why not present me with that choice automatically once I log in?

    Never start from zero.

    You almost always know something about the user or the environment, and that knowledge can make your app better.

    Some triggers bring the data forward and out of the microinteraction. You don’t want to look at your email app to see that you’ve got a new message. Figure out what information is inside your app that users might be interested in. Then figure out and design how that information could be revealed in the trigger.

    2. Rules

    The second part of microinteractions are rules. Rules define what can and cannot be completed with the microinteraction. They are the rules of the microinteraction ‘game’.

    Rules determine which action happens and in which order — when the user pushes that button or when a message arrives.

    The rules outline:

    • The reaction when the trigger is active
    • User control possibilities
    • A sequence of steps
    • The data
    • The configuration of the algorithms
    • Feedback guidelines
    • Modes
    • Frequency of repetitions (if any)
    • Actions to be completed
    The rules shouldn’t feel like rules.

    You want a feeling of natural and inevitable flow from trigger to rules to feedback. The rules should float users through the ‘interaction’ part of the microinteraction. This flow should include determining what actions most people take most of the time and building those in as smart defaults.

    Begin with writing down all the basic rules you already know, then fill in the information, adding nuance and constraints.

    💡
    It helps to consider your microinteraction as a sentence, with nouns (UI elements) and verbs (action to accomplish). 

    Some of the most elegant microinteractions are able to do many verbs with just a few nouns.

    3. Feedback

    Since rules are invisible, knowing how users understand them is the third part of microinteractions: feedback.

    Feedback (and the lack of it) is how we recognize what’s happening. Feedback can be visual, aural, or haptic, with the visual being the most prevalent because we usually look at what we’re interacting with.

    With microinteractions, the least amount of feedback you can provide, the better. Less is more.

    One more trick with feedback is to use the ignored elements. Designers already have a lot of UI chrome to play with, so why add one more element on screen?

    Use the cursor, the scrollbar, a button state to convey more of what’s happening.

    For example, when you type in the correct password with a slightly incorrect username, Facebook will prompt you with the correct username and ask you to retype the password.

    From author's own Facebook account

    Feedback is the place to add an aspect of personality to your microinteractions. Sometimes a little bit of humor or edge can work very well — particularly in frustrating situations. You can improve your customer experience with minor microinteractions, such as an error message or ‘Out of office’ reply.

    4. Loops And Modes

    The last part of microinteractions is loops and modes.

    Modes should generally be avoided in microinteractions unless there’s a rare yet essential action that would otherwise disrupt the flow of the microinteraction.

    Loops determine how long the microinteraction lasts. Does the microinteraction end immediately, or does it repeat all the time? Long loops help to extend your microinteraction into the future.

    Consider what happens when the user returns the 2nd time, then the 10th time, and the 1000th time. How does the microinteraction change and adapt to how it’s being used? Create an extended loop so that the microinteraction adapts over time.

    Image source: Dribbble

    Animating input fields helps the user understand the input loop and visually displays the data. This micro-animation focuses on clarity and coherence when entering data.

    Put together a trigger, rules, feedback, and maybe a loop or mode so that you can create a polished microinteraction. It will turn something utilitarian into a UX that helps users enjoy your product.

    Testing Microinteractions🧪

    Some people might advise you not to bother testing microinteractions, saying they are unimportant. In contrast, microinteractions have value — and you can improve and refine them via tests and user input.

    Most microinteractions aren’t tested for desktop software alone. The effort and cost of setting up and running a test session are generally too great for this. So microinteractions are often lumped together with other items to test.

    A Process for Testing Microinteractions

    The following is one possible process for testing microinteractions. It’s certainly not the only process; however, it could be a starting point:

    • First of all, ask the participants how they expect the microinteraction to work. Ask if they’ve ever used anything similar in the past. Ask what they want to achieve by using this microinteraction. Check whether there’s anything they might need to know before using the microinteraction.
    • Have them use the microinteraction unaided. Collect quantitative statistics at this point and/or immediately afterward.
    • Go through the microinteraction with the user step by step. Let the participant talk out loud about any impressions they have and choices they made. See if participants can provide an explanation for how the microinteraction works (the rules). Note any discrepancies.
    • Ask them what they would want the microinteraction to remember about them if they came back the next day and used the product again.
    • End by asking them to name one thing you need to fix in this microinteraction.

    This process enables you to uncover and diagnose any problems with the microinteraction. It also validates general goals and needs.

    Do this process at least twice, with two groups of participants. Revise the microinteraction based on the user feedback and findings analysis between units.

    Using Quantitative Data

    These are some data points you can test:

    1. Completion rate: What percentage of users were able to finish the microinteraction?
    2. The overall duration of the microinteraction: How long did it take to finish the microinteraction? (Often, the slowest users take 5 to 10 times longer to complete tasks than the fastest, so use a geometric mean instead of the median to reduce the impact of this type of extreme value).
    3. Duration of specific steps
    4. Number of steps
    5. The number of clicks/taps/selects: This is not always instructive; however, it can help you recognize whether something is inefficient.
    6. Quantity of machine errors: Are there places where the microinteraction fails through no fault of the user? (These are frequently found when testing live microinteractions with actual data/ connectivity.)
    7. Quantity of human errors: These fall into two categories: slips and mistakes. Slips are when the user is aware of the aim of the action but does something improperly, such as making a typo when entering an email address. A mistake is when a user does not understand the rules and tries something the rules won’t allow, such as clicking a header that isn’t interactive.

    This assumes you will be revising the microinteraction and testing it once more to see if improvements have been made.

    Again: beware of your sample size.

    A small number of users could make something like an error or a preference seem more (or less) significant than it is.

    And even if there is statistical significance, it doesn’t mean there is practical significance. The most important lesson about using data to help design is this: it can’t design for you. Data requires an individual to interpret it, and then place it into context. Data will seldom tell you why something is happening.

    Why would you ever forget about data?

    Here’s the simplest example: most online advertising isn’t clicked. If you get a 0.5% clickthrough rate, you’re doing well. So should we ban all online ads since they are so seldom used? 99.9% of users suppose so (the other 0.1% of people work for advertising agencies).

    But getting rid of advertising would mean getting rid of the website itself, as there would be no money to operate it. You can’t listen to the data entirely because the data doesn’t understand the broader context.

    It includes the business, organizational environment, and user base that are more than simply numbers on a spreadsheet.

    Data should be an input to your decision-making, not the decider alone.

    Examples Of Using Microinteractions In UI Design😍

    Use micro-animation to improve your UI. Use it to communicate important information in a fast way, surprise users or mask a time-consuming request.

    Choose functional over aesthetic animation, and value the precious time your users devote to your UI. Remember that design isn’t about grand gestures; tiny things can solve small, universal, and overlooked problems.

    Here I will go through several microinteraction examples and explain the advantages they bring to UI design.

    Animation Between Pages

    Image source: Dribbble

    Instead of a normal transition to the login page, this designer has included a fun animation between the pages that differentiates their website from the next.

    Micro-animation makes a smooth transition between the interface states and improves your UX. The user gets better insight into the previous and current state of the application. It increases understanding of the product.

    Infinite Scrolling Paired With Animation

    Image source: Dribbble

    Here you can see that as you scroll through the text, a bar on the right-hand side of the screen loads to show you just how much of the section you've read.

    Micro-animation is a great way to show users the progress of the scrollbar. The users see the connection between their actions and the scrolling of the content.

    Animated scrollbars provide a clear understanding of how much of an article has been read.

    Upload Or Download Status Bar

    https://dribbble.com/shots/2991972-Uploading-GIF

    Waiting can be boring or even frustrating. This designer recognizes that and has designed a unique loading bar to distract users while they wait and to show them how long they still have.

    Inform your users about the state of loading/ unloading, so they are always aware of what’s happening. Let them know that they have correctly performed all the actions.

    Notifications

    Image source: Dribbble

    This simple example is one you would have seen before (if you own a smartphone). A small red pop-up above the app icon indicates to users that they have a message waiting for them in the app.

    When users receive notifications, you show them that there is something important to check. Micro-animation enables a user to create an association with your product.

    Pull-Down Menus

    Image source: Dribbble

    Often, your site contains downloadable pages that need more time than usual, or perhaps the website is slow due to a bad internet connection. That's where pull-down menus (like the one in the example above) come in.

    This type of animation notifies the user that the page is loading and gives them an idea of when the download will be completed.

    It reduces the frustration of users who otherwise would think that the site is not responding.

    A Responsive Call-To-Action

    Image source: Dribbble

    This is an exciting example as it contains multiple microinteractions.

    Did you notice how the card explodes into confetti? But I am going to focus on the clear CTAs used - "remove card, "edit card", and "cancel".

    Micro-animation attracts users’ attention and encourages them to act on your call to action (CTA). That’s an important reason to adopt it in the interface.

    Motion Design Makes Filling Out Forms Fun

    Image source: Dribbble

    As you type in your details into the signup form above, the typewriter moves along and types too.

    With elements of fun and interactivity, micro-animation improves the process of filling out forms. A boring process becomes easier, and the user doesn’t hesitate to fill out the entire form.

    Stylizing Anchor Text Animations

    Image source: Tympanus

    What was once a plain brand name is now an interesting interaction with a thinking point.

    Text indicators give your design uniqueness and show that it is polished to the smallest detail. These effects, without a doubt, positively influence user reviews.

    The On/Off Switch

    Image source: Dribbble

    Micro-animation can control elements such as an on/off switch.

    The users instantly receive feedback on their interaction with the interface. Besides, displaying the interface states on the element itself saves space and makes the design look more accurate.

    Swipe

    Image source: Dribbble

    Here, as you swipe left or right, the red thumbs down or green thumbs up also indicates what your choice means.

    Micro-animation turns a familiar swipe gesture into a unique interface. Animation allows you to show the transition state of elements.

    Highlight Changes

    Image source: Dribbble

    This example is a fun one. As users change their cappuccino, the change is indicated both during the process and at the top once an option has been chosen. This means that users won't forget what they've already done.

    With micro-animations, the user receives an immediate response from the interface. This is true for the interface transition between application screens and the different states of a single element.

    The Value Of Microinteractions For Your Product UX🤩

    Microinteractions improve the UX of your product and help users remember your brand. They make simple tasks like turning the sound on or off, liking a status update, or sharing a post not only easy but also engaging.

    Polished microinteractions blend into a user experience.

    They enhance how information is presented and add dynamism to otherwise static actions. Microinteractions help you feel good about the product you are designing and meet the needs of the individuals you are designing it for.

    Concluding Thoughts🧠

    Microinteractions are everywhere around us.

    The average person performs thousands of them each day. And they’re becoming more important because they influence our decisions.

    Microinteractions aren’t anything new. In fact, they’ve been around since the beginning of time. The difference today is that they’re now being used in mobile apps and web pages.

    In conclusion, we have learned that microinteractions are a great way to improve your products' overall user interface and experience. They are very effective at making your product intuitive and engaging.

    Microinteractions are key in creating a positive first impression. And if a first impression is the only chance you get, better make it a good one.