Last week I worked on ways to draw the user’s attention to a hamburger menu. I thought back to Val Head and Sarah Drasner’s animation workshop, which I was lucky enough to attend last year and thought, “animation can help me with this.” I wanted to get the user’s attention to the hamburger menu, but not in an obnoxious “LOOK AT ME HEY HI HELLO!!!” way. I prototyped three possible solutions.
Draw and Bounce
The draw and bounce animation consists of two parts: the draw and the bounce.
The lines of the hamburger menu are drawn in from the left to the right, which hints at the direction the content will come into view when the hamburger menu is opened. I wanted to portray to the user that something will come in from the left when you click the burger icon.
Since the draw part of the animation is very subtle, I added in a little bounce after all parts of the hamburger menu are on the screen. If the user misses the draw, they are likely to see the bounce and know to click the hamburger to see more.
Grow and Wave
I wanted this animation to be friendly without being overbearing, inviting the user’s attention to the hamburger menu. I explored versions of this without the hamburger menu growing, but just the wave could be missed with everything else happening on the product’s home page. In this case, scaling the hamburger menu up made sure the wave would be seen.
This animation was inspired by something I've seen a lot on mobile: when you touch a part of the screen, the background around what you touched has a colored circle around it. I wanted to explore a version of this since it seems to be a common wayfinding pattern.
Getting to prototype different animation-based solutions to solve a problem for users was a really fun experience and I hope I get to do more of it in the future! Animation is a wonderful way to help your users find their way in your product. 🎉