Цвет или контрастность – что заставляет вас выбирать?

Posted on by riasevastopol

Это не очередная статья о том, как «применять красный цвет вместо светло синий». Мы слышали это через чур много раз.

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

Однако, имеется один, совсем универсальный принцип.

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

Я пробую разобраться в значении цвета для дизайна уже продолжительное время – и я вижу суть в объединении цветов для гармоничных проектов.

Неоднократно я слышал либо просматривал, что применение одного цвета вместо другого приводит к огромному отклику у людей (и ведет к большому повышению темпов конверсии) – «любой обязан делать это по определенным обстоятельствам»

Само собой разумеется, изучения, обосновывающие, что «какой-то определенный цвет окажет помощь вам плавать в деньгах», бессчётны. Больше всего цитируют пример Hubspot, где они совершили тест на цвет кнопок «Call t0 Action».

Результатом их изучения явилось то, что красная кнопка обошла зеленую на 21%.Цвет или контрастность – что заставляет вас выбирать? В путь, Красный!

1-p7Zpm2IUtm01uIF578WHog

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

Но имеется одно, Но!

Вы видите цветовую схему первого примера. Он имеет зеленую палитру. Фон, кнопки, и иконки созданы с применением зеленого цвета в качестве главного.

Более того, сама кнопка менее насыщенного цвета и намного чернее, чем красный вариант. Она сочетается со своим окружением.

А в другом примере, красная кнопка легче и насыщеннее, и предугадайте, что это? Это дополнительный к зеленым элементам цвет. Это контраст.

Это не очередная статья о том, как «применять красный цвет вместо светло синий». Мы слышали это через чур много раз.

Разглядим несложной факт: вы просматриваете эту статью, применяя тёмный шрифт на белом фоне. Если вы посмотрите около себя, вы, возможно, увидите кое-какие предметы стремительнее, чем другие. Контрасты окружают нас каждый день.

Давайте забудем о том, что «красный делает вас голодным, а светло синий успокаивает» и сосредоточимся на изучении контрастов.

«Что хорошего в теплом лете, без холода зимы, что и придает ему сладость»- Джон Стейнбек

Дабы доказать собственную точку зрения об эффективности контрастов, я совершил изучение, применяя Screenshot Click Testing. Это изучение, в котором люди по большей части нажимают один раз на экранах, каковые я показываю им.

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

Я продемонстрировал участникам изучения два скриншота:

  • Первые элементы были окрашены в разные оттенки светло синий, а также кнопки, так что контрасты были минимальными.
  • Второй скриншот применяет мою любимую несколько цветов: светло синий и оранжевый, дабы расширить контраст между веб-сайтом и CTA (кнопками «Сall to action»).

Вы имеете возможность учавствовать в изучении самостоятельно: Вот ссылка. Посмотрите, станете ли вы функционировать как и все остальные, но не смотрите другую часть статьи, перед тем как примете в нем участие. Лишь честно!

Я размещу результаты лишь для читателей Medium в комментариях в скором будущем.

2 1-OMd4wCjFoAyu9q92fEcn9w

Первый проект: обратите внимание, что единственно заметный контраст находится в логотипе.

3 1-6b8l4RqUFj8ZnVTTdrQecg

Второй проект с моим любимым сочетанием цветов.

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

В конце изучения, им задали вопрос: «Какой вариант был более увлекательным для вас? Имеете возможность ли вы сообщить, из-за чего?» Все, что они должны были сделать – это надавить на самом увлекательном элементе в каждом варианте, а после этого дать ответ.

4 1-Pxgtxs1Jvj7mGGibWbMbUQ

Клики на первом проекте.

Вот карта 75 кликов, данных менее контрастной версии. Как вы видите, они были достаточно равномерно распределены по странице. Кнопка CTA «Подписаться» стала победителем с маленьким отрывом – другие области были практически так же увлекательны.

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

Не смотря на то, что, результаты другого экрана поразили.

5 1-tcP_4Z_fdIhPFb31YmZAjw

Большое большая часть кликов (практически 75%) было направлено ??на контрастную оранжевую кнопку CTA.

Около 68% опрощеных объявили, что они предпочитают эту версию второй. Обстоятельство – она более увлекательная, более привлекательная, а также более четкая, чем в прошлом дизайне.

Контраст победил в эстетике.

6 1-LPSFNNGctajs39xTbNZxRA

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

Но цель изучения не в изображениях – я желал определить, какая версия возьмёт больше кликов на кнопках CTA.

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

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

Как использовать контрасты в проектах

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

8 1-T4em6q85zsxcG52xfiQFIA

Ясно, когда вы взглянуть на расстоянии.

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

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

Убедитесь, что фоновые цвета выглядят конечно и нейтрально. Джош Байерс из StudioPress говорит о способе создания иерархии из 3-х цветов на сайте: фон, база и акцентирующие цвета. базы и Фон предназначены для помощи акцентирующих цветов, каковые контрастны остальным.

9 1-oP1eolKscy890OaIVk2bGQ

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

В качестве последнего совета – удостоверьтесь в надежности. A / B тесты – это лучший метод проверить, как будут восприняты ваши кнопки, заголовки, либо конструкции. Я использую Screenshot Click Testing, дабы заметить клики и мнение людей, но я кроме этого использую User Sessions Recordings для дополнительной проверки.

Без тестирования, вы не имеете возможность быть уверены, что ваш выбор в действительности соответствует «личности» вашего сайта. Шестое чувство это одно, но точные эти это второе.

Согласны ли вы, что контрасты правят миром? Как вы применяйте их в собственных проектах, в случае если когда-либо применяли? Поделитесь собственными мыслями в комментариях.

Высоких конверсий!

Случайные статьи:

ЦВЕТОТИПЫ внешности. БЕЗ зима/лето и прочей ереси!


Подборка похожих статей:

riasevastopol

More Posts