Be careful with animation

Due to our work in the legal sector, we tend to keep an eye out for new site launches when they happen. One recent example caught our attention possibly for the wrong reasons.

First impressions were that they’d done a great job. Aesthetics are clean and modern, content appears well written and regularly updated, and, generally, it feels like the site of a dynamic, thought-leading company.

Part of the reason why I was given the impression of dynamism is the use of animation to introduce page titles. It draws the eye to the title and gives the site a modern feel.

However, it only took viewing a handful of pages before the animation started to become tiresome and once I’d got into double figures on the page count, I was shouting “stop xxxxxxx animating!” at my screen.

The site still works, the design and content are good, but as a website designer (in the broadest terms) the whole experience made me realise how important it is when designing to consider the entire user journey and not just the page “type” you’re working on. If people are repeatedly visiting a page like this, will a particular feature help or hinder?

This kind of feels like it should be obvious. But, I think the way we (and I mean most people who design websites) approach exploring design features for pages will only do it on a single example. How do we design an article page? How do we lay out a product page? And so on…

Of course, we prototype sites so that we can get a feel for the wider experience and give us something we can test. But, we’re unlikely to be adding animation, for example, to a prototype.

Personally, I think the way of avoiding a phenomenon like this should be as simple as ensuring we ask the question “how will this feature affect the experience of users who see the page multiple times?” during the design process.

In essence, I don’t think we should animate content. Don’t make me wait to view the reason I came to the page unless there’s a particularly good reason to do so. By all means, animate accentuators alongside content if you want to draw attention to them. For example, drawing in an illustration, an arrow, a border, but leave the content alone.

Marcus Lillington's avatar
Marcus Lillington
14 May 2019