This content originally appeared on TPGi and was authored by James Edwards
This is a technique pulled from KnowledgeBase, a digital accessibility repository available through TPGi’s ARC Platform. KnowledgeBase is maintained and consistently updated by our experts, and can be accessed by anyone with an ARC Essentials or Enterprise tier subscription. Contact us to learn more about KnowledgeBase or the ARC Platform.
The impact of motion animation on people with a vestibular disorder is well documented, and known to cause nausea, dizziness, or headaches, in affected users. However the impact on people with some cognitive disabilities is less commonly discussed.
Studies have shown that decorative animations impair recall and are a source of extraneous cognitive load. In other words, it can be more difficult for people to read, comprehend, or remember the information they’ve read, if the content features animations that increase their cognitive load.
Understanding cognitive load
Cognitive load theory describes this issue in terms of a “bottleneck”. Information has to pass from sensory memory (reading input from sight, sound, or tactile information), through working memory (information processing, such as decoding the meaning from language), to long-term memory (where processed information is stored for later recall). Working memory is very limited, and so this is where the bottleneck occurs.
Working memory itself can be further divided into three types of cognitive load, and it is here that the impact on people with cognitive disabilities is apparent:
- Intrinsic load is the inherent complexity or difficulty of the content itself.
- Germane load is the amount of concentration and mental effort required to learn the content.
- Extraneous load is external distractions not directly related to the content.
People with ADHD (Attention Deficit Hyperactivity Disorder) are generally quite easily distracted, and have to concentrate harder to understand what they’re reading, so both the germane load and extraneous load is increased. People with dyslexia generally have to work harder to read and decode written content, so for this group of people, the intrinsic and germane load is increased. Some people with ASD (Autistic Spectrum Disorder) also report that unnecessary visual effects and animations can be a source of frustration and distraction, increasing the extraneous load.
Overall, most people with a cognitive disability have reduced working memory and/or increased cognitive load, all the time, so any factor which further increases the cognitive load required to read and understand content, will disproportionately affect people with a cognitive disability.
Cool is not cool
Another way of understanding this is the “seductive details effect”, which describes how information which is interesting, but irrelevant, reduces learning capacity. The more interesting the details are, the more extraneous load they create, and hence, the more they impair learning, an effect which is exacerbated in people who have reduced cognitive function to begin with.
Motion animations fall firmly into the category of irrelevant distractions. They might look cool and sexy, but it’s precisely because they look cool and sexy, that they impede a user’s ability to learn the actual content. This impact is measurable for all users, but for users with a cognitive disability, the impact may be far more severe.
Conclusion
Motion animation should be avoided.
However this can be a hard sell against marketing and design agendas. In this case, there are several approaches that can be used to ensure users have the ability to avoid such distractions:
- Provide a version of the web content that doesn’t use the animated content effects at all.
- Provide a control that allows users to turn the animation effect on and off.
- Ensure that user settings at the system level for reduced motion preferences are respected by the web page.
The third approach is the most straightforward, because it can be achieved by using the prefers-reduced-motion media query (which is also sufficient to meet Success Criterion 2.3.3: Animation from Interactions). This media query is supported by all modern browsers, and detects whether the user has adjusted their operating system settings to turn off animations or reduce their motion. For example, a query such as this will disable all CSS transition effects for users who have set that preference:
@media (prefers-reduced-motion) {
* {
transition: none !important;
}
}For animations that are triggered by JavaScript (rather than defined in CSS), you can create a helper function using matchMedia to detect the user’s preference, and then use that function’s return value as a condition:
const prefersReducedMotion = () => {
return window.matchMedia('(prefers-reduced-motion)').matches;
}Resources
- Read this article in ARC (must be an ARC Essentials or Enterprise subscriber)
- Decorative animations impair recall and are a source of extraneous cognitive load
- Cut It Out: Learning with Seductive Details
- Introduction to Cognitive Disability and Accessibility Testing
- Accessibility according to actual people with disabilities: Motion, animations and cluttered pages
- Motion (TPAC 2020)
The post The impact of motion animation on cognitive disability appeared first on TPGi.
This content originally appeared on TPGi and was authored by James Edwards
James Edwards | Sciencx (2022-02-03T13:36:19+00:00) The impact of motion animation on cognitive disability. Retrieved from https://www.scien.cx/2022/02/03/the-impact-of-motion-animation-on-cognitive-disability/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.