Вышли: 8-й тираж "Тексты, которым верят"
2-й тираж "Копирайтинг: сила убеждения"
Расчетное время чтения: 1 мин.

 

Интерактивные кнопки на сайте

Сейчас в моде минимализм, и компании избавляются от любых проявлений 3D дизайна — убирают блики, тени с логотипов, стараются сделать сайт максимально двумерным. Однако это не значит, что глубина картинки — всегда антитренд. Иногда затемнения и свечения могут сыграть вам на руку, например, в дизайне кнопки CTA.

Кнопка call to action вообще так не зря называется. Она должна работать и выглядеть как нечто, на что можно нажать. Ошибка некоторых сайтов в том, что в погоне за минимализмом их CTA сливаются с фоном и не выглядят как интерактивные элементы. 

Как показать, что кнопка на сайте кликабельная?

  • Сделать ее ярким акцентом. Кнопка не должна ассимилироваться с окружающими элементами. У нее должен быть свой цвет, и желательно, чтобы у каждого вида CTA цвет был свой. Так пользователю будет проще идентифицировать этот элемент на странице. 
  • Использовать классические формы. Самая привычная кнопка — это прямоугольник. Не стоит изобретать велосипед и делать ее круглой или в форме какого-то предмета. Так пользователю сложно понять, что на этот элемент нужно нажимать. 
  • Использовать тени. То, о чем мы говорили выше — Добавление глубины CTA с помощью рамки, скоса или затенения отличает кнопку от 2D графики вокруг.

Вывод

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

Теги:
Предыдущий урок: Какие слова лучше выделять в описании товара?
Следующий урок: Зачем добавлять значок стрелки к CTA?
В мае-июне 2022г. в издательстве "АСТ" выйдет 6-я книга 📕 П. Панды. Подробности чуть позже :)
This is default text for notification bar