Without further delay, let’s get started by first examining how tiny interactions can create the most memorable experiences.
Crucial for mobile app design, microinteractions are the minor interactions between bigger interactions, often small enough that users engage them without a second thought.
Tapping an alarm to turn it off, a button color change to indicate it’s been pressed, a “ding” indicating a new comment on your picture — microinteractions all add up for a more fulfilling user experience overall.
- Shape and teach users how to interact with site.
- Communicate status, changes, or draw attention to certain areas.
- Provide feedback for completed actions.
- Add delightful elements without detracting from main experience.
- Strengthen brand identity
- Meet expectations (microinteractions are now the norm in many sites and products)
1. Create a Habit Loop
Microinteractions are the key components of habit loops. As a refresher from Interaction Design Best Practices, habit loops work like this:
As shown in our UXPin prototype above, Facebook’s red box and whitened icon (cue) indicate there’s a message, which makes the user click the icon (routine) to chat with their friend (reward). After awhile, users automatically click when they see the red box/white icon and a habit forms.
The stronger the reward, the more stronger the habit becomes.
2. Design for Repeated Use
Because they’re integral in habit loops, design them with staying power. What’s cute the first couple of times may become old or annoying after a hundred times.
3. String Together with a Theme
Connect your microinteractions with similarities, such as a single color or type of animation. Consistency increases recognition and strengthens brand identity, like The New York Times using their own logo as a loading animation.
4. Use Animations
Microinteractions are the perfect chance for a little extra “delight” in the design. Animations make them more fun, and the motion attracts attention, which is often their main goal. Just watch your bandwidth.
5. Avoid Unwanted Interactions
It’s a common mistake to overload UIs with microinteractions. Start by designing them for only the most basic functions, and see how your users respond. In web design, some common instances include:
- Transitional animations
- Uploading and downloading
- Animated illustrations that activate on hover
Positive feedback on basic microinteractions is a greenlight to add more.
6. Use Humor for Text
Microinteractions like modal CTAs or announcements — and especially error messages like 404 pages — benefit from humor. At the very least, use a casual and human voice.