ДизайнУха
19
Jul

Как создать эффективные призывы к действию

источникrafaltomal.com
авторRafal Tomal
Разработка страниц для конверсии — работа с подвохом. Это постоянная борьба того, что работает, а что нет. Бесконечный процесс тестирования, измерений и внесения изменений.

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

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

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

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

Вопрос в том, как тонко подвести своих пользователей к призывам к действию, не слишком раздражая, и не крича восклицательными знаками?

Каждый призыв к действию хочет немного внимания

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

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

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

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

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

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

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

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

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

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

Прежде всего определите вашу визуальную структуру

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

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

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

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

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

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

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

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

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

Теперь разрушьте вашу визуальную структуру

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

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

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

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

Вы также можете сломать сетку, если ваш дизайн построен на ней.

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

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

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

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

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

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