Главные принципы анимации в UX-дизайне
Когда я просчитываю заказ на веб-дизайн, я сразу уточняю, с какой анимацией – простой или сложной – будет ресурс. И, поверьте, стоимость будет очень сильно отличаться. Потому что анимации – это не просто развлекательные элементы для клиентов, это очень сильный триггер и дофаминовая подпитка для пользователя, которая повышает лояльность к ресурсу.
UX-анимации служат трем главным целям
Побуждение пользователя к действиям. Например, «вибрирующая» форма заказа или мигающий значок редактирования при наведении курсора на поле ввода. Иногда анимация может подсказывать пользователю, какие действия ему нужно предпринять для получения того или иного результата. Такая механика часто используется в мобильных приложениях – при помощи анимации свайпа пользователь понимает, что произойдет при «смахивании» вправо или влево.
- «Вознаграждение» пользователя. Эту цель выполняют все анимации обратной связи – например, поп-ап «Спасибо за заявку» после отправки формы обратной связи или анимированное начисление бонусов за заказ. Доказано, что анимации с поощрением вызывают у пользователей выброс дофамина, отвечающего за удовольствие. Таким образом, у пользователей повышается настроение, и они лояльнее относятся к вашему ресурсу.
- Имиджевая. Сайт застройщика или компании, продающей luxury-товары или услуги смотрится гораздо дороже и престижнее с анимацией, чем без неё.
Какие действия уместно анимировать
Навигация пользователя – основные и дополнительные панели меню, принципы их использования.
Выделение наиболее важного элемента. Может использоваться и в маркетинговых целях – например, анимацией можно выделить наиболее выгодный тариф в подписке.
Выбор и увеличение объекта – например, в фотогалерее.
Совершение действия – загрузить, сохранить, отредактировать объект.
- Визуальные подсказки – если интерфейс сложен или содержит много вариантов навигации и действий.
- Вход на сайт, загрузка контента (короткие анимации).
Анимации делают более наглядными совершения действий, переходы из одного состояния страницы в другое, переходы на другой экран. Они глубже погружают пользователя в процесс и дарят чувство реальности происходящего. Также с помощью анимации можно показать взаимосвязь элементов, их иерархию, подтолкнуть пользователя к прохождению определенного сценария.
Главные приемы UX-анимации
- Ожидаемое поведение. Анимированный объект должен вести себя так, как ожидает пользователь, при этом показываться плавно, чтобы пользователь успел его разглядеть, понять и – в идеале – повзаимодействовать с ним. Например, если пользователь разглядывает фото в галерее и наводит курсор на одно из них, то ожидаемо, что оно увеличится в размере, а не уменьшится, не станет крутиться или раскачиваться вправо-влево.
- Трансформация. Если объект переходит из одного состояния в другое, лучше подкрепить это анимацией. Например, после загрузки файла индикатор-прелоадер может превратиться в кнопку «Отправить».
- Анимация при изменении значения. Введение определенных значений можно показать нагляднее, если проиллюстрировать это анимацией. Например, если пользователь заполняет опрос о пищевых привычках и указывает потребляемое в день количество воды, можно проиллюстрировать это бутылкой с водой. При минимальном указанном количестве вода будет только на дне бутылки, при максимальном – заполнять всю емкость.
- Затемнение при смене фокуса внимания. Если на экране появляется поп-ап или дополнительное меню, основной фон автоматически блюрится или затемняется. Это делается для создания иллюзии трехмерного пространства, а также, чтобы сообщить пользователю, какое действие ему следует выполнить в первую очередь. Например, при удалении элемента основной экран затемняется, и появляется поп-ап «Точно удалить?» с вариантами ответа. Пользователь понимает, что он не перейдет к другим действиям, пока не ответит на вопрос.
- Удаление и изменение масштаба. Эта анимация используется для показа доступных функций – например, ее можно увидеть при разблокировке айфона, когда приближенные иконки меню быстро удаляются от экрана, чтобы встроиться в сетку меню.
- Сдвиг и перелистывание. Такая анимация используется для показа дополнительных функций или перехода к следующей странице – например, в электронной книге. Сдвиг используется и в мобильном меню – например, чтобы вызвать часто используемые функции в iOS или открыть инструменты управления сообщением/заметкой.
- Смещение картинки. Анимацию можно увидеть, например, при чтении блога. Когда вы скроллите страницу вниз, текст как бы «смещает» заглавную картинку, перемещая на себя внимание пользователя. Также этот эффект используется в раскрывающихся списках – при раскрытии одного из пунктов остальной контент плавно смещается вниз.
- Умножение элементов. Этот прием используется для экономии пространства. Например, если вы просматриваете документ в текстовом редакторе, основные инструменты могут скрываться в правом нижнем углу под иконкой «+». При нажатии на него появляются иконки доступных инструментов – редактирования, комментирования, сохранения и т.д.
- Слои. Чтобы, опять же, создать иллюзию физического пространства, в интерфейсе может использоваться анимация слоями, похожими на листы бумаги. Например, такая анимация используется при просмотре вкладок браузера или меню.
- Задержка при появлении анимации. Этот прием позволяет понять, как связаны элементы между собой. Например, если 2 анимированных блока появляются одновременно, а третий – чуть позже, то пользователь понимает, что третий может каким-то образом объединять их. Например, он может быть кнопкой выбора. Таким образом, пользователь сначала знакомится с двумя статичными блоками, а затем видит, какое действие можно совершить с ними.
- Взаимосвязь между двумя анимированными объектами. Схожие или зависимые друг от друга анимации показывают, как объекты связаны между собой. Например: на экране представлено портфолио определенного дизайнера, аватары самих дизайнеров выстроены в горизонтальную линию внизу. При горизонтальном скролле по аватарам экран с портфолио также скроллится, показывая работы других дизайнеров. Так мы понимаем взаимосвязь между аватаром и работами на экране.
Принципы создания UX-анимаций
- Соблюдайте правильную скорость. Слишком высокая приведет к тому, что пользователь не заметит изменения, а слишком низкая будет напоминать «зависание» в системе. Оптимальное время смены внешнего вида экрана – 200-500 миллисекунд. Также скорость обычно зависит от разрешения экрана – чем меньше экран, тем выше скорость.
- Обращайте внимание на последовательность. Если анимирована вся страница сайта, то сначала должен появляться главный баннер, затем – заголовок, затем –подзаголовок, после – кнопки.
- Движение должно быть естественным. Избегайте странных, неестественных анимаций, нелогичных движений. Как и в природе все подчиняется логике, так оно должно происходить и на сайте. Например, если объекты будут проходить друг через друга или выстраиваться в хаотичном порядке, это создаст трудности взаимодействия с ресурсом.
- Выделяйте главный элемент. Если на странице присутствует иерархия элементов (что происходит в большинстве случаев), главный элемент должен быть выделен с помощью анимации. Например, можно анимировать его отдельно на фоне статичных элементов или добавить дополнительные движения.
Вместо заключения
Итак, какие главные задачи выполняет UX-анимация?
- Иллюзия реальности. Анимированные объекты ведут себя так же, как и предметы в реальности – появляются, двигаются, надвигаются один на другой. Анимация глубже погружает пользователя во взаимодействие с интерфейсом, создавая реалистичное окружение.
- Непрерывность взаимодействия. Анимация помогает избежать нежелательных пауз между действиями. Когда одно действие плавно вытекает одно из другого, это больше вовлекает пользователя и не позволяет ему томиться ожиданием.
- Иерархия между объектами. Анимация позволяет понять, как объекты связаны между собой. С помощью анимации пользователи понимают, к какому объекту относится какое действие, и в каком порядке нужно взаимодействовать с элементами.
Отсюда, UX-анимация – это очень важный элемент дизайна, и грамотное ее продумывание помогает пользователю лучше взаимодействовать с ресурсом и повышать конверсию.
Осторожно!
Если у вас под рукой нет хорошего верстальщика, который умеет в анимации - вы рискуете получить тормознутое, лагающее нечто вместо сайта.
Анимации должны помогать пользователю, а не мешать ему. Не переборщите с анимацией и протестируйте сайт на максимально возможном количестве устройств перед запуском в продакшен.
Как обычно, жду комментариев и буду рада ответить на возникшие вопросы.
Гифки из 2015-ого года.
Спасибо за ностальгию.
Все хорошо в меру. Иногда обилие анимаций, которое грузит твой девайс, просто раздражает.
Абсолютно согласна. Обилие анимаций в принципе не нужно.
С точки зрения верстки/программинга - с анимацией непросто работать и нужен очень рукастый Фронт, чтобы не тормозило, не лагало.
Для меня главный принцип в дизайне - лишнее убрать!
Побуждение пользователя к действиям. Например, «вибрирующая» форма заказа или мигающий значок... - Фу
Доказано, что анимации с поощрением... хорошо бы ссылку на исследование (об анимации, а не о поощрении).
Имиджевая... вот прямо каждый пользователь врубается что по чем в разработке). Нажал на кнопку пользователь и ждёт когда же уже имеджевая анимация загрузится).
И да, на мой взгляд эти ваши "пляшущие кнопочки" это UI
GL
Я нахожу разумной ту анимацию, которая помогает в понимании статуса элементов, в навигации и понимаю, что переборщить - легко.
По поводу анимации с поощрением, если мы сравниваем одно из двух, или сухое "Ваш заказ принят", или та же самая надпись, но, например, с анимированным маскотом компании, именно второе вызывает большую вовлеченность. Это очевидно (для эмоциональных пользователей), как очевидно и то, что на часть ЦА это не работает.
Имиджевая это история про "вау-эффект". Если пользователю нужно врубаться - это уже не та история.
Повторение — мать учения :)
А почему вы не указываете ссылки на источники?
Есть такой китайский музыкальный сервис NetEase Music (网易音乐) и в нём есть похожая анимация кручения пластинки во время проигрывания треков + также обложка трека на пластинке. Выглядит шикарно, особенно в ПК версии - разворачиваешь окно на весь экран: слева пластинка крутится, справа текст песни. Выглядит не нагружено и минималистично. Жаль сервис у нас бесполезный т.к. куча музыки на территории РФ не доступно для прослушивания. Хотелось бы побольше таких плееров с пластинками, личный кайф это наблюдать.