Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Functional Animation In UX Design

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: Link

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? Link

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.

Orientation Link

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.

Example Videos Link

Same Location, New Action Link

A well-known usability rule is to be consistent in both the design and content of a website. A consistent website is predictable and, therefore, learnable. This rule applies to action buttons, among other things.

In certain cases, we are forced to design an action button whose functionality changes under certain conditions. We usually see this in designs where overall space is limited. Thus, a user who has learned the functionality of an action button may need to learn new functionality.

“Save” and ”Edit” buttons are probably the most common example of switchable buttons. But this is an easy case because, while the actions are contradictory, they have the same context. In other situations, when the two actions have no immediately apparent relationship, we face a usability challenge. That’s where functional animation can help.

Logical purpose: Emphasize a functional change in an action button.

Example Videos Link

Zoom In Link

The third family has some similarities with the orientation group we saw earlier. In these animations, the user selects an item in a list to zoom into its detailed view (which overtakes the list view) and is able to go back to the full list view.

We commonly see this in image galleries, cards and item selectors. A user will select an item and will immediately see the detailed screen that is associated with that selection.

The challenge here is to make sure the user feels they are still in control and remain in the given context. Functional animation is usually a must in this situation.

In examining numerous functional animations in this family group, I’ve noticed a common pattern that, when implemented accurately, enhances the animation’s effectiveness:

  1. The initial state is the original list of items.
  2. Each item is designated with a unique visual cue, such as a dominant color, a symbol, a bold title or a thumbnail image.
  3. When the user makes a selection, a new page is created and the selected visual cue is relocated to a prominent, dominant position. For example, the entire page might be colored with an item’s unique color; the item’s symbol would expand and be positioned in the page’s title; the item’s name would get bigger and appear in the page’s title.
  4. A noticeable action button to dismiss appears in the new page, such as “Cancel,” “Close,” “Back” or “x.”

Logical purpose: Associate a thumbnail with its detailed view.

Example Videos Link

Visual Hint Link

Visual hints assist users to better understand how to interact with a product’s interface. It is especially needed in designs that contain an unconventional object or a unique navigation method.

This kind of functional animation is easily detected when we open a page and a quick one-time animation is suddenly triggered that demonstrates how certain functionality in the design operates.

Logical purpose: Hint to exhibit unconventional functionality or a hidden action.

Example videos Link

Video credit: Michael Martinho8

Video credit: www.buildinamsterdam.com9

Video credit: Dejan Markovic10

Highlight Link

This family group assists users in those unfortunate situations when there is a need to rise above a noisy layout.

Designers usually strive to avoid noisy layouts, which load the screen with various pieces of textual and visual content that compete with each other for the user’s attention.

One way to minimize noise in an interface is by removing clutter. However, sometimes this task is not so trivial. Consider a news website whose owners want to remove pieces of textual news or images from the home page.

Motion, by its nature, has the highest level of prominence in a user interface. Neither text paragraphs nor static images can compete with motion. We can take advantage of this with this functional animation group. Remember, though, that increasing interface noise by adding an object with a higher level of prominence is a slippery slope.

In the animation sample below, we see that the addition of an item to the shopping cart is not noticeable enough due to the crowded background. So, animation is needed.

Logical purpose: Grab the user’s attention, and rise above a noisy layout.

Example videos Link

Video credit: www.Photojojo.com11

Simulation Link

Sometimes during design analysis and user interviews, we find that users have a need that we can address only with a tailored simulation.

For these special cases, we would create a customized functional animation. In the example below, soccer analytics are presented in a way that figures, numbers, tables and graphs could never compete with. In the second example, the user can monitor temperatures on a map according to time and geography — a particular use case that could hardly be addressed any other way.

Logical purpose: Simulate topics that are otherwise hard to convey.

Example videos Link

Video credit: Monterosa12

Visual Feedback Link

Visual feedback is extremely important in user interface design. In real life, buttons, controls and objects respond to our interaction, and this is how people expect things to work.

But remember that functional animation in this family group needs to be very subtle and should be designed responsively. Button feedback is extensively used in every interface, so using functional animation where it is not really needed will cause more harm than good. On touch devices, functional animation can be most beneficial as a substitute for rollover effects.

Logical purpose: Acknowledge the user’s action.

Example videos Link

Video credit: Google material design13

System Status Link

This group is all about control. For the user, control means knowing and understanding their current context in the system at any given time.

Functional animation provides real-time monitoring of system status, enabling the user to quickly understand when an action began, the time remaining and exactly when it has ended. Perhaps the very first functional animation that served this role in HTML websites is the spinner GIF, which is still being used in many interfaces to indicate an action in progress.

Effective functional animations in this family group usually follow this pattern:

  1. Show clear feedback to indicate that the process has initiated.
  2. Present ongoing feedback while the process is in progress.
  3. Estimate the completion of the process (a step, by the way, where spinners fail).
  4. Show clear feedback that the process has terminated.

