КАКОЙ ДОЛЖНА БЫТЬ КНОПКА НА ЛЕНДИНГЕ 🚀
⚡ Кнопка на лендинге — это элемент дизайна лендинга и карточек товара в интернет-магазине, с которым пользователь взаимодействует наиболее активно. Помимо этого, кнопки являются одним из 4 элементов (заголовок, призыв к действию, список выгод и, собственно, дизайн кнопки), обязательных к тестированию. Поэтому сегодня мы подготовили простой чек-лист для проверки дизайна кнопок на вашей посадочной странице.
🎯 Кнопка видна на первом экране без прокрутки
Кнопка должна быть видна на первом экране, чтобы сориентировать пользователя и показать ему логичный и простой следующий шаг (оставить заявку, получить консультацию, заказать обратный звонок и т.д.). Чтобы захватить внимание, у вас есть всего 3 секунды, именно столько уходит на то, чтобы пользователь принял решение, остаться или уйти со страницы.
Классическая последовательность действий на лендинге строится по модели AIDA:
– захват внимания с помощью заголовка,
– интерес вызывается выгодами,
– желание вызывает акция, ограниченная во времени,
– чтобы действовать пользователю нужна форма заявки и заметная кнопка.
Кнопка должна располагаться по траектории движения взгляда пользователя (F-образное движение): под заголовком, списком выгод и призывом к действию.
Если используется изображение человека рядом с формой заявки, то взгляд персонажа должен быть направлен на форму.
🎯 Кнопка уникального цвета
Кнопка должны быть максимально заметным элементом на экране компьютера и мобильного устройства. Контраст можно усилить несколькими приемами:
– использование определенного цвета только для кнопок, без повторов в других элементах дизайна страницы;
– сочетание темных и светлых элементов (темная кнопка на светлом фоне и наоборот);
– придание кнопки объема с помощью тени и градиентов (кнопка визуально возвышается над другими элементами);
🎯 Кнопка должна выглядеть как кнопка
Очевидный, казалось бы, бы пункт чек-листа, который часто нарушают. Чаще всего встречаются следующие ошибки:
– кнопка растянута на всю длину контентной области лендинга,
– кнопка не меняет состояние при наведении и по клику на нее;
Также стоит добавить объема кнопке, чтобы на нее хотелось нажать, например, добавить рамку, скос или тень.
🎯 Кнопки дублируются по всей длине посадочной страницы
На посадочной странице лучше тестировать несколько вариантов целевых действий и, соответственно, размещать в разных формах заявки разные CTA (призывы к действию), от простого к сложному. Либо выявить самый легкий шаг для пользователя, разместить его на первом экране и дублировать через каждые 2-3 экрана лендинга. Завершить лендинг тоже нужно формой заявки (перед футером сайта).
🎯 Кнопки не должны конкурировать друг с другом
Если есть альтернативное действие, то нужно определиться, какое из них более целевое и визуально это выделить. Если есть необходимость разместить 2 кнопки, то целевую кнопку нужно выделить цветом/размером/дополнительными элементами (стрелкой, изображением и т.д.).
