Web animation competitor review

Question

I've been asked to do a competitor review and one of the things I should focus on is use of animations. It makes sense, since it's so popular nowadays. Problem is I can't pinpoint which parameters I should use.

I read some articles online, including Material Design, and picked the following:

• Doesn't compromise usability
• Guides users
• Follows the laws of physics

Gave a grade of -1 to 1 to each site we liked. However, most of them broke the rules. This discrepancy made me wonder what makes a good web animation? Are we still in experimental phase where there are no rules? Is that what makes an interesting web animation? What about usability?

I don't want to start a debate or write a dissertation on my report, I just want some basic parameters so we can have a direction in case there are few resources.

Answer 1

I can suggest to listen to Motion and Meaning podcast hosted by Val Head and Cennydd Bowles. Episode 2 in particular focuses on laying out basic principles, but all 10 episodes are absolutely worth listening.

You are right about that animation for the web is in the stage of experiments, but it does not mean that there no foundation web animator should utilize, for example principles developed by cartoonists since 1930 should be pretty much applicable today.

Answer 2

I'd say good aesthetic and motion standards of animation still hold, as noted in the previous answer.

As for functional standards, I think you've hit on two of the most important considerations: first, if the animation is not functional but decorative, that is fine - animation can lend badly needed personality to and online experience. However, the most important consideration is to make sure that sort of decorative animation does not in confuse the user or get in the way of usability.

Second animation can be used very well to aid usability, especially when it comes to indicating an action for the user or identifying targets or intentions. For an excellent example of animation used well in an app, check out the Clear app. It uses lots of animation around adding and arranging tasks in a list, but all of it is very functional, very smooth, and helpful in the overall flow.

Rating entire sites might be doing you a disservice, you may want to focus on the animation of certain pages or elements of those sites; they could do some things very well and other things badly. I would take your inspiration from the elements you see rendered well.