A Small Wonder: Microinteractions and UX Design

From scrolling through a webpage to clicking a button, we experience microinteractions all the time as we use the internet. If you’re struggling to build a connection with customers or a call-to-action on your website needs to be clearer, microinteractions could be the solution.

In this article, we’ll explain exactly what microinteractions are, explore their applications for ecommerce UX and then provide you with some illustrative examples.

What are microinteractions?

Microinteractions are small interactions between a user and a website/app design feature. These features usually have a specific purpose to support or entertain the user, including:

• Making their interaction with a button clearer
• Encouraging them to make a purchase
• Or simply making them smile

Microinteractions add a higher level of interactivity to your website, meaning that users have more direct control and can see the immediate impact of their interactions with the site. Along with the entertainment factor, this helps your customers to form a closer attachment to your business.

Breaking down a microinteraction

A microinteraction can be split down into four key parts – the trigger, rules, feedback, and finally, loops and modes.

Let’s look at each type in more detail:

1.    Triggers

Triggers initiate a microinteraction. These can either be set off by the user or by the system. With a user-initiated trigger, the user sets off the microinteraction through their own actions, including by clicking, swiping or scrolling. In the case of a system-initiated trigger, the microinteraction is set off automatically when a certain set of criteria are met, including automatic notifications.

2.    Rules

These decide what happens when the microinteraction is triggered. This could include a webpage scrolling down, a button being highlighted or a pop-up triggering.

3.    Feedback

This incorporates any physical features that occur with the microinteraction. It includes sounds, visuals and vibrations, providing a form of feedback to alert or motivate the user. Examples include a highlighted border appearing around a button that has been scrolled over, or a ‘ding’ sound as a notification appears.

4.    Loops and modes

These define the meta-rules of the microinteraction, including the various ways the interaction can play out in different scenarios or following repeated use.

Why should you use microinteractions?

At first glance, microinteractions appear to be small, as their name suggests. But the difference they can make to the user experience of your website shouldn’t be underestimated. Microinteractions can drastically improve your website through to their ability to:

• Make it easier for customers to navigate and interact with your website
• Provide visual and auditory clues to help customers complete their tasks successfully
• Convey information in an engaging way
• Encourage users to share your webpages
• Make your customers’ experience of your website more entertaining, attention-grabbing and rewarding
• Add a real human touch to your website

Simply put, good microinteractions mean good UX design. They help make your website engaging and user-friendly – so customers return time and time again.

Examples of microinteractions in UX design

Still not sure how microinteractions could transform your website? Below are some key examples of microinteractions that can make an instant impact to user experience on your site.

The ‘Like’ button

Probably the most famous example of a microinteraction is the ‘like’ button in its various iterations across social media. From the various reaction faces on Facebook to the iconic Twitter heart, these microinteractions encourage users to interact with a post or product through their fun, vibrant animations. They also add a level of humanity to online interactions, with several of Facebook’s reactions incorporating faces.

Twitter even created unique ‘like’ animations to accompany particular hashtags and events, fostering even more engagement.

Button microinteractions

Buttons serve many important functions on websites. They allow users to do everything from sharing a post to confirming a purchase. Button microinteractions can make the process clearer and more engaging. Through careful consideration of size, colour and animation, among other design elements, buttons can not only foster feelings of satisfaction, but they can also provide clearer visual feedback to the user, so they know they’ve clicked successfully.

Loading and downloading animations

We all know the boredom and frustration that comes with a loading webpage or download that takes ages to complete. If no extra information or engagement is provided, we might become so fed up that we click away from the page. That’s where microinteractions come in. An animated loading screen can hold the user’s attention, especially if there are interactive elements or the loading progress is made clear.

Inputting data

Another way that microinteractions for UX and UI can make websites more accessible is through data input. When your customer makes an account on your website, it helps to have clarity about creating a strong password. Adding a progress bar to show the exact strength of the password can make the process clearer and quicker, encouraging users to stick around for a purchase.

Top tips for using microinteractions for UX design

• Keep your microinteractions simple – They should be a small part of your website – adding them everywhere could become confusing and reflect poorly on the company.
• Improve on traditional techniques – Microinteractions for UX design should be intuitive to users and reflect customers’ expectations. For example, using green for an error pop up could be confusing, as most users will associate this with success or approval.
• Always keep the user in mind – Ultimately, the goal of using microinteractions is to engage with users and encourage them to continue returning to your site. If a loading bar makes customers fall asleep or a button has unclear feedback, this will more than likely turn customers away.
• Use vibrant animations – Movement and colour can hold users’ attention and keep them entertained. Animations can also provide clear visual feedback for loading screens and buttons.

Transform your website with microinteractions

Despite their size, microinteractions can impact dramatically on ecommerce UX design, entertaining users and encouraging repeated engagement with your website. These small interactions transform typically boring or confusing interactions into something attention-grabbing – or even fun – by stimulating the user’s senses. If your website is in need of some UX development, then Bing Digital is on hand to help.

With over 20 years of experience in the industry, we can complete full UX auditing, strategy and design to ensure your website is accessible and engaging – so your conversions skyrocket! That way, you have more time to focus on reaching your business’ full potential.

Want to learn more about our services? Get in touch with our expert ecommerce UX design team for more information.