Главные принципы анимации в UX-дизайне

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

• Побуждение пользователя к действиям. Например, «вибрирующая» форма заказа или мигающий значок редактирования при наведении курсора на поле ввода. Иногда анимация может подсказывать пользователю, какие действия ему нужно предпринять для получения того или иного результата. Такая механика часто используется в мобильных приложениях – при помощи анимации свайпа пользователь понимает, что произойдет при «смахивании» вправо или влево.

• «Вознаграждение» пользователя. Эту цель выполняют все анимации обратной связи – например, поп-ап «Спасибо за заявку» после отправки формы обратной связи или анимированное начисление бонусов за заказ. Доказано, что анимации с поощрением вызывают у пользователей выброс дофамина, отвечающего за удовольствие. Таким образом, у пользователей повышается настроение, и они лояльнее относятся к вашему ресурсу.
• Имиджевая. Сайт застройщика или компании, продающей luxury-товары или услуги смотрится гораздо дороже и престижнее с анимацией, чем без неё.

• Навигация пользователя – основные и дополнительные панели меню, принципы их использования.

• Выделение наиболее важного элемента. Может использоваться и в маркетинговых целях – например, анимацией можно выделить наиболее выгодный тариф в подписке.

• Выбор и увеличение объекта – например, в фотогалерее.

• Совершение действия – загрузить, сохранить, отредактировать объект.

• Визуальные подсказки – если интерфейс сложен или содержит много вариантов навигации и действий.
• Вход на сайт, загрузка контента (короткие анимации).

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

• Ожидаемое поведение. Анимированный объект должен вести себя так, как ожидает пользователь, при этом показываться плавно, чтобы пользователь успел его разглядеть, понять и – в идеале – повзаимодействовать с ним. Например, если пользователь разглядывает фото в галерее и наводит курсор на одно из них, то ожидаемо, что оно увеличится в размере, а не уменьшится, не станет крутиться или раскачиваться вправо-влево.

• Трансформация. Если объект переходит из одного состояния в другое, лучше подкрепить это анимацией. Например, после загрузки файла индикатор-прелоадер может превратиться в кнопку «Отправить».

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

• Затемнение при смене фокуса внимания. Если на экране появляется поп-ап или дополнительное меню, основной фон автоматически блюрится или затемняется. Это делается для создания иллюзии трехмерного пространства, а также, чтобы сообщить пользователю, какое действие ему следует выполнить в первую очередь. Например, при удалении элемента основной экран затемняется, и появляется поп-ап «Точно удалить?» с вариантами ответа. Пользователь понимает, что он не перейдет к другим действиям, пока не ответит на вопрос.

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

• Сдвиг и перелистывание. Такая анимация используется для показа дополнительных функций или перехода к следующей странице – например, в электронной книге. Сдвиг используется и в мобильном меню – например, чтобы вызвать часто используемые функции в iOS или открыть инструменты управления сообщением/заметкой.

• Смещение картинки. Анимацию можно увидеть, например, при чтении блога. Когда вы скроллите страницу вниз, текст как бы «смещает» заглавную картинку, перемещая на себя внимание пользователя. Также этот эффект используется в раскрывающихся списках – при раскрытии одного из пунктов остальной контент плавно смещается вниз.

• Умножение элементов. Этот прием используется для экономии пространства. Например, если вы просматриваете документ в текстовом редакторе, основные инструменты могут скрываться в правом нижнем углу под иконкой «+». При нажатии на него появляются иконки доступных инструментов – редактирования, комментирования, сохранения и т.д.

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

• Задержка при появлении анимации. Этот прием позволяет понять, как связаны элементы между собой. Например, если 2 анимированных блока появляются одновременно, а третий – чуть позже, то пользователь понимает, что третий может каким-то образом объединять их. Например, он может быть кнопкой выбора. Таким образом, пользователь сначала знакомится с двумя статичными блоками, а затем видит, какое действие можно совершить с ними.

• Взаимосвязь между двумя анимированными объектами. Схожие или зависимые друг от друга анимации показывают, как объекты связаны между собой. Например: на экране представлено портфолио определенного дизайнера, аватары самих дизайнеров выстроены в горизонтальную линию внизу. При горизонтальном скролле по аватарам экран с портфолио также скроллится, показывая работы других дизайнеров. Так мы понимаем взаимосвязь между аватаром и работами на экране.

• Соблюдайте правильную скорость. Слишком высокая приведет к тому, что пользователь не заметит изменения, а слишком низкая будет напоминать «зависание» в системе. Оптимальное время смены внешнего вида экрана – 200-500 миллисекунд. Также скорость обычно зависит от разрешения экрана – чем меньше экран, тем выше скорость.

• Обращайте внимание на последовательность. Если анимирована вся страница сайта, то сначала должен появляться главный баннер, затем – заголовок, затем –подзаголовок, после – кнопки.

• Движение должно быть естественным. Избегайте странных, неестественных анимаций, нелогичных движений. Как и в природе все подчиняется логике, так оно должно происходить и на сайте. Например, если объекты будут проходить друг через друга или выстраиваться в хаотичном порядке, это создаст трудности взаимодействия с ресурсом.

• Выделяйте главный элемент. Если на странице присутствует иерархия элементов (что происходит в большинстве случаев), главный элемент должен быть выделен с помощью анимации. Например, можно анимировать его отдельно на фоне статичных элементов или добавить дополнительные движения.

Итак, какие главные задачи выполняет UX-анимация?

• Иллюзия реальности. Анимированные объекты ведут себя так же, как и предметы в реальности – появляются, двигаются, надвигаются один на другой. Анимация глубже погружает пользователя во взаимодействие с интерфейсом, создавая реалистичное окружение.

• Непрерывность взаимодействия. Анимация помогает избежать нежелательных пауз между действиями. Когда одно действие плавно вытекает одно из другого, это больше вовлекает пользователя и не позволяет ему томиться ожиданием.

• Иерархия между объектами. Анимация позволяет понять, как объекты связаны между собой. С помощью анимации пользователи понимают, к какому объекту относится какое действие, и в каком порядке нужно взаимодействовать с элементами.

Отсюда, UX-анимация – это очень важный элемент дизайна, и грамотное ее продумывание помогает пользователю лучше взаимодействовать с ресурсом и повышать конверсию.

Осторожно!

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

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

Как обычно, жду комментариев и буду рада ответить на возникшие вопросы.