Самые популярные ошибки в анимации сайтов и приложений

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

1. Анимация там, где она не нужна

Где анимация? Кабина 737-800
Где анимация? Кабина 737-800

Попробуйте найти анимацию на картинке выше. Правильно — ее там нет, потому что отклик в 200-500ms может стоить вам жизни.

Пример попроще: всякие-разные терминалы, новые банкоматы, которые, порой просто извращаются в попытках анимировать интерфейс на железках уровня 2015 года. Если тебе по нужде приходится использовать сию дьявольскую машину, чтобы получить кровно заработанные, user experience раздражает 🏏

Причин две: первая — картинка на экране двигается слишком медленно, вторая — да вообще зачем она там нужна?

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

2. Слишком медленная анимация

И так, каждый раз, как открываем меню...

Попробуйте сделать анимацию ползунка не 100-200ms, а 500 — и пациент (тьфу, пользователь) сбежит. Любая анимация должна укладываться в 100-250ms, быстрее — не заметят. Все что делается сверх 250ms — должно быть тщательно обдумано, исходя из 4 принципов:

  • Какое вознаграждение, удовольствие, понимание приносит пользователю эта анимация?
  • Как часто ее будут видеть пользователи за 1 сеанс?
  • Точно ли ее нельзя сделать быстрее?
  • Можно ли сделать иначе?

Если вы все же хотите оставить анимацию >250ms, обязательно тестируйте её. Да, тот самый A/B тест, который, скорее всего, покажет что ей тут не место.

3. Часто повторяющаяся анимация

Куча летающей еды

Представим себе гипермаркет, в котором среднее количество покупок составляет >3. А теперь представим, что каждый раз (!) при добавлении товара пользователь видит 2-3 секундную анимацию того, как товар летит в корзину через весь экран. Естественно, это вызывает бурный поток не самых положительных эмоций.

Или другой кейс. Пользователь только вышел из приложения, заходит снова и опять смотрит мультфильм про старт приложения (которого можно избежать, ведь приложение грузится 200ms вместо 500).

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

4. Пытаться улучшить проблемный UI за счет анимации

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

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

5. Делать из приложения, сайта мультик

Как-то многовато анимации для одного действия

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

Например: имеем 2 крана. Да-да, речь об обычных кранах, которые стоят у каждого на кухне. Кран за 3000 рублей не нуждается в анимации, ибо представляет собой девайс, который выбирают, в первую очередь, по цене (лишь бы что-то было) и размеру.

Дизайнерскому крану за 50000 рублей анимация на сайте производителя будет более уместна, поскольку наглядно показывает его размер (часто — нестандартный), пример места применения (часто — слишком большой или слишком маленький), примеры уместной цветовой гаммы окружающей кран среды (да, возведем кран в культ), и в остальном объясняет графически идею «За что платить».

6. Делать бесконечную анимацию загрузки

Максимально странная анимация...

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

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

7. Не делать анимацию вовсе

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

Не лучший, но понятный пример обратной связи

Нажали на ползунок -> он переместился с той скоростью, с которой мы успели это заметить -> да, мы сделали то что надо и убедились что нажали именно туда.

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

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

Ваш UX/UI/Motion дизайнер и критик интерфейсов, Лена.

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

  • Подписывайтесь, вступайте в сообщество, в планах - много интересных материалов.
  • Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
  • Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.

Жду ваших вопросов по анимациям — в комментариях.

2424
7 комментариев

Полностью согласен!
Анимация должна быть короткой и ненавязчивой. 0.25s - золотая середина.
Времена осознания прелестей jquery и css3 transition прошли )

3
Ответить

Спасибо за поддержку.
Да, с js/css анимациями уже наигрались, теперь надо делать все удобно :)

1
Ответить

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

3
Ответить

Вот да, тесты наше всё.
Одно дело как анимация работает на последнем айфоне/самсунге/ксяоми, другое дело взять тот же ксяоми за 10-20 тысяч и посмотреть на лагодром...
Так что, 20 тестовых устройств и анимацией уже можно заниматься :)

Ответить

Комментарий недоступен

Ответить

Спасибо за комментарий.
Как говорится, бесконечность - не предел :) Это я к тому, что видела тест-лабы из 200 устройств и ничего, никто им не сказал что "все можно решить девкитом". А если сказал бы - его бы распнули на месте, предполагаю.
Про технические особенности лучше отдельную статью напишу!

Ответить