User experience (UX) design is an essential component of any successful digital product, and microinteractions are a key element of UX design. Microinteractions are small interactions that occur within a product, such as a button press or a notification. While they may seem minor, microinteractions have the power to significantly impact the user experience.

In this whitepaper, we'll explore the power of microinteractions in UX design, including their benefits and best practices for implementation. We'll also provide examples of businesses in New Zealand and Australia that have effectively used microinteractions to improve their user experience, and how you can apply these learnings to your own digital products.

Whether you're a UX designer, developer, or product owner, understanding the role of microinteractions in UX design can help you create a more engaging and enjoyable experience for your users. 

So, let's dive in and explore the power of microinteractions in UX design.

What are Microinteractions?

UX design plays a vital role in engaging users and keeping them loyal to a brand. One of the key components of UX design is microinteractions. Microinteractions are the small, but crucial moments that users have when interacting with a product or service. These moments can be anything from liking a post on social media to submitting a form on a website.

While microinteractions may seem insignificant, they are the building blocks of a positive user experience. They are essential to ensuring that users are engaged, satisfied, and have an emotional connection to the product or service they are using. This emotional connection is vital for keeping users loyal to a brand and encouraging them to return in the future.

The Power of Microinteractions

In this section, we'll dive deeper into the power of microinteractions. We'll explore how microinteractions can help create a more engaging and enjoyable user experience, and provide case studies of businesses that have successfully used microinteractions to improve user engagement and retention.

The Real World: Microinteractions in UX Design

In this section, we will explore some examples of microinteractions in UX design that demonstrate the power and potential of this design technique.

Airbnb's "Explore Nearby" Button

Airbnb, the popular accommodation booking platform, uses microinteractions to improve its user experience. One example is the "Explore Nearby" button on its mobile app. When a user taps on this button, it triggers a subtle animation that makes the button appear as though it's been pressed down. This creates a feeling of satisfaction and feedback for the user and also gives a clear indication that something is happening. This microinteraction makes the app feel more responsive and enhances the user's experience.

ANZ Bank's ATM Interface

ANZ Bank, one of the largest banks in Australia and New Zealand, uses microinteractions in its ATM interface. When a user inserts their card, the machine greets them by name, and the screen displays an animation to indicate the card is being read. Once the user has completed their transaction, the machine thanks them by name and displays another animation as the card is ejected. These microinteractions make the experience of using the ATM more personalized and engaging, creating a positive impression of the bank.

Trade Me's Swipe to Refresh Feature

Trade Me, New Zealand's largest online marketplace, uses microinteractions to make its mobile app feel more responsive and intuitive. One example is the "Swipe to Refresh" feature, which allows users to refresh the app's content by swiping down on the screen. This feature has become an intuitive refresh feature in many modern apps. When a user swipes down, the screen displays an animation of a spinning wheel, indicating that the app is fetching new content. This microinteraction makes it easy for users to refresh the app's content and creates a sense of satisfaction when the new content is displayed.

Duolingo Confetti Achievement 

Duolingo is a language-learning app that uses micro interactions to create a sense of achievement and progress. For example, when a user completes a lesson, they are rewarded with a sound effect and a shower of confetti. This creates a positive feedback loop and motivates the user to continue learning.

Google Maps Zoom on Tap

Google Maps uses micro interactions to make navigation more intuitive and engaging. For example, when a user taps on a location, the map zooms in and the location marker animates to provide additional information about the location.

Snapchat Swipe to Filter

Snapchat is a social media app that uses microinteractions to create a fun and engaging user experience. For example, when a user sends a snap, they can add a filter or sticker by swiping left or right. The filters and stickers animate in response to the user's swipes, creating a playful and interactive experience.

Sharsies: An Overview

Sharsies has implemented several microinteractions throughout their platform to enhance the user experience. For example, they use a progress bar during the sign-up process to provide users with a sense of accomplishment and reduce the feeling of overwhelm. They also use a "spinner" animation while loading pages, which helps to distract users from the wait time and gives the impression that the app is still actively working.

Sharsies uses microinteractions to provide feedback to users when they complete certain actions, such as adding funds to their account or making a trade. These microinteractions help to reinforce positive behaviours and make users feel like they are accomplishing something meaningful.

Overall, Sharsies' use of microinteractions has contributed to their success in the New Zealand market. By creating a more engaging and intuitive user experience, they have been able to attract and retain users, and establish themselves as a leader in the investment space.

These are just a few examples of the power of microinteractions in UX design. By carefully considering the details of your design and incorporating microinteractions, you can create an engaging, intuitive user experience that keeps users coming back for more. In the next section, we will explore some best practices for designing effective microinteractions.

Best Practices for Microinteractions

In this section, we'll provide best practices for businesses looking to incorporate microinteractions into their UX design. We'll explore common mistakes to avoid, and provide tips for creating effective microinteractions that improve the overall user experience.

Designing microinteractions can be a challenging process, as it involves careful consideration of the user's needs, the context in which the interaction takes place, and the desired outcome. To ensure that your microinteractions are effective and engaging, here are some best practices to follow:

