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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

• Чек-лист повышения конверсии сайта: 7 важных моментов
• Как испортить лендинг: 3 надежных способа
• Как не надо делать: 3 ошибки при работе с ключевыми словами для продвижения сайта
• Почему компании платят за плохие сайты: 3 причины
• 4 типа людей, покупающих в Интернете: как с ними работать?
• Как получить больше заявок без увеличения рекламного бюджет