A well-known animation in this group is “pull down to refresh,” which initiates a process of content updates on mobile devices. Examine the implementation of these animations in various applications, and you will soon notice that animations that do not fully comply with the four steps laid out above feel wrong. For example, uncertainty arising from the lack of clear feedback that a process has terminated could prompt the user to initiate the refresh action again.

Logical purpose: Impart a sense of control in a linear process.

Example videos Link

Video credit: Yik Yak App14

Marketing Tool Link

This group is all about Marketing — and it’s got some fun animations! Whereas the previous eight groups in our family of animations are quite logical, this one is full of emotions!

Suppose we need to indicate a product’s behavior, highlight a particular feature, promote a unique capability or even bundle a brand’s values and style into a product.

In any of these scenarios, an animation might serve the company’s marketing strategy well. The approach might not be clearly user-centered, but it definitely has a functional purpose.

Logical purpose: Support a company’s brand values or highlight a product’s strengths.

Example videos Link

Video credit: Creativedash15

Video credit: www.Bellroy.com16

Summary Link

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

Aarron Walter of MailChimp writes about the hierarchy of user needs in his book Designing for Emotion. It’s similar to Maslow’s hierarchy of needs, but rather than describing our personal needs, Aarron describes our needs as users. Walter’s hierarchy positions the functional need as the base of the pyramid, while the need for pleasure is up on top — and applicable only if the base has been fulfilled. In this article, I’ve dealt only with this functional base, without going into aspects of pleasure and delight, which deserve an article of their own.

So far, I’ve compiled a family of nine rules. These nine rules map well to every animation I’ve encountered so far. They help me to assess animations that I see in interfaces, and they are a strong set of guiding principles in deciding how to add animations to a wireframe design. I hope they serve you in your design process in the same way they serve me.

However, this research is in progress. So, the next time you come across a functional animation, go ahead and test it against one of these nine groups. If it doesn’t neatly fit any of them and the animation has a clear purpose, share it with us, maybe you have found the tenth family of rules!

