Анимации в UX. Простые советы, как прокачать интерфейс

Представь, ты открываешь приложение на своем телефоне. У тебя появляется, форма регистрации, ты её заполнил, нажал на кнопку, и… ничего не происходит. Ты начинаешь жмякать ещё и ещё, и только потом понимаешь, что происходила загрузка. Проблема в том, что интерфейс никак не даёт тебе понять, что с ним происходит. 

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

Почему анимация важнее, чем кажется?

Большое заблуждение у дизайнеров, как у начинающих ребят, так уже и у опытных, это то, что анимация выполняет только “декоративную” функцию.

Но её главная роль не в красоте, а в том, чтобы объяснить пользователю, что сейчас происходит и что будет дальше.

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

Анимация в приложении Airbnb

Когда использовать анимацию?

Можно выделить 4 основных момента, когда можно и нужно использовать анимации в интерфейсах.

Переходы между экранами

Не во всех проектах это применимо и необходимо, но если предусмотреть плавную смену экранов в вашем интерфейсе, то пользователям станет гораздо приятнее им пользоваться.

Анимация слайда экранов в приложении SKIMS

Микровзаимодействия

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

Анимированные реакции в приложении Shelf

Ожидание и загрузка

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

Анимация процесса поиска в браузере Arc

Это первая эвристика Джейкоба Нильсена из NNGroup. Система должна показывать пользователю, что с ней происходит. Покажите своему пользователю, что система загружается. Чтобы не попадать в ситуации, как я приводил в пример в начале статьи. А все эвристики юзабилити, мы в отдельном разделе на сайте подробно разобрали. Обязательно к изучению.

Атмосферные детали

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

Атмосферные анимации иконок Airbnb

Как сделать анимацию комфортной и понятной?

Самое важное в анимациях это не переборщить. Не нужно делать казино из вашего интерфейса. Лучше всего воспринимается анимация от 200 до 500 миллисекунд, cогласно гайдлайнам Google:

• 200–300 мс — для небольших элементов (например, нажатие кнопки).
• 400–500 мс — для крупных элементов и переходов между экранами.

Используйте easing-эффекты (ease-in-out), чтобы анимация начиналась и завершалась мягко. Представьте, как автомобиль плавно тормозит у светофора — примерно так должна ощущаться анимация. И Figma позволяет нам это сделать! Кстати, подробно все эффекты анимаций в Figma мы разбираем на на бесплатном курсе Figmaster.

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

Реальные примеры из практики

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

Анимация добавления товара в корзину в приложении Shop

Анимация — твой лучший помощник

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

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