Animations

The Skinny

Animated system feedback visually engages learners while a particular process is happening in the background. Changes in the state of an element to draw attention (if required) are useful for continuity or to alert users to required action. Spacial motion and transitions help orientate a position when moving forwards or backwards across multiple slides or pages. Animated movement is a powerful tool, however, animated motions must be used sparingly to support learners with vestibular dysfunction.

The Detail

Animation can delight and engage learners and reinforce the act of learning when an animation is relevant and within context to the learning subject matter. UI elements that perform a change in state, such as accordions, drop-down panels, dialogue panels should use a subtle transition animation to indicate the state change - however, ¹exaggerated parallax and scroll jacking (or scroll hijacking is when a page scrolls at different speeds and stops at unexpected locations) animations are very likely to trigger vestibular disorders. Unexpected full screen, auto-looping and fast flashing animations will cause a sensation of vertigo and dizziness in a user with a vestibular disorder, to higher degrees users can experience increasing concentration problems and server migraines and in rare cases even stroke. ²Providing the option to turn off animations and motions as a user setting or adhere to a user's device preferences (prefers-reduced-motion media query) greatly supports learners with all types of vestibular disorder.

The sparing use of animation should be applied for branding and decoration, however, animation should be used to ³reenforce hierarchy, attention and system feedback - elements such as progress bars are a classic means of representing a system function, also helping longer wait times be more tolerable, and the opening of a dialogue box should use a fade-in-out transition as appose to fly-in motion from an unexpected direction.

Overall the key takeaways for animation are: - Parallax and scroll jacking the cross-motion and the unexpected movement of a viewport are prime triggers so should be omitted. Do not animate a whole page, keep animations small enough so they do not disordinate and confuse; a good rule of thumb is keeping within 1/3 of the viewport, and not allowing the animation to track the height or width of the screen. Remove looping animations, auto motion and auto-starting videos, in most cases the user should trigger the animation themselves. Allow the user to reduce/ turn off animated motions. The fundamental purpose of an LMS is to be utilitarian to the function of learning, animation can delight in the short term but impact heavily on a learner's goal to uncover and advance their knowledge, by including people with vestibular dysfunction in UI design simply improves the learning experience for everyone.