Building animations using narrative aesthetics
Animation plays an important role when building a user friendly interactive application. They can be used to create a visual flow, contextual overview, and help guide the user.
But great and user friendly animations are not just about adding a transition between point A and B, there is a bit more to it. Each animation should tell its own story and guide the user through the action that is being performed.
The principles used to build animations, which communicate change to the user in a meaningful and natural way, can be found in the narrative aesthetics that most stories (movies, novels, theater plays, poems, the list goes on) is build upon. The narrative model looks something like this:
The curve changes a bit depending on who you ask, but this is the model used in the danish educational system, so that is the one I’ll be using in my example.
To illustrate how the narrative model works I’ll use an example where the user clicks a button to add a new element to a list.
When using the model to build our animation, we have to take a few steps back and start before the actual animation, i.e. starting with the element that the user interacts with, which in this example is the button.
Setup
Creating a link between the interactive element and the action — In this case is about creating a visual link between the button and the list.
Presentation
The user is told which action is going to be performed — The button has a plus icon to indicate that the button adds an element.
Point of no return
When the user starts the interaction — When the user clicks the button.
Confrontation
This is where the actual animation starts, and the user is guided into the action that is going to be performed — The list expands to make room for the new element.
Climax
The actual action is performed — The new element is presented on the screen
Resolution
The action is ending — The new element slides in to its location in the list
The end result looks like this:
The result is an animation and UI that tells the user what to expect, guides the user through the action in a natural way and creates a contextual overview that helps the user see exactly where the new element is added. Avoiding surprises and confusion.
To further enhance the natural feel of the animation we could use easing functions in the animation — and that will be the topic of my next article.
It might seem like I’m putting a lot of thought into a very simple animation, and that might be true, but the principle I used in this example can be used in almost every form of animation and the idea is to give you a checklist of how to build a great and user friendly animation.
This was the first article in a series about using and building animations in an interactive application. The next one is going to be about using easing in animations, and i’m also planning to write one about animations and usability.
