When designing a website, there are many systemic elements that shape the User Experience, including defined personas, streamlined information architecture and thoughtfully crafted content. But after the fundamental pieces are set, creating delight comes in the smaller details, known as microinteractions. Whenever you press a button, receive an email notification or change a setting, you are engaging with a microinteraction. They are the tiny pieces of functionality that accomplish single task and hopefully do it well. In fact, they are not so tiny when it comes to delivering the flawless User Experience. They are capable to transform the lukewarm into the fascinating as they trigger emotions. Microinteractions resemble health – hardly noticed until something goes terribly wrong. They are, perhaps, a good proof that caring about small details can give a big and powerful result.
Design is in the details.
What exactly are micro-interactions?
Light-switch by Axel O Kanakan
According to Dan Saffer, designer and author of the book Microinteractions: Designing with Details, microinteractions are “contained product moments that revolve around a single use case.” Think of things like a pull to refresh action, switching settings on/off or uploading a file. Essentially, microinteractions guide through the flow, provide feedback and delightful experience. Even more specifically, microinteractions are changes and animations of the interface that appear once a user interacts with something. They can be as well considered as informative animations.
Why do they matter?
Since they are so tiny, microinteractions are often relegated to the bottom of priorities list or even completely ignored throughout product development process. However, a lack of attention to a tiny detail can set off a domino effect of displeasure among users. It may be the only thing separating exceptional website from ordinary one. Here’s how they matter:
- They give a sense of control and provide instant feedback. Micro-interactions work because of people’s natural desire for acknowledgement. They know their action was processed when they get a visible sign. We all have experienced clicking that button when nothing happens for a second or two until the new page is finally loaded. You don’t know what’s going on. Maybe the button is broken. You click a few times more. Isn’t that annoying? On a positive note, heres another example: the loader is the first point of feedback that the request is being processed. Confirmation is the second form of feedback. Even if the request failed, indicating the error is useful feedback enough, because it guides further through the process of accomplishing goal.
Text recognition to-do app by Jakub Antalik
- Micro-interactions create a positive emotional effect. They are supposed to bridge the gap between the user and a product in ways that feel intuitive and natural. Strange animations that take too long to load may cause distraction. Micro-interactions should create a sense of seamless flow.
Message notification microinteraction by Paarth Desai
- They prevent errors. Everyone makes mistakes. Sometimes we click things by accident. It should be easy to undo actions that were not meant to be done in the first place. For example, while creating a new account there are few things more frustrating than clicking the submit button and facing an empty form with error message. Nobody likes to repeat the same work and will most likely disengage altogether. With a little help from microinteractions, mistakes can be prevented by indicating bad input instantly or showing helpful constraints.
Create password (form validation) by Emmanuel Torres
To sum up
- Keep it simple. Too much animation will blur the hierarchy and main message will be lost.
- Consistency is key. Microinteractions are not the right place to try changing already established patterns. They also shouldn’t be created in isolation from one another. Only then everything works together as a whole.
- Serve a purpose. A rule of thumb is to always question if this microinteraction adds value to the website other than just makes design more beautiful.
In essence, these little details can turn an average product into an awesome product, and disengaged user into an engaged user. That’s why instead of thinking big, we could sometimes try thinking small.
At Contrast, we care about the tiny details just as much as the big ones. Drop us a line if you would like to work together and learn more about our approach.