Emotional Design and Animations

Emotions allow for people to comprehend the world better; it’s how we learn new things. Items that are more aesthetically pleasing are seen in a more positive light; the item appears to be faster, more effective, more fun, all in all better.

Because of the simple visual appeal, the person connects with that item on an emotional level and creates a bond with it. The opposite is also true where a person can create a connection of strong dislike if an item is unaesthetic. It’s a concept explained by Don Norman in his book Emotional Design. Emotional design as explained by Don applies to physical objects but it can also be applied to digital interfaces.

Emotional Design and Digital Interfaces

There are certain apps on your phone, which you just love to use. People fell in love with Angry Birds because it was a different kind of game, it had funny sounds and effects – it made people laugh and it was fun. That’s an emotional bond created through emotional design. There are some apps which you may be totally indifferent about such the Messages app or the Camera app. That’s because there is nothing within it that’s special. It’s just an app.

There are also apps which you simply hate using because something about them brings out a negative emotion. It could be your email app because answering emails stresses you out; it could also be your weather app because it’s hard to figure out how to see a 10 day forecast instead of a 3 day one. It can be an app’s fault for having terrible functionality or because you dread its own content.

Emotional design is a great way to make the overall experience more delightful. Animation is one way to speak to your users; there are two more actually. You can read about them in this post titled Three ways to design a delightful user experience. In this post, I want to explore how animations can be used to spark a positive emotional response from users.

Positive Effects of Using Animations

There are three things that animations do. First, animations provide a personality. This, in turn, fosters a relationship between your user and your design. Lastly, all this creates a better experience for the users. Let’s analyze each one of the effects to understand them better.

Creating a Personality

Including an animation within a design can bring it to life and breath personality into it. A typical interface doesn’t have a lot of animations going on. There are no transitions, nothing bounces or fades in. Most websites or apps are stale by default. When you introduce an animation things are different because now you have something happening. It’s that simple.

There are a lot of various animations you can put on a web page or an app. Each animation will have a different effect. For instance, if a button bounces when it’s clicked it can be considered fun and playful. This may not be necessarily what you’re after if you want your website to have an elegant feel. If that’s the case that’s okay try fading in an element it will provide elegance and not be considered as playful. Animations can evoke all sorts of emotions including quirky, delightful, funny, pleasant, neat or charming. It all depends on what the animation is and how it behaves.


Fillet is an advertising agency with a creative portfolio. The animations make this website fun; they give Fillet’s website charm and playfulness. Imagine if you scrolled down this page without the various animations like the shifting letters or moving background colours – it would be boring.

Emotional Design and Animations 1


At Ducklefeld’s homepage there are small and subtle animations placed on the ‘Projects’ button as well as the links within the navigation. The background on the button fills in and the navigation link text flips while the thicker underline slides over. It’s nothing special actually, but they give the website a more sophisticated and well put together feel. It’s incredible how such simple of a thing can create such great emotions and vibes.

Emotional Design and Animations 2

Creating a Relationship

Once you have evoked a certain emotion though an animation creating a relationship between your users and your brand will be much easier. Emotions are how people connect with things so if a user feels delighted or feels that your design is pleasant it’s a fantastic gateway to creating a relationship. Emotions of the design will be reflected upon your brand and a user won’t form the connection nor the relationship with your website. Instead, they will form it with you because the website is a reflection of your brand. A few fade in transitions to show off your website are just as elegant and your brand can go a long way.

The Creative Class

The whole website is a creative gem. It’s well crafted and the animations are quite unique. When you move your mouse the names of the people involved in the project appear and you can choose whom you’d like to learn more about. The subtle animations are spectacular. Because the website feels like it’s well put together and well thought out, a user will assume that so is the project the website represents. That’s how relationship reflection works when emotional design is involved.

Emotional Design and Animations 3

Push Here

When you scroll along the individual project pages the various elements on the page fade in and ease in. It works perfectly for those long case studies because they help tell a story. The animations aren’t anything extravagant; they are just fade in transitions. Yet, a visitor feels engaged. This reflects well upon the agency where I feel like the company, Push Here, is telling me a story about a project they did. I feel like I’m having a wonderful conversation with them and that is how relationships start.

Emotional Design and Animations 4

Creating a Better Experience

Animations in themselves are a design element, which enhances the experience. When there is a transition or a transformation of sorts, like a bounce of a button or something easing in, it’s no longer a dull interface. Animations are improvements of a design and an interface. Adding a personality and crafting a relationship is a better experience than when those things aren’t around. An emotionless experience is typical on the web and within apps; it’s boring and not special. Emotionless experiences are plenty so when your design has emotion it’s a marvelous change for the users and visitors.

Let’s think about it in a different way. When you interact with someone you know and like, it’s a good experience. No? When you talk with a good friend versus someone you just met you’d have a better time talking with your good friend as you already have a relationship with him or her. The same can be said about designs that foster relationships. At the same time when you have a conversation with two strangers your experience is better than with the pleasant and charismatic stranger. The same can be said about designs, which showcase personality. Animations are here to improve the user experience of your design.

Virgin America

Take a look at Virgin America’s landing page. Before launching the redesign the company launched a landing page explaining the redesign for the design and developer geeks out there. It’s a wonderful page actually but notice as you scroll the different images ease in and slide into their positions. This makes the overall experience better. The transitions are friendly and without them the experience wouldn’t be the same.

Emotional Design and Animations 5

Bright Media

Within this website animations are a key component. They make the home page amazing. As you scroll the lines connect one section to the next, the background shifts with the mouse movement a little and the various colour strokes fade in as you enter each new section. Without those animations the experience wouldn’t be as eccentric or exciting. The animations make the design of this page and in turn make the experience.

Emotional Design and Animations 6