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

Дизайнер образовательной платформы для маркетологов и предпринимателей Rainmaker Digital Рафал Томал составил руководство, как сделать призыв к действию на сайте ненавязчивым, но эффективным.

Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой проекта для начинающих предпринимателей «Я люблю ИП».

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

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

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

Каждому призыву к действию нужно внимание

Прежде чем мы перейдем непосредственно к дизайну, давайте поговорим о том, как привлечь внимание. Почему это так сложно? И зачем вообще использовать для этого какие-то приемы?

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

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

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

Все посетители - этап меньших обязательств - этап больших обязательств

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

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

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

Расположение призыва к действию в случае меньших и больших обязательств

Сначала определить визуальные паттерны

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

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

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

Типографика, макет, элементы интерфейса

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

Главное здесь - последовательность. Чем устойчивее ваши визуальные паттерны, тем проще их нарушить деликатно и элегантно.

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

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

А теперь представьте, что на вечеринке все одеты в черное и белое. Чтобы выделиться, достаточно надеть красную футболку. Люди вас заметят, и для этого не придется бегать и кричать.

Как видите, привлечь внимание можно только в том случае, если в основе дизайна лежит некий принцип. Если его нет и все пестрит, то очень сложно выделить что-то одно.

Сломать паттерн

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

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

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

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

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

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