12:57, 12 Мая 2015

Простые примеры для успешной кнопки

12:57, 12 МАЯ

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

Управляющие сигналы

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

Умный пример управляющего сигнала есть на сайте системы salesforce. На главной странице изображение женщины которая смотрит на свой смартфон. Когда посетители видят её глаза, их взгляд будет естественно следовать за её взглядом, туда где разместились кнопки призывающих к действию.

Управляющий сигнал

Простой дизайн кнопки

Делая кнопки на сайте простыми на столько, на сколько это возможно, вы снижаете вероятность запутать ваших посетителей. Когда они теряются в сложном интерфейсе, они, как правило, не выполняют целевого действия.

Хороший пример - twinings.co.uk/tea. На главной странице мы видим ряд простых кнопок окрашенных в фирменные цвета. Практически невозможно не прочесть призыв к действию.

Простая кнопка

Контраст цвета и формы

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

Простой пример цветового контраста, белый фон помогает акцентировать внимание на кнопках целевого действия.

Контрастная кнопка

Не забывайте про форму. Если на странице несколько кнопок, то, естественно, самую главную надо сделать другой формы и более яркого цвета.

Источник:  4 SIMPLE WAYS TO DESIGN KILLER CALL TO ACTION BUTTONS

Читайте также

NGINX кеширование ответов backend-сервера
14:29, 6 Июля 2016

Небольшая инструкция: что делать, если в окне браузера одни кракозябры или как бороться с NGINX.

Читать далее
Лыжи на systemd
15:29, 14 Марта 2016
Бывают такие дни, когда «лыжи не катят» ©, вот и у меня недавно сложился похожий день. Читать далее
Идеальная товарная карточка для вашего интернет-магазина
13:05, 30 Ноября 2015
Не знаете как спроектировать страницу для товара? Мы составили список из 14 пунктов, которые помогут вашему сайту выглядеть круче! Читать далее
Визуальный e-mail маркетинг
12:11, 20 Октября 2015
Люди — визуалы. 80–90% информации в мозг поступает через глаза, и скорость, с которой мозг обрабатывает изображения — 36 000 в минуту — поистине невероятна! Читать далее