Дизайн и конверсия

Как сделать кнопки на сайте активными?

Татьяна, Уфа 707 просмотров

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

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Кнопка выглядит активной, когда контрастирует с фоном не слабее чем 3:1 по цвету, имеет размер от 48 на 48 пикселей и меняет вид при наведении и нажатии - темнеет на 10-15% или слегка увеличивается. Если кнопка сделана как обычный текст без фона, рамки и реакции на курсор, посетитель просто не считывает её как кнопку.

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

Проверьте по очереди три вещи:

  • Заливка или контур кнопки заметно отличается от фона страницы, а лучше проходит проверку контраста 3:1 в бесплатном калькуляторе вроде WebAIM.
  • Курсор при наведении меняется на "руку". Если остаётся стрелкой, скорее всего кнопка сверстана обычным текстом или блоком div, а не ссылкой или элементом button.
  • При нажатии кнопка визуально реагирует: темнеет, слегка сжимается, меняет тень. Без этого человек не получает подтверждения, что клик засчитался, и нажимает повторно.

Проверьте и то, куда кнопка вообще ведёт. В конструкторах частая недоделка - ссылка "#", которую забыли заменить на реальный адрес или номер, пока собирали макет. Если шаблон не даёт настроить наведение и нажатие отдельно, дешевле сменить шаблон, чем воевать с чужими ограничениями. На лендингах, которые я верстаю с нуля, реакция кнопки задаётся в CSS за пару строк и работает одинаково на любом устройстве - мелочь, но именно она превращает кнопку из декорации в рабочий элемент.

Подробный разбор CTA-кнопка на лендинге: текст, цвет, размер, расположение
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок