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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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