The Create Something LMS is brought to you with ♥

Web Micro-interactions with Micron JS in Webflow

December 20, 2018

When you switch on/off a light switch, that warning message you get, a message on Webflow about a recent update, when you long press on Pinterest or Instagram — all of these are examples of micro-interactions.

Every one of these tiny moments forms a micro-interaction. We often don’t focus on them, but we can feel their presence. These tiny experiences add up to enhance the user’s experience by making the interface less machine, and more human.

Dan Saffer, author of the book Microinteractions and VP of Product for Mayfield Robotics, defines micro-interactions as “contained product moments that revolve around a single use case — they have one main task.

Products that use micro-interactions effectively win the hearts of their users and keep them coming back for more.

Check out Saffer’s one-page cheatsheet on micro-interactions.

But, what exactly is a micro-interaction?

Micro-interactions are subtle experiences centered around accomplishing a single task. They’re the satisfying details that happen in between performing that single task. Technically it consists of:

  1. A trigger that initiates the micro-interaction
  2. Rules that determine how it functions
  3. Feedback that the rules generate
  4. Loops and modes that make up its meta rules (determine how long the micro-interaction goes on if it repeats, and how it changes over time)

But, why should you incorporate micro-interactions into your designs?

  • They help encourage users to interact with your site
  • They help with site navigation
  • They give immediate feedback to users
  • They help guide users through the flow in an easy way

Now, if you love Webflow, as I do, you may already know that creating micro-interactions is easy and fun to do. Plus, being able to create complex interactions, in a visual manner, greatly speeds up the time to production.

However, I do enjoy integrating pre-created libraries, and Micron JS was the most groovy one I recently found for interactions.

Micron JS is a micro-interaction library built with CSS Animations and controlled by JavaScript Power

How, when using Webflow?

Step 1

Include both the Micron CSS and JavaScript files in the header section of your document.

Step 2

Add the data-micron=”interaction attribute to the respective element.

A good thing to note: HTML attributes can be used to append additional information to your elements — they define characteristics of an HTML element.

The Webflow is to do the following:

  • Select the element you want to add the custom attribute to
  • Go to the Settings Panel (D)
  • Add a custom attribute
  • Specify the name and the value

Step 3

Click Save, and Publish

And, Voila! you are already there.

You miss 100% of the shots you don’t take

Because designers largely aren’t used to designing 300 — 400 millisecond animations, it’s easy to forgot the details and stop seeing them as what they are — opportunities.

Micro-interactions can make the experience between a user and a site more fun, easy, effective, and human. We don’t notice these micro-interactions. They are subtle and brief; but, they can make a product something a user loves.

In other words, micro-interactions have the potential to bridge the gap between the user and technology through an emotional and human connection.

Conclusion

The difference between a product you love and a product you tolerate is often the microinteractions you have with it.
— Dan Saffer

Not only do they improve functionality, they also make your interface more engaging, taking a dull experience and making it more fun, memorable and easier to learn.

Integrate Micron JS into your Webflow project, to take micro-interactions for a spin.


Loading...
Subscribe now to get our latest news!
Stay In Touch With Us!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.