Как сделать призыв к действию деликатным, но эффективным? Это статья раскрывает несколько простых секретов. Мы постарались воспользоваться ими при создании нового дизайна для нашего сайта «Я люблю ИП». И заодно решили её перевести. Надеемся, эта статья также будет вам полезна.
Создавать эффективные посадочные страницы — это непростая задача. Это постоянная борьба между тем, что работает и что нет. Это непрерывный процесс тестирования, измерений и улучшений.
Одна из самых сложных задач, с которой я сталкивался в работе, — это направить внимание посетителей сайта на призыв к действию. И хотя главную роль в этом процессе, скорее всего, играет текст, очень важно подкрепить его дизайном, который привлечёт внимание к вашему сообщению.
Хорошая новость состоит в том, что поведение людей достаточно предсказуемо, и мы можем это использовать.
Людям очень нравятся повторяющиеся визуальные паттерны. И они очень быстро замечают любое отклонение от них. Именно это мы можем использовать, чтобы привлечь их внимание.
Но как сделать это деликатно, без навязчивых кнопок и восклицательных знаков?
Каждому призыву к действию нужно внимание
Прежде чем мы перейдём непосредственно к дизайну, давайте поговорим о том, как привлечь внимание. Почему это так сложно? И зачем вообще для этого нужно использовать какие-то приёмы?
Цель большинства сайтов — это привлечь целевую аудиторию и призвать их к определённому действию. Будь то подписка на рассылку, социальное взаимодействие или покупка товара.
Конечно, само по себе это действие обычно не так привлекательно для тех, кто впервые попал на ваш сайт. Вряд ли вы сможете заинтересовать ваших посетителей просто фразой: “Подпишитесь на мою рассылку!”
Потому что именно контент привлекает вашу целевую аудиторию. Это может быть хороший продающий текст, посты в блоге, инфографика, бесплатная электронная книга или что-то ещё.
После того, как вы заинтересовали посетителей сайта, вы можете направить их дальше, к следующему этапу вашей воронки конверсии.
Посетители. Меньше обязательств. Больше обязательств
Теперь, привлечь внимание человека и направить его к действию очень сложно. И чем больше затрат от него требуется, тем сложнее это сделать. Для разных призывов к действию могут понадобится разные подходы.
Например, предложить подписаться на рассылку в обмен на бесплатную ценную информацию гораздо проще, чем попросить что-то купить.
Призыв к действию, не требующий больших затрат, может быть более прямым. Его можно разместить в поп-ап окне или на большом баннере вверху сайта.
Но такой подход не сработает, если вы хотите что-то продать. Вам нужно подготовить ваших посетителей, просветить их, развеять сомнения и сформировать интерес к продукту прежде, чем предложить его купить.
Именно поэтому располагать призыв к действию нужно более стратегически. Не стоит делать это слишком рано, ваши посетители могут быть к нему ещё не готовы.
Расположение призыва к действию для меньшего и большего обязательства
Сначала определите ваши визуальные паттерны
Как я уже говорил, только дизайн не сможет убедить человека совершить какое-то действие. Главную роль в этом играет текст. Но с помощью дизайна вы можете привлечь внимание к вашему сообщению, указав посетителям нужное направление.
И это приводит нас к главной мысли этого поста, которая заключается в том, как эффективно нарушать визуальные паттерны, чтобы завладеть вниманием посетителей.
Визуальная айдентика вашего сайта определяется типографикой, цветами, макетом и элементами интерфейса. Все вместе они создают определённые повторяющиеся визуальные образы.
Типографика, макет, элементы интерфейса
Постарайтесь сделать навигацию и просмотр вашего сайта предсказуемыми. Вы хотите создать постоянный и позитивный опыт взаимодействия при чтении вашего контента. Это должно быть вашей основой.
Главное здесь — постоянство. Чем устойчивее ваши визуальные паттерны, тем проще их нарушить более деликатным и элегантным способом.
Но зачем вам нарушать ваш красивый дизайн? Для того чтобы направить взгляд посетителя на ваше предложение на странице, переполненной контентом. Иными словами, привлечь его внимание туда, куда вам нужно.
Чтобы было проще понять, представьте, что вас пригласили на вечеринку, где все одеты, как они хотят. В таком многообразии стилей и цветов вам будет очень сложно привлечь к себе внимание. Это возможно, но необходимо будет принять радикальные меры.
А теперь представьте, что на вечеринке все одеты в чёрное и белое. Чтобы выделиться, вам достаточно одеть красную рубашку. Люди вас заметят, и для этого не нужно бегать и кричать.
По аналогии, во всём этом есть смысл, только если у вас есть постоянная основа. Без неё, когда всё пестрит, очень сложно выделить что-то одно.
А теперь нарушьте эти паттерны
В дизайне привлечь внимание к призыву к действию можно легко при помощи контраста. Я говорю не только о контрасте в цвете, но и в размере, выделении, белом пространстве или даже расположении.
Не все техники работают одинаково хорошо для разных людей. Поэтому лучше всего комбинировать сразу несколько из них.
Например, призыв к действию можно расположить на контрастном фоне и выделить заголовок болдом. Дополнительно можно увеличить отступы вокруг него, чтобы создать более сильный контраст контента и пространства.
Дополнительное белое пространство — это отличный способ выделения, который не делает дизайн шумным. Просто добавляя отступы вокруг элемента, вы отделяете его от остального контента. Это разделение и чёткое нарушение макета с лёгкостью привлекает взгляд.
Также вы можете нарушить сетку, если она у вас есть.
Сетка широко используется в веб-дизайне. И это тема для отдельного поста. В двух словах, это сплетение вертикальных и горизонтальных линий, которые полностью диктуют ваш макет.
Размещая все элементы контента на этих линиях, вы можете создать упорядоченную и постоянную структуру дизайна на вашей странице. Сетка помогает создать визуальный паттерн на сайте.
Нарушив сетку, вы сделаете ваш призыв к действию более заметным. Да, всё так просто. Располагая элементы не по сетке, вы придаёте им большее значение.
Наши глаза любят визуальные паттерны и хорошо их распознают. И любое отклонение от идеального дизайна обязательно привлечёт взгляд.
Именно так, друзья, и можно завладеть вниманием посетителей.
Читайте также:
Полный путеводитель по созданию лендингов, которые продают
Комментарии (26)
xpostman
17.06.2016 14:49+4Его можно разместить в поп-ап окне ...
нет
iloveip
17.06.2016 14:56-1Почему нет? Очень часто можно встретить предложения подписаться на рассылку именно в поп-ап окне.
xpostman
17.06.2016 15:07+2Потому что попап появляется внезапно и помимо воли пользователя. Это пренебрежение UX, несмотря на то, что это сейчас и правда распространено.
В результате пользователя выхватывают из контекста, и заставляют решать новую задачу «Блин, как эту херню закрыть» (хинт: самый простой и надёжный способ — закрыть всю вкладку целиком)
Nekto_Habr
17.06.2016 15:17+3Так же очень часто можно услышать желание людей оторвать руки тем, кто прикручивает поп-апы к сайту :) Подозреваю, что обе частоты одинаковы.
Понимаете, есть хорошие практики, а есть плохие. Поп-апы настолько задолбали людей, что сегодня все браузеры по умолчанию блокируют всплывающие окна. Это объективный исторический факт. Но тут война щита и меча — поп-апы реинкарнировались в модальных окнах. Опять таки — зачем воевать вместо поиска компромиса? Предложение подписаться на рассылку можно разместить во всплывающем футере, например, или же в небольшом сообщении где-то сбоку (см. flickr, medium), если уж так нужно навязать эту вредность своим пользователям.
Вообще хороший тон — не принуждать подписываться. Я сам, если захочу, найду эту возможность (будь то в подвале или просто сразу под контентом). Youtube никого не принуждает подписываться, люди сами кликают кнопочки, ставят лайки и подписываются на канал.
ApplejackApple
18.06.2016 14:41И это просто чудовищно. Настолько чудовищно, что сидеть в интернете со смартфона или планшета становится просто невыносимо.
torrie
18.06.2016 23:05Невыносимо на каждом сайте видеть ' мы вам перезвоним, дайте номер' и ' я ваш личный помощник, чем могу помочь?'
damat
17.06.2016 18:48+1я может туплю, но где на вашем сайте применение описанного в статье?..
нашел только блок текста
Пришлите на hello@iloveip.ru ваш ИНН
(если есть), копию паспорта
и номер телефона.
Напишите, чем вы планируете
заниматься и будете ли вы применять
УСН (доходы 6?% или доходы минус расходы 15?%).
Лично получите документы
в налоговой по месту жительства
и откройте счёт в Точке.
Может стоило сделать _одну_ кнопку «Регистрация ИП» и по нажатию на нее либо в попапе, либо на отдельной странице и провести пользователя по этим шагам через формы?iloveip
17.06.2016 21:49Такой вариант нам, к сожалению, не подходит. Во-первых, не все готовы отправить скан паспорта через форму на сайте. Во-вторых, нам важно было показать последнее условие, которое отдалено во времени и происходит уже после регистрации ИП. К тому же, у людей часто возникают вопросы, прежде чем они готовы принять участие в акции. Поэтому по сути это приглашение написать нам письмо, но при этом мы информируем о том, что нам понадобится для регистрации ИП.
damat
17.06.2016 21:57Т.е. вы реально видите разницу в отправке через сайт и через почту?..
И не видите, как в полноэкранном интерфейсе можно показать 3 последовательных шага?..iloveip
18.06.2016 14:42Я бы очень хотела посмотреть, как это видите вы.
damat
19.06.2016 12:29вот вам ссылка на подумать: http://bit.ly/1tCNx94
если этого не хватает, можем обсудить создание концепта с оплатойiloveip
20.06.2016 08:45Поиск по картинкам в Гугле я и сама могу сделать. Мне бы хотелось увидеть, как вы это видите применительно к нашей конкретной ситуации. Учитывая, что, во-первых, шаг один — написать письмо. А во-вторых, третий абзац («Лично получите документы в налоговой по месту жительства и откройте счёт в Точке») — это обязательное условие для бесплатной регистрации ИП и оно происходит недели через две после того, как человек напишет нам письмо и пришлёт документы (шаг 1). Иначе регистрация будет платной.
damat
21.06.2016 04:04У вас сейчас все написано в три колонки, даже не понятно, что это последовательность шагов. Обычно так выглядит выбор из одинаковых вариантов. Т.е. я так и не понял, в чем бесплатность, т.к. получаю документы все равно я сам, если судить по описанию. Я уж не говорю, что вообще ничего не написано про платный вариант, о котором вы говорите — в какой момент регистрация становится платной?
Но как бы там ни было: с минимальными правками можно сделать вот так: https://dl.dropboxusercontent.com/s/ozpuhe576773ojk/shot_160621_040112.png
но сам процесс у вас я так и понял даже с вашими комментариями, поэтому может бытьiloveip
21.06.2016 09:02Бесплатность заключается в бесплатной подготовке документов. Мы говорим об этом в самом начале: «Мы подготовим все необходимые документы для регистрации ИП и откроём счёт в банке Точка».
Про платную регистрацию написано в Ответах на вопросы внизу страницы:
"Что будет, если я не открою счёт в Точке?
Если вы не откроете счёт в Точке в течение 14 дней после регистрации ИП, вы должны оплатить 1990 руб. за подготовку документов".
Также мы предупреждаем об этом в письме, когда нам отправляют заявку.
По поводу вашего варианта, у него есть следующие недостатки:
- Важное условие («лично получите документы в налоговой по месту жительства и откройте счёт в Точке») вы прячете с основного экрана в отдельное окно, за дополнительным кликом.
- Далее по самой форме. У неё нет названия. Эта форма для чего?
- Мы не спрашиваем имя и фамилию. Эти данные можно посмотреть из документов. Таким образом, это лишний шаг.
- ИНН может быть как просто номер, так и копия документа. Для нас подходит и тот, и тот вариант.
- Нет поля о видах деятельности («чем вы планируете заниматься?»).
- Вопрос про УСН можно сделать чекбоксом.
- Разница в УСН не в процентах, а в объекте налогообложение. Поэтому мы пишем доходы 6 % или доходы минус расходы 15 %. Ставка может меняться в зависимости от региона.
- В целом, из формы непонятно, какие поля обязательные, а какие нет. А нам для заявки достаточно, чтобы человек просто написал нам письмо, и мы уже можем начать с ним диалог.
Поэтому есть ли смысл прятать все эти данные в форму в отдельном окне вместо двух абзацев? В любом случае, спасибо за ваш пример.
iloveip
21.06.2016 11:36Мы добавили нумерацию в блоке, надеюсь, так будет более понятно, что это последовательные шаги.
damat
21.06.2016 11:44Рад, если поможет
Но вообще все не очень хорошо: я наконец понял, что вы хотите сказать. И понял это только после того, как мы пообщались тут.
Можем голосом по скайпу обсудить. Если интересно, пишите в личкуiloveip
21.06.2016 12:40«Вообще всё не очень хорошо» — это не ответ :)
Если у вас есть, что сказать, пишите здесь. Думаю, другим тоже будет интересно почитать.damat
21.06.2016 12:53+1Хех, опять писать.
Вводные:
1. у вас идет акция, которая экономит 2 т.р. Акция ограничена по времени и имеет определенные условия
2. суть сервиса в том, что вы оформляете документы за клиента, он только забирает уже готовые бумаги из налоговой
3. для контакта вам хватает почты
Замечания:
— первые два пункта на сайте не раскрыты. Можете провести опрос на 5-7 человек, которые не видели сайт и не в курсе вашего бизнеса. Просто покажите им сайт и спросите, в чем суть сервиса, текущей акции и ее условий
— вообще не понятно, что есть экономия денег и есть работа за клиента
— сверху написано, что вы откроете счет, внизу написано, что клиент сам открывает счет
По призывам к действию:
— поскольку вы готовы общаться, формы/обращения можно заменить на блок «Оставьте заявку, мы с вами свяжемся в течение N времени». Там будет достаточно только емейла, на который автопилотом отправляется письмо с подробным описанием (как у вас сейчас и есть, как я понял)
— думаю, что имеет смысл добавить live chat и функцию заказа звонкаiloveip
21.06.2016 14:28Большое спасибо за подробный комментарий.
1. Экономию добавили.
Суть сайта — в самостоятельной подготовке документов. Об этом написано в базе знаний http://www.iloveip.ru/kb/. На главной размещаются разовые рекламные акции.
2. Текст в подзаголовке тоже изменили, чтобы было понятно, что мы бесплатно готовим документы.
3. Текст в третьем блоке тоже поправили: «Лично получите документы в налоговой и подпишите договор с менеджером Точки».
По поводу призывов к действию, возможно, добавим кнопку в следующий раз. Live chat пробовали, но убрали, так как идёт много нецелевых вопросов по поводу самостоятельного оформления ИП (то, чему посвящён сам сайт).
mascoolink
19.06.2016 18:24а где форма на вашем сайте?
iloveip
20.06.2016 08:46На нашем сайте нет формы, там есть адрес электронной почты hello@iloveip.ru, куда можно написать письмо и оставить заявку.
Nekto_Habr
>>Располагая элементы не по сетке, вы придаёте им большее значение.
>>Наши глаза любят визуальные паттерны и хорошо их распознают. И любое отклонение от идеального дизайна обязательно привлечёт взгляд.
*Вздыхаю* Нет, нет, это не про дизайн, это про маркетинг…
iloveip
Но дизайн же не существует сам по себе. У него есть определённая цель — донести сообщение.
Nekto_Habr
Да, дизайн — это решение задач наименьшими средствами посредством визуальной коммуникации. У искалеченной рекламным блоком сетки сообщение следующее: «У руля маркетолог и ему нужно втюхать тебе какую-то хрень».
Пока маркетологи будут думать, что чем громче, ярче, выпяченнее должна быть реклама — ее будут люто ненавидеть. Меня удивляет, почему все рекламщики наступают на одни и те же грабли, вместо того, чтобы делать такую рекламу, которая будет привлекать своим качеством, а не своей ужасностью.