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

Автор: Анжела Стрингфеллоу (Angela Stringfellow) – до того, как начала заниматься интернет-маркетингом, несколько лет проработала менеджером по маркетингу в области здравоохранения. В течение последних нескольких лет Анжела оказывает консультационные услуги средним и крупным организациям, помогая им выстраивать всеобъемлющие кампании в социальных сетях, создавать блоги и формировать редакционные стратегии, позволяющие поднять общую репутацию бренда и его известность. При этом она преимущественно сосредотачивается на технологиях Web 2.0 и контент-маркетинге.

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

EyeTools.com называет траекторию взгляда одного человека тепловой картой (heat map), так как на первый взгляд она кажется совокупностью случайно разбросанных по странице горячих точек, при удалении от которых температура понижается. При анализе траекторий взглядов множества пользователей можно выявить логические общие особенности распределения внимания.

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

Эта тепловая карта, созданная TechWyse.com, показывает участки целевой страницы, где взгляд пользователя сосредотачивается прежде всего.

Пользователь может заблудиться на странице, если его карта не будет учтена

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

Если же тепловая карта указывает, что внимание пользователей сосредотачивается на областях страницы, не представляющих особой важности, то это сигнал для пересмотра дизайна. В идеале, самые горячие области тепловой карты должны быть сосредоточены в местах призыва к действию. В примере выше, сильнее всего внимание концентрируется на фрагменте заголовка, гласящем «Бесплатно». Это, конечно, важная информация, но пользователи «не видят» область «Текущее состояние» в левом нижнем углу, и практически полностью игнорируют призыв к действию «Запросить информацию», размещенный чуть выше. Юх,Хороший разработчик целевых страниц прекрасно знает, что каждый пиксель на них должен выполнять определенную функцию. Даже белое пространство не только упорядочивает остальные элементы, но и помогает взгляду найти наиболее важные места. Широкие белые области вокруг призыва к действию позволяют читателю быстрее и сильнее сосредоточиться на нем. Еще одним элементом управления вниманием посетителя могут быть изображения. В частности, люди часто устремляют свой взгляд в те места, куда смотрят другие. Поэтому, если мы поместим на странице фотографию человека, взгляд которого направлен прямо на призыв к действию, то, наверняка, заставим читателя обратить особое внимание на эту область страницы.

Это изображение (источник: SocialTriggers.com) демонстрирует результаты исследования, проведенного Usable World. На данной рекламной странице взгляд читателя прочнее фиксируется на заголовке с помощью смотрящего на него ребенка. Ребенок тут служит своеобразной естественной стрелкой, управляющей вниманием зрителя.

Этот пример с TechWyse.com показывает еще один вариант дизайна целевой страницы. Обратите внимание, как взгляд читателя «прыгает» по ней, пропуская призыв к действию.

Красота не должна быть единственным критерием

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

Эрик Роувелл (Eric Rowell) пишет: «Хороший дизайн, в первую очередь, служит решению задач, для которых создан сайт, а уже потом он должен быть красивым». Сравнивая дизайн страницы с архитектурой, он говорит, что если бы при проектировании зданий руководствовались, прежде всего, принципом красоты и гармонии, то многие дома не имели бы ни окон, ни дверей. Другими словами функциональная составляющая должна определять все остальное.

Вначале определяем задачи целевой страницы

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

• Определить проблему, которую надо решить;

• Показать способ решения этой проблемы;

• Создать призыв к действию, которое решит эту проблему.

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

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

Кроме того, целевая страница должна решать следующие задачи:

• Дифференцировать товар или услугу от предложений конкурентов. Что уникального в вашем продукте или предложении?

• Уменьшить степень обеспокоенности потенциального клиента. Предоставляется ли гарантия, насколько просто будет вернуть продавцу неподходящий товар?

• Сделать предложение, которое усилит призыв к действию. Что дополнительно получит человек, решив отдать вам свои кровно заработанные деньги?

Square.com дифференцирует свое предложение и уменьшает обеспокоенность пользователя, предлагая низкие проценты за обслуживание и возможность быстрого пополнения счета. В чем состоит стимул? Покупатели могут сразу же воспользоваться кредитной картой, вместе с к которой бесплатно получают фирменный считыватель баланса Square Card Reader.

Правильный дизайн ведет читателей к действию

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

В публикации на Pixsysm Blog указывается на несколько ошибок, которые «любят» делать дизайнеры целевых страниц:

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

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

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

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

Использование дизайна для управления путем перемещения взгляда

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

Данное изображение (источник: UseIt.com) показывает типичный F-паттерн, обычный для нецелевых страниц.

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

Ниже приведены наиболее эффективные приемы.

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

• Начните с убедительного заголовка. Большинство читателей начинают изучение страницы с верхнего левого угла, поэтому отличным решением будет разместить здесь логотип компании, а следом за ним – основной заголовок.

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

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

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

Источник: www.searchengines.ru