How to Animate in UX (4 examples)

What is the first thing that comes to mind when you hear the word “animation?” Probably something to do with entertainment, i.e. cartoons (Teenage Mutant Ninja Turtles is my personal favourite) or animated movies. It may not be as exciting but there certainly is a role for animation in the world of UX as well.

Animation is used to explain a story. It describes how objects or people relate and what they are doing. We use Interaction Design in a similar way-to explain the relationship between a user’s action (click, drag, enter) and the result. Generally, these animations don’t need to happen. However, they create more of a story, connect the dots, and help guide the flow of the interaction (keeping users focused and informed).

4 examples (3 types) of animations.

EXAMPLE 1:

A board with different activities teachers can assign to their students.

We added the animation here as a way of avoiding monotony. Instead of all the activities loading in at once, they gradually fill in (in a fun way) while you scroll down the page. Although it is not necessary, the narrative here is, that the activities are flowing in-coming in from some (distanced) source (namely the server).

EXAMPLES 2 & 3:

Owl giving feedback on student answer.

We use animation here to essentially create space for the owl and it’s feedback. We could have simply moved the owl to the right and the answer to the left. However, this is a bit choppy and disorienting. Sliding the answer to the left and fading the owl in on the right is a much smoother experience. The narrative here is that the owl is responding (giving feedback) to the answer submitted-almost flowing out of it.

Greyhound fare selection.

Another space saving scenario. (Greyhound clearly wants you to go through 2 steps here and not have the selection of a fare take you directly to booking details). Instead of displaying the next set of options over the fares (instantly covering them), they smoothly slide it in from the left (however, the speed is a bit jarring). The narrative here is a little weaker than that of the previous example but describes the progression/flow of steps within the same page (slides in without a page reload).

EXAMPLE 4:

Books of a student and their classmates displayed

Animation is far more necessary (to explain the interaction) here than in the previous examples. The My Shelf and Class Shelf links bring up a page containing content (reviews, questions answered…etc.) relevant to that book. The sidebar on the left has a list of other books you can select, providing the ability to switch between books easily (instead of going back to the first page).

Animation is more integral here because after selecting a book the entire page layout changes and the narrative from the previous page has essentially ended. The user goes from looking at a list of books and now sees them on the left and the book selected on the right? What is going on? The answer is simple and perhaps obvious but without animation it indeed is a little confusing at first. We animate and move the original books list to the left (where the vertical books list appears) to show that they are one and the same (just displayed differently).

Animation is a great tool for keeping your users connected to your narrative. Identify some areas of your experience that are a little disjointed or slightly unclear and explore whether animation can help. Lastly, don’t forget to have a little fun with it :) .

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Oh, and give this a clap 👏!