(cc, ml, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/
  2. 2 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  3. 3 https://www.smashingmagazine.com/2014/11/the-state-of-animation-2014/
  4. 4 https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
  5. 5 https://www.smashingmagazine.com/2011/10/quick-look-math-animations-javascript/
  6. 6 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
  7. 7 https://www.smashingmagazine.com/2015/08/animating-in-keynote/
  8. 8 https://dribbble.com/shots/1964352-Tasking-App
  9. 9 http://www.buildinamsterdam.com/
  10. 10 https://dribbble.com/shots/1861517-Messages-Animation
  11. 11 https://photojojo.com/store/
  12. 12 https://dribbble.com/shots/1410455-Soccer-analytics
  13. 13 http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input
  14. 14 http://www.yikyakapp.com/
  15. 15 https://dribbble.com/shots/1901531-Loading
  16. 16 http://bellroy.com/slim-your-wallet

↑ Back to top Tweet itShare on Facebook

Advertisement

Amit Daliot is a freelance UX Designer who has focused on digital products for the last 16 years. Amit is working as Lead Architect at 5ive, a design consultancy specializing in complex digital products and as a Functional Designer at Amdocs Experience Center, in between enjoying time spent designing for companies in various industries. Amit is also a lecturer at the UXV — the Israeli UX certification program – as well as an Axure training partner. Contact: www.ux-designer.com.

  1. 1

    Classifying is key to understand the necessity and extent of motion a UI/interaction can safely accommodate. A bad animation choice could turn a beautiful experience into bonkers something.

    Thanks for sharing your insight. This will greatly simplify my workflow.

    5
  2. 2

    Jagadish Thanki

    May 14, 2015 8:39 am

    It’s a good read and stuffy points to note.
    Animations should be simple and quicky, users should understand what it is and logically accceptable.

    Thanks for the article!

    1
  3. 3

    Really good read. Thank you!

    0
  4. 4

    Nice, I can’t wait to use some in animation better in my own work. This also reminds me of a cool site I found with loads of examples from around the web – http://useyourinterface.com Anyway, Thanks for the read!

    2
  5. 5

    Cierra Luke

    May 14, 2015 12:39 pm

    Thanks for sharing this post it relay helped me a lot in making functional UX designs.

    -2
  6. 6

    An accessibility best practice is to always give your users the option to turn off animations.

    Individuals with vestibular challenges will find using solutions with moderate to heavy animations extremely challenging. If your team is concerned about accessibility make sure you include this simple feature.

    5
  7. 7

    Google’s Material Design documentation – particularly the animation section – is a good read to supplement the points made in this article:

    http://www.google.com/design/spec/animation/authentic-motion.html#

    3
  8. 8

    Vinay Raghu

    May 14, 2015 6:11 pm

    I have been in search of a word to use when describing animation that is essential to communicate design but no further. Thing with a lot of SVG tutorials and CSS animation tutorials that animate a rocket ship is “I will never use that”. But using animation, as a designer and developer to communicate your designs is very powerful. Thanks for the term “functional animation”. Great read and amazing examples!

    2
  9. 9

    “Unlike animation made by Disney Studios or animation made for computer games, functional animation has a clear, logical purpose.”

    What what what!??? If anyone knows how to use animation as a tool to create clarity and logic, it’s those two categories. Especially the games industry which has already been using animation with interactions for decades!

    For whatever reason, UX designers are late to the party (but welcome). There is so much we can learn from fields that have already mastered animation. To discount them is a terrible mistake.

    You shouldn’t limit yourself to getting inspiration from other UX designers. Play some games and watch some good cartoons. See how they use motion as a tool. In a narrative, what does the amount of motion in a scene say about the mood? How does directional motion from one scene help carry an idea to the next scene? In games, look at all the little animations and think about what affordances they bring. What does the animation of the coin floating tell you? What about when your character flashes and is transparent?

    Having experience working on games, I can tell you that, removing certain animations doesn’t just make them less entertaining – it makes them less useable.

    UX teams, hire an animator! Just like graphic designers have moved from print to interactive media, animators can cross disciplines too. A number of them are already making the move.

    35
    • 10

      Kaplag, I love your feedback! totally enlightening.
      The combination of an animator and usability expert can definitely raise the bar and achieve amazing results. Same symbiotic relation as already established with graphic designers.
      The thing is that people with your set of skills are still quite rare in the UX industry. In most cases UX designers needs to deal with animation and nail down their functional logic by themselves.
      Looking forward working with you one day :)
      Amit

      6
  10. 11

    Exceptional overview! Sent right to evernote for keeping…

    2
    • 12

      Checkout out Pinboard, its perfect for saving useful articles like this.

      0
  11. 13

    Thanks for sharing. I definitely agree that thoughtful motion design can help us communicate much more effectively and these categories are a really useful way to approach your designs! Though I must politely disagree with your point about “…unlike Disney Animation.” I recently collaborated with a Disney animator (Glen Keane) for a presentation on this topic (called The Principles of UX Choreography) and it was extremely eye opening and inspirational to hear about the thought process that goes into their design decisions too. I encourage you to find the similarities and differences across different disciplines, it can be extremely insightful can provide an entirely new perspective to your work!
    https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a

    4
  12. 14

    thank you very much for your sharing this great article here, now I can learn more about UX Design with your easy to read and learn guide from you, thanks again.

    0
  13. 15

    Swati Verma

    May 15, 2015 6:52 am

    Very Informative. Crisp & Clear.

    0
  14. 16

    Homer Rutledge

    May 15, 2015 6:14 pm

    Overall, this is a really great article, thank you for writing it!

    I do agree with wholeheartedly Kaplag’s points above.

    You emphasize subtlety several times as a defining attribute of good UX motion design. I have to disagree here. If it accomplishes the primary goal of guiding and informing the user, dramatic or over the top motion design is fine. Especially if it is supported by a dramatic or over the top UX/UI visual style. It is up to the designer to determine the appropriateness of the motion design.

    “On touch devices, functional animation can be most beneficial as a substitute for rollover effects.”
    There are no rollover effects on touch devices. The first example you have here is a desktop, and the second is a tap event, not a rollover.

    0
  15. 17

    Homer Rutledge

    May 15, 2015 6:20 pm

    Aaahhh, “SUBSTITUTE for…” I understand, disregard my last point.

    0
  16. 18

    It is a little bit funny that all UX community is now falling in love in something that was invented and master about 7-12 years ago. All animation examples and much more were present and widely known across web. To be honest, they were much more creative and inspiring that current status quo. Now this whole knowledge is lost, because no one thought to create an archive for best Flash websites. We all could learn how interaction on the website should look like. But we have killed it. And now we are creating a wheel, again discovering, that this small jumping button makes users happy.

    Old books for flash animations and how to use them may still be found… somewhere. Same for cartoons.

    2
  17. 19

    Very nice, insightful and engaging article Amit, curious to know some tools / techniques to prototype these animations, I’ll be glad if you can suggest some?

    2
  18. 20

    Really good !! please share more….

    0
  19. 21

    Totally agree with the latest comment from Amit, Flash websites are a perfect example of how awesome UX designs were done before the mobile time … I grew doing that several years ago, (10 maybe), always looking forward for companies like Group94, Leo Burnett, and several others that i can’t remember after all those years…
    Flash FTW, is the precursor, in this matter, of iOS, Android OS, HTML5+canvas, etc.
    I hope newbie developers have more respect about the Flash platform, cause I still use it, and I still love what can be achieved using it …

    Really inspirational article btw :)

    -1
  20. 22

    Alexander Binder

    May 22, 2015 6:59 am

    Nice collection of transitions and motions.
    Find more examples in Google´s material design specs.
    http://www.google.com/design/spec/animation/authentic-motion.html

    1

↑ Back to top