Learn the basics of adding micro-interactions to your UXUI tool kit and download a free UI kit.
I really enjoy using Adobe products. They have been pushing innovation for digital product creators for over 30 years and I’ve been watching and using their different offerings over the decades.
Enter last year’s golden child Adobe XD, a prototyping tool for websites, apps and pretty much anything mobile. XD combines easy drawing and effects tools with simple but powerful hover and animation features. Adobe paired down the most essential features from Illustrator and Photoshop and added a splash of what used to be Flash (the F word for some people).
XD allows you to create symbols and nesting them together creates components. These contain all the common actors in a micro-interaction – texts, shapes, icons, colors, etc. In the dialog box settings for these components, you’ll be able to tweak the hover, tap and transition states. Below is an example of some micro-interactions I created. Download my XD file and make your own micro-interaction UI kit.
What are micro-interactions?
When you swipe, tap, hover or speak, yes speak, to a website or app, and that causes something else to move, appear, change color, make a noise, etc. you’re party to a micro-interaction. You probably experience several thousand of these every time you use a mobile phone or surf the web.
Well crafted micro-interactions can make a big impact on the user. From adding a touch of delight to helping users stay on target, when done right, interactivity enhances any user experience. When done wrong, users start heading to the preferences menu hoping they have the option to turn off the madness.
What are the ground rules?
There’s a book by Dan Saffer’s called Microinteractions. It’s definitely worth a read if you’re going to start creating hover and animation effects. In it he describes the essential functions:
- Accomplish an individual task.
- Communicate status and provide feedback on user actions.
- Prevent human error.
- Enhance the sense of direct manipulation.
- Help users visualize the results of their actions.
It’s All About the User
Adobe blog author, Nick Babich, wrote an article called, “XD Essentials: Animated Microinteractions in Mobile Apps.” Here are the key takeaways.
Make micro-interactions almost invisible and completely functional. Make sure animations fit a functional purpose, and don’t feel awkward or annoying. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
Keep longevity in mind . Microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use.
Follow the KISS principle. Over designing a microinteraction can be lethal. Microinteractions shouldn’t overload the screen causing the long process of loading. Instead, they should save time by instantly communicating valuable information.
Don’t start from zero. You almost always know something about your target audience and the context and that knowledge can make your micro-interactions more precise and effective.
Create a visual harmony with other UI elements. Microinteractions should correspond with the general style of the application to support a harmonic perception of the product.
Learn what the foundation is and go forth and start making your digital products be all they can be.
Emotional Rescue
And finally, the key to all of this is to focus on user emotion. This is at the core of all user interactions. The right sort of feedback from a device or app keeps you engaged and feeling confident. The wrong or lack of feedback makes you feel confused, unsure and frustrated. So when you’re trying to develop a great user experience, put on your empathy hat and try to help your users out with a wink and a nod via some micro-interactions.