Лого vc.ru

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

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

очевидные вещи но порой о них все забывают

Хорошо, но мало. Для лендинга бы побольше инфы, где есть только одна кнопка - например, "скачать". По сути, скачать - это большое обязательство, но далеко вниз не засунешь, или это уже не лендинг.

0

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

0

Ну и для сетки бутстрапом лучше не пользоваться. Сео не френдли потому что.

0

На чем основаны выводы?)
В большинстве случаев бутстрап = гарантия нлом отображения и на мобилах и десктопах, а это на seo наоборот положительно сказывается

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

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

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

0

Хоть "импортные" дизайнеры понимают, что главное "буквы".

П.С. дизайн - привлекает; буквы - "продают"; коррректор - необходим. Помните об этом господа.
Удачи!

0

Извините. не переношу лендинги, поскольку (по крайней мере в РФ), за ними либо компании-однодневки, либо кхм ... явное и безусловное наедалово (с) Камеди, без адреса и норм. телефона (с временным трэкинговым).

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

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

Статья ни о чем ... надо опять перевод читать, т.к. на vc.ru к сожалению все больше пересказы :)

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Андрей Суханов

Не только крупный бизнес двигается по "трендовым" мемам, но и мелочь за ними поспевает)
sweetbags.ru/news/vzhuh-jeto-kakaja-to-sumochnaja-magija

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Valentin Dombrovsky
Travelabs

Вы будете смеяться, но акками компаний, вероятней всего, рулят миллениалы.

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Valentin Dombrovsky
Travelabs

Северсталь -> ТУИ -> Утконос - казалось бы, странная передача "эстафеты"... Если не вспомнить, что это всё компании Мордашова.

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Дмитрий Красильников

разработчик mYgento это, конечно сильно.

Наиболее высокооплачиваемые ИТ-вакансии в городах России и Казахстана на сайте HeadHunter за ноябрь
0
Юлия Панецкая

Вы сделали мой день)

«Товарооборот на 44% превысил ожидания маркетологов»: история акции с «Прилипалами» в «Дикси»
0
Показать еще