I always appreciate the small things in life: a greeting smile from my neighbor, a tiny postcard from my mom, or a loyalty stamp card from my favorite coffee shop. When it comes to design, I always get excited by these same tiny details: meaningful transitions, cute animations, and microinteractions.
Let’s cut to the chase: What *are* microinteractions? According to Dan Saffer, “microinteractions are contained product moments that revolve around a single use case—they have one main task”. So far, so good.
But now imagine a world without them. What if the little bell in your Facebook app didn’t jump when opening the app to indicate you have new notifications? What if the loading symbol of your favorite e-commerce website stopped rotating?
It’s the attention to detail that differs a great website from an ordinary and—let’s be honest—boring one. Here are 10 of our favorite microinteractions the community on Dribbble and Studio is creating out there, and get you rocking and rolling with inspiration for your next project:
Hamburgers in motion
Keep your eye on the I…X…III…
Dude, where’s my disk?
By Szilard Nagy
Car windows, micro-sim cards, or disks? Either way—delightful interaction, created by Szilard Nagy.
Follow the sign
Improve your navigation with this grand 3-bar exit transformation.
Show us how you bounce
By Oxygenna
Hover interactions can be a great way to engage customers with the product. Beautiful coloring doesn’t hurt.
Drag…and snap
By Yancy Min
Highlight an element’s interactivity with its own microinteraction.
Send ‘em up, bring ‘em down
Insert some movement and create some emotions.
Draw it out
By Jake Deakin
Explore icon animation as a way of calling attention and adding delight.
Space is the place
By Bojan Mesar
Could this astronaut to surfer animation be any cooler?
Welcome to my world
This welcome loader for Althaf Roshan’s personal website creates a beautiful experience for visitors.
Oops, I 404ed again
Who said 404 pages need to be boring and static?
Type it out, type it out
EnVision this as a microinteraction while waiting for a website to load.
All interactions were created with InVision Studio. Download it here and start creating now!
Catie is part of the Social Media Marketing team at InVision. She has written several articles about Women in Tech and conducted interviews with people such as Frida Elisson, Stella McCartney, Robin Berzin, and more. Besides helping to create the @InVisionApp community, she loves traveling around the world, running until exhaustion, and getting deep into the world of innovation and technology.
