We use cookies to make your exploring a better experience. Please see our  cookies' policy.
Improving User Experience With Microinteractions

Improving User Experience With Microinteractions

By

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 the successful microinteraction. Microinteractions are what happens when people use small pieces of functionality that exist in a place of larger features.

 

Despite the fact that microinteractions really make a difference to customer experience, they usually don’t appear in surveys or feedback sections. Let’s talk about these tiny moments, which are typically omitted or unnoticed.

 

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. Microinteractions are all these little moments that can be really vital to the UX of your product. Use them as an opportunity to connect with your customers.

 

What Is Microinteraction?

 

A. Definition of Microinteraction

 

All day long, we interact with each other, and with machines. And all those small moments in time affect the rest of our day, and how we perceive brands and experiences. What happens if designers don’t pay attention to the details? These are things that can ruin your day. For example, think of when you plan to get 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.”

 

deal-with-request

 

These are microinteractions that we have with technology, with machines — they feel like they don’t matter when you create them. But we are humans, which means we are emotional creatures. When  you come home at the end of the day, you do an inventory of microinteractions. Because sometimes the machines like to blame us for their shortcomings: it’s like they’re saying it’s not the technology, 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 the small moments that can be dull and forgettable, or pleasurable and engaging. They are everywhere: in the devices we carry, the appliances in our house, in the apps on our phones and desktops.

 

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.

 

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, more pleasurable — even if we don’t consciously remember them.

 

The devil is in the details: 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 set off a domino effect of customer discontent.

 

Microinteractions are rooted in a user-centered design approach, where the user is the prime focus. They create a feeling of well-being once they are discovered by users.

 

B. Types of Microinteractions

 

Microinteractions are simple, brief, and should be almost effortless. A music player is a feature; adjusting the volume is a microinteraction inside that feature. Every microinteraction within the interface performs its function.

 

groups-of-microinteractions-image

 C. Why Do Microinteractions Work?

 

Microinteractions usually get little attention. After all, nobody comes to your app to enjoy the password change functionality. Microinteractions are usually referred to as ‘product hygiene’: users just expect them to be there.

 

You can take what is usually dull and transform it into something enjoyable and noteworthy. Hence, adoption and customer loyalty will increase. If you care about user experience, you should care about microinteractions.

 

Jakob Nielsen formulated 10 general ideas for interaction design, which are called “heuristics”. Visibility of system status is the first User Interface principle. The device should always keep users informed about what is going on.

 

Microinteractions are indispensable for provide the right feedback within a reasonable time. Often they take the form of micro-animations on the interface. Especially useful are micro-animations in a slow mobile interface.

 

With the help of micro-animations, the user can see the elements of the interface 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 acknowledgement. The users instantly know their action was accepted and get a visual reward. Similarly, microinteractions can guide users in how to work the device.

 

D. Effective Microinteraction: Do’s And Don’ts

 

It’s not enough to use beautiful animations to create a 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. Sophie Paxton explained this in her article “Your UI isn’t a Disney Movie”:

 

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.

 

 

airbus-image

 

 

by Gleb Kuznetsov✈

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 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 be better at seeing horizontal and vertical lines 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.

 

E. 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 every day on desktops, laptops, and mobile gadgets, which created 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 many windows — had to be designed and engineered.

 

Microinteractions play a part in our daily 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 skill: watching people interact, watching yourself interact, identifying the pain points, identifying logical sequences, and then determining what things make sense to bring together.

 

  1. 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 a shorthand for “Page not Found” — we are following a link to get there from a website. 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.

 

error-pixar-image

 

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 of 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 have to 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. Dan Saffer, in his brilliant book “Microinteractions: Designing with Details”, describes 4 parts of microinteraction. Those are triggers, rules, feedback, and  loops and modes.

 

parts-of-microinteractions-image

A. Trigger

 

The trigger is what starts a microinteraction. This can be a manual control, such as when a user clicks a button or an icon, or a form that a user has to fill out. Manual triggers are often dictated by the environment and convention: a search field is a search field.

 

But there is another kind of trigger, one 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 behavioural data) and make assumptions about what that data means.

 

missed-emails-image

 

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

 

As an example, if every time I log into a stock portfolio app in the morning and check a particular stock, why not present me with that choice 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.

 

B. 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. What you want is 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.

 

C. 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 overlooked — the cursor, the scrollbar, a button state — to convey more of what’s happening.

 

fixed-misspelling-image

 

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.

 

Feedback is the place to add a veneer 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.

 

D. Loops and Modes

The last part of microinteractions are 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.

 

 

submit-card-image

 

by Azís Pradana

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, maybe a loop or mode, and 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 afterwards.

 

  • 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 if they came back the next day, what they would want the microinteraction to remember about them.

 

  • 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 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:

 

Completion rate

What percentage of users were able to finish the microinteraction?

 

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).

 

Duration of specific steps

 

Number of steps

 

Number of clicks/taps/selects

This is not always instructive; however, it can help you recognize whether something is inefficient.

 

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.)

 

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 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. In case you get a 0.5% clickthrough rate, you’re doing very well. So should we put off 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 due to the fact that the data doesn’t understand the broader context. It includes the business, organizational environment and the user base that are more than simply numbers on a spreadsheet. Data should be an input to your decision making, not the decider alone.

 

Advantages Of Microinteractions In The Interface

 

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 that your users are devoting to your UI. Remember that design doesn’t have to be about grand gestures; tiny things can solve small, universal and overlooked problems.

 

A. Short Advantage Description With An Example

 

  • Animation Between Pages

 

animation-image

 

by Andrej Radisic

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

 

animated-scrolling-image

 

by WebDesignCrowd
Micro-animation is a great way to show users the progress of the scrollbar. The users see the connection between their action 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

 

drag-and-drop-image

 

by Cuberto
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

 

notifications-image

 

by Oleg Frolov
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

pull-down-menu-image

 

by Eugene Avdalyan
Often, your site contains downloadable pages that need more time than usual, or the download is slow due to a bad internet connection. 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

 

call-to-action-image

 

 

by Luboš Volkov
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

 

motion-design-image

 

by Den Sl
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

 

anchor-text-image

 

 

Source
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

 

on-off-switch-image

 

by Oleksandr Pronskyi
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

swipe-image

 

by ⚡Minh Pham ⚡
Micro-animation turns a familiar swipe gesture into a unique interface. Animation allows you to show the transition state of elements (when the card is not yet deleted and not added to favorites).

 

  • Highlight Changes

 

highlight-changes-image

 

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

 

 

 

B. 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.

 

 

 

 

 

 

 

 

 

 

 

 

 

Read more by UI/UX Designer

Sergey likes designing new products the same as ordering new rocks. He's a big fan of animation in interfaces and has much to share in this community.

Navigation

Tutorials on Product Development and Growth Directly to Your Inbox.
Get knowledge and inspiration from the experts