Animation

Beautiful, subtle animations throughout your web page convey status, provide feedback, and help users visualize the results of their actions. For example, when the user clicks on a button to enlarge an image, make sure that an animation is used.

While animation isn’t required everywhere, try to use them where it makes the most sense.

Strive for realism. Realistic movement can help people understand how something works. For example, when opening a menu, a sliding animation can take place.

Avoid using animations for interactions that occur frequently. Repetitive animations that occur often can lead to the perception that efficiency is being compromised for the sake of animation. Don’t make people spend extra time watching unnecessary animation every time they interact with something.

Enhance feedback and understanding. It’s important that people don’t lose context when performing actions with immediate results. Use animation to put these actions into a more human time frame.

Transition smoothly between object states. Showing only the beginning and ending states during a transition, such as a resize, can be jarring. Animated transitions provide continuity and feel more natural.

Use animation and motion effects judiciously. Don’t use animation for the sake of using animation. Excessive or gratuitous animation can make people feel disconnected or distracted, especially in when your site doesn’t provide an immersive experience.