1. Keep it simple: Microinteractions should be simple and easy to understand. Don't overload users with too much information or too many options. Instead, focus on creating clear and concise interactions that are easy to complete.
2. Make it meaningful: The microinteraction should be meaningful to the user and provide value. It should either help the user achieve a specific task or provide feedback on an action they have taken.
3. Consider the context: The context in which the microinteraction takes place is critical. It should be designed to fit seamlessly into the user's experience, without disrupting the flow of the task.
4. Use appropriate animations: Animations can be a powerful tool to make microinteractions more engaging and intuitive. However, it's important to use them judiciously, as too many animations can slow down the user experience or create clutter.
5. Add personality: Microinteractions can add a touch of personality and character to your app or website. Consider using playful animations or sounds to make the interaction more engaging and enjoyable for users.
6. Test and iterate: As with any aspect of UX design, it's essential to test and iterate on microinteractions. Conduct user testing to identify any pain points and refine the design until it is as seamless and effective as possible.
7. Ensure accessibility: Finally, it's important to ensure that your microinteractions are accessible to all users, including those with disabilities. This means considering factors such as color contrast, font size, and keyboard navigation.

By following these best practices, you can create microinteractions that enhance the user experience and help to achieve the desired outcomes. In the next section, we will look at some examples of effective microinteractions in action.

Microinteractions in action: a look at animations

When microinteractions are well-designed, they can transform a passive user into an engaged user. This means that a user who may have simply scrolled through an app or website will now be motivated to take more actions and interact more deeply with the product. Micro interactions are a key part of creating great digital products that are intuitive, enjoyable, and satisfying to use. Let's take a look at some engaging micro animations in action:

Pull-to-refresh animation

This gives visual feedback to a user action (like TradeMe's swipe down to refresh).

Swipe animation

This is a powerful way to give visual feedback that a user has swiped an element and allows for some creative interactions.

Notifications

Notifications provide the user with feedback that a new notification has arrived. This can be in-browser notifications on a website or web app, or push notifications, in-app notifications or badge notifications on a mobile app.

Make loading screens fun… or at least, take the boredom out of it

Did you know that users expect websites and apps to load quickly? In fact, they're willing to wait only about two seconds before getting impatient and moving on to something else. That means every second counts. To keep users engaged while they wait for content to load, designers can use animated loading screens that provide visual interest and entertainment. These loading screens can help reduce bounce rates and keep users on the site or app for longer.

Give visual clues

Animation can be a powerful tool for designers to provide users with contextual cues and guide them through a site or app. For example, instead of having notifications suddenly appear on the screen, designers can make them slide up gradually to show users that they can be expanded by sliding up. This animation provides users with clear and intuitive guidance on how to interact with the notification list. Or using a ‘skeleton loader’, you can cue users on what content will be loaded once it's ready.

Enhance your brand experience

Animation can be a way to reinforce your brand experience. Your design gets more character by implementing micro-animations.

Follow the structure of microinteractions

Triggers, rules, feedback, loops, and modes are important components of micro-interactions that designers should follow in their design process. Triggers initiate the micro-interactions, rules determine how a micro-interaction responds to a trigger, feedback tells the user what is happening during the micro-interaction, and loops and modes define the meta-rules of the micro-interaction.

Triggers 

Triggers initiate microinteractions and can be either user-initiated or system-initiated. In a user-initiated trigger, the user needs to initiate an action to start the interaction. In contrast, in a system-initiated trigger, the software detects certain qualifications are being met and initiates an action.

Rules 

Rules define how a microinteraction responds to a trigger and what happens during the interaction. For example, a flashlight app uses a button as the trigger that turns the light on and off. The rules would specify that pressing the button once turns on the light, and pressing it again turns it off.

Feedback 

Feedback tells the user what is happening during the microinteraction. This component is essential for providing users with information about the outcome of their actions. An example of feedback is a signup form with inline validation — a border color turns green if the field is filled correctly, and turns red if something is incorrect. This way, the user instantly knows whether they have entered correct information or not.

Loops and Modes 

Loops and modes define the microinteractions meta-rules and how the microinteraction changes when used repeatedly. For example, in eCommerce, a "Buy it now" button might change to "Buy another" when the user has purchased the item before. These meta-rules help to provide a seamless experience to the user and help to make the interaction feel natural.

Importance of Micro-Animations for Creating Focus

Micro-Animations and Attention 

Micro-animations are an effective way to draw attention to specific elements on a page. Movement attracts the eye, so animating a certain element can help focus the user's attention. This can be especially useful during onboarding, where you want to guide the user's attention to a specific button to initiate an action.

Contextual Relevance 

Micro-animations can also provide context and relevance to certain elements. For example, a menu item that is only relevant in a certain context can subtly notify the user of its presence when they are likely to use it.

Clarifying User Actions 

Additionally, microanimations can help clarify user actions. When a user closes a section, an animation can indicate where they can retrieve it. Similarly, when a user clicks or hovers over a "Share" button, micro-animations can help clarify which social media platform they will be sharing the content on.

Make Change and Context Clear

Using Micro-Animations to Enhance Navigation Clarity

In the age of small screens and flat design, it can be challenging to present all the necessary information effectively. Therefore, designers tend to hide some elements to avoid clutter. However, this may cause confusion for users. In such cases, micro-animations come in handy to enhance navigation clarity.

The Benefits of Micro-Animations in Navigation

Micro-animations can provide context, making it easier for users to understand the navigation. For instance, consider the hamburger menu. If it expands without animation, users might not know where it comes from or how to use it. With an animation, however, the menu's origin and functionality become clear.

Simplifying Navigation with Micro-Animations

Micro-animations can simplify navigation in many ways. By providing context and visual feedback, they help users understand how to navigate. In particular, designers can use micro-animations to clarify the purpose and functionality of various elements, such as menus, icons, and buttons. By doing so, they make the user experience more intuitive and user-friendly.

Microinteractions should be Non-negotiable 

Microinteractions may be small, but they can have a big impact on the overall user experience. By incorporating microinteractions into your UX design, you can create a more engaging and enjoyable experience for your users. By following best practices and looking to successful examples, you can create microinteractions that drive user engagement and retention.