Вокруг кнопок на сайтах ходит много легенд: «красная конвертирует лучше зелёной», «круглая лучше квадратной», «слово „бесплатно“ поднимает продажи вдвое». На деле кнопка работает, когда соблюдены несколько скучных условий: её видно, понятно, что произойдёт после нажатия, в неё легко попасть, и она отзывается на действие. Разберём каждое из этих условий и покажем, как мы проектируем кнопки и призывы к действию на проектах студии.
Что такое призыв к действию и где он нужен
Призыв к действию — элемент, который предлагает посетителю сделать следующий шаг: оставить заявку, добавить товар в корзину, рассчитать стоимость, скачать прайс, записаться на консультацию. Чаще всего это кнопка, но иногда — ссылка, баннер или целый блок с заголовком, коротким текстом и кнопкой. Призыв нужен везде, где посетитель может принять решение: на первом экране, после описания услуги, после кейсов и отзывов, в конце статьи.
Ключевая мысль: у каждой страницы должно быть одно главное целевое действие. На странице услуги — заявка или расчёт, в карточке товара — добавление в корзину, в статье блога — переход к услуге или подписка. Остальные действия вторичны и должны выглядеть скромнее. Когда на экране пять одинаково ярких кнопок, посетитель не понимает, какая из них важная, и часто не нажимает ни одну.
Призыв к действию появляется не один раз за страницу. На длинной странице услуги его уместно повторить после каждого смыслового блока, который может убедить посетителя: после выгод, после цен, после отзывов. Человек, которого убедил третий блок, не должен прокручивать страницу обратно наверх в поисках кнопки.
Иерархия кнопок
Чтобы главное действие выделялось, а второстепенные не исчезали совсем, в интерфейсе выстраивают иерархию из трёх-четырёх типов кнопок. Каждому типу назначают свою роль и придерживаются её на всём сайте.
Основная
Залитая акцентным цветом, самая заметная. Одна на экран или смысловой блок: «Оформить заказ», «Оставить заявку», «Рассчитать».
Вторичная
Контурная или с приглушённой заливкой. Для альтернативных действий: «Подробнее», «Скачать каталог», «Задать вопрос».
Текстовая
Выглядит как ссылка, без рамки. Для наименее важных действий: «Отменить», «Пропустить», «Показать ещё».
Отдельно стоят деструктивные кнопки — «Удалить», «Очистить корзину». Их выделяют красным и обычно не делают основными, а для необратимых действий добавляют подтверждение. Ещё одна частая ошибка — давать основной стиль кнопке «Отмена» в диалоге: посетитель нажимает на заметную кнопку по инерции и теряет введённые данные.
Иерархию важно соблюдать последовательно. Если на главной основная кнопка синяя, а на странице услуги — зелёная, посетитель перестаёт считывать систему. Все стили кнопок мы описываем в дизайн-макете как компоненты и затем переиспользуем их в вёрстке без вариаций.
Размер и зона касания
Кнопка должна быть достаточно крупной, чтобы её было легко заметить и в неё было легко попасть. Особенно на телефоне, где курсора нет, а палец закрывает заметную часть экрана. Рекомендации платформ сходятся: минимальная зона касания — около 44–48 пикселей по высоте и ширине. При этом сама видимая кнопка может быть чуть меньше, если кликабельная область вокруг неё больше.
| Параметр | Десктоп | Смартфон |
|---|---|---|
| Высота основной кнопки | 44–56 px | 48–56 px |
| Минимальная зона касания | — | 44 × 44 px |
| Размер текста на кнопке | 16–18 px | 16–18 px |
| Внутренние отступы по бокам | 24–32 px | 20–24 px |
| Расстояние между соседними кнопками | от 12 px | от 8–12 px |
| Ширина основной кнопки в форме | по содержимому | на всю ширину |
Размер — относительное понятие. Кнопка высотой 56 пикселей на странице, где все элементы крупные, может потеряться, а кнопка в 44 пикселя на лаконичной странице будет главным пятном. Поэтому кроме абсолютных цифр важно соотношение: основная кнопка должна заметно выделяться на фоне соседних элементов.
Расположение тоже влияет на удобство. На телефоне большой палец уверенно достаёт до нижней и центральной части экрана. Поэтому кнопки «В корзину» и «Оформить заказ» в мобильных магазинах часто закрепляют внизу экрана — они всегда под рукой, сколько бы человек ни листал описание.
Цвет и контраст
Спор о «самом продающем цвете кнопки» бессмыслен вне контекста. Красная кнопка на красно-белом сайте будет незаметна, а серая на ярком фоне — выделится. Работает не цвет сам по себе, а контраст с окружением. Хороший приём — выбрать для основных кнопок цвет, который больше нигде на странице не используется крупными площадями. Тогда кнопка становится единственным ярким пятном этого цвета и притягивает взгляд.
Второй аспект — контраст текста на кнопке. Белый текст на жёлтой, светло-зелёной или ярко-оранжевой кнопке часто читается плохо. Рекомендация по доступности — соотношение яркостей не меньше 4,5 к 1 для обычного текста. Если фирменный цвет не даёт такого контраста с белым, кнопку затемняют или используют тёмный текст. О подборе палитры подробнее рассказываем в статье о цвете в веб-дизайне.
Не полагайтесь только на цвет, чтобы отличать кнопки от остального. Часть посетителей плохо различает цвета, а на дешёвых экранах оттенки искажаются. Кнопка должна выглядеть кнопкой и по форме: заливка или рамка, отступы, характерные пропорции.
Текст на кнопке
Текст — самая недооценённая часть кнопки. Слова «Отправить», «Далее», «Подробнее» и «Нажмите здесь» ничего не говорят о результате. Хороший текст отвечает на вопрос «что я получу, если нажму?» и начинается с глагола.
Безликие тексты
- Отправить
- Подробнее
- Заказать
- Далее
- Нажмите здесь
Конкретные тексты
- Получить расчёт за 15 минут
- Посмотреть 12 проектов
- Заказать бесплатный замер
- Перейти к оплате
- Скачать прайс в PDF
Длина текста — два-пять слов. Длиннее — кнопка превращается в абзац и теряет форму. Уточнения, которые не помещаются, выносят в короткую подпись под кнопкой: «Перезвоним в течение 15 минут», «Без предоплаты», «Ответим в мессенджере». Такие микротексты снимают последние сомнения прямо в момент принятия решения и нередко дают больший прирост, чем любые эксперименты с цветом.
Текст на кнопке должен совпадать с тем, что происходит после нажатия. Если на кнопке написано «Скачать каталог», а открывается форма с шестью полями, посетитель чувствует себя обманутым. Честнее написать «Получить каталог на почту» — и тогда форма с полем e-mail воспринимается естественно.
Состояния кнопки
Кнопка — живой элемент, и у неё есть несколько состояний, каждое из которых нужно отрисовать в дизайне и запрограммировать.
Обычное
Как кнопка выглядит по умолчанию. Должна быть узнаваема как кнопка без наведения.
Наведение
Лёгкое затемнение или подъём — сигнал, что элемент интерактивный. Курсор меняется на указатель.
Фокус
Видимая обводка при переходе клавишей Tab. Нужна тем, кто пользуется клавиатурой, и её нельзя убирать ради красоты.
Нажатие
Короткий визуальный отклик в момент клика, особенно важен на сенсорных экранах.
Загрузка
Индикатор и текст «Отправляем…», блокировка повторного нажатия. Спасает от дублей заказов и заявок.
Неактивное
Приглушённый вид, когда действие пока недоступно. Лучше рядом объяснить, почему: «Выберите размер, чтобы добавить в корзину».
Состояние загрузки особенно важно. Без него посетитель нажимает кнопку отправки заказа, ничего не видит в течение двух секунд и нажимает снова — в результате в системе два заказа, а покупатель получает два письма и начинает нервничать. Как и в случае с формами на сайте, реакция интерфейса на действие — обязательная часть, а не украшение.
Где размещать призывы к действию
Место кнопки на странице влияет на результат не меньше её внешнего вида. Взгляд посетителя движется по странице от заголовка к тексту и дальше к следующему блоку, поэтому кнопку логично ставить в конце смысловой группы — после аргументов, а не до них. Кнопка «Заказать», расположенная над описанием услуги, просит решения раньше, чем человек получил информацию для него.
В карточке товара основная кнопка должна находиться рядом с ценой: это пара, которую покупатель рассматривает вместе. На длинных страницах помогает закреплённая панель с кнопкой, появляющаяся после того, как первый экран прокручен. В статьях блога призыв уместен в конце и, деликатно, в середине — в виде небольшого блока со ссылкой на услугу, связанную с темой текста. Агрессивные баннеры через каждые два абзаца раздражают и снижают доверие к материалу.
Вокруг основной кнопки нужно свободное пространство. Если её со всех сторон окружают иконки, бейджи и ссылки, она теряется, даже будучи яркой. Воздух — такой же инструмент выделения, как цвет и размер.
Как проверить кнопки на своём сайте
Пройдите по главной и трём самым посещаемым страницам и ответьте на несколько вопросов. Видно ли главное действие на каждом экране без поиска? Различаются ли основные и вторичные кнопки? Понятно ли из текста кнопки, что будет после нажатия? Удобно ли нажимать кнопки на телефоне одной рукой? Реагирует ли кнопка отправки на нажатие сразу?
Затем посмотрите на данные. Карта кликов покажет, на что нажимают и на что — нет. Частые клики по некликабельным элементам, например по картинкам или заголовкам, подсказывают, что люди ожидают там действия. Низкий процент кликов по основной кнопке при хорошей глубине просмотра говорит, что кнопку не замечают или её текст не убеждает. Изменения текста и размещения кнопок — хороший материал для A/B-теста: эффект измерим, а внедрение дешёвое.
Если кнопок на сайте много и они оформлены вразнобой — это сигнал навести порядок в компонентах интерфейса. Мы делаем это как в новых проектах, так и при доработке существующих сайтов в рамках редизайна.
Резюме
Кнопка работает, когда её видно, понятно, что она делает, в неё легко попасть и она отзывается на нажатие. Для этого выстройте иерархию — одна основная кнопка на экран, вторичные и текстовые для остального, — сделайте зону касания не меньше 44 пикселей, выберите акцентный цвет, который выделяется на фоне страницы, и пишите на кнопках конкретный результат действия, начиная с глагола. Отрисуйте все состояния, особенно загрузку, и проверяйте решения картой кликов. Цвет кнопки — далеко не главный рычаг: текст, размещение и понятность дают гораздо больший эффект.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
