Как с помощью анимации улучшить UX (5 простых советов)?

Анимацие и движение непросто показывает картинку - оно создает историю. Не долгие и сложные истории, а простые что-то вроде: «Эй, тебе нужно взглянуть сюда» или «Ура, твоя операция прошла успешно!». Однако цель анимации - это не развлечь пользователя, а скорее помочь пользователю понять, что только что произошло. Эта идея четко выражена в цитате Зурба:

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

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

Загрузка не должна быть скучной

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

Практически любой сайт или приложение может использовать загрузку с постепенным наполнением контента, чтобы пользователь сначала увидел что представляет ваш сайт (скелет) и остался дожидаться загрузки остального контента.

скелетная загрузка контента

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

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

мгновенное перемещение

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

плавное перемещение

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

Объяснить отношения между элементами

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

управление воспроизведением

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

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

плавающая кнопка

Покажите, что пользователь что-то сделал не так

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

неправильный ввод

Анимация результатов

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

успешная оплата

В приведенном примере, когда пользователь нажимает кнопку «Оплатить», кратковременно появляется счетчик, прежде чем приложение покажет состояние успеха. Анимация заставляет пользователей чувствовать, что они легко сделали платеж, и пользователи действительно ценят такие важные детали.

Вывод

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

Источники картинок:

  1. Barthelemy Chalvet
  2. Tandem Seven
  3. Smash Magazine
  4. Smash Magazine
  5. Michaël Villar
  6. Michaël Villar

Источник текста

Святослав

Святослав

Управляющий партнер, эксперт в digital-маркетинге

Как с помощью анимации улучшить UX (5 простых советов)?