Призыв к действию в веб-дизайне и в пользовательском опыте (UX), в частности, — это термин, используемый для элементов веб-страницы, которые были запрошены для выполнения действий пользователями. Самым популярным проявлением призыва к действию в веб-интерфейсах является вид интерактивных кнопок, которые при нажатии выполняют действие (например, «Купите это сейчас!») или приводят к веб-странице с дополнительной информацией (например, «Подробнее…»), которая просит пользователя принять меры.
Как мы можем создать эффективные кнопки призыва к действию, которые привлекут внимание пользователей и побудят их нажать? Мы постараемся ответить на этот вопрос в этой статье, разделяя некоторые эффективные методы проектирования и изучение некоторых примеров.
Как создать эффективную кнопку призыва к действию
Проектирование кнопки призыва к действию в веб-интерфейсах требует некоторой предусмотрительности и планирования; она должна быть частью вашей прототипированой и информационной архитектуры процессов для того, чтобы она хорошо работала. В этом разделе мы рассмотрим некоторые методы проектирования для кнопок CTA.
Привлекайте внимание пользователя увеличивая размер
На веб-страницах, размер элемента относительно окружающих его элементов указывает на его важность: чем больше элемент, тем он более важен. Другими словами, чем больше элемент на странице, тем значительнее его роль на странице.
Размер кнопки CTA против окружающих элементов
LifeTree Creative демонстрирует эту идею размера, чтобы указать значение их кнопки CTA. Сравните размер их кнопки с логотипом компании. Для того, чтобы привлечь внимание пользователя, кнопка призыва к действию должна быть примерно на 20% больше (по ширине), чем логотип. Даже, несмотря на то, что логотип помещается выше на веб-странице, ваши глаза обращены на кнопку призыва к действию из-за своего большего размера по отношению к окружающим элементам.
Размер кнопки призыва к действию по сравнению с кнопкой менее важного призыва к действию
Веб-страница может иметь несколько призывов к действиям. Для того, чтобы указать относительную важность призыва к действиям по отношению к другим призывам к действиям, вы можете изменять их размеры. Вот пример этой концепции на сайте paramore|redd, где кнопка призыва к действию, которая просит пользователя подписаться на их рассылку значительно больше, чем кнопка «продолжить чтение», указывая, что на этой веб-странице, они предпочли бы, что бы вы взяли на себя действие подписки по сравнению с чтением сообщений в блоге.
Завладейте вниманием пользователя, используя общеизвестные правила для размещения кнопки CTA
Размещение кнопок призыва к действиям на веб-странице имеет решающее значение для того, чтобы обратить внимание посетителей. Размещение кнопок на видных местах, таких как в верхней части веб-страницы может привести к увеличению конверсии целевых страниц, так как пользователи, скорее всего, обратят внимание на кнопку призыва к действию и примут соответствующие меры.
Размещение кнопки CTA в выделенной области страницы
Одним из способов размещения кнопки призыва к действию является выделение для нее определенной области на веб-макете. Вы можете увидеть эту идею на сайте dailymile, где кнопка призыва к действию находится на более высоком уровне (в верхней части) в выделенной области по сравнению с другими элементами сайта, такими как гистограммы, графики.
Размещение кнопки CTA в верхней части веб-страницы
Чтобы проиллюстрировать эту концепцию, посмотрите на кнопку призыва к действию «Опубликовать работу!», расположенную в самом верхнем правом углу сайта Your Web Job. Поместив призыв к действию, в очень важной области появляется большая вероятность, что пользователь заметит его или вспомнит о нем позже, после того, как он просмотрит содержание сайта.
Размещение кнопки CTA в центре макета
Определение местонахождения кнопки призыва к действию в середине веб-макета без каких-либо фланговых элементов может быть эффективным способом привлечения внимания и заманчивым действием. В случае PicsEngine, даже, несмотря на кнопку призыва к действию, которая не имеет высокий цветовой контраст с его фоном и прилегающих к нему элементов страницы, но ей по-прежнему удается привлечь внимание, просто центральным ее размещением.
Использование пустого пространства для выделения кнопки призыва к действию от других элементов
Использование пустого пространства (или мертвого пространства) вокруг кнопки CTA является эффективным способом выделить ее в тех областях, где есть много элементов.
Использование пробелов для визуального выделения кнопки призыва к действию
IconDock показывает, насколько эффективным является достаточное количество белого пространства. Даже с небольшим и явно спроектированным пространством кнопка призыва к действию по-прежнему выделяется из-за пробела между ее соседними элементами.
Изменяйте размер пробелов, чтобы указывать на логические соединения
Чем больше пробелов существует между кнопкой призыва к действию и окружающими элементами, тем меньше они соединены. Поэтому, если у вас есть другие элементы, которые могут помочь убедить пользователей принять меры, уменьшите пустое пространство между этими элементами и CTA.
Например, у Donor Tools рядом с их кнопкой призыва к действию, есть текст, который сообщает пользователю преимущества регистрации. Уменьшая пробелы между текстом и кнопкой призыва к действию, эти два элемента визуально группируются.
Использование контрастных цветов
Решить, какие цвета использовать для кнопок призыва к действиям очень важно. Используйте цвета для кнопок призыва к действиям, которые имеют высокую контрастность по сравнению с окружающими элементами и фоном, поскольку она имеет решающее значение для обеспечения того, заметит пользователь ваш призыв к действию или нет.
Цветовой контраст по сравнению с окружающими элементами
Notepod пример того, как цветовой контраст между призывом к действию и окружающими его элементами может быть эффективным в привлечении внимания пользователя непосредственно к нему. Все окружающие элементы черные, в то время как кнопка призыва к действию ярко-синего цвета.
Цветовой контраст между задним или передним планом и кнопкой CTA
Valley Creek Church устанавливает свою ярко-желтую кнопку «Подробнее» над черно-белым изображением. Даже с помощью простого текста и дизайна кнопки призыва к действию выше сложного элемента (фото в данном случае), она по-прежнему выделяется из-за выбора цвета.
Предложите пользователю воспользоваться альтернативными кнопками призыва к действию
Веб-страница может иметь несколько кнопок призыва к действию. Иногда это необходимо для того, чтобы предложить вторичное действие или для того, чтобы убедить пользователя принять нужный первичный призыв к действию позже. Например, до того, как пользователь подписывается на веб-службы, некоторым пользователям может потребоваться дополнительная информация, поэтому первичной кнопкой станет предложение подписаться, а с помощью вторичного действия пользователи могут посетить веб-страницу с более подробной информацией о продукте.
Размещение вторичного действия рядом с первичным действием
OfficeVP отображает две кнопки призыва к действию рядом друг с другом – расположенная в центре и расположенная в верхней части веб-макета. Дифференцируя цвет, пользователи могут видеть, что у них есть два различных маршрута: они могут либо зарегистрироваться (первичное действие), или, если они хотят, узнать больше в ходе обучающего тура.
Целевая страница Trasmissions также показывает вторичное действие рядом с первичным действием. В этом случае основное действие для пользователя — приобрести приложение. Если они хотят, попробовать его перед покупкой — это вторичное действие. Обратите внимание на то, что основное действие выделено более контрастным цветом, по сравнению с вторичным призывом к действию. Таким образом, вы эффективно используете глаза слева направо.
Кроме того, обратите внимание на использование уменьшенного пробела между двумя кнопками призыва к действию по отношению к другим элементам в этой области, эффективно группирует кнопки вместе.
Показывать вторичные действия ниже первичного действия
В качестве альтернативы, вы можете отобразить вторичное действие ниже первичного. Это может быть необходимо, если вам нужно больше визуально разделить ваши призывы к действиям. Virb показывает эту ситуацию «Join Now» призыв к действию, помещенный над вторичным действием «Take the Tour». Обратите внимание на то, что вторичное действие дополнительно отделено от основного действия, использованием более приглушенного цвета.
Используйте слова срочности
Формулировка действия с использованием смелых, уверенных и командных слов могут изменить восприятие пользователя таким образом, чтобы убедить их в том, что они не должны ждать дольше, чтобы принять меры, ожидание принятия мер приведет к упущенной возможности.
Сайт taptaptap демонстрирует идею добавления неотложного призыва к действию. Кнопка призыва к действию «Купить сейчас» имеет дополнительный текст «Интро цена» тонко предполагая, что чем дольше пользователь ждет, чтобы принять меры, тем выше риск того, чтобы позже заплатить дороже.
Использование таких слов, как «сейчас», «немедленно» может передавать срочность действий. Возьмите, к примеру, сайт BarackObama.com, обращение к посетителям сайта «DONATE NOW». Если вместо этого он просто сказал: «DONATE», чувство срочности исчезнет, и пользователи могут быть менее склонны принимать меры.
Подробно расскажите о том, что ждет пользователя, если он нажмет кнопку CTA
Часто, пользователи колеблются, чтобы принять меры это проистекает от мысли, что действие будет сложным, дорогим или отнимет много времени. Принимая во внимание эти проблемы, ваш призыв к действию может привести к увеличению количества конверсий.
Например, на Basecamp, кнопка призыва к действию явно определяет время, которое потребуется пользователю для регистрации и сообщает пользователям, что подписание является безболезненным (бесплатным). Такой подход ослабляет опасения двух основных видов пользователей, когда дело доходит до принятия решений в Интернете: платить (который также требует от них принятия дополнительных мер, таких как получение их кредитных карт) и временных ограничений.
На примере Tea Round App, они говорят пользователю, что они не будут получать спам, принимая действие «Подписаться» на их почтовой службе, что является причиной для беспокойства, когда даешь свою электронную почту сторонним сервисам.
Расскажите пользователям чего им ожидать
Большинство пользователей Интернета не решаются брать вещи, которые представлены в Интернете по номинальной стоимости. Чтобы увеличить конверсию и строить доверие, предвидеть скептицизм пользователей скажите им, что они получат, принимая меры. При проектировании кнопки призыва к действию, думайте обо всех потенциальных вопросах, которые будут у пользователей, и убедитесь, что вы ответите на них вовремя.
Mozilla Firefox сообщает пользователям, чего именно ожидать, нажав на их кнопке призыва к действию. Кнопка призыва к действию говорит вам, что вы будете получать Firefox 3.5, что это бесплатно, и (для тех, кто нуждается большей специфичности), что точная версия 3.5.3 для операционной системы Windows, в том, что язык является английским, и что вы должны будете скачать 7.7MB.
