В начале 2000-х годов веб-анимация волновалась собственный расцвет. Возможно, многие до сих с ностальгией (либо кошмаром) вспоминают те времена, в то время, когда веб-дизайнеры не скупились на анимированные элементы, а страницы самых различных сайтов обычно были выдержаны приблизительно в таком стиле:
Но, принцип «чем больше, тем лучше» в отношении веб-анимации в далеком прошлом неактуален. В наше время визуальный контент представляет собой обоюдоострый клинок: стоит мало переусердствовать, и итог окажется прямо противоположным ожидаемому.
На пользователей каждый день обрушивается нескончаемый поток визуальной информации (в основном ненужной). Разумеется, взять конкурентное преимущество за счет самого факта применения анимации нереально. Мы ни за что не призываем вас всецело отказаться от визуального контента.
Легко применяйте его с умом.
Перед вами перечень, включающий в себя 6 способов применения анимации без отвлечения внимания пользователя от главной цели.
Просматривайте кроме этого: Как видео и gif-анимация повышают конверсию лендинга?
1. Направляющие элементы
Само собой разумеется, дать пользователю нужные подсказки возможно и посредством статичных элементов. Из-за чего в некоторых случаях стоит дать предпочтение анимации?
Дело в том, что статичные элементы время от времени воспринимаются пользователями легко как часть художественного оформления страницы. «Живые» подсказки не подметить значительно тяжелее.
Zest применяет мелкую анимированную мышь, дабы сказать людям о возможности прокрутки страницы:
А вот второй вариант дизайна аналогичного по смыслу элемента:
При помощи анимации кроме этого возможно привлечь интерес пользователей к CTA.
Просматривайте кроме этого: Экскурсовод по визуальным подсказкам на лендингах
2. Анимированный текст
Если вы предлагаете громадной количество текстовой информации, существует риск, что главные моменты пройдут мимо пользователя. Расставить выговоры в рамках текстовых блоков возможно посредством анимации.
HubSpot в свое время применял достаточно нестандартное ответ:
А так Avocode применила анимацию, дабы намекнуть пользователям, что прежде всего стоит обратить внимание на текст, а уже позже на изображение:
3. Фоновая анимация
Сейчас собрало популярность применение видео в качестве фона для страниц сайта. Недочёт данного подхода содержится в большом повышении когнитивной нагрузки на пользователя.
В качестве альтернативы простому фоновому видео возможно разглядеть синемаграфику, либо, иными словами, «ожившую фотографию».
Отметим кроме этого, что замена видео изображениями с отдельными анимированными элементами разрешает уменьшить время загрузки страницы.
Просматривайте кроме этого: Из-за чего когнитивная нагрузка вредит конверсии — и как это исправить?
4. Дизайн формы для заполнения
Формы для заполнения возможно сделать намного эргономичнее, добавив мало анимации.
На сайте Groupon, например, при выборе определенного поля на странице регистрации наименование этого поля перемещается и уменьшается в размере, преобразовываясь в маленькое напоминание:
При помощи анимации возможно сказать пользователю о допущенной неточности. Обычный пример: анимация тряски, информирующая пользователям продуктов Apple о том, что введенный пароль неверен:
5. Графики
Сочетание анимации и графиков может оказаться очень действенным.
Zendesk применяет это сочетание, дабы показать возможности предлагаемого компанией софта:
Просматривайте кроме этого: Секреты юзабилити: анимация для понимания и внимания
6. Анимированные кнопки
Нет, мы не предлагаем вам вынудить каждую кнопку на сайте переливаться всеми цветами радуги. Но вы имеете возможность применять кнопку в качестве индикатора, как это делает, например, Stripe:
Кнопка снабжает визуальное подтверждение платежа
При необходимости кнопки возможно настроить так, дабы они реагировали на нажатие по-различному:
Кнопка слева является переключателем , по совместительству являющийся индикатором включения (отключения) уведомлений.
Кнопка справа скрывает за собой поле для ввода имени пользователя.
Подводя результат
Анимированные элементы смогут сослужить вам хорошую работу, а смогут пользователя от цели. Все зависит от того, как грамотно вы примените данный инструмент.
Добавление анимации не должно становиться собственного рода манией. Увеличивая количество информации, которую людям необходимо будет переварить, вы должны быть полностью уверены в целесообразности этого шага.
Высоких вам конверсий!
По данным: impactbnd.com.
Случайные статьи:
- Как пользоваться скидками, чтобы получать еще больше прибыли?
- Итоги 2012 года: 52 факта из статистики веб-маркетинга
КАК ЛЕГКО ЗАЛУТАТЬ БУНКЕР БРАВО?! ФЕЙЛ ГОДА! — Last Day on Earth: Survival
Подборка похожих статей:
-
9 Способов использования технологии ремаркетинга в вашем бизнесе
Любой из нас заслуживает право на второй шанс, и таковой маркетинговый прием, как ремаркетинг (либо же ретаргетинг) — это и имеется настоящая возможность…
-
3 Способа использования маркетинговой аналитики для увеличения продаж
Существует множество вариантов использования на практике анализа статистических данных. Отчего же большая часть бизнесов, в большинстве случаев, надеется…
-
4 Вида анимации для улучшения юзабилити лендинга
В то время, когда анимация употребляется на лендинге лишь для красоты, имеется риск навредить процессу конвертации, потому, что любое лишнее перемещение…
-
6 Способов достичь «ясности» лендинга и повысить конверсию
Предположим, вы приобрели облачный продукт и у вас появились вопросы по его применению. Как думаете, кто вам лучше растолкует, что к чему: разработчик,…