Секреты юзабилити: анимация для внимания и понимания

Posted on by riasevastopol

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

Благодаря появлению HTML5 и CSS3 веб-анимация, осознаваемая как перемещение и трансформация графических элементов, делается все более привычным явлением в современном интернет-дизайне.

Увы, но на конференциях дизайнеров обсуждаются по большей части вопросы визуальной привлекательности и улучшенной интерактивности анимированных пользовательских интрефейсов (UI), тема же их юзабилити чуть затрагивается. К тому же веб-страницы разрабатываются с разными целями; следовательно, резонно будет высказать предположение, что каждому отдельному типу лендинга/сайта самый адекватно будет соответствовать определенный тип перемещения графических элементов.

Интерактивная анимация на веб-страницах в большинстве случаев помогает одной из следующих целей сотрудничества (интеракции) с пользователем:

Обратить внимание визитёра на трансформации web-интерфейса и растолковать происходящее. Примеры: изменение CTA-кнопки при приближении курсора (hover), скрытие и появление блоков текста, перемещение на другую часть лендинга/сайта через анимированный эффект перехода.Секреты юзабилити: анимация для внимания и понимания

Добавить непринуждённости «и элемент веселья» в процесс сотрудничества с пользователем. Существует вывод, что исчезающие, меняющие цвет либо трансформирующиеся каким-либо вторым образом элементы интерфейса развлекают пользователей, придавая визуальному дизайну, соответственно, и всему веб-ресурсу, узнаваемость и популярность (очевидно, у строго определенной целевой аудитории).

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

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

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

Внимание пользователя: на чем еще возможно сфокусировано его внимание в момент показа анимации?

Цель применения анимации. Обязана ли она:

  • Привлечь интерес пользователя и подтолкнуть его к немедленному конверсионному действию?
  • Продемонстрировать преемственность (логически обоснованную сообщение) при трансформации состояний объектов web-интерфейса?
  • Указать связь между объектами, уже находящимися в фокусе внимания визитёра?

Частота анимации:

  • Как довольно часто будет пользователь видеть анимированный элемент в течение одной интернет-сессии?

Механизм анимации определяется следующими параметрами:

  • Инициируется ли перемещение анимированных элементов яркими действиями пользователя (клик, приближение курсора)?
  • Анимация запускается так называемыми «непрямыми триггерами» (при появлении визитёра на странице загрузки, на протяжении прокрутки лендинга либо каждый активности, не связанной с преднамеренными конверсионными действиями пользователя)?

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

  • Секреты юзабилити: отличие между навигацией сайта и информационной архитектурой

Перемещение на границе поля зрения завлекает внимание

Перемещение в поле периферического зрения (т. е. на границе поля зрения) человека инстинктивно переключает зрительное внимание на движущийся объект. Перед нами — наглядный пример когнитивной обработки визуального сигнала по принципу «снизу вверх» («bottom–up processing» — от рефлекторного восприятия явления к его осознанному осмыслению).

Существует еще один принцип зрительного восприятия — целенаправленное смещение внимания (обработка сигнала «сверху вниз», top–down processing). В этом случае зритель осознанно фокусирует взор на интересующей его области пространства (в нашем случае — элементе web-интерфейса).

Вышеупомянутая концентрация внимания на «том, что движется», досталась человеку в наследство от тех далеких времен, в то время, когда от быстроты срабатывания аналогичного психофизиологического механизма зависела жизнь отечественных далеких предков: увидев периферическим зрением перемещение в траве, старый охотник должен был как возможно стремительнее перевести все внимание на перемещающийся объект, дабы выяснить, к какой категории тот в собственности — смертельной угрозы (ядовитая змея) либо источника пропитания (небольшой грызун, съедобная неядовитая змея).

На веб-странице полем периферического зрения (потом для краткости — периферия) будут являться все участки за пределами прекрасно знаменитого дизайнерам и маркетологам F-образного паттерна чтения.

Размещение анимированных окон и изображений с видеороликами в правом сайдбаре (по поводу the right rail, «на правом рельсе», как это именуется на сленге дизайнеров веб-интерфейсов) есть самый очевидным примером применения периферийной анимации для привлечения к запланированному маркетологом конвертирующему действию.

Чрезмерное акцентирование периферического зрения на анимации может вызвать у пользователя пресловутую «баннерную слепоту» (banner blindness), или родственную ей «заболевание» — «слепоту правого рельса» (right-rail blindness). Но кроме того умеренное использование анимации может оказаться раздражающим и отвлекающим визитёра от цели конверсии.

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

Необходимо не забывать о том, что на практике эти уведомления обычно приводят к прерыванию конверсионной цепи и в целом воспринимаются как раздражающее явление, напоминающее пользователям всплывающие окна (pop-ups, «поп-апы»).

Your browser does not support the video tag.

Практически сразу после загрузки домашней страницы Olark (SaaS-ответ по имплементации «живого чата» на веб-ресурсы клиентов) из нижней правой части экрана вверх выдвигается окно объявления с текстом «Как мы можем оказать помощь?», после этого над первым показавшимся окном появляется дополнительное, уведомляющее визитёра о наличии функции чата.

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

То, как скоро визуальное внимание пользователя смещается в сторону движущегося объекта на периферии web-интерфейса, зависит от так называемой «принимаемой одушевленности» (perceived animacy) этого элемента. Такие факторы как повышение скорости перемещения объекта, размер расстояния, на которую он перемещается, и что самое основное, выглядит ли это перемещение «независимым», а не позванным внешним действием любого рода, взятые в совокупности воздействуют на восприятие элемента веб-дизайна как «одушевленного».

