Animation speed is critical for usability. If it’s too fast, it can make people dizzy or cause motion sickness. If it’s too slow, it can interfere with the our experience. Nielsen Norman Group says that in general, the duration of most animations should be between 100 and 500 milliseconds.
When animation lengthens the amount of time that it takes for someone to complete a task, that's a problem. In this example, scrolling triggers all of the elements on the GoDaddy design site. If you scroll too fast, you can't read the content. You have to scroll slowly through the site and wait for the content to come in. In this case, animation is being used for storytelling. The content gradually reveals itself as the user scrolls, but because everything is animated, it takes a while to load in. They're using animation in excess which makes for a poor (and time-consuming) user experience.
Animation is delightful when used in moderation and for specific jobs. L'Oréal's site is an example of motion and animation overload. They do have an accessibility button in their super navigation which allows users to toggle animations on and off. That being said, the default experience could be improved by incorporating some foundational accessibility principles to it. Too many things are moving, from the video in the masthead of the site to the carousel of cards that load in, expand in size, then shrink back down. Because of this overzealous use of animation, the site is quite laggy.
The Stanford d.School gives users the choice to toggle motion on and off, which complies with WCAG's rule that there needs to be a mechanism to stop motion. This is done through the use of a dropdown with two options, standard visuals and simplified visuals. Although their use of motion is minimal – it’s reserved for hover states on buttons to indicate that the element is interactive and for simplified background graphics – it's important to note that the overall experience of the site doesn't rely on the use of motion; it's simply enhanced by it. While we still think this is a good example, there is room improvement. The icon for the dropdown is a sun, which often indicates brightness or switching between light and dark mode, so it might not be as intuitive as it could be.
Apple's use of simple motion techniques makes for an overall simple but sophisticated user experience. In this example, they've used a simple hover animation for the articles at the bottom of the page to indicate that you can click on them. On hover, the text box expands to show more information about the article and a drop shadow appears on the card. This movement draws the eye to the text area and leaves no question in our minds that this element is clickable.
Help Scout does a great job of using motion and animation to fulfill more than one purpose on their site. They use animation primarily to showcase the functionality of their platform. This way, users get an idea of what is available on the platform without committing to a demo. Then they use animation to add a sense of fun and whimsy to the page. In some cases, the animations are so subtle that they almost go unnoticed. The sparkle around the “What you can do with Help Scout” is a perfect example. It brings a little moment of delight to an otherwise plain page.
One of the biggest reasons why we use motion and animation is to attract people’s attention. On our brand portal (which is connected to our GO modern SharePoint Intranet), we've used motion in the bell icon of our alert component to call out important information. In this case, the information on the page is explaining how to use certain slides in our PowerPoint template. This callout is important because it helps Habs accomplish the task at hand. It catches our attention without getting in the way, while still creating a sense of fun with its subtle jingle effect.
While we’ve only highlighted a few examples, we hope that this begins to break down the myth that designing for accessibility means compromising on design aesthetics and what we associate as visually pleasing. Using these techniques, among many others, you can bring in some of the positive aspects of immersive storytelling while still caring about accessibility.
Sorry, we couldn’t find anything that matches your search.