Building Delightful Buttons with Lottie
Microinteractions on Groupon
Are you bored with your buttons?
Are your actions met with a sudden flash to the next screen? Do you find yourself longing for the tangible feedback of a mechanical device as your fingers push against the cold glass of a phone screen?
As fundamental as they are, digital buttons seldom go beyond their objective of affording interaction. They’re a ubiquitous signal for taking an action, but there’s more to our experiences with technology than usability alone. Good design doesn’t just empower us to accomplish, it engages us to enjoy our experience as well.
Microinteractions are just one way to engage users beyond basic usability. These tiny moments of delight can surprise and entertain on top of providing feedback and information about the interface. Here at Groupon we felt our buttons were indeed quite boring, so using After Effects and Lottie, we added a little bit of delight to our navigation bar. Here’s our story:
Getting Started
As one of the most basic patterns in any app, the navigation bar seemed like an obvious candidate to enliven. Before we could start, we had to decide how our icons would move. One key rule in animation, just like interface design, is that things should behave in ways the audience would expect. Our icons needed to move in ways that were appropriate to their appearance and to the action they performed. Obviously, the bell had to ring. Some icons weren’t so straightforward though, which gave us a chance to get a little creative.
A lot of inspiration can be gathered from sites like Dribbble or UIMovement. For this effort we were especially inspired by the animated Material icons. With these in mind, we sketched out some options for each of the icons. Narrowing in on our best ideas, we were ready to test out some concepts with animation. It was important to prepare our assets (in our case, illustrator files) in the right way for easy animation and export later for Lottie.
Working with Lottie
For more control around minute movements, we animated our icons in After Effects. It’s great for design, but a headache for handoff to developers. That’s where Lottie comes in–a helpful tool for bringing your After Effects animations into code.
If you’ve never heard of Lottie — check it out at https://airbnb.io/lottie. It’s a code library that renders exported animations natively on mobile and web. No more GIFs or movies–your animations can be rendered and customized in real time as vectors!
Getting technical, Lottie uses JSON, which is exported through an After Effects plugin called Bodymovin (see the link above). That means the animations needed to be made up of vectors (shape layers) and there were limited features supported in After Effects. But once exported, our developers could just plug in exactly what we made. This made it easy to prototype ideas and customize them on the fly.
Getting It Just Right
We went through a few phases of the animations. Some ideas just didn’t translate well — almost everyone thought it was creepy I made a face appear on our account icon. It took some tweaking as well to get the timing right. A good place to start was with Google’s Material Guidelines which recommends around 200ms for the duration of an icon animation.
One thing we could have only discovered through rapid prototyping was the importance of aligning to the physical action of pressing the screen. When we included a depression in the animation, it felt disconnected when triggered after the finger lifted from the screen. The press and release of the animation needed to sync with the user’s perception of their action. By expanding the icon on release, we imitated the button releasing after being pressed. (Shout out to our developer Vlad on this one)
Unlocking Delight
By the time we were happy with our animations, they were already in code and ready to go (thanks Lottie). The feature was shipped, tested, rolled out and has been one of the most fun projects to work on. Designers and Developers both learned a lot through the process, and this was an awesome opportunity to closely collaborate.
With microinteractions, you can take your buttons from static to stylish. Part of their beauty is how easy they can be to implement. Hopefully our story can spark some ideas and the next time you’re on Groupon, I hope pushing our buttons just might make you smile.
Thanks for reading. I’m a Product Designer at Groupon on our UX Design Team. We call ourselves the Design Union, and if you’re interested in reading more articles or learning more about us — check out design.groupon.com. If you liked this article, please clap so others can find it!
