Last updated on May 29th, 2018
Do you know this feeling when some web page seems OK and there is nothing to complain about, but it just doesn’t hook you? Why is that so? Or on the contrary, what are those things that grab our minds and force us to keep moving from one page to another? What does it depend on? All the answers lie in design.
I’d like talk about the rarely obvious but important element of it – microinteractions. These small animated movements of the icons or blocks can make your website not only usable but delightful to use. And I bet you know what a great difference it is.
Here Are 4 Reasons To Take Microinteractions Seriously In 2018
1. They Bring A Feeling Of Control
One of the ten UX commandments, formulated by Jakob Nielsen back in 1995 calls up to keep the user informed of what is going on. So let your user know what he/she is doing when pushing this or that button. Did I cut out the phrase? Did I copy it? Did I delete something? Did I do anything at all? Who the hell knows until this button doesn’t move!
By adding animated micro-movements to the functional elements, you show respect to your user’s feelings. You let a person feel that she/he control the situation, that every movement is apparent and causes a particular action. Moreover, such animations indicate the status of the ongoing process and show what to do next. Why it’s important? Because it makes your web page or app nice to use, therefore, boosts a retention.
2. They Make Your Brand Recognizable
As well as a good logo design ideas, a well-performed microinteraction can increase your brand awareness. A trivial but very illustrative example is a Facebook like button.
Both its traditional appearance and it’s actual version involve microinteracting that has profoundly transformed a user’s perception of the product in general. In the case of Facebook, this small interaction became a brand calling card. And if you think that it’s rather an exception or a luckiness, you might have never heard a sound of a Skype incoming call.
Another example is this notification bell. It’s hard to find a person who wouldn’t recognize Twitter by it.
For Tinder, a minor animated interaction became a key in-app move. It owes its popularity to an ingeniously simple navigation and transparent application UX. It’s hard to believe, but in the heart of it all is a microinteraction.
3. They Make The UX Palpable
Microinteractions bring the new range of feelings to the user experience. Dan Saffer claims that there two main sides of the product: its features and details. Features (functions, services) are what make people use your product at first. Details (pleasing design solutions and other benefits) make these people return. Details are what appeal to a user’s emotion. And in this light, microinteractions are those essentials that complement a visual side of a UX by the tactile perception.
Such a minor nuance as an animated icon movement does a great job. Stephen Moyers has beautifully expressed it as a closing the gap between human and machine. In other words, such elements serve as a bridge that makes a digital experience close to the real-life actions (flipping a switch, turning a page, moving an object, etc.) Such shift makes UX palpable and alive.
If you are not in these somewhat romantic things, let me put it this way: microinteractions is a way to increase retention and reduce a bounce rate through design.
4. They Make The Navigation Easier
Microinteractions are not just decorations; they serve to usability. They guide users through a chain of operations by giving them hints about what to do next or how to go back. Besides, they can show the status of an ongoing process or indicate an exact website section the user is on. You might come up with a question how a microinteraction do all these things. To answer it, let’s clear up the structure of this marvelous trick.
How The Magic Is Done
Each microinteraction has four essential elements:
There are manual and system initiated triggers. A manual one is a user’s first action (click, swipe, flip a switch, hold a button, etc.) that launches the whole interactive process. The second type is an inbuilt system signal, reporting the new actions. For instance, a sound of incoming messages. In the first case, the user starts the interaction loop, in the second – the app invites a user to a journey of an action sequence. The common thing between these triggers is that the have the rules behind them.
Define what to expect from the trigger action, what happens next and in what order, Plus, they set a limit for what a user can do (for example, repeat an action). Finally, rules determine where a microinteraction guides a user and what expects in the end.
Is a system response? Everything that helps you understand the rules (sounds, animations, pop-ups, page transitions) is a feedback. It may take any shape and appearance. But it is, of course, a clear message that makes you understand where you are heading in the process.
4) Loops and Modes
Well, loop means a repeatable lifecycle of a user-system interaction. It defines a microinteraction pace and progress. And affects UX a lot! So when you plan your small animated trick pay attention to its loop length:
• A too short loop will seem rushed and irritating.
• An overly long loop will make a user impatient and will ruin the user’s engagement.
Modes are the offshoots in the looping plot. They define the scenario of a microinteraction and its possible variations.
Look at the gif above. It is an example of a complex microinteraction implemented in a download button. A trigger is pressing the arrow button. Rules can vary. Some of the options:
• Only registered users can do downloading
• There is a limit for downloads
• It’s a payable service.
The feedback is a transformation of the button into the waiting circle. It verifies that a user is free to complete an operation. There is a place to possible offset. The downloading process can either succeed or fail. If something cracks, the feedback will be in the form of notification. In this examples, the process successfully ends with a file opening.
Microinteractions bring users the feeling of control and understanding of what they do. A single detail can contribute to a brand awareness and become a real symbol of an app. Microinteractions mitigate the difference between hand-operated and digital experience, bringing in the palpability of an online product. Ultimately, they boost the product engagement what makes them an essential part of a design strategy in 2017. What else to say? Devil’s in the details.