Как цветовое решение сайтов и приложений влияет на конверсию — Колонка AIC

Цвета в жизни человека занимают ошеломляюще много места. Они заставляют нас предполагать решения — от «это яблоко унич пока рановато» до «этот Ferrari великолепно подойдет цвету моей помады». Для того 85% людей цвет —
угадывающий фактор покупки.

Что касается веба, цвета были и остаются вопросом чертовски субъективным. Это всегда горячая материя для споров. Какая кнопка «купить» предпочтительно продаст ваш товар — оранжевая, что у Amazon, или синяя, как у eBay? Вследствие чего-то на некоторых семинарах о digital (особенно возьми небольших) до сих пор продолжают одобрять, что оранжевая, и побольше.

Что формирует конверсию

Превращение — любое целевое действие пользователя. Самый бездействие пример — клик по кнопке «положить в корзину». Проведем бездействие диванный анализ: что нужно с целью того, чтобы пользователь нажал бери заветную кнопку.

• Он заинтересован в покупке, так есть является целевым посетителем (законный трафик).
• Его устраивает цена товара (правильная ценовая поведение).
• Он получил достаточно информации о продукте — надлежащего качества и в нужном объеме (верный контент).
• Он интуитивно ориентируется в интерфейсе (правильное UI-проецирование).
• Наличие психологических мотиваторов (правильный зрительный дизайн).

Навскидку получается пять пунктов. Свет кнопки, контрастность с соседними элементами, границы, тень, блики и прочие «рюшечки» — сие всё про последний пункт. Елико он решающий? На одном с наших проектов мы специально провели попытка — запустили A/B-тест двух видов форм заказа. Второстепенный дал на 10% больше конверсий:

Неважный (=маловажный) сразу можно заметить, что весь разница заключается только в объеме кнопок. В первом варианте белотелый флэт («плоский» дизайн), а во втором у кнопок подчищать объем. Однако это не следственно, что нужно срочно переделывать плоские кнопки бери своем сайте. Этот пример подтверждает не более чем то, что именно в данном случае объемные кнопки нажимали чаще. Дело — почему.

Мы плавно подошли к следующему важному пункту, что расскажет, почему настоящий конверсионный проектирование — это вообще не про перекрашивание кнопок в блекло-оранжевый-, зеленый, красный или какой-либо пока что цвет.

Теории цвета и при нежели здесь конверсия

Разработка дизайна нового интерфейса — сие всегда два больших пласта. Оптический дизайн и проектирование UI. Назначение обоих — пр вниманием пользователя, помогать ему просечь в интерфейсе и одновременно подтолкнуть к целевым действиям. Знание дела визуального дизайнера правильно работать с цветом и формой влияет получи то, насколько интерфейс будет конвертирующим. Только это отнюдь не игра в цвета, а эпигонство своду принципов.

Принцип первый. Оборот цветового круга

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

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

Чаще я видим именно комплементарную схему — симпатия применяется для того, чтобы подвигнуть пользователя к целевому действию, например, что на главной странице Ozon.ru:

Закон второй. Использование цветовых схем

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

В наибольшей степени удачная схема для конверсий — та, в которой уплетать один явный цветовой акцент. Им общепринято и выделяются элементы, с которыми пользователю нужно взаимодействовать. Шарашка Basekit хотела увеличить продажи и сделала редизайн страницы с тарифами. Стилевое намерение осталось прежним, при этом добавились цветовые плашки, акцентирующие тщательность на стоимости, а CTA-кнопки были унифицированы — для замену разноцветным пришли одинаковые баксы. Результат — рост конверсии на 25%.

Основание третий. Баланс цветов

Чтобы вымучить сбалансированного решения, которое будет лучшим образом регулировать пользовательским вниманием, рекомендуется комбинировать цвета в соотношении 60/30/10:

• 60% — преимущественный цвет.
• 30% — дополнительный цвет (можно попользовать два оттенка одного).
• 10% — цветовые акценты.

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

Согласно этому правилу, в визуальном дизайне 60% занимает климат, 30% — заголовки и меню, 10% — простейшие положения, к которым нужно привлечь наибольшее напирать: призывы к действию, кнопки и ссылки.

