![Sales & Distribution [Oil & Gas]](https://www.hiddenbrains.com/blog/wp-content/themes/blankslate/assets/images/sales_and_distribution-icon.74d08193.svg "Sales & Distribution [Oil & Gas]"){kind=icon}
![Fluid Terminal Management [Oil & Gas]](https://www.hiddenbrains.com/blog/wp-content/themes/blankslate/assets/images/fluid_terminal_management-icon.4b3a27a4.svg "Fluid Terminal Management [Oil & Gas]"){kind=icon}
![Sales & Distribution [Oil & Gas]](https://www.hiddenbrains.com/blog/wp-content/themes/blankslate/assets/images/sales_and_distribution-icon.74d08193.svg?1.0.0 "Sales & Distribution [Oil & Gas]"){kind=icon}
![Fluid Terminal Management [Oil & Gas]](https://www.hiddenbrains.com/blog/wp-content/themes/blankslate/assets/images/fluid_terminal_management-icon.4b3a27a4.svg?1.0.0 "Fluid Terminal Management [Oil & Gas]"){kind=icon}
Knowingly or unknowingly, a large part of our everyday interactions with computer systems are contained under the umbrella of microinteractions. They are what provides feedback to the user. They are responsible for conveying system status or helping users prevent errors. On top of that, microinteractions can be used as a medium for branding purposes of your business.
What are Microinteractions
Microinteractions, at its core level are trigger-feedback pairs where (a) the trigger can be a user action or an alteration in the state of the said system; (b) the feedback we get is a narrowly targeted response to the trigger and is communicated through small, highly contextual, but visual, changes in the user interface.
The triggers initiated by a user can consist of a GUI command or can be gestural or voice-based command. On the other hand, a command initiated by a system involves meeting a set of predetermined conditions. At the time when a microinteraction is triggered by a GUI command, a visual feedback element will most commonly be placed in close proximity to that trigger.
In simplistic terms: everyone loves and appreciates the small things in life like a greeting smile from a stranger, a tiny postcard from your relative, or a loyalty stamp card from your favorite store. Apply this thinking to design and you will see similar details which gets you excited with sprays of cortisol. These designs can be anything from meaningful transitions to cute animations, and microinteractions.
via GIPHY
How, When, and Why are Microinteractions useful?
- When accomplishing a single task
- In order to connect devices together
- While interacting with a single piece of data such as the temperature
- Controlling a certain ongoing process like increasing or decreasing music volume
- Adjusting a setting
- Viewing or creating a miniscule chunk of content like a status message
- Turning a feature or function on or off
- To provide instant feedback
- Encouraging user interaction on the page
- Making the user experience fun without deviating them from the main task
How Microinteractions improve your ux design?
Here is a small example of the most basic type of Microinteraction:
 |
 |
Image Source: Pinterest |
Image Source: Pinterest |
Imagine a world without microinteractions. What if the little bell in your Facebook app didn’t jump when you open the app indicating that you have new notifications? How about when the loading symbol on one of your favorite websites stopped rotating? It would be boring, wouldn’t it? Staring at flat, insignificant symbols. Accept it or not, but microinteractions have subconsciously affected us and filled those boring, bland gaps, we never thought existed.
Image Source: Pinterest
Microinteractions contain a major number of digital elements under its umbrella but not every element is part of a microinteraction. Those static elements which are perennially present on the screen are not microinteractions. Why? Because they do not have a distinct trigger. On top of that, even the flows composed of multiple actions are not microinteractions.
The below table will give a better picture of what can and cannot be considered as Microinteractions and why.
| Digital Element | Microinteraction (Yes/No) | Reason |
|---|---|---|
| Scroll Bar | Yes | Because it is user triggered; visual feedback to user changing location within a page. |
| Pull-to-refresh | Yes | Again, it is user triggered; there is visual feedback to a user action |
| Digital Alarm | Yes | This one is system triggered; it gives an auditory as well as and visual feedback to time condition being met |
| GIFs | No | They are not triggered by either the system or the user |
| Video Player | No | This is a feature of the system, not a microinteraction; the volume control feature within the video player would be a microinteraction |
| Email Notification | Yes | Since it is system triggered; it provides user with feedback that a new message has arrived |
| Swipe Animation | Yes | User triggered; provides visual feedback that a user has swiped an element |
Source: nngroup.com
Dissection of a Microinteraction
When a mobile application development company or an app developer sets out to build an application, it is imperative that they integrate the latest design trends popular with the users.
Thinking in terms of Microinteractions, those designing apps should be well-versed with the anatomy of Microinteractions.
Every single microinteraction in mobile UI design consists of four major parts. They are:
- Trigger
- Rules
- Feedback
- Loops & Modes
Trigger is the first part in the process that encourages the users to scroll from one screen to another or asks them to pull to refresh, tap, click or perform other GUI commands. They can either be user-initiated or system initiated.
Next comes the Rules which determine what happens with the initial trigger.
Feedback is the part which provides visual, audio-visual or auditory clues on screen, keeping them abreast about the on-going activity in the app. Some examples are loading screen animations, notification popups or color change.
What determines the meta-rules are Loops & Modes. They establish the time-frame of how long the required in-app action is going to take and informs the users accordingly about when they should switch to the next desired task.
Importance of Microinteractions
Microinteractions are much more than just visual fun and display. They have more to do than just make users feel good. They are extremely useful in conveying system status, support error prevention, and communicate your brand. In the long run such use cases add significant value to your brand.
Displaying System Status
When you are transparent and communicate the current state of the system, users feel empowered and engaged with your website. Even a small amount of display of the system status is a microinteraction since it naturally includes a trigger and feedback. It is either a user action or a change of system state.
You can use it to communicate progress or when the system is on a standby.
Source: Pinterest
Communicating your Brand
When you type in ‘Congratulations’ in the Facebook’s comment section and press send, the screen is filled with confetti and balloons. Similarly, if your brand’s impression is something fun and colorful, let that show in your microinteractions. Make your animations and buttons as colorful as you would want.
On the other hand, if your brand is professional and reliable, utilizing a donut in your pull-to-refresh microinteraction is definitely not a good idea.
Conclusion
Microinteractions can act as a key way to differentiate your product from competitors and stand out among them. Microinteractions provide feedback to keep users informed and engaged, and without them, your customer experience might take a blow.
You may also be interested in
