browser adware remover
Промокод: XXXXXX
+7(499) 677-16-70
Москва, ул. Крутицкий Вал дом 14, офис 207

Как повысить кликабельность кнопок на сайте

Варламов Алексей
11 июля 2019
Комментарии: 0

Почему-то, когда речь заходит о повышении прибыли интернет-магазина, мы в первую очередь зацикливаемся на его посещаемости. Больше посетителей – круче ресурс, больше покупок и выше прибыль.

Самому сайту внимание уделяется по остаточному принципу: работает, ну и отлично. Но ведь если поработать над его конверсионностью, то можно повысить число покупок при постоянной посещаемости. Это сделать проще и быстрее, ведь ресурс полностью в вашем распоряжении. А главное, при высокой конверсии рост трафика принесет еще лучший результат.

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

Кнопки, а не ссылки

В первую очередь, кнопки должны стать похожими на кнопки. Обычного текста со ссылкой недостаточно. Почему?

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

Труднее попасть. Активная область кнопки больше, чем у простой надписи, потому ее удобнее нажимать. Это особенно актуально для мобильных пользователей, которым приходится на небольшом экране попадать пальцем в крохотный фрагмент текста со ссылкой.

Выглядит отвратительно. Да, внешний вид также влияет на решение потребителя. Если дизайн интернет-магазина выглядит так, будто не менялся с 2009-го, он явно вызовет сомнения у потенциального покупателя.

Вот так карточка товара не должна выглядеть уже лет 10.

Как влияют цвета

Есть множество мнений по поводу «правильного» цвета для различных действий. Например, распространенное в Европе и Америках трактование: зеленый – все хорошо, красный – опасность, желтый – внимание, белый и серый – нейтральные.

Таким образом вы сможете использовать цвета как дополнительные подсказки пользователям. Но если хотите привлечь внимание к определенной опции, мы рекомендуем использовать оттенки красного или желтого. Именно они призывают к действию, а также их проще всего заметить.

Пример неудачного оформления:

 

Худший цвет для кнопок – черный, серый или коричневый. Они подходят только второстепенных опций, или для обозначения временно недоступных действий.

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

Не менее важно, насколько выделяется яркость определенного элемента относительно остального содержимого страницы. NASSA утверждают, что именно контраст яркости – это один из главных факторов при управлении вниманием пользователя.

 

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

Как это применимо в дизайне кнопки? Важно, чтобы яркость кнопки максимально отличались от фоновой, а цвет не совпадал с другими элементами сайта. Также старайтесь не использовать цветные оттенки при выборе фона.

Продажи с помощью SEO
Продажи с помощью SEO
Продвижение сайтов от Elit-Web — это увеличение числа заявок и звонков, расширение охвата целевой аудитории, рост популярности бренда.

Совместимость с фирменным стилем

Еще один камень преткновения – стилистика визуального оформления: «как же так, желтые или красные кнопки не вписываются в общую композицию…». У web-дизайнера со знанием UI/UX подобный диссонанс возникает крайне редко. Но если вам такого не досталось, то следует понимать, что конверсия важнее собственного эстетического удовлетворения от просмотра сайта.

Понятие «красиво» у всех разное, его сложно измерить, в отличие от эффективности web-ресурса. Если хотите определить, как будет лучше для конверсии – просто воспользуйтесь нашими советами по оформлению и проведите A/B тест, сравнивая с текущими кнопками.

Выбираем форму

Оптимально – прямоугольник с округленными углами. В прямоугольнике удобно размещать текст и он вписывается в структуру страницы. А округлые края позволяют еще раз выделить кнопку на фоне остальных элементов сайта.

 

Полностью круглая форма также довольно популярна, именно с ней у нас ассоциируется канонический вид кнопки (большая, красная и круглая, как в мультфильмах). Лучше всего ее использовать там, где достаточно объяснить действие небольшой пиктограммой. Например, ссылки на соцсети:

 

