Val Head - Designer, Consultant and Speaker.

What Are Your Transitions Saying?

UI animations can be a lot of things. The best ones are lovely and elegant (yay!), but often times they just kind of miss the mark (blah.). Animations are at their best when they help reinforce your message but when the motion doesn’t fit the design, things feel off.

A Tiny Apple Faux Pas?

One example of this (one I’m always a little surprised to see is still there) is Apple’s mac product menu. The animation is exaggerated as each product bouncily scales into place and then zips off out of sight to make its equally bouncy exit. The products move in and out more like happy dancing muppets than the sleek streamlined products they really are. The animation really doesn’t match the personality of the product, or the brand for that matter. That makes it stand out for the wrong reasons.

apple-odd-motion

This mis-matched motion isn’t going to stop anyone from buying their next applething, and it doesn’t render the whole design a failure. But it is a missed opportunity to use a consistent voice across all aspects of the design.

We see this all the time, it’s certainly not just our pals at Apple. Transitions that stand out because they don’t fit with the mood of the site that they’re on. As if they were designed in a vacuum and plopped into the design at the very end of the process. Not exactly a winning recipe by any stretch.

And Then, Dots

On the other hand, look at UI animation in the game Dots. The transitions applied to the menus and settings screens echo the motion found in the game.

dots-short-for-web

The animation, even while you’re just editing settings, fits the mood of the app and reinforces its brand and message by using transitions that echo the ones you see during game play. Pretty clever, right? You could say that they really dotted the i’s and crossed their t’s when it came to the animation. (Pun totally intended, even if it is a rather silly one.)

You can almost picture a conductor conducting each bit of motion to ensure each fits into the bigger picture. In fact, it fits so well, you may have hardly given it a second thought until someone pointed it out.

What are your transitions saying?

A key part of designing good UI animations is remembering that adding animation is an opportunity to communicate a little something more. Any motion you add is going to communicate something; it’s really more a question of whether it’s saying what you’d like it to say.

7 Comments

Marcella Chamorro Says:

Thanks for this. 100% worth going back to study the details of the animations in what I’ve built. Great reminder to back and check back in on the details…

val Says:

You’re welcome :) Glad it was helpful!

Mick Says:

Well considering that Apple still doesn’t even have a responsive site (wtf, it’s 2013?!) it doesn’t surprise me that they’re still using those tired animations.

Rachel Stock Says:

Very good point. Transitions/animations are such an important part of communicating your message, too often people just add them as an afterthought or ‘decoration’.

Nicolas Says:

Nice topic here. Most of the times me (as front-end dev) try to push myself to create better ways of animating some pieces of functionality. However, like your Apple example, it just doesn’t fit with the content and it’s context. Would love to see a site with successes and failures on transitions :)

Marcos Zanona Says:

Excellent point here. I believe sometimes we just want to make things more lively with animations just for the sake of not being “static” but end doing something which is irrelevant, being wise on the kind of animations used is definitely something which should be designed as the rest of any part of your project. Thanks for the article.

tomByrer Says:

Reminds me of why there are curated lists, like animate.css

https://github.com/daneden/animate.css

Comments: