A microinteraction can be described as a small interaction with a system, with a part of that system that only serves one purpose.
… “brief pieces of functionality”
… “product use case boiled down to a single moment”
… “The details are not the details. They are the design.”
The microinteractions in your product will work together to create a specific look and feel to the user, and these pieces contribute extensively to the overall user experience.
A microinteraction follows a specific use pattern: (1) trigger – the initial part that sets off interaction; (2) rules – how the interaction needs to occur; (3) feedback – to show the user the rules; (4) loops and modes – meta rules. Dan Saffer, a respected UX professional, leads the charge in this area and advocates for the use of thoughtful microinteractions in his book and videos.
Looking ahead to the future of technology and innovation, microinteractions are one of the essential design trends for 2015. Microinteractions are now getting the attention that they deserve because more companies are focusing on user experience than ever before!
Companies understand that sets of microinteractions comprise a user experience, which enhance the delight, efficiency, and engagement of the user.
There are now “universal” microinteractions that have been adopted by many systems, but these were initially just ideas within one product or app. Designing for these microinteractions can have a larger impact on the technology world as a whole. Some examples of microinteractions that have become widely adopted include:
#1: The Screenshot
Though “selfies” are integrated into our lives and vocabulary, the newest trend in phone microinteractions is the screenshot. A user can take screenshots of their phone screen, tablet screen, or computer screen without a third-party software because the microinteraction has been built into the product, which is a relatively new trend.
Screenshots have become immensely popular because they cut down on the user’s time. These are some popular ways people use the screenshot feature:
- GPS screen, which provides an arrival time – no need to say “on my way”
- A conversation with someone – no need to re-type the whole thing to the person you want to tell
- Your Uber or Lyft driver – to let someone know you are getting in the car with a stranger and to check in with you to make sure you got home safe
- An image – rather than going through the process of attempting to save the image from your browser, you can just screenshot it and crop it down to just the image.
Once the user takes the screenshot, the system provides feedback (camera sound and screen light-up) to indicate that the microinteraction was successful.
#2: The Swipe
People have become so accustomed to swiping (left, right, up, down), that it is sometimes the first thing that they try when they are interacting with a new system. Swiping left indicates moving forward whereas swiping right indicates going back. Additionally, the act of moving a page up and down has changed how mousepads are defaulted – they now mirror the tablet with a “natural” scroll. However, this can be changed back to the classic scroll if you do not like the natural scroll. The feedback on a swipe is immediate, you can see the page moving if you have been successful.
#3: The Ringer Off switch:
How embarrassing it used to be when it was commonplace for cell phones to interrupt important meetings, dates, or classes. Mobile phones used to require the user to “open” their phone and go into their settings to silence their phones, but now there is a silent slider button on the side of most phones. On the iPhone, when the slider is moved into the off position, the screen will show a bell with a line through it and color on the slider will appear red. This provides the feedback to the user that they were successful in turning off their ringer.
#4: Refresh Wheel
When you are trying to update a page (such as email, twitter, etc.) with a touch screen device, you can simply pull down as if you’re trying to scroll up to the top, where the most recent items would be. The system provides you with the feedback of a turning wheel to let you know that it is working to refresh the page, to forge ahead with the more recent entries. This is an intuitive way to refresh your page.
The video below demonstrates a few of the microinteractions listed in this post:
Want to create a microinteraction that will improve the user’s experience and maybe live on beyond your product? Think about your design principles, as discussed in the previous blog post, to identify possible microinteractions that will follow the look and feel that you desire in your product.