Remember that most of our web visitors are visiting other ASU sites, and many are using more than one ASU mobile app. Does it provide important information or is it a novelty?Īnimations should only distract from the natural focus of the page’s content when necessary, such as to provide a notification or warn against a destructive possibility (such as the system logging the user out after too much inactivity).įinally, animations should be consistent across the ASU ecosystem, and should seem familiar to what users encounter around the internet.Does it slow the user down or speed things up?.Does this support - or interrupt - a user’s task?.

Avoid triggering several different animated elements on a page at the same time, as this might confuse the user. Avoid flashing fully saturated reds.Īnimations used in element transitions (such as a dropdown or carousel slide) should be subtle and not call excessive attention to themselves.

Animations, including animated gifs, should not blink or flash more than three times per second. Do not use animations that can trigger epilepsy.Parallax must be confined to small areas of the screen, as it can trigger illness.Certain animations, especially in certain color combinations, can cause a feeling of illness. Be sensitive to users with vestibular disorders.Color should not be used as a sole sensory indicator (e.g., “Place the green star on the red circle”).Animation controls must be placed in consistent locations and the click target must be at least 48x48 pixels.Animations that run on a continuous loop are considered to last more than five seconds. Any animation that lasts more than five seconds, regardless of sound, must provide play/pause/stop controls.Animations with audio that uses spoken words must be captioned, or a transcript must be provided below the animated element.Any animation with more than three seconds of audio must provide play/pause/stop controls. Any animation with audio must allow the user to control the audio.A transcription below the animation is acceptable. Animations that convey meaning or content must include a text-based alternative.Web and mobile animations must follow WCAG 2.0 guidelines they should be accessible and supportive to all users. Some users with reading disabilities can engage with animated content more easily than with written words. It can be a better alternative to video for users with limited data access. Communicate content more effectivelyĪnimation can be used in place of long paragraphs of text to demonstrate a concept or tell a story. They can also help prevent “change blindness” by calling attention to an element that has changed subtly.

Focus attentionĪnimations can also bring the user’s attention to something new, or tell the user that an action needs to be taken (think of a “ringing bell” icon when a new social media message arrives). They can quickly give a user feedback, such as when a “daisy wheel” spins to indicate that the system is processing. Here are a few good reasons to incorporate animation: Reduce cognitive loadĪnimations can cut the amount of effort needed for a user to understand an interaction.

But seasoned web animators know that animation is powerful, and must be used correctly. It is often tempting to add animation to a webpage to “make it look more innovative” or add an element of excitement.

Website parallax scrolling examples