Functional Animation: A Powerful Design Principle
As a product designer whose goal it is to create a great user experience, your objective is two-fold. You want your product to:
- Be simple and easy to use
- Have a sleek and modern look
I have found that functional animation addresses both of these goals, while at the same time guiding the user through the product in a way that is both fun and engaging. In product design especially, usability is extremely important. From a UI standpoint, various techniques can be used to direct the user’s focus to help them understand the purpose of the screen and to complete tasks. At a very high level, this involves arranging graphic elements in relation to each other using different in sizes, shapes, colors, etc. Animation stands out above other principles, however, because it offers virtually limitless possibilities for enhanced usability solutions.
So how does this work?
Let’s take a look at how a simple form field can be affected by the use of functional animation. Below we see a scenario where a user is logging into an application and experiences a form field error.
In this first example we aren’t using any animated graphic elements. The form fields abruptly pop into view. When the user types in their credentials and hits submit, the error message is revealed.
Let’s see how functional animation can enhance this composition’s usability.
In this next example we see the same screen with animated graphic elements. Before the form slides a loading indicator lets the user know that a change is about to take place. When the user selects a form field, the line lengthens and changes color to assure the user that they are in the right field. The placeholder text also stays in view and animates upward to remind the user what information they need to provide. As the user selects the next field the line length and color changes again. Simultaneously, the stroke around the submit button animates to an active state communicating to the user that they have completed the necessary tasks and are able to advance to the next screen. When the user hits submit the button animates again into a red circle with an “X”. The form field that was incorrect also turns that same red color and shakes. The shaking motion is familiar to the user because it subliminally replicates a conversation between two people where one is disagreeing with the other. The user should then know exactly which field was incorrect.
What did we learn?
When done correctly, implementing functional animation into your design process can enhance the usability and clarity of even the simplest tasks. The fact that there are virtually limitless possibilities for leveraging it makes animation perhaps the most powerful design principle.
Next steps
If you’d like to get started implementing functional animation into your current design process there are many tools to help you do so. Although programs like After Effects are considered the gold standard for motion graphics, I have found software like Principle for Mac or Flinto to have a much lighter learning curve.
Here is my favorite site to download Principle source files:
