Strategic use of animations and transitions can make your program easier to understand, feel smoother, more natural, and of higher quality, and be more engaging. But the gratuitous use of animations and transitions can make your program distracting and even annoying.
Is this the right user interface?
Design concepts
Usage patterns
Guidelines
Effective communication
Patterns
Performance
Animation characteristics
Animated text
Reducing power consumption
Accessibility
Documentation
Animations give the appearance of motion or change over time. Use animation to give feedback, preview the effect of an action, show the relationship between objects, draw attention to change, or explain a task visually.
Microsoft® Windows® uses a background flash animation to give feedback that the object was clicked.
Transitions are animations used to keep users oriented during user interface (UI) state changes and object manipulations, and make those changes feel smooth instead of jarring. Good transitions feel natural, often giving the illusion that users are interacting with real-world objects.
Windows Desktop Gadgets use smooth transitions between their concise and details states.
Generally, the best animations and transitions are used to communicate to users non-verbally, and to make state changes more natural and less noticeable. By contrast, the least effective are gratuitous in that they don't communicate anything or draw unnecessary attention. Animations are best used as a secondary form of communication. They should communicate information that is useful but not critical, and to be accessible, users should be able to determine equivalent information through other means.
Note: Guidelines related to software branding, sound, and accessibility are presented in separate articles.
Is this the right user interface?
To decide, consider the following questions.
Animations
Do the following conditions apply?
●The animation visually communicates something useful, such as giving feedback, showing relationships, causes and effects, or drawing attention to important change.
●Seeing the animation isn't essential. Equivalent information can be obtained in another way. Users might not benefit from the animation if:
The animation isn't played due to insufficient system performance.
● The animation doesn't affect the user's productivity. Either:It happens quickly (200 milliseconds or less).
It doesn't interfere with interaction or it can be interrupted.The user has to wait anyway.
● The animation doesn't affect the user's flow.
It is either at the user's center of attention, or it draws attention to something outside the center of attention that is important or useful in completing a task.
It is easily ignorable, not distracting or annoying.
It doesn't become tiresome. Users still find it appropriate and enjoyable even after repeated viewing.
If so, consider using an animation.
Transitions
Is an object or scene changing state, and do all of the above conditions for using animations as well as any of the following conditions apply?
●The state change is conceptually disorienting, confusing, or otherwise hard to understand.
●The state change is visually jarring, lacks continuity or smoothness, or flashes; or appears unnatural, unpolished, or of poor quality, especially if it involves a large screen area.
●Using a transition would make the state change appear faster.
●The state change is worthy of special user attention.
If so, consider using a transition.
Design concepts
Animations and transitions are an effective way to communicate information visually that would otherwise require text to explain or might be missed by users.
Incorrect:
Correct:
Using an animation communicates the same information, but in a natural, unobtrusive way. Which would you rather see a thousand times?
Animations and transitions don't have to demand attention to be successful. In fact, they are often used to
avoid drawing attention to program mechanics that users don't need to be aware of. Many successful animations
are so natural that users aren't even aware of them—rather users would only notice their absence. Frequency
of occurrence increases the need for subtlety, so save effects that demand attention for infrequent events that
A Start menu transition that avoids drawing attention.
Beyond making your program easier to understand and feel smoother, well-designed animations and transitions are a great way to add personality, character, and style to your program. They can make the user experience more immersive and engaging by giving it a natural, real-world feel.
Windows 7 highlights taskbar buttons on hover based on the current mouse position and program icon color. This approach is visually attractive, yet subtle, conveying a humble personality.
However, animations and transitions are most effective and welcome when they serve a clear purpose. They should be used to improved usability, smoothness and flow, and the perception of quality—without harming performance significantly.
While some types of animations are used to draw the user's attention, make sure that attention is well deserved and worthy of interrupting the user's train of thought. The human eye is sensitive to motion, especially peripheral motion. It can be difficult for users to concentrate when there is a flashing taskbar button or a spinning notification area icon. Avoid using animations to interrupt or distract users, or draw attention to things that don't warrant the user's attention.
Incorrect:
Programs shouldn't flash their taskbar button unless users must do something important immediately. In this case, the only thing the user needs to do is activate the program.
Use animations and transitions because your program needs them, not merely because you can. And for accessibility, don't use animation as the only way to convey essential information. Make sure that users can obtain equivalent information in a different way.
Attributes of good animations and transitions
Good animations and transitions strike the right balance among these attributes:
●Are clearly purposeful. Good animations are there because they need to be, whether to communicate information, make an interaction feel real, or draw attention to something noteworthy. And purposeful animations are accurate—if an animation shows that a task is being done, it's because the task is in fact being done.
In this example, the animation shows that a fully charged battery is being charged.
●Look smooth and continuous. Good animations smoothly remove seams between scene or element state changes by
showing relationships and providing a sense of place and context. Continuity helps users understand how they got where they are, and how to get back to where they came from.
The Windows 7 taskbar window preview morphs for continuity as the user moves from one program to another.
●Are realistic. Good animations simulate an object's real-world physical properties and behavior. This helps users predict and understand the results of their interactions. You don't have to model the real world exactly, but if you use realistic animations, you must keep them consistent with the real world. Users should never be surprised or confused by the results, especially with animations used for direct manipulation.
In this example, the "move out of the way" animation used by the Windows 7 taskbar feels more realistic than a static insertion point.
●Are authentic. Even objects that aren't found in the real world can appear natural by being based on the real-world behavior of
a different, but related, object. This metaphor only works if the relationship clearly communicates the intended purpose and behavior.
In this example, the window "squeegee" animation used by Windows 7 feels authentic because it is consistent with how glass windows might behave in the real world.
●Use natural mapping. Natural mappings are either physical or cultural. A culturally-based natural mapping, for example, might start from the fact that in Western cultures, people read from left to right. Consequently, to express a time sequence of objects, the middle object is current, objects to the left are from the past, and objects to the right are in the future. Going forward in time is indicated by left-to-right movement.
In this example, the Windows Media® Player control has a natural mapping because playing moves the position from left to right.
●Have personality. Well-chosen animations are great ways to add personality, character, and style to your program. They can make the user experience more immersive and engaging. While the type of animation determines what it communicates, the specific way in which the animation is performed shows the program's personality. Good animations project the right personality for your program, whether serious or whimsical, or somewhere in between.
In this example, Zune's use of animated text and dynamic perspective help shape its personality.
●Look and feel responsive. Good animations don't harm the user's productivity by blocking users from other interactions, or forcing users to watch. No matter how natural and engaging your program's animations are, nobody wants to wait for them exclusively. Good animations also look responsive without being jarring by having a fast start with a soft landing. Responsive animations also benefit from communicating their purpose quickly. Users shouldn't have to watch an animation for a long time just to figure out what it is doing or when it is done. For direct manipulation, responsive animations are essential to maintain a direct and engaging real-world feel. To feel direct, an object's contact points must stay under the pointer smoothly throughout
the manipulation. Any lag, choppy response, or loss of contact destroys the perception of direct manipulation.
In this example, the touch panning transition feels responsive by keeping the contact point under the user's finger throughout the manipulation.
●Attract the right level of attention. Good animations are usually subtle and draw only the attention required to fulfill their purpose. As a result, they aren't distracting, annoying, overly complex, overly long, or repetitive. They don't become tiresome after
repeated viewings.
In this example, Windows search temporarily draws attention to matching search words, then fades down.
●Look special only if genuinely special. Frequency increases the necessity for subtlety, so common interactions need simple animations that communicate a simple idea in a simple way. Reserve special, complex animations for special, infrequent experiences.
In this example, Windows uses an attention-getting animation at startup to make the experience feel special, but such an animation would be inappropriate elsewhere.
You'll know that you have achieved the right balance when the overall experience would be harmed if any of these attributes were removed.
Creating an animation vocabulary
Good animations are about effective visual communication, and consistency is crucial to their effectiveness. If
you use a specific transition, such as pushing a scene in from the right to advance to the next scene, that should be the only transition used for that purpose and that transition shouldn't be used for any other purpose. Assigning different meanings to the same animation harms its ability to communicate. By assigning specific animations and transitions to specific meanings, you are creating an animation vocabulary.
This issue applies to animations and transitions that have meaning, not to generic ones that users aren't likely to assign meaning to or those whose purpose is to be unnoticeable. For example, animations like fades and special effects like dissolves have no particular meaning, so they can be used freely.
A good vocabulary assigns animations that model an object's real world, physical behavior. If you need to assign an animation to an object or action that doesn't have a real world counterpart, choose an animation that shows how the object might behave were it real.
While the Start menu isn't a real world object, its hover effect lights up like a real-world object might when activated.
Each animation in a vocabulary needs to be clearly distinct. The animations should have similar behaviors only if their associated actions are similarly related. For example, movement transitions suggest navigation, so you can use movement transitions from different directions to indicate different types of navigation.
You'll know that your animations and transitions aren't communicating well when users find the results confusing, surprising, or unexpected. Generally, it's better to achieve a single purpose well than multiple purposes not so well.
Ideally, your animation vocabulary should be comprehensive across all areas of your program that need them. If only a few interactions have natural animations, that will draw attention to those that don't.
To learn more about the Windows animation vocabulary, see the Usage patterns section of this article.
Designing the right personality
While the type of animation determines what it communicates, the specific way in which the animation is performed speaks to the program's personality and reinforces its brand.
Your program's personality should reflect the nature of its tasks and the personality of its users, so it's not an arbitrary choice. Rather, a well-designed personality should feel authentic—never try to force it. The personality should make an emotional connection to the user. Some factors to consider:
●Tasks: Serious or fun; optional or required.
●Consequences: Serious or minor.
●Cost: Free or purchased; if purchased, moderately priced or expensive.
●User focus: Relatively narrow group of target users, or wide, general audience.
●User environment: Professional, casual, or home.
●User age: Younger or older.
●Usage frequency: Frequent or infrequent.
The combination of these factors helps determine an appropriate personality for your program. Here are some suitable combinations for common types of programs:
Productivity applications
Naturally, productivity applications must focus on productivity. While a few special experiences can stand out, most other animations should have these characteristics:
●Small
●Natural, realistic
●Subtle, subdued
●Fast, efficient
●Relaxed
Utilities
Utilities are typically used briefly, so their use of animation can be more aggressive:
Because the goal of these programs is to engage and delight users, the animations and transitions can be much more aggressive by having these characteristics:
●Large (possibly becoming an integral part of the experience)
●Artificial, surreal
●Impactful, vibrant
●Emotional, playful, whimsical
●Energetic
Making an emotional connection is so important for entertainment programs that it's acceptable to bend some rules if doing so helps make users fall in love with the program. For example, it's acceptable if an animation or transition becomes tiresome after the hundredth time if most users are unlikely to use the program that often.
Generally, animations and transitions that are small, natural, subdued, efficient, yet relaxed are the safest bet. Transitions with these characteristics typically take the shortest path from beginning to end, start quickly, end softly, and don't overshoot. Also, well designed transitions are designed to work well across the entire range of distances in which they will be used.
Animation performance
When designing animations, make sure that they don't affect users' ability to use your program efficiently. Generally, make your animations slow enough to fulfill their purpose, but fast enough that they don't interfere with responsiveness, demand too much attention, or become tiresome.
Incorrect:
While this page turning animation has an engaging, real-world feel, it lessens users' productivity by taking longer to turn pages.
Brief transitions (200 milliseconds or less) are a special case (especially when they often work off of a delay) because users will be aware that they have to wait a split second for them. Users are willing to wait for such animations if:
●The perceived wait is extremely brief (200 milliseconds or less).
●The transition makes the interaction feel more smooth and natural.
●The transition makes the interaction feel more responsive.
●Any delay helps keep the user in control of the interaction.
Users will accept a brief delay for the taskbar button reordering animation because it is very brief and it makes the interaction feel more natural.
There are three ways in which animations can adversely affect performance: speed, responsiveness, and perception.
For speed, some animations are visual veneers over CPU-intensive tasks, so the last thing you should do is make these tasks slower with CPU-intensive animations. The most CPU-intensive animations ("heavy" animations) tend to:
To ensure good performance, heavy animations should be used only for tasks that aren't CPU intensive, whereas light animations can be used anywhere.
For responsiveness, most animations and transitions should be designed so that users can interact while the animation is running. Unless an animation is part of a process, make it independent of the user's primary interaction and allow users to interrupt it.
An animation might not adversely affect a task's performance in reality, yet users may have the perception that it does. For example, don't use an animation that appears heavy for a slow, CPU-intensive task even if it doesn't harm performance, because users might conclude that the animation is the reason the task is slow. If something looks slow, it will feel slow, so it's better to use animations that feel simple, lightweight, and fast. Using animations with snappy beginnings for CPU-intensive tasks helps.
Risky:
While the animation in the Windows file copy dialog doesn't harm file copy performance, it runs the risk of having users think that it does.
Also risky:
In this example, the sluggish looking progress animation in the Windows Explorer address bar makes some tasks look painfully slow.
Animations and transitions have no value if their quality is so poor that they make the experience less smooth and less engaging. To maintain their quality, animations should be designed to degrade gracefully whenever sufficient system resources aren't available. Animations can degrade by having variations that require fewer resources (such as shorter lengths or lower frame rates), or even not running at all. Regardless of the resources available, make sure the animations have high quality and look like animations instead of software bugs.
Finally, if users believe that your program's animations and transitions detract from their productivity, there's a good chance that some users will want to turn them off. To support this ability, respect the option to Turn off all unnecessary animations found in the Windows Ease of Access Center.
Attracting the right level of attention
While only some types of animations and transitions are specifically designed to attract the user's attention, they should be designed to attract the right level of attention to fulfill their purpose well. What are the different ways to attract attention, and how do you pick the right one?
Animation effects
Different animation effects attract different levels of attention. The following list summarizes the most common methods, starting with the most attention-getting:
●Rapid flashing. Demands immediate attention. Can break users' concentration no matter where the flashing is occurring.
●Moderate flashing. Same, but demands less attention with lower frequency.
●Bouncing. Noticeable in peripheral vision, and relatively demanding in nature. Users are likely to notice, but can continue to
●Motion. Noticeable in peripheral vision, but not demanding. However, complex or 3-D motions attract more attention than simple or 2-D motions. Users are likely to notice, but can continue to concentrate elsewhere.
●Moderate pulsing. Noticeable but not distracting in peripheral vision. Users can continue to concentrate elsewhere. Can pulse brightness, colors, and sizes.
●Slow pulsing/glowing. Noticeable but subtle. Attracts more attention than a static effect, but users might not notice the animation unless they are already looking.
●Fade. Even less noticeable. Attracts more attention than a static effect, but users might not notice the animation unless they are already looking.
●Static highlight/gleam. Noticeable if users choose to look, but doesn't demand attention if it is elsewhere.
●Ambient/natural. Purposefully not noticeable by having a natural, real-world appearance.
To determine the right approach for your program or feature, consider how these factors relate to your feature's scenarios.
For example, suppose you are designing an instant message program and someone just sent the user a message. This scenario requires the user's attention, it should be noticeable anywhere, and usually the user will want to respond quickly. This scenario suggests that a moderate flashing animation would be a good choice. By contrast, suppose you want to inform users that a print job has completed. Users should be able to continue to concentrate and work productively elsewhere, and it's acceptable if users don't notice. This scenario suggests that moderate to slow pulsing or glowing would be a good choice.
Duration
The appropriate duration for an attention getting animation depends upon the scenario and the specific type of animation used. The more attention an animation effect demands, the shorter the duration should be. While very subtle effects that demand little attention (like slow pulsing) can be played indefinitely, attention demanding effects should only be played between 1 and 3 seconds. Anything longer risks making the animation overwhelming and annoying.
In Windows 7, the taskbar flashes for attention for only a second. Any longer would be annoying.
Effect decay
You should design attention-getting animations based on the assumption that if users don't respond right away, it is because they are busy doing something else and don't want to be interrupted. Thus, your goal should be to attract attention without demanding it.
To get the right balance of attracting attention without demanding it, decay the intensity of an effect over time. For example, to attract attention you can make the effect initially strong, but then slow down the effect quickly. By doing so, the attractive power is mostly determined by the initial effect, but the user's overall impression is determined mostly by its finish.
In Windows 7, the taskbar flash effect slows down at the end.
What about PowerPoint?
Microsoft PowerPoint® transitions often deliberately violate these guidelines because they are designed to draw attention to slide transitions and require users to wait for them. Furthermore, they don't have any particular meaning so they communicate nothing beyond the fact that a slide is changing.
PowerPoint-style transitions, when used properly, have these purposes:
●They break long presentations into smaller chunks by forcing the presenter to pause.
●They draw the audience's attention toward changes in the presentation, helping people refocus if their minds have wondered.
●They give the presentation a rhythm so that it doesn't feel monotonous or overwhelming.
●Their style reflects the personality of the presenter or of the material.
While these are important goals for a presentation, such transitions would draw unnecessary attention in the UI of most types of programs, and would become tiresome quickly.
Bottom line: Don't use PowerPoint-style transitions as a model for your program.
If you do only six things...
1.Use animations and transitions to make your program easier to understand, and feel smoother and more engaging. They should have a clear purpose. Don't use animations just because you can, or to draw unnecessary attention to your program.
2.Define an animation vocabulary and use it consistently throughout your program. Use the Windows 7
3.Use the characteristics of your animations to give your program personality and reinforce its brand.
4.Make most animations simple, brief, and subtle. Remember that animations don't have to demand attention to be successful. If an animation is appropriate and natural, users will only notice its absence.
5.Make your animations fast and responsive, and give them a lightweight feel. No matter how engaging your animations are, nobody is going to want to feel like they are waiting for them. Design heavier animations to have graceful degradation.
6.Design for the long run. If an animation is annoying, distracting, or tiresome, redesign it or remove it.
Usage patterns
Animations have several usage patterns:
Hover feedback
Indicates that the interaction point is active. Hover can be shown through a static effect as well.
To show where
Windows vocabulary: Display hover effect (bounding rectangle, highlight, enlargement) with a fade in/fade out effect for
the interaction
smoothness.
point is.
In the Zune® digital media player, album covers highlight and add playback controls on hover.
Click feedback
To show that a clickable object is responsive and received a click.
Indicates that an object has been clicked.
Windows vocabulary: Flash object background on click down event. To show touch contact, use a ripple effect.
Touch displays a ripple animation so that the user knows the interaction was recognized.
In this example, Windows Live™ Messenger displays indeterminate progress feedback during sign-in.
Attractor
To show that something needs the user's attention.
Attract the right level of attention when significant objects are created or need attention (often due to change), or important or urgent events happen. See Attracting the right level of attention for design techniques.
Windows vocabulary: Flashing, moving, pulsing, glowing, gleam.
The Windows Live toolbar animates on first appearance to make it obvious where it is.
Show relationships, especially when the relationship might not be understood or expected, in a way that's not distracting or
To show the
confusing.
relationship
Windows vocabulary: Morphing, transportation, physical change such as flipping over, growing from a point source, shrinking to a
between objects
point destination.
or causality in
effects.
In this example, the animation shows the relationship between the gamma setting and its affect on the display.
Illustration/ An animation or video that explains a concept or how something works visually, either to supplement or replace a textual Preview explanation. Doing so allows users to perform tasks or choose commands efficiently and confidently.
To explain visually a concept, task, or the effect of a command.
In this example, the Tablet PC Input Panel "show me" commands use illustrations to show how to correct, delete, split, and join.
Object grow/ Object changes between states, possibly while moving. Transition keeps users oriented during changes. shrink/appear Windows vocabulary: Morph, change size, object slides in or out.
To change an object's size or state smoothly.
In this example, the Weather Gadget morphs from its concise state to display its Options dialog box.
Content show/ Window interior reshapes to display more, less, or different content. Transition keeps users oriented during changes. hide/change Windows vocabulary: Pane slides in or out. Flyout windows fade in and out. Different content fades or rolls in.
To show, hide, or change content smoothly, typically for progressive disclosure.
The Windows Calculator has a smooth transition between view modes.
Control or
Display controls when users are hovering the pointer over a command area, or display affordances when users are hovering over
affordance
a control. Hovering over these areas indicates that the user intends to interact. Affordances may hide if the pointer becomes stationary.
In this example, Windows Media Center displays an animation while loading to immediately engage users.
Guidelines
Effective communication
●Define and use an animation vocabulary to ensure that your animations and transitions have a consistent meaning, and use it consistently throughout your program. Most vocabularies should include entries for scene and object appearance and disappearance, navigation, basic interaction (hovering, selecting, clicking), object manipulation and interaction (moving, dropping, resizing, scrolling, panning, zooming, rotating, filtering), and attracting attention. Consistent meaning is crucial to effective communication.
●Whenever practical, use the Windows animation vocabulary. While your program may have a different audience and different needs, often the benefits of consistency and familiarity outweigh the benefits of being different. If your program's vocabulary must be different, use the same basic animation types as Windows, but give them the right personality for your program.
●Don't assign specific meanings to generic animations and transitions in an animation vocabulary. Generic transitions like fades and special effects like dissolves have no particular meaning (beyond appear or disappear), so they can be used freely.
Incorrect:
In this example, a cross-fade is incorrectly used to navigate to the next item. Because cross-fades have no particular meaning, this transition doesn't provide context.
●Make vocabulary entries clearly distinct. Related actions may have similar effects (for example, zooming in and zooming out should have inverse transitions), but unrelated actions should have clearly distinct effects (for example, zooming should never be confused with rotating).
●Keep real-world effects realistic and consistent. If you use realistic animations and transitions, keep the experience consistent with the real world. Users should never be surprised, confused, or mislead by the results. And for consistency, don't mix metaphors.
●Give inverse actions inverse animations. Doing so meets user expectations and simplifies the vocabulary. For example, if a pane appears by sliding in, remove it by sliding out—not with some other effect.
●Make animations comprehensible. Users should be able to understand quickly the purpose of an animation. It's possible to make an animation too small, too brief (less than 50 milliseconds), or so subtle that users aren't able to comprehend their purpose. In such cases, either redesign to make the meaning clear, or remove.
In this example, the effect is so small and subtle that few users can comprehend its purpose. Better to redesign or remove.
Patterns
Hover feedback
●To appear responsive, strive to play animation within 50 milliseconds of entering or leaving the hover state.
●To appear fast, make the duration of hover animations less than 50 milliseconds.
●Use a fade in/fade out of hover effect. Doing so makes hover effects clearly distinct from click and selection feedback.
Click feedback
●To appear responsive, strive to play animation within 50 milliseconds of click down event. Click up events don't need click feedback.
●To appear fast, make the duration of click animations less than 50 milliseconds.
●Use a background flash or blink effect. Doing so makes click effects clearly distinct from hover and selection feedback. Because clicking requires hovering, make click feedback a smooth addition to hover feedback.
Selection feedback
●To appear responsive, strive to play animation within 50 milliseconds of selection or deselection.
●To appear fast, make the duration of selection animations less than 50 milliseconds.
●Use a fade in/fade out selection rectangle effect. Doing so makes selection clearly distinct from hover and click feedback.
Progress feedback
●Use an activity indicator when an action can't be performed within a second. Doing so indicates that the command has been received.
●Use a progress bar when a task will take more than five seconds. For more guidelines, see Progress Bars.
●Use progress feedback animations that help users visualize the effect of long-running tasks. Avoid unnecessary progress feedback animations—if an animation doesn't communicate anything helpful, use a progress bar instead.
●Have clearly identifiable completion and failure states. Users must be able to determine these final states quickly.
●Stop showing progress when the underlying task isn't making progress. Users need to be able to determine if progress isn't being made, and react accordingly.
Attractors
●Use attractors with restraint. Unless the information is urgent, critical, or otherwise likely to affect the user's immediate behavior, it's usually better to change state inconspicuously and let users discover the change on their own. Solve distractions,
not discoverability.
In this example, the wireless network notification area icon uses an animation for critical problems, but lets users discover weak signals on their own.
●Choose an animation that draws the right level of attention. Attractor animations should draw just enough attention to themselves to fulfill their purpose, but no more. If the user must act immediately, choose an effect that demands attention no matter where the user is looking. For other situations, refer to the Attracting the right level of attention section to get the right combination
The Microsoft Office Assistants attracted unnecessary attention to themselves.
●If the user doesn't respond, don't repeat the animation or use continuous animations. Instead, assume that the user chose not to act now, but may act later. Continuous animations make it difficult for users to concentrate on anything else.
Relationship animations
●Use relationship animations to show where objects came from or where they went.
●Relationship animations must start or end with the selected object. Don't show relationships between objects the user isn't currently interacting with. If users notice at all, what they'll notice is the distraction.
Illustrations/previews
●Use previews to show the effect of a command without users having to perform it first. By using helpful previews, you can improve the efficiency and ease of learning of your program, and reduce the need for trial-and-error.
●Use illustrations and previews that have a clear interpretation. They have little value if confusing.
●Play only one illustration at a time to avoid overwhelming users. If multiple simultaneous illustrations are possible, use mouse hover or a play button to let users indicate their interest.
●Play an illustration automatically if it is the main purpose of the window or page. Otherwise, if it's optional, let users play it when they are ready.
●Play animations at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to watch.
Object grow/shrink
●Don't clip content during a resize. Expand containers before adding content. Remove content before reducing containers.
Incorrect:
In this example, content is clipped during a resize.
Content show/hide/change
● Display important information statically. Users shouldn't have to access important information through progressive disclosure.
Control or affordance show/hide
●Display important controls when the user positions the pointer anywhere within the window or pane, or, if full screen, on mouse move. Users shouldn't have to hunt for these controls, so make their discovery certain.
In this example, Windows Media Center displays its controls whenever the pointer is over the window.
●Display secondary controls or control affordances when the user positions the pointer on or near the commands. For easy discoverability, make the location obvious and the target large.
In this example, Windows Live Messenger displays a secondary command when the pointer is near the upper right corner.
Scene transitions
●Make physical scene transitions consistent with natural mapping. People read from left to right in Western cultures, and hierarchical diagrams flow from top to bottom. Consequently, going forward in time is indicated by left-to-right movement. The following physical scene transitions have natural mapping:
Transition
Meaning
From left
Move back in task flow
From right
Move forward in task flow
From top
Move up task hierarchy
From bottom Move down task hierarchy
●If your program plays sound, design scene transitions and audio transitions together. For example, if a scene fades out gradually, any sound should fade gradually as well. Don't ruin seamless visual transitions by having abrupt sound transitions. For more sound guidelines, see Sound.
Direct manipulations
●When using physical gestures in the interaction (like tossing), design the animation to feel like a natural response to the gesture.
Link the interaction cause with the transition effect. Give the animation real-world physical characteristics such as acceleration, deceleration, momentum, resistance, weight, bounce, and rotation.
●To maintain a direct feel, keep an object's contact points under the pointer smoothly throughout the interaction. Any lag, choppy response, or loss of contact destroys the perception of direct manipulation. Objects should never disappear while being manipulated.
Sort, filter, or reorder transitions
●For simple changes, show the entire transition. Users will be able to follow the entire transition easily. Simple changes involve four items or fewer.
●For complex changes, emphasize the end of the motion as it slows down, and let the eye fill in the rest. Doing so makes the motion feel much more responsive and orderly.
Performance transitions
●Consider performing slow transitions in two or three stages to make them appear faster and immediately interactive. Use the following composition order when appropriate:
External frame
Background
Initial content (using a temporary representation if necessary)Primary controls (so that users can interact immediately)
Final content (if a temporary representation was used) Use transitions like fades and slides to make the composition appear smooth, orderly, and refined.
When scrolling in "Bird's eye" view, Bing maps display a temporary grid background. Doing so allows users to continue to scroll immediately, well before the final content is rendered.
Special experience animations
●Reconsider animated splash screens (as well as static splash screens). Often splash screens just draw attention to how long a program takes to load, and they wear out their welcome quickly. While splash screens are acceptable if they are displayed only when user interaction isn't possible, whenever practical a better alternative is to design your program so that users can interact with it immediately, even while it is still loading.
●Provide a Skip Introduction command if an animated splash screen takes more than three seconds. Clicking anywhere on the splash screen should also dismiss it. Alternatively, use a short version of the animation after an initial period.
Performance
●Don't make users wait for your program's animations and transitions. Use brief animations and transitions (less than 200 milliseconds) whenever practical. Use faster animations (100 milliseconds) for more frequent operations. Design longer animations (more than one second—usually the progress feedback, illustration, and special experience patterns) so that users can continue to work while they are running.
●Design long-running animations to make it clear to users that they can interact while the animation is running. Users won't attempt to continue to work if the visual clues suggest that they can't.
In this example from Windows Internet Explorer®, the low-key progress bar in the status bar suggests that users don't have to wait for completion before they can interact.
●Use lightweight animations for CPU-intensive tasks. Doing so gives full processing power to the task. Furthermore, users won't perceive that the lightweight animation is the reason why the task is CPU-intensive.
●Don't display an activity indicator during an animation or transition. Doing so destroys the effect. Design animations and transitions so that they are able to start right away.
●Design animations to degrade gracefully whenever there are insufficient system resources. Animations can degrade by
having variations that require fewer resources (such as shorter lengths or lower frame rates), or even not running at all. Regardless of the resources available, make sure the animations have high quality and look like animations instead of software bugs.
In this example, the window restore transition is used even though there aren't sufficient system resources to play it well. Consequently, the frozen frame appears to be a bug. If the resources aren't available, it's better to just display the window without a transition.
Animation characteristics
Well-designed animations and transitions generally have these characteristics:
●Brief duration. Most animations should be between 100 and 300 milliseconds, preferably either 1/6 second (167 milliseconds) or 1/4 second (250 milliseconds). (Special experiences and progress feedback can be longer.) Use faster animation times for more frequent operations. Generally, longer animations take more time to complete, take more time to understand, and feel slow.
●Responsiveness. Animations should start within 50 milliseconds of the initiating event or user action. Longer start times feel unresponsive.
●Acceleration/deceleration. To look natural, most animation effects need to accelerate when starting and decelerate when stopping. To look responsive, design animations to have fast starts. To appear controlled, design animations to have soft landings at the
end. While this applies to motion effects, it also applies to any effect that suggests movement, such as zooms and even fades.
Most animations should have fast starts and soft endings to have a responsive, yet controlled feel.
●Motion. Animations portraying motion in particular need to accelerate and decelerate, so don't use linear motion unless animation duration is very short. Motions should take the shorts path from beginning to end, without overshooting. The full motion path is not always required. When appropriate, emphasize the end of the motion as it slows down, and let the eye fill in the rest. Doing so makes the motion feel much more responsive and orderly. When animating the motion of several objects simultaneously, give them slightly different paths with slightly different timings to feel more natural.
●Frame rate. Most animations should use a frame rate of 20 frames per second. If the animation is for a special experience or is related to the main purpose of the program, consider using a higher rate of 24 – 30 frames per second to improve smoothness and realism.
●Scale. Design animations to work well across their entire range of intended usage. For example, page transitions should be designed to work for all page sizes.
●Personality. Design animations to feel natural, subdued, and efficient rather than artificial, whimsical, or slow.
●While you may display text using a transition, don't continuously animate text. Animated text is often distracting and more difficult to read than static text. Exceptions:
You may animate text in situations where it is traditionally animated, and you provide an accessible alternative.
You may animate text if the purpose of the text is primarily decorative.
In this example, Zune animates text but its purpose is primarily decorative. There isn't a problem if users don't carefully read the text.
Reducing power consumption
●Design your animations to reduce power consumption. When designed properly, animations shouldn't increase power consumption significantly. To reduce power consumption:
Stop animating when the display is off. The display may be off for the purpose of saving power.
Don't use long-running animations that aren't user initiated. Animations that use high-resolution periodic timers reduce the efficiency of processor power management. Also, be sure to disable any high-resolution periodic timers when the animations are complete.
Suspend all animations when the system becomes idle. The period of user inactivity to become idle is determined by Power Options in Control Panel.
Developers: For more information about designing for power management, see Application Power Management
Best Practices.
Accessibility
●Don't use animation as the only way to convey essential information. Animations should communicate information that is useful but not critical, because they aren't accessible to users with visual impairments.
●Make sure equivalent information is available through other means, such as:
By inspection. Users can determine equivalent information by looking at the screen or objects involved in the animation.By simple interaction. Users can determine equivalent information by hovering, clicking, or double clicking.
The Bing home page has an initial animation that reveals several hot spots. Users can also display the hot spots by moving the cursor near them.
Note that "equivalent information" doesn't mean identical information. The information might be in a different format or require simple deduction.
●When appropriate, set input focus on the object changed during a transition. Doing so enables assistive technologies to detect where the change happened. But don't change input focus when the user is using the keyboard.
●Don't use animations or transitions that flash or resize objects quickly. Flashing and rapid screen changes can cause problems for people with seizure impairments and other neurological disorders.
●Allow users to turn off your program's animations and transitions. To support this ability, respect the Turn off all
unnecessary animations option in the Ease of Access Center in Windows.
