Какие кнопки на сайте нажимают: размер, цвет и текст

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

На какую кнопку нажимают: три условия клика

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

Кнопка сайта запускает действие: отправляет форму, оформляет покупку, звонит или скачивает файл. Если элемент ничего не запускает, это декоративная плашка. CTA — призыв к действию, например оставить заявку, оплатить заказ или перейти в каталог.

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

Действие на этой же странице размечают HTML-элементом button: например, отправку формы или открытие окна. Переход на другой адрес делают ссылкой с href, даже если она выглядит как кнопка. Так посетитель может открыть ссылку в новой вкладке и вернуться назад привычным способом.

На клик влияет связка: кнопку видно, в неё легко попасть, а подпись объясняет действие.

Размер кнопки и область нажатия

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

Рекомендации по доступности WCAG описывают размер цели и расстояние между соседними целями. Apple Human Interface Guidelines и Material Design тоже дают ориентиры для интерфейсных элементов, но используют разные единицы измерения. Поэтому не стоит напрямую сравнивать пункты, dp и CSS-пиксели или сводить все рекомендации к одному числу.

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

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

На экране заявки или оплаты я бы оставил кнопке запас места для пальца. Там промах мешает завершить действие.

Цвет кнопки: контраст важнее «психологии цвета»

Цвет помогает различать действия и читать подписи. Выбирать зелёный или красный только по ассоциациям недостаточно: одна и та же заливка может заметно выглядеть на тёмном экране и теряться на светлом.

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

Primary-кнопку выделяют заливкой, а второстепенную делают контурной или нейтральной. Для удаления важна подпись, которая объясняет последствие: красный цвет сам по себе не сообщает, что произойдёт. Форма и скругление помогают передать стиль продукта, но не заменяют читаемость.

Сначала проверьте контраст и иерархию действий. Цвет сам по себе не гарантирует больше кликов.

Текст на кнопке: глагол, объект, что будет после клика

Подпись должна объяснять, что произойдёт после нажатия. «ОК», «Далее» и «Кликните здесь» не называют действие и его предмет. На коммерческой странице лучше написать «Отправить заявку», «Оплатить заказ» или «Скачать прайс».

Часто хватает глагола и объекта. Длинную фразу на кнопке сократите до действия и результата. «Получу расчёт» подходит, когда посетитель получает расчёт для себя и формулировка звучит естественно. Если подпись можно понять по-разному, используйте прямую формулировку: «Получить расчёт».

Кнопка-иконка должна иметь доступное название, например aria-label. Без текста или такого названия действие может быть непонятно человеку, который пользуется скринридером. Если место есть, оставьте подпись рядом с иконкой. О том, как писать подписи для соседних полей и заголовки форм, рассказываем в материале «Как писать тексты для кнопок и форм на сайте».

Не обещайте на кнопке то, чего страница не делает. Если подпись говорит «Отправить», форма должна действительно отправляться.

Иерархия: одна главная кнопка на экран

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

Второстепенные действия — например, «Отмена», «Позже» или «В избранное» — оформите спокойнее: контуром, нейтральной заливкой или текстовой ссылкой. Навигацию и ссылки в подвале тоже отделите по стилю, чтобы они не перетягивали внимание с основного действия.

Повторить одну и ту же кнопку на длинной странице можно: например, поставить её у первого экрана и рядом с описанием услуги. Это всё ещё одно действие. На карточке товара выделите «Купить», а «В избранное» покажите тише. В форме отправка должна быть заметнее сброса.

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

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

Состояния кнопки: от покоя до ошибки

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

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

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

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

Кнопка внутри формы без заданного type может отправить форму. Если действие не должно её отправлять, укажите type="button" явно. Кнопку отправки помечают соответствующим типом.

На телефоне нельзя рассчитывать на подсказку при наведении. Для клавиатуры оставьте видимый фокус.

Кнопка на телефоне: палец, зазор, повторный сабмит

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

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

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

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

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

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

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

Источники

• Рекомендации по обеспечению доступности веб-контента (WCAG) 2.1 — W3C
• HTML-элемент button — MDN