Microinteractions to Surprise at Users
“The details are not details. They make the product”
Charles Eames. American Designer (1907–1978).
What Are They?
Microinteractions are how the word says those little moments in which are involved two or more agents, in this particular case between a single web component and the user. They’re bound to accomplish a single task or a specific use case, for instance every time you change a setting, complete a form as login, upload a profile picture, share or like something, you are involved with microinteractions. The already famous hamburger menu, “like” button of Tumblr and pull to refresh on mobile are perfect examples of this. Before continuing this explanation I guess you are asking “Why I have to know this and why now?”. Let’s start.
Why You Have to Know This?
Since some years ago, more and more people in the world of software is talking about user experience (UX) and its magics regarding to how a good interface and design impacts and improves their website results faced to final users, because at the end they are the most important thing for every project and now this became a tradition during the web development process and you shouldn’t ignore it. With a naked eye it doesn’t seem to matter but it does. Following I’m going to show you how.
Its Structure
Before considering visual details we have to pay attention to microinteractions structure, they are formed by the following interesting features which were defined by Dan Saffer in his book called “Microinteractions: Designing with Details” published on 2013:
- Trigger: Something which initiates it (i.e. Click/Tap on it).
- Rules: Interface becomes playful and understandable showing the user how it works.
- Feedback: Response that Rules generate to notify user if the performed action was successful or fails.
- Loops & Modes: How it changes over time and its different states (Life-cycle).
On the other hand, there are another bunch of values you have to consider before starting to create a microinteraction:
- Usefulness: Think twice if it will be useful or not. You wouldn’t like to make the user’s life worst.
- Engage users: Improves UX and interactions, they should be friendly with the Users making use of loving brief animations.
- Easy to understand: You don’t always need to be explicit, the component must to explain itself. Don’t explain the joke!.
- Speak human: Figure out the basic message you need to convey using clear language.
- Prevent human errors: Try to take into account all usability cases as possible in order to avoid broken cycles doing great Rules.
- Use the overlooked: Use the interface elements that are already there for Feedback delivery, don’t add more items unless you have to.
As I said before “with a naked eye it doesn’t seem matter but it does”, this consideration could set the difference between a good product and the best possible product. An example of this is the difference between Apple and Microsoft, where first one take care of every detail of its products. In order to accomplish this point of view, we need to know the technology limits which we are dealing with so we will be aware what is the best work we could do. If you want to apply this new concept, you could start checking over and doing improvements on your CTAs (Call to Actions), and turn them into microinteractions.
Thank you for reading.
