Micro-interactions to incorporate for powerful emotional design

Written by Arianna Chau on

Micro-interactions are small, singular interactions that serve one purpose: communicate meaningful feedback to users in a positive and welcoming way. People like to constantly know what’s going to happen when an action is performed and tend to expect something to happen when they interact with it. The pop of the heart when you favorite a post, the elasticity of pull-to-refresh, or even snoozing your alarm are all examples of micro-interactions we experience every day. I think it’s important to take the extra time to make these experiences feel more human.

If they’re so micro, what’s the point in using them at all?

Micro-interactions can bring personality, humanity, and charm to your site or app. They’re oftentimes a key component in differentiating a “meh” project from an exceptional one in a few small ways:

  • Improve usability
  • Minimize human error
  • Nudge user attention to specific areas
  • Give useful feedback to the user
  • Humanize the users experience in general

Breaking down the structure of micro-interactions

According to Dan Saffer, micro-interactions can be broken down into four parts:

  1. Triggers initiate the micro-interaction. They can be initiated by the user or the system.
  2. Rules determine what happens once the trigger is initiated.
  3. Feedback lets people know what’s happening. Anything that the user experiences while the mico-interaction is taking place is feedback.
  4. Loops and Modes determine things like the length, if it repeats or changes.

Here are some examples!

I love CodePen because you get to see cool features and animations in action. I’ve grabbed some examples from there so you can feel for yourself just how awesome micro-interactions are.

Swipe

Agence Me on CodePen

Swipe gestures are fast, smooth, and eliminate tedious tapping. The user can quickly gather information about a product and switch between tabs and objects quickly and easily. Swiping is also a gesture we hardly have to think about anymore, making navigation seamless.

Data inputs

Dronca Raul on CodePen

We’ve all rolled our eyes after failing to meet overly complex and frustrating password requirements we didn’t even know existed. Micro-interactions that can provide a checklist or convey password strength can alleviate a lot of the stress of finding the right password. It’s as if the system is working with the user to accomplish the end goal.

Communicating status

Denis Pasko on CodePen

Loading screens are sometimes unavoidable. Fun animations or even creative loading bars can give the user something to look forward to. Micro-interactions inform the user of exactly what’s going on, if the system or downloads are going smoothly, estimated times, etc. Plus, it’s really satisfying for everyone to see something load to completion.

Calls to action and animated buttons

Aaron Iker on CodePen

Micro-interactions are a good tool to nudge the user to interact with certain elements. Calls to action instill a feeling of achievement and also an empathy factor in user behavior. The best way to do this is to make your site engaging and rewarding to use. Think of them as directional arrows that help guide the user to points of interest. Color, shape, animations, and placement help to make the perceived effort for the user as low as possible.

Conclusion

As humans, we want instant gratification, we want our actions to have a sense of purpose. Micro-interactions are like the web’s form of non-verbal communication. When used effectively with compelling features and content, they keep users coming back for more.

Arianna Chau

Arianna Chau is a junior front-end designer at Cloud Four. She loves to learn, try new creative outlets, and talk about her dogs, especially on Twitter @vulpixies.

Never miss an article!

Get Weekly Digests


Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us