Functional Animation in UX Design

[[149375]]

A good UX designer can easily explain the logic behind any design decision, including information architecture, content hierarchy, flow, etc.

One day, motion effects will be introduced into product concept prototypes. At that time, it will be more difficult for designers to explain the design ideas in the prototypes. "This motion effect is very cool~", "It's very down-to-earth~", "The effect is amazing" will be the only comments they say.

What is functional animation

As part of the design process, subtle functional animations are deeply embedded in everyday UI design.

Functional animation is different from the animation designed for Disney Studio or computer games. It has a clear and logical purpose and is designed to support the design solution we are promoting.

Ideally, we can verify the feasibility of these functional animations through a set of perfect usage principles. In the past few years, I have been involved in various projects. In this process, I summarized 9 types of animation principles. If a certain animation in our design follows one (or more) of these principles, it is an effective functional animation and can be applied to the project.

If a functional animation doesn’t adhere to these principles, it’s probably redundant and should be used with caution; it can often feel annoying and clunky.

Below are all the uses I have collected so far. I hope it will be helpful for your motion design and verification.

Orientation

Direction clarifies structure. In this type of principle, animation is used to navigate between interfaces and show the direction of the web page information architecture. The logic behind this type of animation is to help users perceive their position in the page flow, understand the changes on the page, what triggers these changes, and how to trigger them again if necessary.

A typical example is to trigger the "show/hide" content through a button. When you click the button, a hidden panel will be displayed. When you close the panel, the panel will "shrink" back into the operation button.

The user cannot predict what the result of this interaction will be when using it for the first time. The ever-increasing expansion effect of the hidden panel will help the user maintain a sense of direction, so that he will not feel that he has jumped out of the current page or the content has suddenly disappeared. The closing effect allows users to associate the constantly "shrinking" panel with the action button, so that they will remember how to open the panel next time.

Usage: Avoid abrupt transitions and help users orient themselves.

Apple Mac OSX window animation

Facebook Paper menu animation

Same Location, New Action

There is a well-known usability principle, which is to make the product consistent (Translator's Note: consistency in design and function). A website (product) that maintains good consistency can reduce the user's learning cost and make the content and interaction predictable. In addition, this principle also applies to action buttons.

In some cases, we were forced to change the functionality of a button under certain conditions, usually in designs where overall space was limited, so users who already understood the button’s original functionality might need to learn a new one.

The "Save" and "Edit" buttons are the most common toggle buttons. This is the simplest case, because as long as the definition of the button is opposite (Translator's note: for example, "Add" becomes "Remove" after clicking), it means they are in the same scene. In other cases, when the two actions have no direct surface connection, it is a usability problem, and at this time, you need functional animation.

Usage: Emphasize the function switching of the operation button.

Google material design Button mute switch

Zoom

The third type is similar to the "positioning" type. In this type of animation, the user selects an item in the list view to zoom into the detail view (covering the original list view), and can return to the list view.

Commonly used in albums, cards, and item selectors. The user selects an option and immediately sees the corresponding detail view.

The difficulty with this type of animation is that you need to make sure the user feels like they are still in control and not out of the scene. In this case, functional animation is essential.

After using this type of functional animation a lot, I have summarized some general rules that are effective if strictly followed:

• The initial state of the animation is the original list view;

• Each option is assigned a visual clue, which can be the theme color of the app, a symbol, a bold title, or a thumbnail.

• When the user makes a selection, a new page is created and the visual clue is moved to a new prominent position. For example, the entire page can be filled with the option’s unique color; the option symbol can be enlarged and moved to the page title; the option name can be enlarged and displayed as the page title;

• A prominent action button for exiting the new page, such as "Cancel", "Close", "Back", or "X".

Usage: Associate the preview view with the detail view.

Visual Hint

Visual metaphors help users better understand how to interact with product interfaces, especially those with non-mainstream components or special navigation systems.

This type of functional animation is easy to find. When we open a page, a one-time animation will be triggered immediately and demonstrate how to use a certain function.

Usage: Provide hints for infrequently used functions or invisible operations.

Source: Dejan Markovic

Highlight

This type of animation helps users make effective operations in an interface full of complex elements.

Designers usually try to avoid designing complex interface layouts—filling the screen with multimedia—that constantly compete for the user's attention.

One way to reduce noise is to simplify, but sometimes this is an impossible task. Imagine asking the owner of a news website to remove the text content module of the news and the picture column on the homepage...

In the UI interface, "motion" has an important characteristic, which is that it is the easiest to attract attention, and text paragraphs or static images cannot compare with it. We can use this to design motion effects. However, please remember that the easiest to attract attention is also a kind of "interference". If abused, it is equivalent to adding noise to the interface.

Usage: Attract users' attention in a complex interface.

www.Photojojo.com

#p#

Simulation

Sometimes, through data analysis and user interviews, we find that certain user needs can only be met by customizing a specific interface.

For these special use cases, we can consider designing a custom functional animation. Common methods are difficult to fully implement certain unique cases.

Usage: Suitable for those scenarios where it is difficult to express the meaning.

Source: Monterosa

Visual Feedback

Visual feedback is very important in UI design. In real life, buttons, controllers, and other objects respond to user interactions. This is how users expect things to work.

But please remember that this type of functional animation should be as "low-key" as possible and designed to be easy to understand. Button feedback is widely used in every UI interface, so if you abuse unnecessary animation, it will backfire.

Usage: Respond to user actions.

Similar to this is Tumblr

System Status

This category is all about “control”. For the user, “control” means being able to perceive and understand the current context of the system at any time.

Functional animation monitors the system status in real time, allowing users to quickly perceive the start, remaining time and exact completion time of an operation. Perhaps the first functional animation that meets this requirement is the "daisy" GIF of an HTML page, which is still widely used in some operation instruction interfaces.

High-quality system status function animations usually follow this pattern:

• Demonstrate clear feedback once the process has begun;

• Provide feedback as the process progresses;

• Estimate progress towards completion and provide feedback;

• Provide success or failure feedback after the process is completed.

There is a very famous animation "pull down to refresh", which belongs to this type of animation. On mobile devices, it is often used to trigger content refresh. Check it out in several different types of apps, and you will find that these animations do not fully follow the above 4 steps, and they feel weird. For example, lifting the interface to end the process without clear meaning will cause the user to trigger the pull down to refresh again.

Usage: Communicates the controllability of an operational process.

Pull-down refresh on Yik Yak App

Marketing Tool

Although this type is only related to marketing, it already has a lot of interesting animations. The previous 8 types all seem to be linked to rationality and logic, but this type is only related to sensibility.

Suppose we need to define a product’s behavior, highlight unique features, or even bundle brand values ​​and style.

In these scenario scripts, although these methods are not necessarily designed with users in mind, they have clear functional goals that can meet the company's marketing strategy.

Usage: Helps highlight the company's brand value or the strengths of its products.

[[149383]]

Source: Creativedash

Summary : Adding motion to our websites or mobile products can bring a lot of surprises and pleasure to users, but please remember that form follows function. Do not abuse motion if it is useless and not for the sake of satisfying actual functional needs.