Анимация, которая не мешает покупать

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

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

Зачем вообще нужно движение

У анимации в интерфейсе есть несколько честных задач:

• показать, что нажатие сработало;
• объяснить, откуда появился элемент и куда исчез;
• связать два состояния: список и карточку, этаж и квартиру;
• направить внимание на важное;
• скрасить ожидание, пока что-то загружается.

Возьмём подбор квартир. Посетитель нажимает на этаж — план плавно увеличивается, выбранная квартира подсвечивается, рядом открывается карточка. Движение здесь объясняет связь: вот этаж, вот квартира на нём, вот её параметры. Без анимации экран просто сменился бы, и человеку пришлось бы заново искать, где он находится.

Похожая история с формой заявки: после отправки кнопка не просто исчезает, а превращается в подтверждение. Человек видит, что его действие привело к результату, и не нажимает второй раз.

Где анимация начинает мешать

Проблемы начинаются, когда движение добавляют ради впечатления. Типичные случаи:

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

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

Скорость и длительность

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

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

Третье — движение должно быть последовательным. Если карточки квартир в одном разделе появляются снизу, а в другом сбоку, если одни кнопки откликаются мягко, а другие резко, сайт ощущается собранным из разных кусков. Лучше несколько простых правил движения на весь сайт, чем отдельный эффект на каждом экране. Это упрощает и поддержку: новый раздел сразу выглядит своим.

Телефоны и те, кому движение неприятно

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

Кроме того, у части людей от активного движения на экране кружится голова. В настройках телефона и компьютера можно включить уменьшение движения, и хороший сайт это учитывает: вместо полётов и параллакса оставляет спокойное появление или просто показывает содержимое сразу.

Как проверить свой сайт

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

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

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

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