Главное Авторские колонки Вакансии Образование
10 087 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Какого цвета должны быть кнопки на сайтах: вся правда на основе UX-исследований и статистики NASA

Спор о том, какого цвета должны быть кнопки на сайтах — один из самых давних в области веб-дизайна и digital-маркетинга. Ищем ответ на вечный вопрос в блоге Megagroup.
Мнение автора может не совпадать с мнением редакции

MunQ96d4lIiRuCLkTdQjzk0HFg3S5w_whxjQB03E

Команда проекта EyeQuant опубликовала пост о том, как правильно выбирать цвет кнопок с призывом к действию. Мы подготовили адаптированную версию этого материала.

Множество специалистов уверены, что кнопки должны быть красными, потому что этот цвет создает ощущение «срочности» и вызывает воодушевление, другие убеждены, что нужно использовать зеленый, потому что «он разрешает действие. Специалисты из Unbounce разработали концепт BOB (big orange button — большая оранжевая кнопка) и считают идеальным решением именно его, поскольку «оранжевый цвет выражает энергию, энтузиазм и стимулирует настрой к решению задачи».

Почему этот спор все еще длится? Проблем в том, что не существует данных, которые бы позволяли однозначно утверждать, что тот или иной цвет кнопки будет однозначно лучшим решением. Компания HubSpot публиковала ставший популярным кейс, в котором в процессе A/B теста красная кнопка показала лучшие результаты, чем зеленая. Но при этом коллеги из Sentient добивались того, что красная кнопка проигрывала оранжевой, розовой, ярко зеленой и даже белой. Крис Говард из WiderFunnel говорил, что в их тестах чаще победителями оказывались кнопки оранжевого цвета.

Учитывая всю разнонаправленность результатов различных тестов, неудивительно, что специалисты их ConversionXL считают, что цвет на самом деле не очень сильно влияет на конверсию сам по себе. Гораздо важнее то, как он влияет на визуальную иерархию веб-страницы — самая эффективная кнопка должна выделяться.

Какая кнопка на самом деле «выделяется»

В неврологии существует термин визуальной значимости (visual saliency) — он описывает то, насколько определенный контент «выделяется» из своего окружения. Значимость — сложная тема, но есть кое-что, что стоит о ней знать: зрительная кора людей запрограммирована таким образом, чтобы замечать наиболее значимые объекты. Это не психологический момент, на него не влияют культура, личные предпочтения или демография. Этот схема, выработанная в ходе эволюции — людям важно было быстро замечать потенциальную добычу, хищников или соплеменников в мире, заполненном визуальным шумом.

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

Какие факторы влияют на визуальную значимость

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

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

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

TEsGWeyuyn9sWZfZOntYDsqzgMCDNtee8y1nXUmz

Пример из исследования NASA показывает, как контраст позволяет определить, какой элемент дизайна кажется наиболее заметным

Что все это значит в контексте CTA-кнопок

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

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

Взглянем на практическое применение этих тезисов. Представим, что у нас есть сайт с белым фоном, при этом брендбук допускает использование двух оттенков зеленого цвета для CTA-кнопок, а также белого или серого цвета для текста на них. В таком случае наиболее контрастной комбинацией будет более темная зеленая кнопка с белым текстом. Как видно на картинке ниже эта версия кнопки (1) выделяется лучше:

TknxX1DxDiz_j8sEqBs1SIS2K5D24QWOFHhU5yJF

Теперь понятно, почему все не так просто, как выбрать между зеленым, красным или оранжевым цветом. Пример — супе-заметная CTA-кнопка от Abercrombie & Fitch:

-jDmeTf7uczBG2ZwyVZk9nFXQ1pllYcSm0fSG7rL

Скриншот страницы с кнопкой и данные о том, какие элементы страницы глаз замечает в первые три секунды

Кнопка очень контрастная, и это срабатывает — именно на нее смотрят пользователи в первые секунды пребывания на странице.

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

iTnsLieWzkxt1fuMQpewVbBuX8QhoKdQcpzePfl3

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

Не равны между собой и любые красные кнопки. Пример:

wh5AnEaM7fj08SKAP6oVRLFUrQJYco-n6XDYk09Z

Дизайн сайта Sephora и тепловая карта движений взгляда в первые три секунды попадания на страницу

7X_UwN7A9ZYrE8Q8pVHt28GjBh1XWu0u0PSlJDQq

Сайт Uniqlo и тепловая карта

В данном случае более маленькая, но контрастная кнопка на сайте Sephora привлекает больше внимания, чем большая, но менее контрастная кнопка у Uniqlo. В последнем случае увеличена общая яркость, а в первом лучше продуман контраст.

Попробуем использовать оранжевый цвет:

ySK5Nz3ymV3EknDWtYXvgwI8Ft3ZRkcK7-k5cEz1

Сайт B&Q и его тепловая карта

bMhHB2F7QZiBeg04x8pPVIGqxiqM4vm0zCoRouB5

Сайт автопрокатчика Sixt и его тепловая карта

В данном случае компания B&Q использует более насыщенный оранжевый цвет в сравнении с сайтом Sixt — это значит, что здесь выше контраст между кнопкой и фоном на странице, а также между фоном кнопки и текстом на ней. В результате пользователи быстрее замечают этот элемент дизайна.

Но если контраст так важен, почему тогда все просто не используют белый и черный цвета? Но не все так просто, что иллюстрируют данные NASA:

Kn1BQLQChxrSXPKtv2GvbFbKDg9BUuSNHlhVGSj5

На этой картинке красные и розовые буквы заметны сразу, в отличие от черных — и это несмотря на то, что они обладают меньшим контрастом по сравнению с последними. Это так называемый эффект «всплытия» (pop-out effect).

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

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

Выводы

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

  • создает контраст между кнопкой и фоном страницы;
  • создает контраст между кнопкой и текстом на ней;
  • имеет оттенок, отличный от используемых на странице.

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

Ссылки и материалы по теме:

+4
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.