It helps you to check and ensure that what\u2019s fun doesn\u2019t become annoying after repeated use and thus enables you to keep user experience elegant and streamlined.<\/li>\n<\/ul>\nA thought-fully crafted micro-interaction essentially comprises of the following four parts (shown in the figure below):<\/p>\n
![\"The](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/The-model-for-microinteractions.jpg\")
<\/p>\n
1. Trigger<\/strong>\u00a0that initiates micro-interaction. It can be:<\/p>\nManual trigger \u2013<\/em><\/strong>\u00a0the one that the user is deliberately doing like filling a form, pressing a button or swiping the screen.<\/p>\n![\"Manual](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/Manual-trigger.jpg\")
<\/p>\n
Let\u2019s take a look at the form from Disqus. When you begin to fill your email address, it starts to guess your name based on your email address. Although, this is a little thing but it is certainly very clever.<\/p>\n
System trigger \u2013<\/strong><\/em>\u00a0the system triggers on its own when a set of conditions are met.<\/p>\n![\"System](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/System-trigger.png\")
<\/p>\n
A very good example of system trigger is when you are reading on Instapaper and you tilt your phone and jerk it back, it brings up the rotation lock. It\u2019s like, hey! You may want this. You need not go and dig into a setting somewhere to find the same.<\/p>\n
2. Rules<\/strong>\u00a0that determine how the micro-interaction functions. They are invisible and they decide what can be done and what cannot. It also determines how the micro-interaction responds to the trigger being activated.<\/p>\nFor instance, the rules of a lamp turn on when the switch is flipped and stay on at full brightness until the switch is flipped again.<\/p>\n
3. Feedback<\/strong>\u00a0that is generated by the rules. They are mostly visuals but can be aural too.<\/p>\nGE Caf\u00e9 appliances, for example, have used sound for each different actions like power on, notification, feature on , etc.<\/p>\n
4. Loops and Modes<\/strong>\u00a0that make up meta rules of micro-interaction. They are more effective as they can measure time everytime.<\/p>\n\u00a0For example, on Facebook when you start making too many friends, it shows a warning like \u201cPlease slow down.\u201d<\/p>\n
How micro-interactions can take your product to the next level?<\/h2>\n
Keeping the following guidelines in mind while designing micro-interactions would help you to deliver pleasant user experience and win over your audience.<\/p>\n
1. Bring the data forward<\/h3>\n
Do not make users to get into the application in order to get the data.<\/p>\n
Example:<\/em>\u00a0<\/strong>With Google chrome you can actually see what has been downloaded, how many things have been downloaded and also the progress of the things that has been downloaded without having to go into Google chrome. Moreover, you need not go to any other separate window as it shows you what\u2019s going on right there.<\/p>\n2. Prevent the human error<\/h3>\n
Stop errors from happening! Even if they happen, what can you do to automatically start to fix those errors?<\/p>\n
![\"Prevent](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/Prevent-the-human-error.png\")
<\/p>\n
Example:<\/strong><\/em>\u00a0In Gmail, if you write \u201cI have attached a file\u2026\u201d and you actually forget to attach then a window pops up with the message, \u201cDid you mean to attach files\u2026?\u201d Although it is creepy as Google is reading your mail, it is indeed effective in preventing human error.<\/p>\n3. Don\u2019t start from zero<\/h3>\n
There is almost always something about the user, the context, the platform, the environment that you know what is going on.<\/p>\n
Example:<\/strong>\u00a0<\/em>While you use navigation apps, after sometime they get to know your behaviour and start making suggestions or asking questions like \u201cGoing home?\u201d<\/p>\n4. Use the overlooked<\/h3>\n
You, as a designer, already have a lot of tools or elements that are already there. What if you can use those things instead of adding new things onto the screen or dashboard or to the control panel?<\/p>\n
Example:<\/strong>\u00a0<\/em>In chrome, when you search a word on a web page, it just uses the often overlooked scroll bar rather than popping up another window. \u201cConvey the most with the least\u201d.<\/p>\n5. Speak human<\/h3>\n
If your audience is non-technical then speak to them in the language of human. Try to figure out the basic message you need to convey and use the same words your users do.<\/p>\n
![\"Speak](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/Speak-human.jpg\")
<\/p>\n
Example:<\/strong>\u00a0<\/em>Threadless, the crowdsourced ecommerce company uses cart with faces that people could relate to. Sad face when the cart is empty and when you fill things into the cart, it changes to happy face.<\/p>\n6. Use the long loops<\/h3>\n
How does your micro-interaction change when you extend it beyond a single instance of use? How does the micro-interactions adapt to the user behaviour after you visit it twice, ten times or may be a thousand times? How does the product evolve overtime?<\/p>\n
Example: In the foursquare app, they have created a yearlong loop such that it thanks you even after years. It\u2019s kind of thanks for hanging out with us.<\/p>\n
![\"How](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/How-to-Win-Over-Your-Audience-by-Using-Microinteractions-in-Web-Design.jpg\")
<\/a><\/p>\n![\"tabel-compressor\"](\"https:\/\/staging.heliossolutions.co\/blog\/wp-content\/uploads\/2017\/05\/New-Tabel-compressor.jpg\")
<\/p>\n