Именно такую вид мы чаще всего встречаем в повседневной жизни, поэтому на интуитивном уровне понимаем, что с помощью этого элемента сможем выполнить определенное действие.

Каким должен быть размер

Размер особенно актуален при просмотре с мобильных устройств. Чтобы не усложнять жизнь собственной мобильной аудитории, делайте размер не меньше чем 10 на 10 миллиметров.

Большие кнопки могут вместить весь необходимый текст, что делает их более понятными. Это важный аспект при взаимодействии с пользователем.

Также большие кнопки более заметны на мониторе. Вы сможете привлечь основное внимание, к определенной опции, если сделаете ее кнопку больше остальных. Так можно выделить основные полезные действия, например «купить».

Дополнительные подсказки

Важно, чтобы текст и/или изображения на кнопке объясняли пользователю, что произойдет, если он нажмет на нее. Например, надпись «Добавить в корзину» более информативна чем просто «Корзина» или «Добавить товар». Изображения также добавляют ясности пользователю, иногда просто увидев пиктограмму мы уже понимаем, что значит данная кнопка.

 

Также кнопки лучше делать интерактивными:

  • смена внешнего вида курсора при наведении;
  • смена цвета и теней на самой кнопке;
  • всплывающие подсказки при наведении (особенно актуально для пиктограмм без текста).

Если на странице несколько кнопок с одной и той же опцией, то и подписывать их лучше одинаково, чтобы избежать путанницы.

КОМПЛЕКСНОЕ ПРОДВИЖЕНИЕ САЙТА
Комплексное продвижение сайта поможет вашему ресурсу встать в ТОП выдачи и привлечет на сайт целевую аудиторию и увеличить популярность бренда
>Стоимость от 40 000 руб.
Получить консультацию
Наш менеджер ответит на все ваши вопросы, а также найдет оптимальное решение вашей проблемы и посоветует услуги, наиболее подходящие вашим бизнес-целям

Расположение

Размещать кнопки нужно там, где их ожидают найти:

  • основная информация (условия, контакты) – в хедере;
  • элементы управления (личный кабинет, корзина, список желаемых товаров) – на панели инструментов под основной информацией;
  • действия (заказать, купить, добавить в корзину) – возле самого товара;

В целом, все просто для десктопного расширения. Но адаптируя сайт под пользователей смартфонов и планшетов, следует учесть ряд особенностей:

  1. Не стоит располагать кнопки слишком близко друг к другу или ставить рядом с ними ссылки, чтобы избежать ошибочного нажатия. Минимальное расстояние – 3 миллиметра.
  2. Расположение кнопки на экране должно быть удобным для нажатия. Оптимально – желтая и зеленая область на рисунках ниже:

 

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

 

На этом все, напоследок предлагаем вам взглянуть на еще один пример удачной кнопки под статьей. Жмите «Подписаться на блог», если статья была для вас полезной и вы хотите получать больше интересного контента.

Добавить комментарий
Напишите комментарий *
Ваше имя *
Электронная почта *
Последние статьи
Причины падения трафика на сайте
Варламов Алексей, 10 сентября 2019
Что такое SEO
Варламов Алексей, 20 июня 2019
Взрывной рост в 2019-ом
Варламов Алексей, 12 июня 2019
Кейс PPC: Доставка суши и пиццы
Захаревич Владислав, 10 июня 2019
Важные отчеты Яндекс.Метрика и Google Analytics
Варламов Алексей, 07 июня 2019
Кейс: Аренда самолета с экипажем
Виктор Кабанов, 03 июня 2019
Formacia-2019
Варламов Алексей, 03 июня 2019
Что такое UTM метки
Варламов Алексей, 31 мая 2019
Стратегия продвижения интернет-магазина
Варламов Алексей, 29 мая 2019
Кейс PPC: Агентство переводов
Меденко Дмитрий, 28 мая 2019
Продвигаете сайт и нет результата?
Мы проведем бесплатный экспресс аудит вашего сайта и укажем основные причины низкого ранжирования.
Номер телефона
Электронная почта
Адрес сайта