До сих пор мы рассматривали, что такое анимация в Интернете и как её создавать. Прежде чем завершить этот курс, давайте подумаем, всё ли мы сделали правильно для наших посетителей.
Есть много вещей, где анимация может как помочь, так и помешать.
Убедитесь, что содержимое доступно
Мы уже не раз приводили пример, когда анимируемое содержимое показывается на экране. Если содержимое начинается со скрытого состояния, нам нужно быть осторожными, чтобы оно не осталось скрытым для некоторых пользователей. Старые браузеры поддерживают CSS-анимацию в разной степени, а JavaScript может работать не всегда. Мы можем использовать такие инструменты, как Modernizr, чтобы обойти потенциальные проблемы.
Мы также используем анимацию, чтобы передать смысл и замысел в нашем дизайне. При разработке анимации не забывайте, что некоторые люди не в состоянии её увидеть. Они могут использовать программу чтения с экрана или иметь другие настройки браузера, из-за которых анимация не будет работать задуманным образом. Убедитесь, что важная информация доступна, независимо от того, работает ли анимация.
Анимация, которая воспроизводится автоматически, может отвлекать от другого содержимого на странице. Постарайтесь ограничить использование анимации только теми ситуациями, когда вы хотите, чтобы посетители отвлекались на неё. Это также может означать ограничение времени воспроизведения анимации или возможность её остановки до того, как посетителю нужно будет сосредоточиться на другом.
Обеспечьте контроль
W3C рекомендует, чтобы любое содержимое, которое мигает, прокручивается или автоматически обновляется более 5 секунд, можно было бы приостановить или удалить из него движение. Использование состояния animation-play-state — один из способов поставить анимацию на паузу при необходимости, как показано здесь.
Предусмотрите альтернативные варианты ввода
Всё больший процент ваших посетителей будет пользоваться телефонами. При использовании телефона нет ни курсора, ни состояния наведения. Мы должны разработать дизайн с учётом этого. Один из вариантов, который я часто использую, — это обнаружение касания и добавление класса .active к цели. Затем я добавляю переходы или анимацию как в состояние :hover, так и в состояние .active.
Путаница
Иногда сайты заходят слишком далеко и пытаются анимировать всё подряд. Это не только замутняет сообщение сайта, но и приводит к путанице. Особенно это касается пользовательского интерфейса. Добавляя анимацию к элементам на странице, с которыми взаимодействуют посетители, убедитесь, что очевидно, почему анимация была запущена. У ваших посетителей нет времени на то, чтобы расшифровывать сложный визуальный дизайн или способ перемещения, поэтому постарайтесь быть понятными.
Не делайте мне больно
Слишком много анимации или некачественная анимация могут вызвать у людей тошноту.
Когда Apple представила iOS7, обновлённую операционную систему для своих телефонов, в ней появилось гораздо больше движений и анимации. Даже части из них было достаточно, чтобы вызвать у людей тошноту. Некоторые люди, вроде меня, с трудом читают в машине или автобусе, так как от движения им становится плохо, а другие не могут играть в некоторые видеоигры дольше нескольких минут подряд.
Причина этого кроется в том, как работает наша вестибулярная система. У нас в ушах есть три трубы, которые помогают нам определять положение головы в трёхмерном пространстве. Мы можем обмануть свой разум, заставив его думать, что мы двигаемся, но когда вестибулярная система не распознаёт движение, наш мозг приходит в замешательство, и мы чувствуем себя плохо.
Плохие ощущения — это побочный эффект эволюции. Тошнота — сложное явление, и у нас имеется особая часть мозга, предназначенная для её преодоления. Так получилось, что эта часть мозга располагается рядом с частью, которая отвечает за равновесие, и поэтому мы чувствуем себя плохо.
Это может стать проблемой по мере того, как мы будем внедрять всё больше носимых технологий. При разработке крупных анимаций обязательно проверяйте, удобно ли людям выполнять те или иные движения.
Сайт Vestibular.org — отличная отправная точка для получения дополнительной информации по данной теме теме.
Доступность — это выгода для всех
Доступность нужна не только тем, кто пользуется программами чтения с экрана или альтернативными способами просмотра нашего содержимого. Мы все иногда отвлекаемся, у нас прерывается связь, мы проверяем телефон в очереди на почте или сверяемся с указаниями навигатора за рулём. Мы должны помнить о том, как люди могут использовать наши материалы, и следить за тем, чтобы анимация не мешала им.
Домашнее задание
Если ваша работа связана с проектированием или созданием интерфейсов для людей, найдите время, чтобы прочитать статью Animation for Attention and Comprehension. Подумайте, как люди могут использовать вашу работу, и что случится, если они не сумеют увидеть анимацию.