Резюме: анимация является мощным инструментом для привлечения внимания посетителя посадочной страницы или сайта. Прежде чем применить подобную технологию на веб-ресурсе, маркетологу следует учесть цель конверсии, частоту показа анимации и механизм ее воздействия на пользователей.
Благодаря появлению HTML5 и CSS3 веб-анимация, понимаемая как трансформация и перемещение графических элементов, становится все более привычным явлением в современном интернет-дизайне.
Увы, но на конференциях дизайнеров обсуждаются в основном вопросы визуальной привлекательности и улучшенной интерактивности анимированных пользовательских интрефейсов (UI), тема же их юзабилитиедва затрагивается. К тому же веб-страницы разрабатываются с различными целями; следовательно, резонно будет предположить, что каждому отдельному типу лендинга/сайта наиболее адекватно будет соответствовать определенный тип движения графических элементов.
Интерактивная анимация на веб-страницах обычно служит одной из следующих целей взаимодействия (интеракции) с пользователем:
Обратить внимание посетителя на изменения веб-интерфейса и объяснить происходящее.Примеры: трансформация CTA-кнопки при приближении курсора (hover), появление и скрытие блоков текста, перемещение на другую часть лендинга/сайта через анимированный эффект перехода.
Добавить элемент «веселья и непринужденности» в процесс взаимодействия с пользователем.Существует мнение, что исчезающие, меняющие цвет или трансформирующиеся каким-либо другим образом элементы интерфейса развлекают пользователей, придавая визуальному дизайну, а значит, и всему веб-ресурсу, узнаваемость и популярность (разумеется, у строго определенной целевой аудитории).
Анимацию и звуковые эффекты особенно часто применяют на посадочных страницах, ориентированных на детей и подростков. Хотя подобная «мультимедийная роскошь» часто отвлекает юных посетителей от конечной цели конверсии, но поскольку дети и подростки подходят к любому маркетинговому взаимодействию менее ответственно и целеустремленно, чем взрослые, все эти эффекты практически не раздражают подрастающее поколение потенциальных покупателей. Интерактивная анимация в данном случае служит скорее брендингу, чем достижению цели конверсии.
Анимированные эффекты могут применяться как наглядное доказательство того, что разработчики, маркетологи и владельцы бизнеса находятся в курсе новейших тенденций веб-дизайна.Подобный прием довольно эффективно внушает целевой аудитории простейшую ассоциацию: «продвинутый и современный дизайн — продвинутый и современный бренд».
Перед добавлением (имплементацией) анимированных элементов на лендинг пейдж или страницу сайта следует убедиться, что цель и результаты этого действия четко определены маркетологом и дизайнером пользовательского опыта, для чего необходимо определить несколько параметров взаимодействия посетителя и анимированного веб-интерфейса.
Внимание пользователя: на чем еще может быть сфокусировано его внимание в момент показа анимации?
Цель применения анимации.Должна ли она:
- Привлечь внимание пользователя и подтолкнуть его к немедленному конверсионному действию?
- Показать преемственность (логически обоснованную связь) при изменении состояний объектов веб-интерфейса?
- Указать связь между объектами, уже находящимися в фокусе внимания посетителя?
Частота анимации:
- Как часто будет пользователь видеть анимированный элемент в течение одной интернет-сессии?
Механизм анимации определяется следующими параметрами:
- Инициируется ли движение анимированных элементов непосредственными действиями пользователя (клик, приближение курсора)?
- Анимация запускается так называемыми «непрямыми триггерами» (при появлении посетителя на странице загрузки, во время прокрутки лендинга или любой другой активности, не связанной с преднамеренными конверсионными действиями пользователя)?
И только тогда, когда на все эти вопросы получены ответы, можно приступать к разработке анимации.
Движение на границе поля зрения привлекает внимание
Движение в поле периферического зрения (т. е. на границе поля зрения) человека инстинктивно переключает зрительное внимание на движущийся объект. Перед нами — наглядный пример когнитивной обработки визуального сигнала по принципу «снизу вверх» («bottom–up processing» — от рефлекторного восприятия явления к его осознанному осмыслению).
Существует еще один принцип зрительного восприятия — целенаправленное смещение внимания (обработка сигнала «сверху вниз», top–down processing). В этом случае зритель осознанно фокусирует взгляд на интересующей его области пространства (в нашем случае — элементе веб-интерфейса).
Упомянутая выше концентрация внимания на «том, что движется», досталась человеку в наследство от тех далеких времен, когда от быстроты срабатывания подобного психофизиологического механизма зависела жизнь наших далеких предков: заметив периферическим зрением движение в траве, древний охотник должен был как можно быстрее переключить все внимание на перемещающийся объект, чтобы определить, к какой категории тот принадлежит — смертельной угрозы (ядовитая змея) или источника пропитания (мелкий грызун, съедобная неядовитая змея).
На веб-странице полем периферического зрения (далее для краткости — периферия) будут являться все участки за пределами хорошо известного маркетологам и дизайнерам F-образного паттерна чтения.
Размещение анимированных изображений и окон с видеороликами в правом сайдбаре (in the right rail, «на правом рельсе», как это называется на сленге дизайнеров веб-интерфейсов) является наиболее очевидным примером использования периферийной анимации для привлечения к запланированному маркетологом конвертирующему действию.
Чрезмерное акцентирование периферического зрения на анимации может вызвать у пользователя пресловутую «баннерную слепоту» (banner blindness), либо родственную ей «болезнь» — «слепоту правого рельса» (right-rail blindness). Однако даже умеренное применение анимации может оказаться раздражающим и отвлекающим посетителя от цели конверсии.
Уведомления, появляющиеся вблизи краев монитора и продвигающие связанный контент или указывающие на возможность общения в режиме «живого чата» — вот, в основном, и все актуальные примеры применения периферической анимации для предупреждения пользователя о наличии соответствующих функций или содержимого веб-страницы.
Нужно помнить о том, что на практике эти уведомления зачастую приводят к прерыванию конверсионной цепи и в целом воспринимаются как раздражающее явление, напоминающее пользователям всплывающие окна (pop-ups, «поп-апы»).
Вскоре после загрузки домашней страницы Olark (SaaS-решение по имплементации «живого чата» на веб-ресурсы клиентов) из нижней правой части экрана вверх выдвигается окно объявления с текстом «Как мы можем помочь?», затем над первым появившимся окном появляется дополнительное, уведомляющее посетителя о наличии функции чата.
Однако наряду с полезным действием уведомления посетителя о возможности живого общения в чате анимация, появляющаяся в поле периферического зрения, отвлекает пользователя от конверсионной задачи и изучения основного содержания страницы.
То, насколько быстро визуальное внимание пользователя смещается в сторону движущегося объекта на периферии веб-интерфейса, зависит от так называемой «воспринимаемой одушевленности» (perceived animacy) этого элемента. Такие факторы как увеличение скорости движения объекта, размер дистанции, на которую он перемещается, и что самое главное, выглядит ли это движение «самостоятельным», а не вызванным внешним воздействием любого рода, взятые в совокупности влияют на восприятие элемента веб-дизайна как «одушевленного».
С точки зрения дизайнера, проектирующего процесс взаимодействия пользователя с интерактивным пользовательским интерфейсом (UI), вышесказанное означает, что элементы, которые скользят по поверхности лендинга или меняют положение на странице любым другим способом, но с некоторой хорошо заметной пользователю скоростью, привлекут внимание быстрее и надежнее, чем объекты, медленно исчезающие, оставаясь при этом неподвижными.
Указатель «Вернуться наверх» (Back to Top) на странице «About» конференции, известной как Фестиваль маркетинга (Festival of Marketing), выдвигается вверх из нижней левой части страницы при прокрутке. Подобная анимация сразу привлекает внимание пользователя к элементу на периферии экрана отвлекая его от основной задачи — чтения текстового контента страницы, несущего маркетинговое послание.
Кнопка для возвращения в начало страницы, выглядящая как небольшая стрелка, при прокрутке вниз медленно трансформируется в указатель клика по изображению товара. Эта неспешная анимация без изменения позиции элемента отвлекает внимание гораздо меньше, чем скользящий указатель из предыдущего примера.
Конечно, существует и другое решение, раз и навсегда снимающее вопрос о прерывании конверсионного действия — постоянно присутствующий на странице индикатор местоположения пользователя, также служащий для возвращения к началу просмотра.
Итак, сделаем вывод: если ваша цель — быстро привлечь внимание к новому объекту, то анимация скольжения элемента от одной позиции на лендинге к другой будет очень эффективной.
Если же ваша цель обеспечить доступ к контекстной функции, не отвлекая пользователя от основной конверсионной задачи, то медленная трансформация неподвижного объекта будет для вас лучшим выбором. Более того, во втором случае лучшим выбором будет вообще по возможности обойтись без анимации.
Анимация в помощь осмыслению и пониманию
Движение в точке, на которой в данный момент уже сфокусировано внимание человека, активирует особый визуальный триггер, отличный от того, что инициируется периферическим зрением.
Мы уже завладели вниманием пользователя, поэтому перед нами стоит следующая задача: разработка анимации, увеличивающей возможность пользователя понять, как работает наш веб-интерфейс (т. е. лендинг пейдж, страница сайта и т. д.), другими словами — как один элемент связан с другим, что означает изменение состояния отдельного объекта (кнопки призыва к действию, поля ввода лид-формы) и т. п.
При правильном использовании анимированный элемент интерфейса сможет объяснить пользователю взаимосвязь объектов веб-страницы и последствия любых действий, предпринятых пользователем.
Например, если заполнение формы должно соответствовать некоей обусловленной целями конверсии логике, то внесение пользователем данных в одно поле может привести к появлению в форме новых полей, логически связанных с только что пройденным.
Так, во многих интернет-магазинах формы чекаута устроены следующим образом: если пользователь указывает различные адреса оплаты (биллинга) и доставки (шиппинга), то в результате подобного действия появляется анимированное поле для второго, отличающегося адреса. Подобная анимация подчеркивает значение только что заполненного поля как логического триггера, вызвавшего появление новых элементов.
После того как в форме подтверждения заказа снят флажок в чекаут-боксе, озаглавленном «Мой платежный адрес и адрес доставки совпадают», появляются новые поля для заполнения, а пользователю демонстрируется анимация, указывающая на причину появления новых элементов формы.
Чтобы анимация эффективно передала причинно-следственную связь между элементами пользовательского интерфейса, эффект движения/появления/трансформации должен быть инициирован в течение 0,1 секунды после начального действия пользователя. Именно в такой период времени у человека сохраняется чувство прямого воздействия на вторую сторону коммерческой интеракции и понимание того факта, что манипуляции пользователя стали причиной появления нового элемента веб-страницы.
Частота показа анимации не должна отвлекать пользователя от конверсионной задачи
Еще один важный аспект, который необходимо учитывать при разработке анимации — частота ее инициации в рамках одной интернет-сессии типичного пользователя. Ее неоднократный показ может отвлечь посетителя от изучения контента веб-ресурса и увеличить время, требующееся для выполнения задачи по конвертации.
Пользователи не хотят ждать доступа к основной задаче, из-за которой они, собственно, и оказались на данном веб-ресурсе. Ожидание не скрашивает даже наблюдение за последовательностью перемещений и трансформаций графических элементов интерфейса, в особенности если анимация применена с единственной целью — «развеселить» посетителя и показать таланты программиста, разработавшего ее.
Помните — если вы можете разработать анимацию и имплементировать ее на свой сайт, это не значит, что вы обязаны это делать.
Специалисты из Nielsen Norman Group уже и не могут подсчитать, сколько раз во время тестирований юзабилити интерактивных интерфейсов с многократным показом анимации они слышали от участников тестов фразы типа «Ну в первый раз это было забавно, а теперь просто раздражает!». ;)
Одним из наглядных примеров все более распространяющейся безотрадной тенденции к бессмысленному использованию анимации — в частности, эффекта перехода — является анимированное появление ранее скрытого главного меню.
Скрытие главного (глобального) меню — идея сама по себе безоговорочно плохая. Однако есть идеи и похуже — например, принуждать пользователей просматривать длинную череду анимированных кадров, прежде чем «недобровольные зрители» получат доступ к меню. Самая визуально привлекательная анимация в первый раз может показаться забавной, во время второго просмотра она утомит посетителя, а будучи показанной третий раз просто-напросто спровоцирует его покинуть веб-ресурс.
Вот как это выглядело на сайте интернет-магазина Newton Running, в свое время безнадежно похоронившего 4 главные опции своего главного меню под иконкой своего 3-строчного «меню в стиле гамбургера» (вот она, в правом верхнем углу).
Щелкнув по этой иконке пользователь запускает анимацию, которая покажет превращение текущей страницы в меню, представляющее собой комбинацию из 4 цветных квадратов. Каждый квадрат функционирует как одна опция меню.
Каждый раз, когда предпочитаемая опция выбрана пользователем, вся анимация повторяется в обратном порядке, чтобы после всех трансформаций показать пользователю выбранную страницу категорий. Самое печальное, что нет никакого способа избегнуть просмотра всех этих визуальных излишеств, после того как они были запущены в первый раз.
Масштабирование изображений является одним из столпов анимированной графики, но в данном случае использование подобного приема для индикации перехода из категории в категорию меню представляется совершенно бессмысленным, а анимация как таковая — абсолютно бесполезной: все 4 пункта меню можно легко представить в виде статичных ссылок на главной странице.
Вот так некогда выглядело меню сайта e-commerce Newton Running: переход с одного уровня информационной архитектуры на другой (да-да, именно переход ровно на один уровень ниже!) сопровождался неизбежным просмотром надоедливой анимации.
Не будем забывать, что перед нами интерфейс интернет-магазина, теоретически предназначенный для осуществления кратчайшей прямой коммерческой интеракции.
Драгоценное время взаимодействия, получаемое маркетологом и интернет-предпринимателем от посетителя всегда как бы «авансом», тратилось на показ красивых, но ненужных веб-мультипликаций.
Выбор релевантного механизма анимации
Итак, если вы решили использовать анимацию, то не забудьте выбрать частоту показа, скорость движения и тип трансформации анимированных элементов в соответствии с контекстом вашего уникального торгового предложения и конечной целью конверсии.
Медленные движения/изменения графических элементов с меньшей вероятностью вызовут сдвиг внимания, соответственно, они будут не слишком интенсивно отвлекать пользователя от задачи конверсии. Подобный механизм подходит для действий, вызванным непрямым действием пользователя («косвенным триггером»). В таких ситуациях новый элемент страницы должен появляться практически без изменений в положении относительно «родительского элемента», чтобы подчеркнуть логическую связь между «старым» и «новым» объектами веб-интерфейса.
Быстрые перемещения/появления привлекут внимание посетителя в случае, если они происходят за пределами центра пользовательского внимания (в поле периферического зрения за границами классического F-паттерна чтения веб-страницы). Этот способ анимации пригодится для конвертирующих элементов, с которыми пользователи непременно должны вступить во взаимодействие.
Быстрые анимированные переходы также позволяют с наименьшими затратами времени переводить посетителей на следующий этап конверсионной воронки, но этот прием хорошо работает только тогда, когда пользователь уже сфокусирован на конверсии, а анимация выступает просто неким триггером, позволяющим быстрее достигнуть конечной маркетинговой цели.
Однако относиться к «быстрой» анимации следует с особой осторожностью: она не должна действовать на посетителя слишком навязчиво, равно как и отвлекать его от чтения любого текстового контента, с которым он предпочтет ознакомиться перед принятием окончательного решения о покупке или подписке на услугу.
И, разумеется, маркетологам и дизайнерам нужно помнить о немногочисленных, но все же реально имеющих место быть жалобах пользователей на «слишком быстрый веб-интерфейс».
Анимированный UI: применять с осторожностью!
Анимированные элементы пользовательского интерфейса — действенные и кажущиеся заманчиво простыми в использовании инструменты воздействия на пользователей. С другой стороны, все визуальные излишества могут бессмысленного потратить драгоценную для любого маркетолога «валюту»: внимание и время пользователей.
Применять анимацию следует осмотрительно, руководствуясь следующими критериями:
- Добавляет ли она глубину (количество просмотренных страниц) и время интеракции?
- Происходит ли в результате ее применения сдвиг внимания посетителя на критически важные конверсионные элементы?
- Укрепляет ли анимация логическую связь между элементами пользовательского интерфейса?
- Будут ли пользователи запускать ее самостоятельно или нет?
Таковы важнейшие критерии разработки анимации, полезной для пользовательского интерфейса вашего веб-ресурса и вашей целевой аудитории, а значит — и высокого коэффициента преобразования.
Высоких вам конверсий!
По материалам nngroup.com