Micro-interactions are small animations and effects to indicate when an event is happening. They’re great for showing that something is clickable and for indicating that the user’s actions were recognized. I personally hate it when I hover over something and it doesn’t show me that I can click on it and then when I do it doesn’t show me that it took the click. Micro-interactions greatly improve the usability of a website and they’re becoming even more popular.
An example in the real world include the tiny vibration you feel when you click on a button on your smart-phone. You know that it took your click because of that vibration. You’ll also see an animation on the button itself such as the button changing color or becoming larger and then shrinking back to normal.
An example in the virtual world would be hovering your mouse over a menu item on a website you’ll see an effect that indicates the post is clickable. A good example is the menu of Web Design Depot.
These micro-interactions are useful for:
- buttons
- menus
- status
- changes
- call to action
- messages as the result of an action
- visual input
- typing indication
- feedback
- toggling something on or off
- etc.
CSS Animation
Hover Effects Builder – WordPress Plugin
You can tell from the image above what is being clicked by its hover animation.
Most of these micro-interactions are in the form of CSS animation and can be created with CSS tools or with plugins. Here are a few resources to help you create them:
Use as many as you can but keep them simple, consistent, and easy to understand.
Let’s Discuss
- Do you use micro-interactions?
- What are your favorite micro-interactions?
- What are your favorite tools for creating them?
Let us know what you think about micro-interactions in the comments below. Thanks for reading and please subscribe if you haven’t already.
Featured image by Samson Vowles
0 Comments