Как улучшить user experience с помощью анимации
Анимация на сайте порой может раздражать. Или отвлекать внимание посетителя от важного контента. Но есть четыре приема, которые изменяют в лучшую сторону пользовательский опыт и повышают конверсию.
В этой статье вы узнаете как улучшить user experience с помощью интерактивной анимации.
С помощью CSS3 применять анимационную методику можно не только в продвинутых мобильных приложениях, но в любом месте любого сайта. Главное придерживаться нескольких правил.
Поддерживайте интерес
Задержка в загрузке даже на одну секунду может на 7% снизить конверсию. Анимация развлечет посетителя, пока грузится сайт. Так он не закроет вкладку раньше времени.
Реализовать этот прием можно по-разному.
Пример первый: загрузка слайдов
Люк Роблевски, специалист по интерактивному дизайну, приводит в пример страницу поиска приложений от Google Search. Пока грузятся результаты поиска, посетитель видит слайды. Страница грузится в три приема: слайд справа, прогресс-бар слева и основное содержимое на страницу в верхней части.
![Улучшение user experience с помощью слайдов Улучшение user experience с помощью слайдов](/img/uluchshit-user-experience-1.gif)
Быстрая анимация привлекает внимание пользователя, а медленный показ слайдов удерживает интерес. Такая комбинация быстрого и медленного держит пользователя в напряжении, в хорошем смысле слова. У Гугла это получается идеально.
Пример второй: схематичные экраны
Второй пример от Люка Роблевски – схематичные экраны. Пока загружается контент, посетитель видит схематичное изображение сайта.
Контент грузится быстро, поскольку состоит из небольших элементов. Эта техника идеально подходит для мобильных версий: схема может храниться локально на мобильном устройстве.
Пример третий: загрузка частями
Разработчики Фейсбука используют процесс BigPipe для более быстрой и динамичной загрузки. BigPipe базируется на PHP и JavaScript и разбивает страницу на пейджлеты. Каждый пейджлет загружается независимо, но одновременно.
![Улучшение user experience с помощью загрузки частями Улучшение user experience с помощью загрузки частями](/img/uluchshit-user-experience-7.jpg)
Привлекайте внимание
Вы можете акцентировать, на что пользователю следует обратить внимание. Либо улучшить user experience с помощью интерактивных микроэлементов. Хороший пример – кнопка «Вернуться наверх».
Например, кнопка может «выпрыгивать» слева:
![Улучшение user experience с помощью привлечения внимания Улучшение user experience с помощью привлечения внимания](/img/uluchshit-user-experience-3.png)
При этом, как показывают тесты юзабилити, лучше разместить кнопку справа, с появлением, когда пользователь дошел до конца страницы.
Ведите пользователей по сайту
Посетитель может банально запутаться. Анимация должна помочь сделать переходы плавными, подсказывать, куда идти дальше.
Пример первый: анимированный скроллинг
Клики не всегда ведут на новые страницы. Может быть переход в другой блок, ниже. Чаще всего прием используется на лендингах-одностраничниках. Это может сбить с толку. Вот тут анимация покажет, что произошло и куда пользователь попал после клика. Сравните два варианта:
Вариант 1
![Улучшение user experience с помощью анимированного скроллинга пример 1 Улучшение user experience с помощью анимированного скроллинга пример 1](/img/uluchshit-user-experience-4.gif)
Вариант 2
![Улучшение user experience с помощью анимированного скроллинга пример 2 Улучшение user experience с помощью анимированного скроллинга пример 2](/img/uluchshit-user-experience-5.gif)
Первый пример четко показывает, что будет, если кликнуть на «Контакты».
Пример второй: выпадающие формы
Размер форм имеет огромное значение в user experience. Если вы предлагаете гибкие формы, будьте готовы объяснить важность каждого выпадающего поля.
В этом случае анимация покажет, почему и для чего появилось новое поле. Пусть посетитель знает что дополнительная информация действительно необходима.
Визуализируйте действия пользователя
Например, это интерактивное добавление в корзину интернет-магазина, когда заказ «перелетает» из карточки товара.
Вместо заключения
При слове анимация многие вспоминают жуткие мигающие баннеры образца 2000-х. Совсем не нужно превращать сайт в подобие Лас-Вегаса. Задача сделать его удобнее для ваших клиентов, а представленные в статье технологии будут вам в помощь.
14 видов ретаргетинга Статья
Как собрать MAC-адреса через Wi-Fi и настроить на них рекламу Статья
DMP-сегменты в Яндексе и myTarget: руководство по применению Статья
Как юристу вести Telegram канал. Отвечает адвокат Валерий Рогальский Статья
Кейс клиента Vitamin.tools о продвижении детского лагеря в VK Ads: как получать заявки по 500 рублей 3 месяца подряд Статья
Лидогенерация на мероприятия Статья
Пустые бланки резюме для устройства на работу – где взять? Статья
6 советов от клиента Vitamin.tools по продвижению психолога в TG через Директ Статья
Работа на фрилансе или в агентстве: плюсы и минусы Статья