Deciding what to animate as a designer can be difficult, particularly because everything you do has to be expressed in code. And not everything can be. This post is the first in a series that aims to help you identify some things you might like to keep in mind when designing for interactions:
Time & Money
Every animation you add to a site costs money. This is because developers will have to spend time coding the animation. So the first step in analysing what can animate is a budgetary one. You could ask:
- How much value will this create for my client?
- What positive effect will this animation have on the users?
- Can I sell this to my client?
Performance
The length of time it takes for a website to load can have a huge impact on its ability to do its job. There have been studies conducted by Google that clearly show people are willing to wait an average of 3 seconds before giving up and shopping elsewhere. Your developer will have some influence over this factor, but as a designer, you are also responsible for designing with performance in mind.
Appropriateness
Animations can go from being awesome to being gimmicky very quickly. If it’s too slow, too fast, it can become obnoxious and turn people off. Often, subtle animations that don’t shout too much, or ones that help users connect UI elements, work best. Just because it can be done doesn’t mean it should be.
Telling a Story
Marc Davis, animator at Walt Disney Studios, is famous for saying that “animation had been done before, but stories were never told.” Animations can tell a story like no other medium. It can profoundly affect people, causing them to form an emotional attachment to the subject. This powerful force can be leveraged in a pleasant and non-creepy way by the effective use of animation.
Section 2: Important Considerations
a) Don’t Hide Important Stuff
It can be tempting to hide UI elements and reveal them when a visitor’s mouse hovers over them. Whilst this is a cool effect, it can be a hazardous practice: it can hide content that should be obvious to people. If an image links to another page, it should also display a clear label indicating where it will take you. Otherwise, many people won’t be able to find it. Also, what happens to that element when the user has no mouse with which to hover? For example, they’re using their keyboard to navigate, or their thumb on a touch-screen device.
This is what you see when you hover over the image
Your user might say: “Ah, a nice translucent overlay with some information about this post. I could click on that. Yes I think I might.”
How do I know what this is?
Your user might say: “I’m skeptical that this is anything but a nice image to look at. I might try to hover over it, but my trust in this UI element is already diminished.”
Give us a clue!
Your user might say: “Ah, so this is a post about something I’m interested in, what happens if I hover my mouse over it? Oh! it’s a link, okay let’s go.”
b) Don’t Make People Feel Sick
This goes well with what we said about “appropriateness” above. Some people have a sensitivity to motion that goes beyond the lurch of a boat in a rough sea. Being careful to plan for this segment of your visitors will widen the opportunities the site has for kaleidoscopes and other visually appealing motions. Still, they can easily make a person feel nauseous or, in extreme circumstances, result in seizures. They and their families might never come back if it does.
See the Pen Graphemescope in Action by Alexey Taktarov (@molefrog) on CodePen.
Section 3: The Illusion of Life
Physics tells us that for every action, there is an equal and opposite reaction. We expect objects in our environment to follow these rules. If something doesn’t fit this pattern, it will be jarring. 10 broad principles have been established, originally by Walt Disney Studios, which convey the illusion of life to an animated element.
Above: 10 Principles of Motion Design.
It’s a little beyond the scope of this document to describe these interactions. There have been books written about animations. Designing Interface Animations by Val Head is my favourite. It’s not overly complex and doesn’t require extensive coding. Instead, it demonstrates the various ways animation can be utilised to generate interest and facilitate goal completion.
In this post, we’ve highlighted some key considerations for designing animations. As you have seen, animations can add value to any project, provided they are tasteful and don’t hide important information.
In the next post, we will examine some examples of animations, their potential completion times, and the difficulty of implementing them on a site you are designing.