На какие кнопки кликнут посетители сайта

Они есть на каждом сайте. Они взывают, требуют, просят, интригуют. «Добавь в корзину», «Заполни заявку», «Купи», «Оплати», «Узнать подробнее».

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

Давайте разбираться…


В каких случаях использовать кнопку, а в каких — ссылку?

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

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

Какого цвета должна быть кнопка?

Вообще, относительно цвета кнопки много споров. Основные из них сводятся к утверждению: чем кнопка будет ярче, тем лучше. А другие им с лёгкостью противоречат: наоборот, кнопка должна быть «приглушенной», ведь яркие цвета слишком раздражают. Одни утверждают, что самый правильный и акцентирующий цвет – красный. Другие – что зелёный.

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

И ещё – то, что работает у одних, совсем необязательно будет работать у других: розовая кнопка на женском форуме – вполне в стиле, но будет смотреться инородным телом на строительном или автомобильном сайте.


Что писать на кнопке?

Прежде всего, каждый щелчок кнопки – это толчок к действию. Поэтому на кнопке должны быть фразы, что побуждают что-то сделать (узнать контактные данные, получить больше информации, отложить товар в корзину). Начинаться они должны, желательно, с глаголов. Такое слово ясно будет объяснять посетителю, какие действия будут происходить, если кликнуть по кнопке. Иначе, разместив кнопку исключительно для привлечения внимания, посетителей будет слишком много.

«Почему же большое количество посетителей – плохо, разве это не наша цель?» – спросите вы? К сожалению, больше половины гостей, пришедших на сайт или landing page с подобной кнопки, уйдут через несколько секунд. Потому что у этих людей не было чёткого представления о том, что именно они увидят на сайте. В такой ситуации конверсия сильно падает, а количество кликов возрастает. Это прямой путь к бесцельной трате денежных средств.

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

Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Вся разница заключена в размере обязательств. Кнопка «Начать тест» наводит посетителя на мысль o том, что щелчок по этой кнопке вовлечет его в потенциально длительный процесс. А кнопка «Купить сейчас» – это словно стремление сайта залезть в ваш бумажник. Тогда лучше на ней вообще ничего не писать, только показать пиктограмму с корзиной и этого будет достаточно.


Какого размера сделать кнопку?

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

Компания МIT Touch Lab провела исследования, которые показали, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57. Это связано c тем, что кончик пальца имеет не округлую, а овальную форму.
А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), её можно сделать шире: 45×72 пикселей.

Может, делать кнопки графическими картинками?

У графических кнопок есть ряд проблем: они медленнее грузятся, недоступны для посетителей с ограниченными возможностями, и могут не отображаться в e-mail сообщениях, пока не будет нажата кнопка «Показывать изображения». Кнопки на основе кода подобных проблем не создают.


Тогда, может быть, анимированные кнопки?

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

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


Так ли важен дизайн кнопки?

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

Форма кнопки может быть прямоугольной или же овальной. Лучше придерживаться этих двух традиционных форм не только на порталах, но и на landing page. Не нужно изобретать кнопки-треугольники, кнопки-трапеции или круглые кнопки, они выглядят «инородными телами».

Объём кнопки — несомненно, важная вещь. Дизайнеры при разработке сайта используют разные оттенки цвета, чтобы передать объёмность. Кнопка показывает более высокий CTR, когда она становится объёмной и, тем самым, более заметной среди остальных графических блоков сайта.

Объёмные кнопки добавляют фактуру, главным образом, в плоские макеты. Они акцентируют внимание на функциях в самых активных или широких областях. Их используют на строке в один ряд, и на сайтах, где много различного контента – для придания значимости действиям на сайте.

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

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

Место размещения кнопок играет роль?

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

Но при качественной разработке сайта разработчику это и так понятно — просто доверяйте профессионалам!

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

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


Выводы

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

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