A good UX designer can easily explain the logic behind each decision in a design concept. This includes the information architecture, the hierarchy of page content, the flow and the assumptions made.
Further reading on Smashing:
- SVG and CSS animations with clip-path
- Creating ‘hand-drawn’ Animations With SVG
- The new Web Animation API
- Practical Animation Techniques
- Designing Animations In Photoshop
- Fast Prototyping UI Animations In Keynote
Sooner or later, animation will be introduced to the wireframe concept, and then making design decisions or explaining them becomes harder. Reasons such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly the areas where a design starts to lose its strength. Animations deserve a far better ground in our design considerations. We should be justified in defining animations and explaining their purpose — just the same way that we explain all other elements in a design.
What Is Functional Animation?
Functional animation is subtle animation that we embed in a user interface design as part of our process.
Unlike animation made by Disney Studios or animation made for computer games, functional animation has a clear, logical purpose. Their purpose is to serve a design concept by supporting the solution we are trying to convey. Functional animation is yet another tool in our UX design arsenal.
In a perfect world, we should be able to validate functional animation against a well-defined set of logical purposes. If a certain animation in our design follows a logical purpose, then it is a valid functional animation and its existence in our design is probably justified. But if it fits no purpose, then it might be redundant and need to be reconsidered.
In the past year or so, while working on various projects, I’ve collected a family of nine logical purposes that today help me validate functional animation. I’ve realized that by examining a well-defined animation, I can easily fit it in one or more groups in this family.
It also works the other way around: When an animation doesn’t fit a functional purpose, it usually also feels awkward or annoying. Below are the family groups I have collected so far. I hope you find them useful in validating your own design animation.
Direction illuminates structure. In this group, we find animation that plays a role in our navigation, casting light on the website’s information architecture. The logic behind this type of animation is to maintain the user’s sense of orientation and to help the user comprehend the change that has just happened in the page’s layout, what has triggered the change and how to initiate the change again later on if needed.
A classic example is a button that toggles hidden content. When you click it, a hidden panel appears. And when you close the panel, it shrinks back into the action button.
The first time, a user cannot really predict an interaction that is about to happen. The opening animation of the hidden panel growing in size helps the user stay oriented and not feel that they have left the page or that content has suddenly vanished. They remain in control of everything that is happening. The closing animation helps the user associate the shrinking panel with the action button — so, the next time they will remember how to open the panel again.
Logical purpose: Avoid a surprising transition, and orient the user.