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

Опубликовано StudioRC в

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Не стоит располагать кнопки слишком близко друг к другу или ставить рядом с ними ссылки, чтобы избежать ошибочного нажатия. Минимальное расстояние – 3 миллиметра.
  • Расположение кнопки на экране должно быть удобным для нажатия. Оптимально – желтая и зеленая область на рисунках ниже:
  • Важно учесть, что объем контента, который помещается на таких экранах, ограничен. Поэтому нужно оставить только основные опции, а всю дополнительную информацию скрыть во вложенном боковом меню:

 

 


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *