Рекомендации, примеры и примеры кнопок «Призыв к действию»

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

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

Назначение кнопок «Призыв к действию»

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

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

Типы кнопок «Призыв к действию»

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

1. Добавить в корзину кнопки

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

2. Скачать кнопки

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

3. Пробные кнопки

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

4. Подробнее кнопки

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

5. Кнопки регистрации

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

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

Эффективное использование негативного пространства

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

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

Некоторые рекомендации:

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

Размер и цвет

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

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

Некоторые рекомендации:

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

язык

Точная формулировка, которую вы решите использовать для кнопок призыва к действию, может оказать огромное влияние на конверсию. сравнить “купить сейчас” с “добавить в корзину“. Один гораздо более срочный, чем другой. Или как насчет “Попробуй бесплатно” с “Бесплатная пробная версия“? Один из них гораздо более пунш, чем другой, и выделяется больше.

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

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

Некоторые рекомендации:

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

Создать срочность

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

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

Некоторые рекомендации:

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

Предоставить дополнительную информацию

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

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

Некоторые рекомендации:

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

Расставлять приоритеты

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

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

Иконы и изображения

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

Некоторые рекомендации:

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

Примеры

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

Livestream - Разграничение кнопок «купить сейчас» (для платных опций) и «зарегистрироваться» (для бесплатных опций) - хорошая стратегия.

Windows 7 - Большую зеленую кнопку «Get Windows7» легко заметить посетителям.

Файлообменник HQ - Ярко-зеленая кнопка здесь действительно выделяется на белом фоне.

вахтенный журнал - Использование разных цветов для кнопок «Скачать» и «Купить» выделяет их и отдает приоритет кнопке «Купить».

TasteBook - Эта кнопка отлично использует значок и выделяется жирным шрифтом большего размера.

GoodBarry - Еще одна ярко-зеленая кнопка призыва к действию.

Lifetree Creative - Продолжение той же гарнитуры от основной копии до кнопки призыва к действию создает ощущение сплоченности.

Resumator - Ярко-красная кнопка призыва к действию с жирным шрифтом выделяется на синем фоне.

Notepod - Хороший пример включения дополнительной информации в кнопку призыва к действию.

Inkd - Отличный пример расстановки приоритетов кнопок с размером.

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

Zendesk - Еще один замечательный пример выделения кнопки с использованием цвета.

Storenvy - Круглая кнопка неожиданна и выделяется, особенно когда она окружена белой каймой.

Bara'Mail - Иногда кнопка, которая лучше сочетается, работает в общем дизайне вашего сайта, особенно когда действие менее актуально.

Больше ресурсов

• Кнопки призыва к действию: примеры и лучшие практики - из журнала Smashing
• Хорошие кнопки призыва к действию - от UX Booth
• Кнопки призыва к действию: размер имеет значение? - от Get Elastic
• 10 методов для эффективного “Призыв к действию” - Из Boagworld
• 5 советов по созданию эффективной кнопки призыва к действию - из SitePoint