Home - Design in Practice - The Power of Animation and Storytelling in UX Design

The Power of Animation and Storytelling in UX Design

As human beings, we've always been fond of storytelling. Just think of campfire stories, Santa Claus, or that thrilling book you just finished. Here's how you can use the power of storytelling to make your designs better.
UX Storytelling Campfire Stories

We tell stories and love to listen to them. You could consider our dreams to be stories we tell ourselves. We dream about classic myths and legends, the things we want to achieve, about love and death. They are all storytelling motifs.

Table of Contents

Storytelling is very powerful

Just think of worldwide events like the Super Bowl commercials or the latest blockbuster movie. Everybody’s talking about it. Storytelling greatly enhances user experience. In fact, storytelling is a basic human need. It keeps us focused and motivates us to grow, express ourselves, and be creative.

We are all storytellers. If you skip to modern times you will see that storytelling is an even bigger part of our society. We have the means to do so and the audience to share it with all on the mobile device in our pocket.

Did you know that you can use storytelling as a part of your visual, UI, UX, or product design process to greatly improve the quality of your work?

Here’s how and why.

Storytelling as a design skill

You can use several different skills to work with storytelling. UX writing, for example, is the modern (digital) version of telling a campfire story to your audience.

UX writing is all about using the right words that resonate with your target audience. It has to be clear, inclusive, and useful. A picture tells you more than a thousand words, but sometimes you need to words also.

Other design skills that go hand-in-hand with storytelling are visual design, animation, and service design. For now, I will focus on animation.

The added value of storytelling in your design

Storytelling engages the user. An engaged user is far more likely to complete a task, register with your service, or return to your product altogether. Both storytelling and design help you to engage the user in a way that will benefit your business goals.

“Good design is where user goals meet business needs.”

Anyway, enough introduction. Here are a few ways you can use storytelling to improve your design.

Depict a theme

Does your product or your client’s product have a theme? Maybe a certain type of sport, a day and age, or in case of a restaurant a type of cuisine. You can make great use of that.

When talking about sports themes, for example, Dribbble makes great use of their theme. Dribbble is built around a basketball metaphor. Users are called Players and every image a player uploads is called a Shot. Imagine if you would remove all of that. A user would be just a user. You wouldn’t have to be drafted by another Player. You would have to be selected. That cool basketball loading icon would be just that. A basic loading icon. It loses something.

Having a theme in place adds to Dribbble’s success.

“The most powerful person in the world is the storyteller. The storyteller sets the vision, values, and agenda of an entire generation that is to come.” — Steve Jobs

Here’s what it comes down to. Having a theme in place and using it in your designs adds storytelling to your product. Storytelling engages your users. It is a great way to help users remember you and your product. The added business-related benefit is that users that remember your product are far more likely to return to your product.

Returning users are good for business.

An example

Design a golf-themed progress bar, for example. Imagine you’re running a golf course. You have a website and a mobile application for your guests. Your guests know about golf, obviously. It’s a great chance to improve user experience by implementing a golf-themed UI design.

Golf Course Progress Bar Animation

You could call your starting time the tee-off-time. You could call the restaurant next to the golf course The 19th hole. From an animation and UI design’s perspective, you could design the progress bar of a form element to look like a golf flag.

These are just a few examples of how storytelling can help you change your golf course from just another golf course to the golf course players keep returning to for more.

Use animation to guide your users in completing a task

There’s storytelling for the bigger picture of your products, like the previous point on themes. When you drill it down to actually using an application, the way users move through your application via the user interface (UI) tells a story, too.

Think of it as the user’s story, or the customer’s journey as it is more commonly known. The user signs up, logs in, completes a set number of tasks, and logs out. That’s the user’s story of your application. Your user goes through his story via the UI. User interfaces can be overwhelming. Both for you as a designer to create the UI and for your users to use it. Especially if you’ve never used the particular UI before. There’s a lot to look at.

“The user is the hero in their own customer journey. You’re the Obi-Wan, Dumbledore or Gandalf to their story.”

You can help guide your users by using subtle movement in your elements. As a designer, you know the steps the user must take to complete his story because you helped design the steps. You can assist by providing subtle cues and tips in your UI that helps your users in completing their journey. If you do, you help your users in completing their tasks. These tasks include submitting forms, purchasing products, or registering with your service. All of which is good for business.

An example

You can make an element your users must drag and drop bounce a little bit in the general direction of where it should be dragged. It helps to point your users in the right direction.

Animation Motion in Storytelling

It is very subtle. If you can do it by combining this suggestion with a theme you’re doing even better.

Create a character

Give your design a face. Use the storytelling theory of archetypes. There are multiple storytelling archetypes you can choose from, but for this example, we’re going to go with the hero-archetype.

Each archetype has his own use, so be sure to read about archetypes well. A hero, someone with his own story, is a great way for your users to empathize. You can use your hero’s story when your users hit a bump in their journey through your product. Users will drop out of your application at points of resistance. If you tell a story, you provide your users with a lifeline. If they can relate to your character’s struggle, they might just complete their task.

“The user is the hero in their own customer journey. You’re the Obi-Wan, Dumbledore or Gandalf to their story.”

Once again, users that complete your tasks stay in the loop and might return to your application or service, which is good for business.

An example

We’ll take another look at a sports theme. The golf course’s front desk application has a list that shows reservations for a certain day.

Hanniball the Golf Ball

The design of an empty state UI (that which is shown when there are no items on the list) above is a lot of fun, even though it’s an undesirable outcome for the user. The hero of this design is the golf ball. Let’s call him Hanni-ball the Golf Ball. Hanni-ball is trying to sleep on the golf course. He can because there are no reservations. He does not want to be hit in the head by a big swinging golf club. To make sure he’s safe, he checks every once in a while.

Using a hero and his story in your design helps to turn an undesirable outcome into a fun experience for your users. Users can relate to Hanni-ball (who wants to be hit in the head by a golf club anyway?)

How to get started on using storytelling in your UX design work

Using animation and storytelling is a great way to improve your design. It will help your users and in turn, will help your clients. Whether it is to give meaning to your design or to help guide your users on their own story, it works. You’ll be able to greatly enhance the user experience of your products.

Here’s a list of steps you can undertake to get started on your own journey, in addition to the aforementioned tips.

  1. Research your client’s niche. Are there storytelling principles in place? Are there opportunities for you to introduce storytelling?
  2. Define what your client wants and needs. How can you deliver?
  3. Define the customer journey.
  4. Apply the tips from this post.

Good luck!

About the author

Hi! I'm Nick Groeneveld, a senior designer from the Netherlands with experience in UX, visual design, and research. I have completed a wide range of projects in finance, tech, and the public sector.

Take a look at Nick's LinkedIn and Medium for more.

Was this post helpful to you? Share it with others!