Icing With Interactions

I love microinteractions. They are the little, cute changes to elements that a user doesn’t expect, but love. The name “micro” makes it sound as if it is an easy thing to think up and implement, but microinteractions take a lot of empathy.

How to Get It Done

As a user-experience designer — I’ve got to place myself in the shoes of the user as they try to reach their goals on the site I created. And after I know their route to their goal, I’ve got to place some magic along the way that not only helps them reach their goals, but is also intriguing. Just the right amount, like cake icing. Too much, and it can ruin the entire cake.

In other words, microinteractions have the potential to magically bridge the gap between the user and technology through an emotional and human connection, while also encouraging them to keep coming back for more.

What Do the Super-Pros Say

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

Check out Saffer’s one-page cheatsheet on microinteractions.

According to Saffer, microinteractions are good for:

• accomplishing a single task and a single task only
• interacting with a single piece of data, such as the temperature or rating a song
• controlling an ongoing process, such as the volume for a song on Spotify
• adjusting a setting
• viewing or creating a small piece of content, like a status on Facebook
• turning a feature or function on or off

Still Learning, and Still Teaching

Microinteractions take a different thought process, as we’ve noticed.

Today, I was able to help Sebasgaes, an awesome Webflow user, who wrote in the Webflow forum. He was working on a hover state microinteraction for a restaurant website.

He wanted to replicate the following:

What I enjoyed most is that I wasn’t 100% sure of the solution when I started, but as soon as I looked at the problem within the Webflow Designer interface — I quickly realized what would be the easiest way for me to knock out the microinteraction:

After a little bit of testing I was able to recreate the interaction in Webflow. To do so, I did the following steps:
1. Add a wrapper div
2. Place the line and button within the wrapper
3. Create an interaction where the wrapper moves from 0% opacity to 100% opacity when the user hovers over the Div Block
4. Then, create an additional interaction where the title moves up 10px on hover and back down 10px when the user hovers out of the fotos container

You can view the steps in the following quick tutorial:

Use Your Icing

Now, as the chef of the web experience — use your icing. Use it sparingly, but use it with flare ;-)