С позиций дизайнера, проектирующего процесс сотрудничества пользователя с интерактивным интерфейсом пользователя (UI), вышесказанное свидетельствует, что элементы, каковые скользят по поверхности лендинга либо меняют положение на странице любым вторым методом, но с некоей прекрасно заметной пользователю скоростью, привлекут внимание стремительнее и надежнее, чем объекты, медлительно исчезающие, оставаясь наряду с этим неподвижными.

Your browser does not support the video tag.

Указатель «Возвратиться наверх» (Back to Top) на странице «About» конференции, известной как Фестиваль маркетинга (Festival of Marketing), выдвигается вверх из нижней левой части страницы при прокрутке. Подобная анимация сходу завлекает внимание пользователя к элементу на периферии экрана отвлекая его от главной задачи — чтения текстового контента страницы, несущего маркетинговое послание.

Your browser does not support the video tag.

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

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

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

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

Анимация в помощь пониманию и осмыслению

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

Мы уже завладели вниманием пользователя, исходя из этого перед нами стоит следующая задача: разработка анимации, увеличивающей возможность пользователя осознать, как трудится отечественный web-интерфейс (т. е. лендинг пейдж, страница сайта и т. д.), вторыми словами — как один элемент связан с другим, что свидетельствует изменение состояния отдельного объекта (кнопки призыва к действию, поля ввода лид-формы) и т. п.

При верном применении анимированный элемент интерфейса сможет растолковать пользователю связь объектов последствия-и веб страницы любых действий, предпринятых пользователем.

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

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

Your browser does not support the video tag.

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

Дабы анимация действенно передала причинно-следственную связь между элементами интерфейса пользователя, эффект перемещения/появления/изменения должен быть инициирован в течение 0,1 секунды по окончании начального действия пользователя. Как раз в таковой период времени у человека сохраняется чувство прямого действия на вторую сторону коммерческой интеракции и познание того факта, что манипуляции пользователя стали обстоятельством появления нового элемента веб-страницы.

Частота показа анимации не должна отвлекать пользователя от конверсионной задачи

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

Пользователи не желают ожидать доступа к главной задаче, в результате которой они, фактически, и были на данном веб-ресурсе. Ожидание не скрашивает кроме того наблюдение за последовательностью трансформаций и перемещений графических элементов интерфейса, в особенности в случае если анимация применена с единственной целью — «развеселить» визитёра и продемонстрировать таланты программиста, создавшего ее.

Не забывайте — если вы имеете возможность создать анимацию и имплементировать ее на собственный сайт, это не означает, что вы обязаны это делать.

Эксперты из Nielsen Norman Group уже и не смогут подсчитать, сколько раз на протяжении тестирований юзабилити интерактивных интерфейсов с многократным показом анимации они слышали от участников тестов фразы типа «Ну в первоначальный раз это было забавно, а сейчас!». 😉

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

Скрытие главного (глобального) меню — мысль сама по себе безоговорочно нехорошая. Но имеется идеи и похуже — к примеру, принуждать пользователей просматривать долгую череду анимированных кадров, перед тем как «недобровольные зрители» возьмут доступ к меню. Самая визуально привлекательная анимация в первоначальный раз может показаться забавной, на протяжении второго просмотра она утомит визитёра, а будучи продемонстрированной третий раз просто-напросто спровоцирует его покинуть веб-ресурс.

Вот как это смотрелось на сайте вебмагазина Newton Running, в свое время безнадежно похоронившего 4 главные опции собственного главного меню под иконкой собственного 3-строчного «меню в стиле гамбургера» (вот она, в правом верхнем углу).

Щелкнув по данной иконке пользователь запускает анимацию, которая продемонстрирует превращение текущей страницы в меню, воображающее собой комбинацию из 4 цветных квадратов. Любой квадрат функционирует как одна опция меню.

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

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

Your browser does not support the video tag.

Вот так некогда смотрелось меню сайта e-commerce Newton Running: переход с одного уровня информационной архитектуры на другой (да-да, как раз переход ровно на один уровень ниже!) сопровождался неизбежным просмотром надоедливой анимации.

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

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

  • 7 правил оптимизации юзабилити вебмагазинов

Выбор релевантного механизма анимации

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

Медленные перемещения/трансформации графических элементов с меньшей возможностью приведут к сдвигу внимания, соответственно, они будут не через чур интенсивно отвлекать пользователя от задачи конверсии. Подобный механизм подходит для действий, позванным непрямым действием пользователя («косвенным триггером»). В таких обстановках новый элемент страницы обязан оказаться фактически без трансформаций в положении довольно «родительского элемента», дабы выделить логическую связь между «ветхим» и «новым» объектами web-интерфейса.

Стремительные перемещения/появления привлекут внимание визитёра в случае, если они происходят за пределами центра пользовательского внимания (в поле периферического зрения за границами хорошего F-паттерна чтения веб-страницы). Данный метод анимации понадобится для конвертирующих элементов, с которыми пользователи обязательно должны вступить во сотрудничество.

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

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

И, очевидно, дизайнерам и маркетологам необходимо не забывать о немногочисленных, но все же реально имеющих место быть жалобах пользователей на «через чур стремительный web-интерфейс».

  • Оптимизация юзабилити основной страницы вебмагазина

Анимированный UI: использовать с осторожностью!

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

Использовать анимацию направляться осмотрительно, руководствуясь следующими параметрами:

  • Додаёт ли она глубину (количество просмотренных страниц) и время интеракции?
  • Происходит ли в следствии ее применения сдвиг внимания визитёра на критически ответственные конверсионные элементы?
  • Усиливает ли анимация логическую связь между элементами интерфейса пользователя?
  • Будут ли пользователи запускать ее самостоятельно либо нет?

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

Высоких вам конверсий!

По данным nngroup.com

Случайные статьи:

Примеры презентаций, инфографика и шаблоны


Подборка похожих статей:

riasevastopol

More Posts