Правило 1. Текст говорит о выгоде, а не о действии
Плохой текст: «Отправить», «Получить», «Перейти».
Хороший текст: «Получить консультацию», «Рассчитать стоимость», «Смотреть каталог», «Записаться со скидкой».
Клиент видит не действие, а выгоду. Не «нажать», а «получить».
Правило 2. Цвет - контрастный к фону
Если фон белый или светло-серый, кнопка должна быть яркой: красной, зелёной, синей, оранжевой. Не делайте кнопку серой или бледно-голубой - она теряется. Главное: цвет кнопки не должен сливаться с фоном страницы и с цветом ссылок.
Правило 3. Размер - как кончик пальца
Минимум 44×44 пикселя. На телефоне это примерно 1 см на 1 см. Если кнопка меньше - будете промахиваться. А если промахнулся два раза - пользователь разозлится и уйдёт.
Правило 4. Место - там, где взгляд останавливается
- Одна кнопка должна быть видна сразу, без прокрутки (на первом экране).
- Вторая - после блока с преимуществами.
- Третья - перед ценой или после неё.
Не ставьте две одинаковые кнопки рядом. Лучше одну главную и одну дублирующую ниже.
Правило 5. Кнопка должна выглядеть как кнопка
Прямоугольник со скруглёнными углами, с тенью или без, но понятный. Не делайте кнопку просто текстовой ссылкой - её не замечают. Не делайте её плоской, сливающейся с текстом. Она должна выделяться.
Как протестировать кнопку за 1 минуту
Откройте сайт на телефоне, вытяните руку на полметра. Видите ли вы кнопку? Заметна ли она? Потом нажмите на неё пальцем - удобно? Не вылезает ли за край экрана? Если что-то не так - меняйте.
Типичные ошибки
- Кнопка скрыта под слайдером или баннером.
- Текст кнопки слишком длинный (не влезает на телефоне).
- Кнопка есть, но она не кликабельна (обычный текст).
- Кнопок много, и они разного цвета - глаз не знает, куда смотреть.
Как Фром помогает настроить кнопку
В панели редактирования сайта вы выбираете блок с формой (кнопкой). Меняете текст - просто пишете нужный. Меняете цвет - выбираете из палитры. Меняете размер - выбираете из нескольких вариантов размеров. И сразу видите, как это выглядит на телефоне и компьютере. Никакого CSS, никакого кода.
Коротко о главном
- Текст кнопки - выгода клиента.
- Цвет - контрастный, яркий.
- Размер - от 44 пикселей (1 см).
- Место - на видном месте и после важных блоков.
- Проверьте на телефоне вытянутой рукой.
- В Фром кнопка настраивается за 30 секунд.
Поменяйте текст с «Отправить» на «Получить бесплатную консультацию» - и вы увидите, как вырастет число заявок. Попробуйте в своём сайте на Фром.