Without further delay, let’s get started by first examining how tiny interactions can create the most memorable experiences.

Microinteractions

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.

Benefits

Best Practices

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:

  1. Cue (the microinteraction) — Trigger that initiates action
  2. Routine — Familiar user action
  3. Reward — Reason for completing action
Photo credit: Facebook

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.

Photo credit: The New York Times

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.

Photo credit: Intercom

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:

Load screens

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.

Photo credit: Airbnb

Get the full 185-page
Web Design Trends 2016 PDF

We'll keep your email safe.