Animation in web design doesn’t seem to be a hot topic at present, but at NBV we feel it’s important to give consideration to it whilst planning your website. This post isn’t about large flashy intro screens – we’re going to be talking about the subtle animations used to signify interactions between user and software, as well as the relationship between two or more elements of a page.

This type of animation falls more under the remit of ‘User Experience’ than ‘Information Architecture’, and after a discussion here at NBV we believe it shouldn’t be documented at the wireframe stage. Instead, animations should start to be defined in the interactive prototype, shortly after the wireframe. This allows it to work as a bridge between planning, design and development, giving all teams their say on the user experience.

To give you a real world example of where ‘animations’ help reveal the relationship between two or more objects, think of the classic trick where a magician hides something under one of three cups. The cups are shuffled and your brain monitors the movement of each cup to try to remember which one has the object underneath. Now consider the same trick but with no ‘animation’ i.e. the cups simply re-appear in their new position instead of being moved there. How would you even begin to work out which one had the object underneath?

To give you a good digital example of animation enhancing interaction between user and software, think about the dialog box that shakes left to right when a password is entered incorrectly. The animation mirrors the human gesture of a shaking head i.e. ‘No’ effectively enough to mean that ‘incorrect password’ doesn’t even need to be displayed.

With these two examples in mind, it’s exciting (well, kind of interesting) to imagine what could be used help to enhance the user experience of a piece of software. Consider sliding drop downs, loading bars and flashing alerts as a starting point. Don’t forget, though, to consider a user’s capacity for visual attention. People only have the ability to focus on a small number of objects and every additional requirement for attention reduces the focus on the others (hence the term ‘subtle’ in my opening paragraph).

So what are your thoughts? Can you think of any really good examples of where animation improves the user experience of a piece of software? Also, if all teams have a say in the user experience, who has the final say – information architect, designer, developer or project manager?