Functional Animation in UX Design

A paraphrasing of Smashing Magazine's coverage of Function Animation. View the original article for great examples of each animation type.

Functional animation is subtle animation that we embed in a user interface design as port of our process. Their purpose is to serve a design concept by supporting the solution we are trying to convey. Functional animation is yet another tool in the UX design arsenal.

In a perfect world, we should be able to validate functional animation against a well-defined set of logical purposes. Animations that belong to one or more of the following groups is justified.

Orientation

Logic:

Maintain the user’s sense of orientation and to help the user comprehend the change that has happened in the page’s layout, what has triggered the change and how to initiate the change again later on if needed. Avoid a surprising transition, and orient the user.

Example:

Button that toggles hidden content. When you click it, a hidden panel appears. When closed, it shrinks back into the action button.The user stays oriented and not feel that they have left the page.

Same Location, New Action

Logic:

Emphasize a functional change in an action button.

Example:

Animated toggle b/w save and edit.

Zoom In

Logic:

Associate a thumbnail w/ its detailed view. The challenge here is to make sure the user feels they are still in control and remain in the given context.

Best practice pattern-

1. The initial state is the original list of items
2. Each item is designated w/ a visual cue (e.g. Dominant color, a symbol, bold title, or thumbnail image)
3. When the user makes a selection, a new page is create and the selected visual cue is relocated to a prominent, dominant position.
4. A noticeable action button to dismiss appears in the new page, such as “Cancel” or “X”.

Example:

Zoom in menu like Mr. Holmes Bakehouse

Visual Hint

Logic:

Hint to exhibit unconventional functionality or a hidden action.

Uguru Use Case:

Website- Card flips on category page

Highlight

Logic:

Assists users when there is a need to rise above a noisy layout. Grab the user’s attention. Motion has the highest level of prominence in a user interface (text and static images simply cannot compete!)

Simulation

Logic:

Simulate topics that are otherwise hard or too abstract to convey.

Visual Feedback

Logic:

Acknowledge the user’s action. Needs to be subte and designed responsibly.

System Status

Logic:

Impart a sense of control in linear process.

Best practice pattern-

1. Show clear feedback to indicate that the process has started.
2. Present ongoing feedback while the price is in progress.
3. Estimate the completion of the process (spinners suck for this).
4. Show clear feedback that the process has finished.

Example:

Pull down to refresh on snapchat.

Marketing Tool

Logic:

This one is for the emotions. Support a company’s brand values or highlight a product’s strengths.

Best practice pattern

1. Indicate a product behavior
2. Highlight a particular feature
3. Promote a unique capability
4. Bundle a brand’s values and style

Example: Onlycoin website parallax

Uguru Use Case:

The education system is broken. Here are students in the trenches making it better.

In Conclusion

When it comes to providing to pleasure or delight in our website and apps, animations contribute a lot. But always remember they must be functional first.