После идеального соответствия доводить не достаточно. Главная мысль — должны быть основные цвета и цвета во (избежание акцентов. Можно проверить свой образец на сбалансированность оттенков, например, с через инструмента Image Color Extract. Результаты нашего эксперимента (в правой колонке приведены не более чем основные цвета страницы):

Принцип четвертый. Логичность размера текста и его контраста

Молитва с разным кеглем (размером шрифта) имеет различные требования к контрасту с фоном. Более неизмеримый текст может быть менее контрастным не принимая во внимание ущерба для восприятия. И наоборот, невеликий текст должен быть более контрастным — для того того, чтобы читаемость была хорошей. W3C
советует хранить минимальных контрастных соотношений:

• 4,5:1 — для текста, набранного кеглем впредь до 14 pt в жирном начертании и до 18 pt — в обычном.
• 3:1 — чтобы крупного текста.

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

Основа пятый. Психология цветов

Есть до сего времени один принцип, к которому чаще в (итоге и апеллируют заказчики сайтов — эмоциональная составляющая цветов. Вот то-то и оно поэтому мы так редко встречаем сайты, цветовые акценты возьми которых расставлены коричневым — он попросту никому не нравится.

У людей сформировались стереотипы, относящиеся к цветам. И с сим тоже нужно считаться. Кстати, обычай наряжать новорожденных мальчиков в синее, а девочек — в розовое
пришла не более чем после Первой мировой войны. Поперед этого цветового стереотипа «синее для того него, розовое для нее» прямо-таки не существовало.

Опрос американского дизайнера Джо Халлока
показал, с какими качествами сыны) Адама наиболее часто связывают разные цвета:

• Душа: синий (34%), белый (21%), ярко-зеленый (11%).
• Безопасность: синий (28%), чёрный (16%), желто-зеленый (12%).
• Скорость: красный (76%).
• Доступность: оранжевый (26%), канареечный (22%), коричневый (13%).
• Высокое качество: тугой (43%), синий (20%).
• Технологичность: черный (26%), шаровой (23%), синий (23%).
• Надёжность: синий (43%), грязный (24%).
• Мужество: фиолетовый (29%), красный (28%), пьяный (22%).
• Юмор: оранжевый (28%), желтый (26%), красно-фиолетовый (17%).

Мужчины и женщины воспринимают цвета после-разному. Универсальный цвет — голубой, его
предпочитают 57% мужчин и 35% женщин. Шоколадный цвет вызывает отторжение у мужчин, а апельсиновый — у женщин. В обоих случаях наименее привлекательные цвета называли «дешёвыми». С возрастом и у мужчин, и у женщин усиливается нелюбовь к жёлтому и оранжевому. Представители обоих полов предпочитают холодные оттенки нате сайтах — 56% мужчин и 76% женщин.

Часть даже пытались связать цвета логотипов известных брендов с эмоциями, которые тетка доносят. Однако это спорная расположение, из которой не очень объяснимо, как автомобильный премиум-бренд Range Rover транслирует эмоцию «мир, развитие, здоровье».

Человеческое отношение к тем иль иным цветам — вещь крайне субъективная, сие зависит от контекста. Известен попытка маркетинговой платформы Hubspot: ее представители сделали кнопку в сайте сначала зеленой, а затем красной. Творение: красная
победила с отрывом в 21%. Однако не стоит трактовать этот кейс подобно ((тому) как) «красные кнопки дают больше конверсии».Взгляните получи и распишись страницу, и всё станет понятно.

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

Отдельные люди примеры

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

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

В данном случае сильнее традиционная подача интерфейса (вместо «креативной») сыграла бери руку бренду: после обновления дизайна пользователи стали получай 25% реже кликать на бесплатную пробную версию и начали чаще делать покупки платные тарифы. В результате общий процент компании
увеличился на 114%.

Вдобавок интересен пример, опровергающий популярное ложь о том, что количество вариантов действий снижает конверсию. Услуга почтовых рассылок GetResponse провел проверка: разместил на главной странице единым) (духом две CTA-кнопки — «купить» и «попробовать бесплатно».

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

Иногда конверсия страдает с-за лишних элементов — достаточно снять их, и эффективность сайта вырастет. Скажем поступили в компании SuperOffice. На странице «Запланировать бесплатную версию» остались просто-напросто поля для ввода персональных данных — бесцельно лучшее управление вниманием пользователей
привело к росту конверсии получай 197%.

Выводы

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

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

С тем чтоб окончательно выяснить, лучше ли начнет реализовать кнопка с другим цветом, объемом разве расположением, стоит всегда резервировать доля бюджета на A/B-тесты.

Источник