Today we want to talk about one of our favourite web design features – microinteractions.
On some websites, you really can feel like a passenger, sitting back and watching the action (or lack of it) unfold as you do no more than scroll down or click the next link.
The best websites allow you to be a little more active and feel like you are actually being engaged by the experience, even if it’s only in small, almost unnoticeable ways.
What are microinteractions?
Microinteractions are small and unique moments where the user and the website design interact. These can be functional or enhance the overall user experience on your site. Microinteractions are designed to communicate feedback to the user when they take an action so that they know that action has actually been registered, such as a scroll bar appearing when you scroll down a page
Microinteractions are nothing new – most of us use them every day, even if we don’t realise it, such as when we hit a ‘like’ button or swipe to remove a notification from a phone screen. Even a box on an online form highlighting red when you forget to fill it in is a microinteraction.
What are the different types of microinteractions?
Microinteractions can come in many forms, including:
- Animated loading screens
- Scrollbar animations
- Swipe animations
- Pull-to-refresh animations
- Notification animations
- Buttons that change colour or shape when clicked to show successful interaction
- Animated expanding menus
- Branded animations
A great example of fun micro-interacting can be found over at one of our client’s sites: Cleanup My Shhh… (check out the robot’s eyes!)
What are the benefits of using microinteractions?
Microinteractions are a great way to make your website stand out from your competitors. Competition is higher than ever for all businesses in the online space, and microinteractions can be the nudge your users need to think of your brand rather than another when they need something.
Some of the benefits of microinteractions are:
-
- They can be used to help draw the user’s attention to something, such as the next step or a call to action. This could be when they have finished reading an article, typing a message, are ready to checkout with a shopping cart, or have reached the minimum amount for free delivery.
- They can teach a user how to use the interface of the website, app, or service. If multiple options are available to the user or different actions can be taken, microinteractions can provide a quick tutorial that tells the user what they need to know.
- They can make boring stuff more interesting – like loading screens. Even a little animation and a progress bar can be enough to keep the user engaged and confident that the page is actually loading.
- They provide feedback that the action taken was correct or incorrect. A missing field on a form might glow red, or a new password or username might get a green tick if all the requirements are met without you having to submit it first.
- They can communicate information in an entertaining way. Sometimes explaining a product or service can be a little dry. Microinteractions can help the information to sink in.
- They encourage user engagement. Microinteractions allow the user to engage with your site, and feel like they are also being engaged with. Creating a memorable experience is the way to generate some buzz around your brand.
That, in a nutshell, is why we love microinteractions. They can range from small but clever features that enhance the overall user experience, or they can have great functionality which helps your audience to fully engage with your brand.
If you think your website could use some rejuvenation with microinteractions and other slick design features, please get in touch!