Призыв к действию: Руководство по выживанию

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

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

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

Для тех, кто не знаком с термином, вот краткое объяснение от Investopedia:

Call to Action, CTA, или Призыв к действию — это маркетинговый термин для любого устройства, предназначенный для быстрого реагирования или немедленной продажи. CTA может иметь прямую связь с продажами.

Проще говоря, ваш CTA — это то действие, которое вы хотите, чтобы посетитель вашего сайта сделал.

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

Убедительная копия

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

Извините, у меня пять страниц. Могу я воспользоваться ксероксом? 60% сказали "ОК".

Извините, у меня пять страниц. Могу я воспользоваться ксероксом, потому что тороплюсь? 94% сказали "ОК".

Извините, у меня пять страниц. Могу я использовать ксерокс, потому что мне нужно сделать несколько копий? 93% сказали "ОК".

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

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

Например, Slack использует двойное значение слова "бесплатно"! На подсознательное поведение пользователя влияет не только свобода слова, но и свобода передвижения и выбора.

Другой стратегией, которую используют многие сайты в своей кнопке Call to Action, является тон их сообщения. Глаголы вводят простой, ориентированный на действия подход, который побуждает пользователя совершить конкретное действие, потому что они отвечают на основной вопрос: “Зачем мне нажимать на эту кнопку?”

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

В своей предыдущей статье я записал несколько распространенных фраз для копирования вместе с некоторыми примерами.

Контрастный цвет

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

Это наиболее значимая причина, по которой вы должны заставить вашу кнопку Call to Action выделяться среди других кнопок.

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

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

Отличным инструментом, который поможет вам с проверкой контрастности при проектировании, является плагин Stark.

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

Целевая страница приложения Sketch является прекрасным примером, который иллюстрирует важность контрастности Call to Action по сравнению с содержимым страницы. Она не только уважает брендинг своего продукта, но и смогла создать смелую кнопку Call to Action, которая привлекает большинство посетителей.

Проще говоря, эту кнопку нельзя пропустить!

Размер имеет значение

Размеры и положение Call to Action играют фундаментальную роль в обеспечении наглядности и доступности. Огромное количество переменных определяет правильный размер кнопки.

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

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

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

Мобильные интерфейсы сталкиваются с еще одной распространенной проблемой. Термин "Дизайн для больших пальцев" был выдвинут Скоттом Харффом и заслуживает самого пристального внимания. Он означает создание наиболее удобных интерфейсов в пределах естественной плавной дуги нашего большого пальца.

Тепловая карта зоны большого пальца применимо к некоторым дисплеям iPhone.

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

Плывя по течению

Очень важен прямой путь, по которому пользователь будет следовать при просмотре контента страницы. Расположив текст и кнопки таким образом, чтобы стимулировать естественный поток чтения, вы можете направить посетителей к вашему Call to action.

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

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

Этот увлекательный шаблон чтения, который больше зависит от поведения человека, чем от технологии, указывает на то, что кнопка Call to Action "Поиск" могла быть размещена в левом нижнем углу.

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

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

Заключение

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

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

Источник:
medium.muz.li
·
comments powered by HyperComments