How You Can Improve UX with Microinteractions. Part II
In the first part of the article, I talked about the definitions and types of microinteractions and why they work for your product UX. Here, I will show examples of effective microinteraction. I will also explain, how they improve your UX and what is microinteractions testing. You can use this information to persuade your boss or your design team (and perhaps even yourself) that microinteraction is flexible and an ever-changing element for designing rich interactive experiences.
Microinteractions show that focus on details is a key principle for effective and powerful results. Each part of the design process matters. Impressive, useful and unforgettable details make your app stand out from the competition.
Microinteractions produce interesting moments. These are opportunities for engaging with the user throughout an interaction. A typical drag and drop action contains an interesting moment. For example, a target object highlight when the drag starts, helps the user know where to go.
Benefits Of Microinteractions In The Interface
Animation Between Pages
Micro-animation makes a sleek transition between the interface states and improves UX of your application. The user gets a better insight into its previous and current state. Also, micro-animations pass the “mood” of the application and focus on the necessary details.
Infinite Scrolling Paired with Animation
Micro-animation in the Polarsteps application 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. Personalization and indicators are the perfect way to search for photos or records by a specific date.
Upload or Download Status Bar
Use micro-animations to inform about the status of loading/ unloading. In this example, micro-animation also shows how many megabytes are already downloaded. The animated progress bar adds more fun to the boring action.
Notifications
Micro-animation enables a user to create an association with your product and interact with the application faster. They display the actual changes in an elegant way.
Pull-Down Menus
An action to update content which is often used becomes a highlight of your UX design with thoughtful and unique micro-animation. Use colorful animations to notify the user that the page is loading and show when the download is complete.
A Responsive Call-To-Action
Responsive micro-animation encourages a user to act on your call to action (CTA). That’s a crucial reason for a user to interact more often with your interface.
Motion Design Makes Filling out Forms Fun
Micro-animation improves the boring process of filling out forms with elements of fun and interactivity. An annoying experience becomes more rewarding, and users don’t hesitate to fill out the entire form even if they need to enter their email several times.
Stylizing Anchor Text Animations
Anchor text animations give your design individuality and show creative UX design approach. These neat effects, without a doubt, are particularly in demand in minimalist interfaces.
The On/Off Switch
Micro-animation can manage boring elements such as an on/off switch. With the animation, which stops when the application is off, users instantly receive feedback on their interaction.
Swipe
One of the most common uses of the micro-animation is with a content swipe. Micro-animation turns a familiar swipe gesture into a unique interface, while the user views the content in a single continuous stream.
Highlight Changes
With micro-animations, the user receives a right away response to their action from the interface. When the button is clicked, each element of the interface reacts smoothly and each design block transforms into a new state.
A Process For Testing Microinteractions
Some people might give you a bad advice not to bother testing microinteractions, saying it is like reinventing the wheel.
In contrast, microinteractions are necessary for the proper functioning of any app or device. And you can improve and refine them via tests and user input. The difference is that you are more testing the flow and structure than testing the concept.
Follow the research method known as the Lean Startup feedback loop of Build > Measure > Learn. Build the microinteraction to test it. Measure the design with a variety of quantitative and qualitative methods. Learn from an analysis of those findings. Then repeat. Use the research to confirm your decisions and ensure that the microinteraction is aligned with the end user’s needs.
The effort and cost of setting up and running a test session are generally very high. So microinteractions are often lumped together with other items tested for desktop software.
Diagnose The Issues With Microinteractions
Use the process described below as a starting point for testing microinteractions.
1. First of all, ask the users what they expect to achieve by using this microinteraction. Check whether they might need to learn anything before using this microinteraction. Especially if they’ve never used anything similar before.
2. Allow them to use the microinteraction without your aid. Collect quantitative data in the real-time or immediately afterwards.
3. Follow the users going through the microinteraction step by step. Hear their impressions and description of the choices they have made. See if the rules of microinteraction are obvious for participants, note any discrepancies.
4. Ask them, which data they would want the microinteraction to remember about them.
5. Finish by asking them to show one element you need to fix in this microinteraction.
This process permits you to uncover and diagnose any issues with the microinteraction. It validates general goals and wishes. Repeat this process at least twice, with two teams of users. Apply user feedback and findings analysis between units to revise your microinteraction.
How To Use Research Data
These are some quantitative data you can test:
· Completion rate;
· Duration of the microinteraction;
· Duration of specific steps;
· Number of steps;
· Number of clicks/ taps/ selects;
· Quantity of machine errors;
· Quantity of human errors.
You will revise the microinteraction and test it all over again to see if more improvements are necessary. Also: watch out for sample size. A small number of users could make something like an error or a preference appear a lot (or less) important than it is.
The statistical significance certainly doesn’t mean there is practical significance. The most vital lesson about using data in the design process is this: it can’t design for you. Research data needs an individual to interpret it, and then place it into the context. Data can rarely tell you why something is going on.
Why would you ever ditch the data? For example, most online advertising isn’t clicked. In case you get a 0.5% clickthrough rate, you’re doing okay. So should we put off all online ads, since they are so rarely used? 99.9% of users will agree (the other 0.1% of people work for advertising agencies). But removing advertising would mean getting rid of the website itself, as there would be no cash to operate it. You can’t listen to the data exclusively due to the fact that the data doesn’t include the broader context. The business, the organizational environment and the user base are more than simply numbers in the Excel tables. Data should be an input to your decision making. But don’t let the data decide alone.
Importance Of Microinteractions For Your Product UX
Microinteractions improve the UX of your product and help users remember your brand. They make digital experiences not only easy, but also engaging. Thinking about small details demonstrates that some attention has been paid to the users and their needs. And this is exactly what they want to feel. Through microinteractions you can improve people’s lives. And above all stay ahead of the curve in the fast-paced web development industry.
This article about microinteractions is originally posted on Product Tribe blog.
If you find this post useful, please tap 👏 button 😊
