Анимация и движение

Вы когда-нибудь ехали в машине, лодке или самолете и вдруг чувствовали, как мир вращается? Или у вас была настолько сильная мигрень, что анимация на вашем телефоне или планшете, созданная, чтобы «доставить вам удовольствие», вдруг вызывала тошноту? А может быть, вы всегда были чувствительны ко всем видам движения? Это примеры различных типов вестибулярных расстройств.

К 40 годам более 35% взрослых сталкиваются с той или иной формой вестибулярной дисфункции . Это может привести к временному головокружению, мигрени или более стойкому вестибулярному расстройству.

Помимо головокружения, многих людей отвлекает движущийся, моргающий или прокручивающийся контент. Люди с СДВГ и другими расстройствами внимания могут настолько отвлекаться на ваши анимированные элементы, что забывают, зачем вообще зашли на ваш сайт или в приложение.

В этом модуле мы рассмотрим некоторые способы оказания более эффективной поддержки людям с различными типами двигательных расстройств.

Мигающий и движущийся контент

При создании анимации и движения задайте себе вопрос, не является ли движение элемента чрезмерным. Например, мерцание цветов от темного к светлому или быстрые движения на экране могут вызывать приступы у людей с фоточувствительной эпилепсией. По оценкам, 3% людей с эпилепсией страдают от фоточувствительности, и это чаще встречается у женщин и молодых людей.

В рекомендациях WCAG по гидроизоляции не рекомендуется следующее:

• Вспышки происходят более трех раз в секунду.
• Вспышки ниже порога общей вспышки и красной вспышки .

В лучшем случае эти вспышки могут привести к невозможности использования веб-страницы, а в худшем — к заболеванию.

При любом экстремальном движении крайне важно проверить его с помощью инструмента анализа фоточувствительной эпилепсии (PEAT) . PEAT — это бесплатный инструмент, позволяющий определить, может ли контент экрана, видео или анимация вызвать приступы эпилепсии. Не весь контент нуждается в оценке с помощью PEAT, но контент, содержащий мигание или быстрые переходы между светлыми и темными цветами фона, следует оценить, просто для безопасности.

Ещё один вопрос, который следует себе задать об анимации и движении, — это насколько движение элемента необходимо для понимания контента или действий на экране. Если оно не является необходимым, подумайте о том, чтобы удалить все движения — даже микро-движения — из элемента, который вы создаёте или проектируете.

Предположим, вы считаете, что движение элемента не является существенным, но может улучшить общее впечатление пользователя, или вы не можете удалить движение по другой причине. В этом случае вам следует следовать рекомендациям WCAG по движению . В рекомендациях указано, что необходимо предусмотреть возможность для пользователей приостанавливать, останавливать или скрывать движение для: несущественных движущихся, мигающих или прокручивающихся элементов, которые запускаются автоматически, длятся более пяти секунд и являются частью других элементов страницы.

Приостановите, остановите или скройте движение.

Добавьте на страницу механизм паузы, остановки или скрытия , позволяющий пользователям отключать потенциально проблемную анимацию движения. Это можно сделать на уровне экрана или на уровне элемента.

Например, предположим, что ваш цифровой продукт содержит много анимаций. Рассмотрите возможность добавления доступного переключателя JavaScript , позволяющего пользователям управлять своим взаимодействием с продуктом. Когда кнопка переключена в положение «анимация выключена», все анимации на этом экране и на всех остальных экранах замораживаются.

Используйте медиа-запросы

Помимо избирательного подхода к анимации, предоставления пользователям возможности приостанавливать, останавливать, скрывать движение и избегать бесконечных циклов анимации, вы также можете рассмотреть возможность добавления медиазапроса, ориентированного на движение. Это даст вашим пользователям еще больший выбор в отношении того, что отображается на экране.

@prefers-reduced-motion

Подобно медиазапросам с упором на цвет в модуле color , медиазапрос @prefers-reduced-motion проверяет настройки операционной системы пользователя, связанные с анимацией.

Пользователь может установить параметры отображения для уменьшения анимации. Эти настройки различаются в зависимости от операционной системы и могут быть позитивными или негативными. С помощью `@prefers-reduced-motion` вы можете создать сайт, который будет учитывать эти настройки.

На macOS и Android пользователь включает эту настройку для уменьшения анимации. На macOS пользователь может установить параметр «Уменьшить анимацию» в разделе «Настройки» > «Специальные возможности» > «Дисплей». На Android этот параметр называется «Удалить анимацию» . На Windows этот параметр обозначен как «Показать анимацию» и включен по умолчанию. Пользователю необходимо отключить этот параметр, чтобы уменьшить анимацию.

Для обеспечения доступности для людей, испытывающих трудности с движением, даже анимации короче 5 секунд, указанных в рекомендациях WCAG 2.0 AA, следует использовать с осторожностью. Наиболее надежным методом является предоставление пользователям, выразившим предпочтение уменьшению интенсивности движений, исключительного контроля над анимацией, позволяя им запускать и останавливать анимацию с помощью специальных элементов управления, таких как кнопка воспроизведения и кнопка паузы соответственно.

Постепенное улучшение подвижности

Как дизайнеры и разработчики, мы сталкиваемся с множеством вариантов выбора, включая состояния движения по умолчанию и интенсивность отображаемого движения. Взгляните еще раз на последний пример с движением.

Предположим, мы решили, что анимация не нужна для понимания содержимого на экране. В этом случае мы можем установить в качестве состояния по умолчанию сокращенную анимацию вместо полной версии. Если пользователи специально не запросят анимацию, она будет отключена.

Мы не можем предсказать, какой уровень движения вызовет проблемы у людей с эпилептическими припадками, вестибулярными и другими нарушениями зрения. Даже небольшое движение на экране может вызвать головокружение, затуманенное зрение или более серьезные последствия. Поэтому в следующем примере мы по умолчанию отключаем анимацию.

Многослойные медиа-запросы

Вы можете использовать несколько медиа-запросов, чтобы предоставить пользователям еще больше вариантов выбора. Давайте используем одновременно @prefers-color-scheme , @prefers-contrast и @prefers-reduced-motion .

Предоставьте пользователям возможность выбора.

Хотя добавление анимации в цифровые продукты для развлечения пользователей может быть увлекательным занятием, крайне важно помнить, что некоторые люди могут пострадать от таких решений. Чувствительность к движению может затронуть любого, от легкого дискомфорта до изнурительной болезни или приступа.

Вы можете использовать ряд различных инструментов, чтобы позволить пользователю самому решить, что для него лучше, вместо того, чтобы гадать, сколько анимации — это слишком много. Например, добавьте переключатель для включения или выключения анимации на вашем сайте или в веб-приложении. Рассмотрите возможность установить для такого переключателя значение по умолчанию — « выключено» .