Используем карту распределения внимания по странице для создания потрясающего опыта взаимодействия
Автор: Анжела Стрингфеллоу (Angela Stringfellow) – до того, как начала заниматься интернет-маркетингом, несколько лет проработала менеджером по маркетингу в области здравоохранения. В течение последних нескольких лет Анжела оказывает консультационные услуги средним и крупным организациям, помогая им выстраивать всеобъемлющие кампании в социальных сетях, создавать блоги и формировать редакционные стратегии, позволяющие поднять общую репутацию бренда и его известность. При этом она преимущественно сосредотачивается на технологиях Web 2.0 и контент-маркетинге.
К настоящему времени проведено огромное количество исследований, позволяющих выявить «горячие точки» или участки веб-страниц, куда наиболее часто устремляется взгляд пользователя, и где сосредотачивается его внимание. Эти естественные особенности распределения визуального внимания пользователя по странице можно использовать для проектирования хорошего дизайна целевой страницы и ее разметки.
EyeTools.com называет траекторию взгляда одного человека тепловой картой (heat map), так как на первый взгляд она кажется совокупностью случайно разбросанных по странице горячих точек, при удалении от которых температура понижается. При анализе траекторий взглядов множества пользователей можно выявить логические общие особенности распределения внимания.
Результаты этого анализа можно использовать для размещения ключевой информации в горячих точках страницы или изображения, там, где внимание пользователя будет сосредоточено с наибольшей вероятностью.
Эта тепловая карта, созданная TechWyse.com, показывает участки целевой страницы, где взгляд пользователя сосредотачивается прежде всего.
Пользователь может заблудиться на странице, если его карта не будет учтена
Анализ тепловой карты является удобным методом анализа целевой страницы или изображения, и позволяет улучшить опыт пользовательского взаимодействия. Строить карту распределения внимания следует после того, как будут собраны данные об особенностях поведения большого количества пользователей; запутанные пути или отсутствие закономерностей говорит о том, что на этой странице пользователи теряются.
Если же тепловая карта указывает, что внимание пользователей сосредотачивается на областях страницы, не представляющих особой важности, то это сигнал для пересмотра дизайна. В идеале, самые горячие области тепловой карты должны быть сосредоточены в местах призыва к действию. В примере выше, сильнее всего внимание концентрируется на фрагменте заголовка, гласящем «Бесплатно». Это, конечно, важная информация, но пользователи «не видят» область «Текущее состояние» в левом нижнем углу, и практически полностью игнорируют призыв к действию «Запросить информацию», размещенный чуть выше. Юх,Хороший разработчик целевых страниц прекрасно знает, что каждый пиксель на них должен выполнять определенную функцию. Даже белое пространство не только упорядочивает остальные элементы, но и помогает взгляду найти наиболее важные места. Широкие белые области вокруг призыва к действию позволяют читателю быстрее и сильнее сосредоточиться на нем. Еще одним элементом управления вниманием посетителя могут быть изображения.
В частности, люди часто устремляют свой взгляд в те места, куда смотрят другие. Поэтому, если мы поместим на странице фотографию человека, взгляд которого направлен прямо на призыв к действию, то, наверняка, заставим читателя обратить особое внимание на эту область страницы.
Это изображение (источник: SocialTriggers.com) демонстрирует результаты исследования, проведенного Usable World. На данной рекламной странице взгляд читателя прочнее фиксируется на заголовке с помощью смотрящего на него ребенка. Ребенок тут служит своеобразной естественной стрелкой, управляющей вниманием зрителя.
Этот пример с TechWyse.com показывает еще один вариант дизайна целевой страницы. Обратите внимание, как взгляд читателя «прыгает» по ней, пропуская призыв к действию.
Красота не должна быть единственным критерием
OneExtraPixel.com отмечает, что многие дизайнеры полностью погружаются в идею создания кричащих, запоминающихся графических элементов, способных сильно впечатлить посетителей.
Большинство разработчиков целевых страниц ставят во главу угла красивый, привлекательный дизайн, совершенно упуская из вида конверсию, и не задумываясь над тем, где именно будет сосредоточено внимание посетителя.
Эрик Роувелл (Eric Rowell) пишет: «Хороший дизайн, в первую очередь, служит решению задач, для которых создан сайт, а уже потом он должен быть красивым». Сравнивая дизайн страницы с архитектурой, он говорит, что если бы при проектировании зданий руководствовались, прежде всего, принципом красоты и гармонии, то многие дома не имели бы ни окон, ни дверей. Другими словами функциональная составляющая должна определять все остальное.
Вначале определяем задачи целевой страницы
Невозможно создать эффективную целевую страницу, не определив задачи, которые она должна решать. Прежде чем сделать первый набросок, дизайнер уже должен знать назначение данной страницы. Есть три наиболее важных пункта, которые следует принять во внимание, определяя задачи, для которых создается целевая страница:
• Определить проблему, которую надо решить;
• Показать способ решения этой проблемы;
• Создать призыв к действию, которое решит эту проблему.
Целевая страница YouSendIt определяет проблему (передать файлы большого объема), предлагает ее решение (неограниченный доступ, позволяющий посылать другим и хранить большие файлы, где бы не находился пользователь) и имеет ясные призыв к действию (Пошли файл – Попробуй прямо сейчас).
Дизайн страницы должен последовательно проводить внимание читателя через каждый из этих пунктов, и гладко вести его к процессу покупки.
Кроме того, целевая страница должна решать следующие задачи:
• Дифференцировать товар или услугу от предложений конкурентов. Что уникального в вашем продукте или предложении?
• Уменьшить степень обеспокоенности потенциального клиента. Предоставляется ли гарантия, насколько просто будет вернуть продавцу неподходящий товар?
• Сделать предложение, которое усилит призыв к действию. Что дополнительно получит человек, решив отдать вам свои кровно заработанные деньги?
Square.com дифференцирует свое предложение и уменьшает обеспокоенность пользователя, предлагая низкие проценты за обслуживание и возможность быстрого пополнения счета.
Правильный дизайн ведет читателей к действию
Назначение целевых страниц состоит в побуждении читателей к выполнению определенного действия. Взяв на вооружение технологию тепловых карт, можно создавать целевые страницы, которые переводят внимание от одного участка к другому, каждый из которых последовательно выполняет свое дело в формировании убедительного продающего предложения.
В публикации на Pixsysm Blog указывается на несколько ошибок, которые «любят» делать дизайнеры целевых страниц:
• Объекты, конкурирующие за внимание посетителя. Более одного очевидного призыва к действию создают путаницу. Если человек попал на целевую страницу, то его следует однозначно убедить выполнить определенное действие. Тут не должно быть никаких догадок и права выбора.
• Слишком много шрифтов.
Выберите один или (максимум) два типа шрифта, совместимых друг с другом. Один шрифт используйте для того, чтобы выделить важные моменты, а другой, для подачи вспомогательной информации.
• Не используйте рамки и т.п., если это не призыв к действию. Оставьте рамки и кнопки для основного призыва к действию, они останавливают взгляд и сосредотачивают внимание. Разбросанные тут и там рамки, появляющиеся до призыва к действию, запутывают читателя и могут заставить вообще уйти со страницы раньше времени.
• Использование слишком сложной структуры заголовков. Заголовки и подзаголовки служат для последовательного донесения до пользователя важной информации. Как и рамки, их следует использовать стратегически, переводя внимание читателя от одного пункта к другому.
Использование дизайна для управления путем перемещения взгляда
Для нецелевых страниц тепловая карта обычно напоминает латинскую букву «F». Взгляд посетителя вначале устремляется в верхний левый угол, затем проходит слева направо, после чего совершает вертикальный путь сверху вниз.
Данное изображение (источник: UseIt.com) показывает типичный F-паттерн, обычный для нецелевых страниц.
Но на целевых страницах путь, проходимый взглядом посетителя, может быть совершенно другим, и вести его можно с помощью дизайна. Некоторые советы по использованию элементов дизайна для управления вниманием читателя даны в статье «8 Визуальных техник, которые можно использовать, чтобы указать взгляду его путь и увеличить конверсию целевой страницы».
Ниже приведены наиболее эффективные приемы.
• Заставьте работать белые поля. Свободные участки страницы расслабляют, и могут вести взгляд посетителя к следующему важному шагу процесса покупки.
• Начните с убедительного заголовка. Большинство читателей начинают изучение страницы с верхнего левого угла, поэтому отличным решением будет разместить здесь логотип компании, а следом за ним – основной заголовок.
• Используйте маркированный список для последовательной подачи информации.
• Используйте изображения в качестве подсказок для направления взгляда. По информации Social Triggers, изображение человека, смотрящего на определенную область страницы, притягивает к ней внимание читателя. Кроме того, изображения могут формировать своеобразные стрелки, последовательно подсказывающие взгляду направление дальнейшего следования. Например, изображение человека, положившего одну руку себе на бедро, сосредотачивает взгляд читателя в направлении, в котором указывает локоть.
Для построения карты внимания можно попросить других людей посмотреть на страницу, а затем рассказать, в каком порядке их внимание переходило с одного элемента на другой. Существуют и более продвинутые методы анализа. В любом случае, при невысокой конверсии целевой страницы следует убедиться в том, что ее дизайн помогает взгляду пройти нужный путь.
Источник: unbounce. com
Дебетовые карты в Новосибирске | Оформить и заказать дебетовую карту банка Левобережный
Выберите офис получения карты
Населенный пункт * НовосибирскОбьБердскИскитимЛиневоБаганБарабинскБолотноеЧаныЧерепановоЧистоозёрноеЧулымДовольноеКарасукКаргатКыштовкаКоченевоКочкиКолываньКраснозёрскоеКупиноКуйбышевМасляниноМошковоОрдынскоеСузунТатарскТогучинУсть-ТаркаУбинскоеВенгеровоЗдвинскГорныйКемеровоНовокузнецкЛенинск-КузнецкийКалтанБарнаулБийскКрасноярскТомскАсино Адрес офиса обслуживания * Главный офисДополнительный офис «Бердский»Дополнительный офис «Искитимский»Операционный офис «Кемеровский»Операционный офис «Новокузнецкий»Дополнительный офис «Голден Парк»Дополнительный офис «Бердский-2»Дополнительный офис «Искитимский-2» Операционный офис «Кемеровский-2» Дополнительный офис «Дзержинский» Дополнительный офис «Заельцовский» Операционный офис «Алтайский»Операционный офис «Новокузнецкий-3»Операционный офис «Красноярский» Операционный офис «Томский»Дополнительный офис «Западный»Операционный офис «Калтанский»Операционный офис «Бийский» Операционный офис «Ленинск-Кузнецкий»Операционный офис «Асиновский»Дополнительный офис «Калининский»Дополнительный офис «Кировский» Дополнительный офис «К.
ул. Кирова, 48 г. Новосибирск, 630102, Россия ул. Рогачева, 1 г. Бердск, Новосибирская область, 633009, Россия ул. Пушкина, 91 г. Искитим, Новосибирская область, 633210, Россия проспект Молодежный, 3а г. Кемерово, Кемеровская область, 650070, Россия ул. Кирова, 103 г. Новокузнецк, Кемеровская область, 654080, Россия ул. Курчатова, 1 (3 этаж) г. Новосибирск, 630129, Россия ул. Максима Горького, 3 г. Бердск, Новосибирская область, 633010, Россия ул. Пушкина, 28Б г. Искитим, Новосибирская область, 630090, Россия ул. Ноградская, 16 г. Кемерово, Кемеровская область, 650000, Россия ул. Королева, 21/1 г. Новосибирск, 630015, Россия ул. Дуси Ковальчук, 252 г. Новосибирск, 630082, Россия пр. Ленина, 44а г. Барнаул, Алтайский край, 656038, Россия ул. Кирова, 57 г. Новокузнецк, Кемеровская область, 654080, Россия ул. Молокова, 60 г. Красноярск, Красноярский край, 660135, Россия Совпартшкольный переулок, 13 г. Томск, Томская область, 634009, Россия ул. Забалуева, 51/1 г. Новосибирск, 630096, Россия ул.
Ленина, 37 г. Карасук, Новосибирская область, 632865, Россия ул. Советская, 203 (помещение 3) г. Каргат, Новосибирская область, 632402, Россия ул. Советская, 56/1 р.п. Колывань, Новосибирская область, 633160, Россия ул. Саратовская, 57 р. п. Коченево, Новосибирская область, 632640, Россия ул. Советская, 24 с. Кочки, Новосибирская область, 632490, Россия ул. Чкалова, 8 р. п. Краснозёрское, Новосибирская область, 632902, Россия Квартал 11, д. 20 г. Куйбышев, Новосибирская область, 632383, Россия ул. Советов, 97а г. Купино, Новосибирская область, 632735, Россия ул. Садовая, 1 с. Кыштовка, Новосибирская область, 632270, Россия ул. Партизанская, 9 р. п. Маслянино, Новосибирская область, 633564, Россия ул. Советская, 19 р. п. Мошково, Новосибирская область, 633131, Россия ул. Мира, 43а р. п. Ордынское, Новосибирская область, 633261, Россия ул. Ленина, 58 р. п. Сузун, Новосибирская область, 633623, Россия ул. Ленина, 61a г. Татарск, Новосибирская область, 632122,Россия ул. Лапина, 21 г. Тогучин, Новосибирская область, 633456, Россия ул. Ленина, 21а с. Убинское, Новосибирская область, 632520, Россия ул. Дзержинского, 10 с. Усть-Тарка, Новосибирская область, 632160, Россия ул. Советская, 189 р.п. Чаны, Новосибирская область, 632201, Россия ул. Партизанская, 23 г. Черепаново, Новосибирская область, 633525, Россия ул. Дзержинского, 26/1 р.п. Чистоозёрное, Новосибирская область, 632721, Россия ул. Чулымская, 20 г. Чулым, Новосибирская область, 632551, Россия Коммунистический проспект, 2 п. Линево, Новосибирская область, 633216, Россия ул.Советская 15а р.п. Горный, Новосибирская область, 633411, Россия ул. Маяковского, 5 г. Новосибирск, 630037, Россия Иркутский тракт, 26 г. Томск, Томская область, 634049, Россия Квартал 8, д. 9 г. Куйбышев, Новосибирская область, 632383, Россия площадь Труда, 1 г. Новосибирск, 630108, Россия ул. Орджоникидзе, 33 г. Новосибирск, 630099, Россия Морской проспект, 24 г. Новосибирск, 630090, Россия пр. К. Маркса, 20 (НГТУ, 1 этаж) г. Новосибирск, 630092, РоссияКарта внимания
Карта внимания Карта внимания представляет собой сводную карту пространственного распределения внимания пользователя, которая основана на дискретном пространственном и пространственно-временном агрегировании траекторий движения глаз.
Карты внимания представляют собой один или несколько агрегированных атрибутов (количество фиксаций, количество разных пользователей, среднее количество фиксаций на пользователя, общее время фиксации, среднее время фиксации на пользователя, максимальное количество повторных посещений и т. д.) с помощью затенения областей, пропорционального размера. символы или схемы. Карту внимания можно комбинировать с картой потока.
Взаимодействия : масштабирование и панорамирование; фильтрация областей по значениям атрибутов; фильтрация траекторий, приводящая к динамическому пересчету агрегированных атрибутов и последующему обновлению карты для отражения изменений ( динамическая агрегация ).
Множественные карты внимания (MAM)
Отображение, состоящее из нескольких карт внимания, можно использовать для представления распределения внимания пользователей на визуальный стимул в разные временные интервалы или кластеры временных интервалов или для разных пользователей или групп пользователей.
Например, на приведенном ниже дисплее представлена временная последовательность карт внимания. Перед агрегированием данных траектории были согласованы с одним и тем же временем начала и окончания; следовательно, мы рассматриваем относительные интервалы времени по отношению ко всей продолжительности выполнения задачи (т. е. длительности траектории). Мы разбили продолжительность траектории на 10 равных интервалов; следовательно, каждая из маленьких карт представляет временной интервал в 10% от времени выполнения задачи. Размеры (площади) круглых символов представляют количество посещений областей в каждом из временных интервалов.
На приведенном ниже примере показано распределение внимания для четырех групп пользователей, определенных в зависимости от производительности: (1) 9 самых быстрых пользователей; (2) 9 пользователей с 10-18 мест по производительности; (3) 9 пользователей с мест 19-27; (4) 10 самых медленных пользователей.
Карты различий внимания (AMD)
На карте внимания или отображении с несколькими картами внимания можно преобразовать значения текущего представленного совокупного атрибута в отличия от значений другого атрибута. Для каждого места значение второго атрибута вычитается из значения первого атрибута, и результирующая разница представляется так же, как исходный атрибут был представлен ранее. Два разных цвета используются для обозначения положительных и отрицательных различий. Размеры символов или диаграмм (или густота штриховки области) пропорциональны абсолютным значениям различий.
В приведенном ниже примере мы применяем это преобразование к отображению множественной карты внимания, представляющей суммарное распределение внимания четырех групп пользователей в соответствии с производительностью. Счета второй самой быстрой группы (группа 2) были вычтены из счетов всех групп. Положительные различия в количестве ходов показаны фиолетовым цветом, а отрицательные — зеленым. На карте не видно никаких символов для группы 2, так как все различия равны нулю.
Сопоставленные карты внимания (JAM)
Сопоставленные карты внимания показывают суммарное распределение внимания пользователей на разных дисплеях.
Например, две карты внимания ниже представляют количество посещений двух разных деревьев.
Каталожные номера
Геннадий Андриенко, Наталья Андриенко
Общая схема использования агрегации в визуальном исследовании данных о перемещении
Картографический журнал , 2010, т. 47 (1), стр. 22-40
предварительная печать
Наталья Андриенко, Геннадий Андриенко, Хендрик Штанге, Томас Либих, Дирк Хеккер
Визуальная аналитика для понимания пространственных ситуаций на основе данных об эпизодических движениях
Künstliche Intelligenz , 2012
препринт
опубликованная версия:
http://dx.doi.org/10.1007/s13218-012-0177-4
Как использовать приложение Attention Insight
Хотите, чтобы ваш дизайн был привлекательным, чтобы люди с большей вероятностью взаимодействовали с вашим контентом? Это пошаговое руководство поможет вам получить четкое представление о способах улучшения вашего дизайна. Анализ Attention Insight проверит качество вашего дизайна с помощью тепловых карт внимания, процента внимания, карты фокуса и оценки четкости. Загружайте, анализируйте, вносите изменения и улучшайте свой дизайн, применяя принципы дизайна.
Выберите Тип анализа : Настольный компьютер , Маркетинговый материал, Мобильный телефон, плакаты, упаковка или Полки .
- Загрузите изображения, которые вы хотите протестировать, или введите URL-адрес веб-страницы.
- Загрузив изображения, нажмите Анализировать все .
Теперь мы можем определить, какие элементы дизайна должны привлекать наибольшее внимание зрителя. Допустим, мы думаем, что заголовок и кнопка CTA Купить сейчас являются наиболее важными элементами в дизайне, и поэтому мы хотим, чтобы они были наиболее привлекательными частями дизайна, а также привлекали значительный процент внимания. Давайте попробуем увеличить процент как для заголовка, так и для кнопки CTA.
Мы считаем, что минимальное желаемое внимание для кнопки CTA будет 3%, а 4% будет отлично.
ШАГ №2 Анализ результатов: Тепловая карта внимания и Карта фокусаВ мгновение ока вы получите визуальное представление о том, как внимание зрителя распределяется в дизайне. С помощью Attention Heatmap и Focus Map, вы можете проверить, привлекают ли наиболее важные элементы вашего дизайна достаточно внимания зрителя.
- Тепловые карты внимания показывают, какие объекты пользователь заметит в первую очередь. Теплые цвета (красный и желтый) показывают, какие области привлекают наибольшее внимание.
- Карта фокуса показывает, какие части вашего дизайна были замечены или упущены в течение первых 3-5 секунд.
- Показатель четкости описывает, насколько четким является ваш дизайн: перегружен ли он элементами, конфликтующими цветами или он чистый и четкий.
Оценка 95 указывает на максимально чистый дизайн.
Чтобы убедиться, что наиболее важным объектам уделяется особое внимание, проверьте это, нарисовав Области интереса на желаемых объектах.
- Области интереса (AOI): платформа вычисляет процент внимания, которое получают объекты. Он позволяет вам оценить производительность различных объектов, на которые вы хотите обратить внимание пользователя.
Алгоритм автоматически распознает кнопки CTA. Кроме того, для тестирования других объектов (логотипа, заголовка и т. д.) нужно нарисовать АОИ, перетащив прямоугольник. Как только вы нарисуете прямоугольник, нажмите Calculate Внимание . Кроме того, вы можете назвать его. Процент внимания, которое получил тот или иной объект, рассчитывается мгновенно.
Здесь мы видим, что кнопка CTA Shop Now получила 2,7%, что не является удовлетворительным процентом для нашей цели — посмотрим, сможем ли мы увеличить цифру на 1 или более процентов.
Кстати, вы можете проанализировать результаты онлайн или скачать анализ: в правом верхнем углу нажмите кнопку скачать.
Вы сможете получить доступ ко всем созданным исследованиям в любое время и в любом месте — просто войдите в свою учетную запись.
ШАГ № 4 Внесите изменения, чтобы улучшить свой дизайнПосле того, как вы обнаружите ошибки визуального внимания, внесите небольшие изменения в свой дизайн. Прелесть в том, что это не должно быть большим изменением. Иногда это так же просто, как увеличить размер самого важного текста, изменить фоновое изображение или цвет элементов сайта.
Поскольку мы выбрали заголовок и кнопку как наиболее важные элементы в нашем дизайне (и мы признали, что они недостаточно выделяются), давайте внесем некоторые изменения, чтобы посмотреть, улучшится ли дизайн.
Во-первых, мы удалим рамки вокруг текста и изображений, чтобы увеличить пустое пространство. Затем мы переместим текст описания (сделав его короче), а также кнопку CTA под заголовком. После этого мы перетащим все элементы, расположенные в центре, к левой стороне страницы. Мы увеличим размер как заголовка (заголовка), так и подзаголовка (текста). Также мы увеличим фоновое изображение. Эти изменения помогут нам создать более сбалансированную иерархию элементов и должны привлечь внимание к самому важному элементу, выделив его.
Наша цель — создать лучший дизайн, который бы соответствовал первоначальной цели.
Вы можете применять такие принципы дизайна, как:
Фокус
Баланс и выравнивание
Белое пространство
Контраст
Визуальная иерархия
Чтобы внести изменения в дизайн, наймите дизайнера, используйте программное обеспечение Adobe 056 90 , конструктор веб-сайтов, например Wix или Squarespace (если вы используете шаблон), или платформу графического дизайна, например Канва .
ШАГ № 5 A/B-тестирование: тестирование улучшенного дизайна- Внесите некоторые изменения в свой дизайн.
- Вернитесь назад и нажмите Создать новый анализ .
- Добавить новую версию дизайна.
- Рисовать прямоугольники на одних и тех же объектах. CTA уже отмечены.
Проведем тот же анализ с отредактированной версией.
ШАГ #6 Сравнить- Чтобы сравнить проекты, нажмите кнопку с двумя стрелками, обращенными друг к другу, в правом верхнем углу страницы, рядом с кнопкой загрузки.
Создайте новое сравнение, введя имя и нажав Выберите анализы для сравнения .
- Выберите оба анализа и нажмите Сравнить .
- Сравните характеристики двух разных конструкций.
- Если вы хотите добавить дополнительные области интереса, нажмите Добавить элемент .
В приведенном выше примере тепловая карта говорит о том, что после внесения изменений один из важнейших элементов дизайна — заголовок — получает внимание, которое распределяется более равномерно и занимает более центральное место, чем в предыдущей версии дизайна. Процент внимания говорит нам о том, что, увеличившись с 42,4% до 46%, внимание к заголовку увеличилось на 3,6%.
Также важно отметить, что в первоначальной версии дизайна было трудно точно определить, сколько внимания привлекло название из-за совпадения названия и изображения детей. Из тепловой карты видно, что больше всего внимания в области заголовка привлекало лицо ребенка, а не сам заголовок. Вы должны избегать такого дублирования всеми средствами. Это значительно затрудняет чтение текста или разглядывание лица. Не говоря уже о том, что текст не привлечет столько внимания, сколько мог бы. Вы можете видеть, что во втором дизайне именно текст в заголовке привлекает внимание и даже больше.
Когда мы смотрим на распределение тепловой карты на кнопке CTA Shop Now , после изменения ее положения, цвета и размера мы видим, что она также привлекает больше внимания зрителей. Кроме того, процент внимания увеличился на 2,2% (с 2,7% до 4,9%). Показатель четкости дизайна увеличился с 61% до 74%.