Принцип 3W или привлеките внимание за счет дизайна!

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

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

Вот она, концепция представления информации, называемая «принцип 3W»:

• What? Что предлагает ваша страница? (смысл предложения)
• Why? Почему это важно? (в чем ценность оффера)
• Where? Куда дальше идти пользователю? (призыв к действию)

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

Аналогия с офисом

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

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

Что такое визуальный беспорядок?

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

• Украшения: в офисе это яркая окраска стен, картины, сувениры, на целевой же странице это – логотипы, талисманы, знаки доверия и изображения.
• «Хлам»: в офисе это – исчирканные листки блокнота, стикеры и чашки с кофейной гущей; на целевой странице – параллельные рекламные кампании, не связанные с оффером изображения, внешние ссылки, вторичные офферы, и т. п.

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

Да, это так, но брендирование не должно вытеснять из центра зрительского внимания уже упоминавшиеся нами «3W». Как тогда убедиться в том, что брендинг не отвлекает посетителя от ценностного предложения и призыва к действию? Ответ таков: внедрите научно обоснованные способы привлечения внимания непосредственно в процесс конверсии.

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

То есть слишком большая «вариативность» цветов, размеров и текстур создает атмосферу непредвиденности, которые в конечном счете рассеивают внимание посетителя и увеличивают коэффициент отказов.

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

Чтобы осознать выводы этого исследования, просмотрим несколько тепловых карт, иллюстрирующих зоны распределения внимания:

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

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

Советы:

• Поддерживайте целевую страницу в большем порядке, чем ваши офисные помещения: организуйте содержимое так, чтобы заголовок, ценностное предложение и призыв к действию всегда были перед глазами посетителя.
• Не допускайте изменения шрифтов, цветов и текстур. Подумайте о прогнозируемости и последовательности при организации информации на вашем сайте/целевой странице – слишком разнородный дизайн затрудняет пользователя. Яркие и смелые цвета, шрифты и фактуры должны быть предназначены только для ваших заголовка и CTA-элемента – все остальное должно быть спокойным и равномерным.
• Убедитесь, что ваша страница соответствует «принципу 3W» при сохранении минимально необходимого брендинга.

Как без лишних усилий улучшить дизайн целевой страницы?

Даже обладая научными данными и результатами сплит-тестов, самый искушенный дизайнер может ошибиться. Кстати, во время тестов по отслеживанию движения глаз (айтрекинг), дизайнер может предугадать только 46% элементов страницы, на которые пользователи обратят внимание, в то время как сами пользователи помнят лишь 70% от того, что они на самом деле видели.

Советы:

• Предварительное тестирование!
• Проверьте страницу на соответствие «принципу 3W».
• Поменяйте местами элементы на странице, поэкспериментируйте с оттенками цвета и контрастностью. Теперь ваша страница соответствует «принципу 3W»?
• Протестируйте ее опять. Помните, что главное на странице – это заголовок, ценностное предложение и призыв к действию (3W)!

По материалам www.unbounce.com