Maybe It Doesn’t Need to Move
You’re probably familiar with sites that capitalize on awesome, shiny, motion-y, snappy, clever “UI Design.” Codrops and CodyHouse are two of my favorites. These sites (and others like them) specialize in creative animations and UI effects that are designed to impress, get clicks, and end up in newsletters. None of those goals are bad goals, but when we’re building sites in real life, we need to evaluate another goal: to make things easy for users.
Don’t slow users down. #
Sure, most sites have a little load time delay on each page. But there’s a world of difference between a second of load time and a second of load time followed by a half-second animation. Menus (especially on mobile) need to be quick too: don’t make users wait for a 5 pieces of a layout to shuffle like playing cards before menu links are available. I’m not against animation here, not at all! I’m recommending that we keep them subtle and fast. As Rachel Nabors cautions us, an animation can be “cute the first time but by the 70th time… It’s annoying!”
Don’t distract users. #
Button animations, amirite? You may have seen the recent demo page full of quirky, colorful button animations. In the demo, all the action happened on :hover. Please don’t do that. The point of a button is to encourage users to click and complete a task. If you put a 500ms animation on a button’s hover state, what have you done? At best, you’ve given people a reason to stop and watch the button … instead of completing their task. At worst, you distract and confuse them, causing some to fail to complete the task. Make your button :hover transitions subtle. If you absolutely must do something wild, do it on click. Your users are just waiting for feedback at that point. If you’ve got a meaningful animation, let them watch it then!
Don’t feel bad. #
We’ve probably felt some false guilt about flashy animations at some point. You launch a project and the next day, you see a tweet about a complicated UI animation that your project doesn’t have. Other times, that pressure is external: a stakeholder or boss gets their hands on an animation library’s demo page and tells you that you need that kind of “pop” to take your work to the next level. Please fight off this guilt. I know, it’s hard defending your work and educating people who want flash without understanding UI design.
Conclusion #
I’m not an animation expert (I’m doing what I can to learn!) and I’m not mad at any creative web animation demo sites (they’re a lot of fun and spark some great ideas!). I do want us to take time to design user interface animations that provide a good user experience. There’s no shame in avoiding the glitz and glamour if you’re giving your users instructive, helpful transitions.