What are micro-interactions?Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human. For Example take a look at the below interaction This animation is a good example of micro-interaction, because it fulfills three important functions:
Breaking it downMicro interactions have four parts:
Why do they matter ? Motion for Emotion :)If microinteractions are only tiny design elements, why to care about them at all?
Well-designed microinteractions are a clear sign of a care of a user. That’s why they value so much. A user gets what to do and whether or not their action was correct and approved by the system — an app or website provide an immediate visual feedback and teach a user to work with the system. When microinteractions are done right, they can give positive feelings about your brand and influence users’ actions, often without people even realizing why. If you like or dislike one aspect of a product, you have a positive or negative predisposition toward the product in general. This so-called Hallo Effect can play both for and against you. In wise hands, this knowledge can help to improve a user’s feedback from your website — by paying proper attention to details, it is possible to leave your users satisfied. When to use them ?Few examplesIn the UX/UI world, although tiny, microinteractions are touted as the powerhouse when it comes with communicating with the user. Below are top seven microinteractions and their impact on user experience: Swipe The Swipe action eliminates tapping and is much more interactive and smooth. It helps the user quickly switch between the tabs and acquire more information about the product. Furthermore swiping is a very common gesture and guides the users subconsciously without making them think; just like we have been reading ‘Don’t make your users think’. What more? It’s insanely fun and addictive. Data Input All of us know the frustrations of setting up password or creating an account. This action can easily raise hackles. While proactive suggestions on password strength and usage makes it easy for user to proceed ahead, some interactive interactions at the time of data input also keep users engaged with the process and help accomplish the goal. Animations Animation simply enables and improves micro-interactions. They personify good design; their presence might not be noticed but absence takes a toll on everyone. They act like a glue that helps designers make the simplest of processes interesting and addictive. But be very careful as they are meant to engage the users and not distract or frustrate them; delayed processing or introducing new style in website might cause confusion. Current System Status It is essential to keep the user informed about the current status happening on a site or app. If the users are not informed chances are that they will get annoyed and close the site or app. Micro interactions lets the user know exactly what is going on, how long it will take the process to complete etc. Even failure messages can be humorous yet effective to retain trust of user. Call to Action Microinteractions essentially nudges the user to interact with an application or website. Call to action instills a feeling of achievement and also empathy factor in user behavior and the best way to make your user interact with CTA is to make it engaging to entice interest of user. Animated Buttons They play the role of information manager by letting the user know their way through your app or site. We need to pay attention to color, shape, special effects, animations, placement and texture to make the user experience seamless. We humans are hardwired to seek instant gratification. And it is a common tendency to overlook microinteractions in the greater scheme of things, but these are very important to get your users hooked.Devil is in the detail- as everyone say. Small experiences and design features, like toggling between screens or highlighting a feature or popping of a new notification can make a huge difference in enhancing users experience. How to design micro-interactions?Making micro-interactions is exciting for designers, because it is possible to experiment new design solutions and look for new ways to surprise the users. But for doing it you must keep in mind a few things :
Tools to design Micro InteractionsSo, what kinds of prototyping tools should designers familiarize themselves with? There are many tools out there but not everyone knows what works best for specific micro-interaction tasks. Here are my recommendations based on my personal experience designing these elements. If you’re familiar with coding:
If you want to design an interaction between a screen-like push and a module:
If you want to create more detailed interactions:
If you want to create detailed interactions + animation:
Few interactions which I made ❤To set your micro-interactions up for success, make sure your team possesses these above mentioned characteristics and engages well with the UX process. And good luck with your own micro-interaction journey! Here are few of my articles on User Experience (UX): The post Micro-interactions: why, when and how to use them to improve the user experience appeared first on Design your way. from https://www.designyourway.net/blog/user-experience/micro-interactions-why-when-and-how/
0 Comments
Leave a Reply. |
AuthorPleasure to introduce myself I am Jamie 27 years old living in Searcy, AR. I am web developer and have developed over 50 sites for clients. Now a days I am focused on designing as I feel I am lacking it. Archives
April 2019
Categories |