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

Как именно улучшается юзабилити сайта при использовании анимаций?

Добавление анимации на сайт — не гарантия того, что ресурс будет успешным или что его будет проще продвигать в поисковых системах. Ее используют по другим причинам:

1. Анимация привлекает внимание. Когда на сайте что-то движется, меняет цвет или местоположение, это невозможно не заметить. И если вам, как дизайнеру, нужно что-то выделить, то анимированные элементы — отличная возможность для этого.
2. Анимация делает призывы к действиям более эффективными и заметными. Особенно если с ее помощью подчеркнуть кликабельность определенной кнопки (использовать анимацию кнопки, которая качается из стороны в сторону или резко встряхивается) или направить внимание на сам призыв с помощью динамичных стрелок или прочих подобных деталей.
3. Анимация позволяет направить посетителя по нужному пути клиента. Например, в каждом блоке или через блок можно внедрять интерактивные элементы, которые будут подсказывать человеку, что делать дальше. Для этого часто используют поп-апы или небольшие детали в виде стрелок, указательных пальцев.

Как реально улучшить юзабилити сайта, используя анимации: 6 советов

№1. Сначала обдумать концепцию, а потом работать над анимацией

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

Обязательно учитывайте позиционирование компании (если заказчик — компания), ее визуальный стиль. Если он очень официальный, сдержанный, деловой, то анимация вообще может быть лишней. Иногда она нужна только для улучшения простых функциональных действий в качестве поп-апа.

А если вы уверены, что анимация нужна, но не можете определиться с эффектом, воспользуйтесь Slides framework. В сервисе представлено более 10 стилей, которые в нем же можно протестировать. Это очень упрощает процесс подбора нужного эффекта.

№2. Делать адаптивные анимации

Адаптивные — это те, которые хорошо (как задумано) смотрятся и с телефона, и с планшета, и с ноутбука/ПК.

Адаптивные интерактивные элементы можно делать в Adobe After Effects или Invision. Эти программы имеют удобный и интуитивно понятный функционал, а еще позволяют создавать анимации разного уровня сложности.

Самые популярные адаптивные анимированные фишки:

• вращение;
• скольжение;
• имитация удара в экран;
• вспышка и пульсация;
• качание;
• сдвиг и желеподобный эффект, другое.

№3. Создавать динамичные, а не затянутые анимации

Опытные дизайнеры говорят, что при работе с анимацией половина времени уходит на ее создание, а половина — на подбор идеального тайминга. И обычно этим идеальным таймингом считается продолжительность от 200 до 500 миллисекунд. Но чаще длительность анимаций равна 1-3 секундам. Если она больше 5 секунд, то объект считается медленным, затянутым и неэффективным, тем более с точки зрения юзабилити. Если меньше 0,2 секунд, то слишком динамичной, и в таком случае анимация отвлекает, а не улучшает восприятие.

№4. Использовать CSS при создании анимации и учитывать особенности операционных систем

Знать особенности операционных систем важно, так как если их не учесть, можно спровоцировать негативное восприятие анимации. Например, пользователи iPhone 7 часто жалуются на то, что интерактивные элементы и переходы вызывают у них головокружение, тошноту и напряжение глаз. И если вы уверены, что целевая аудитория проекта, над которым работаете, это пользователи айфонов, то лучше перечисленные эффекты не использовать. А еще по возможности проверяйте, соответствует ли ваш дизайн рекомендациям WCAG, чтобы избежать подобных конфузов.

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

№5. Делать анимации, на воспроизведение которых влияют действия посетителя

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

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

№6. Не анимировать несколько объектов сразу

Когда человек смотрит на анимацию, где одновременно движется несколько объектов, он просто не может сфокусироваться. В итоге — он не понимает, что от него хотят. Скорее всего, такую анимацию он просто пропустит и пойдет дальше изучать сайт.

Как нужно? Идеальный вариант — анимировать только 1 элемент, если их несколько. Для этого выбрать самый важный, на котором нужно акцентировать внимание. Если это невозможно и надо анимировать 2-3 детали, сделайте так, чтобы они появлялись последовательно. Если таких элементов больше 3, обязательно их сгруппируйте и запрограммируйте так, чтобы начало и конец их воспроизведения были в одно время.

И обязательно тестируйте все свои идеи! В случае с анимацией советуем протестировать ее с разных устройств (как минимум — с телефона и ноутбука) и на разных скоростях (обязательно — на медленной).