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

Как улучшить user experience с помощью анимации

19861

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

В этой статье вы узнаете как улучшить user experience с помощью интерактивной анимации.

 

С помощью CSS3 применять анимационную методику можно не только в продвинутых мобильных приложениях, но в любом месте любого сайта. Главное придерживаться нескольких правил.

Поддерживайте интерес 

Задержка в загрузке даже на одну секунду может на 7% снизить конверсию. Анимация развлечет посетителя, пока грузится сайт. Так он не закроет вкладку раньше времени. 

Реализовать этот прием можно по-разному.

Пример первый: загрузка слайдов

Люк Роблевски, специалист по интерактивному дизайну, приводит в пример страницу поиска приложений от Google Search. Пока грузятся результаты поиска, посетитель видит слайды. Страница грузится в три приема: слайд справа, прогресс-бар слева и основное содержимое на страницу в верхней части. 

Улучшение user experience с помощью слайдов

 

Быстрая анимация привлекает внимание пользователя, а медленный показ слайдов удерживает интерес. Такая комбинация быстрого и медленного держит пользователя в напряжении, в хорошем смысле слова. У Гугла это получается идеально.

Пример второй: схематичные экраны

Второй пример от Люка Роблевски – схематичные экраны. Пока загружается контент, посетитель видит схематичное изображение сайта. 

Улучшение user experience с помощью схематичных экранов

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

Пример третий: загрузка частями

Разработчики Фейсбука используют процесс BigPipe для более быстрой и динамичной загрузки. BigPipe базируется на PHP и JavaScript и разбивает страницу на пейджлеты. Каждый пейджлет загружается независимо, но одновременно.

Улучшение user experience с помощью загрузки частями

Привлекайте внимание

Вы можете акцентировать, на что пользователю следует обратить внимание. Либо улучшить user experience с помощью интерактивных микроэлементов. Хороший пример – кнопка «Вернуться наверх». 

Например, кнопка может «выпрыгивать» слева:

Улучшение user experience с помощью привлечения внимания

 

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

Ведите пользователей по сайту

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

Пример первый: анимированный скроллинг

Клики не всегда ведут на новые страницы. Может быть переход в другой блок, ниже. Чаще всего прием используется на лендингах-одностраничниках. Это может сбить с толку. Вот тут анимация покажет, что произошло и куда пользователь попал после клика. Сравните два варианта:

Вариант 1

Улучшение user experience с помощью анимированного скроллинга пример 1

 

Вариант 2

Улучшение user experience с помощью анимированного скроллинга пример 2

 

Первый пример четко показывает, что будет, если кликнуть на «Контакты». 

Пример второй: выпадающие формы

Размер форм имеет огромное значение в user experience. Если вы предлагаете гибкие формы, будьте готовы объяснить важность каждого выпадающего поля.

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

Визуализируйте действия пользователя

Например, это интерактивное добавление в корзину интернет-магазина, когда заказ «перелетает» из карточки товара.

Вместо заключения

При слове анимация многие вспоминают жуткие мигающие баннеры образца 2000-х. Совсем не нужно превращать сайт в подобие Лас-Вегаса. Задача сделать его удобнее для ваших клиентов, а представленные в статье технологии будут вам в помощь.

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
19861
1
Написать комментарий
Обсуждаемое

Коутьюмент: революционная технология успешного Запуска Онлайн проектов Статья

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

Почему реклама в Telegram Ads сливает бюджет? Разбираем ошибки и решения Статья

Реклама в Telegram Ads не приносит ожидаемых результатов: подписки и продажи отсутствуют, а лиды стоят слишком дорого? Если кажется, что ваша целевая аудитория просто отсутствует на этой платформе — не спешите отказываться от неё. Telegram Ads остаётся перспективным инструментом, и многие проблемы связаны не с самой площадкой, а с настройками, стратегиями и подходом к рекламе.

Как эффективно использовать скидки и акции: мифы и реальность Статья

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

Как управление репутацией усиливает маркетинг: ключевые стратегии для брендов Статья

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

Как автоматизация рекламы помогает агентствам недвижимости сокращать расходы и увеличивать ROI Статья

Чувствуете, что ваш рекламный бюджет утекает в никуда? Вы тратите деньги на показы, но заявки остаются на прежнем уровне? Автоматизация может не просто сэкономить рекламный бюджет, но и повысить эффективность вложений. В этом материале я расскажу, как мы в агентстве недвижимости сократили рекламные расходы на 25%, уменьшили стоимость лида на 30% и увеличили ROI на 25%, внедрив несколько простых решений.

Как минимизировать затраты при внедрении VR и AR в бизнес Статья

Технологии виртуальной (VR) и дополненной реальности (AR) открывают для бизнеса уникальные возможности в сфере маркетинга, продаж и обучения. Однако высокая стоимость начальных инвестиций может отпугнуть многих предпринимателей.