Кнопки на корпоративном сайте часто добавляются на этапе создания сайта: шаблон уже включает кнопку с основным цветом, текст — «Узнать больше», расположение — справа на первом экране. После запуска к ней больше никто не прикасается, пока маркетолог не обнаружит, что посетители просматривают страницу, но не понимают, что делать дальше. Кнопка — это не декоративный элемент, а одна из немногих точек на странице, которая может явно направить действие. Критерий практичности кнопки прост: может ли посетитель сразу её увидеть и понять, что произойдёт после клика.
Сначала определите, какое действие должна выполнять кнопка
Прежде чем менять кнопки, задайте каждой из них цель действия. Основные типы действий: продолжить знакомство (перейти на страницу продукта или решения), начать контакт (позвонить, заполнить форму, добавить в мессенджер), получить материалы (скачать документ, посмотреть описание цен), вернуться к основному (вернуться в раздел, посмотреть всё). В зависимости от цели действия текст, расположение и визуальный вес кнопки должны различаться.
На одной странице оставьте только одно основное действие, остальные кнопки сделайте второстепенными. Если на одном экране рядом стоят четыре одинаково заметные кнопки — «Связаться сейчас», «Онлайн-сообщение», «Позвонить», «Получить цену», — посетитель, наоборот, остановится сравнивать, и действие затянется. Маркетолог может взять лист бумаги, выписать все кнопки на странице, отметить, к какому типу действий относится каждая, а затем определить, какие дублируются и какие можно объединить.
Текст кнопки должен ясно описывать действие и результат
Проблема формулировок вроде «Узнать больше», «Нажмите здесь», «Подробнее» в том, что посетитель до клика не знает, что получит. Практичнее указывать действие и объект, например: «Посмотреть характеристики продукта», «Получить рекомендации по выбору», «Записаться на замер», «Скачать описание цен». Длина текста должна позволять прочитать его с одного взгляда; для русского языка обычно достаточно трёх–шести слов, слишком длинный текст снижает читабельность самой кнопки.
На одной странице не используйте близкие по смыслу формулировки для разных кнопок. «Связаться сейчас» и «Связаться немедленно» рядом заставят посетителя думать, что между ними есть разница, хотя на самом деле ведут на одну страницу. При проверке маркетолог может поискать по исходному коду страницы или в панели управления и привести повторяющиеся тексты кнопок к единой формулировке.
Расположение следует порядку чтения, а не только визуальному ритму
Где разместить кнопку, зависит от того, возникло ли у посетителя в этом месте желание действовать. Кнопка на первом экране подходит для общего действия, например «Посмотреть решения»; кнопка после блока с описанием продукта — для действий, требующих некоторого понимания, таких как «Получить цену» или «Консультация по выбору»; кнопка в конце страницы служит запасным вариантом для тех, кто дочитал, но ещё не решился.
Мобильную версию нужно смотреть отдельно. На телефоне высота первого экрана ограничена, и если кнопка появляется только после прокрутки, её как будто нет. Маркетологу стоит открыть страницу в мобильном браузере, не прокручивать и проверить, видна ли основная кнопка на первом экране. Если нет — поднять кнопку выше или сократить текст и изображения в верхней части.
Когда на экране несколько кнопок, различайте их по уровню приоритета
Если в одной области появляются две и более кнопки, разделите их по стилю: основная — с заливкой и заметным контрастным фоном, второстепенная — с обводкой или в виде текстовой ссылки. Не ставьте рядом две одинаково заметные кнопки с заливкой — это равносильно отсутствию главной. При выборе цвета фон основной кнопки должен явно отличаться от фона страницы и изображений, чтобы кнопка не сливалась с однотонным изображением.
Вокруг кнопки нужно оставлять достаточно свободного пространства. Если кнопка вплотную прилегает к тексту или краю изображения, при клике легко случайно задеть соседнюю ссылку. При проверке стоит несколько раз нажать на кнопку на телефоне и посмотреть, не смещается ли палец.
Перед запуском проверьте работоспособность каждой кнопки
Сделать кнопку — ещё не значит, что она работает. Перед публикацией или обновлением пройдите проверку в таком порядке:
- Нажмите каждую кнопку и убедитесь, что переход ведёт туда, куда нужно, а не на главную, страницу 404 или старую версию.
- Проверьте, вызывает ли кнопка с телефоном набор номера на мобильном, появляется ли после отправки формы понятное сообщение об успехе.
- Убедитесь, что текст кнопки соответствует содержанию страницы, на которую она ведёт: не должно быть так, что «Получить цену» ведёт на страницу о компании.
- Посмотрите страницу на телефоне и компьютере: кнопка не перекрыта, не выходит за пределы экрана, текст не обрезан.
- Проверьте, ведут ли одинаковые действия в разных местах страницы к одной цели, чтобы не было нескольких входов на разные страницы.
Для этих проверок не нужны технические знания, маркетолог справится сам. Главное — сделать их регулярной привычкой и проходить каждый раз при публикации новой страницы или изменении контента.
Включите кнопки в регулярное обслуживание, а не в разовую задачу
Целевые страницы кнопок меняются, как и приоритеты бизнеса. Раз в квартал маркетолог может просматривать кнопки на основных страницах: соответствует ли текст текущему направлению, работают ли ссылки, не накопились ли новые дублирующиеся кнопки. При корректировке меняйте только одну переменную за раз и наблюдайте некоторое время, чтобы не менять одновременно текст, расположение и цвет — иначе при проблеме будет непонятно, какое изменение её вызвало.
Кнопка — небольшой элемент сайта, но именно она определяет, куда посетитель пойдёт после прочтения контента. Поддерживать её как часть контента полезнее, чем бесконечно настраивать визуальный стиль.
