Теория цвета — как управлять вниманием пользователя?

Posted on by riasevastopol

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

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

  • Как выбранный цвет характеризует бренд?
  • Отражает ли данный цвет целостную экосистему бренда?
  • Будет ли данный цвет преобразовать?

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

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

Как мы видим цвет в действительности?

Великий британский физик господин Исаак Ньютон (Isaac Newton) был, по всей видимости, первым человеком, заключившим, что цвет не есть свойством, изначально свойственным всем объектам материального мира — объекты, скорее, отражают либо же поглощают свет определенного цвета, и этот отраженный свет мозг человека принимает как своеобразный окрас этих объектов.

Теория цвета — как управлять вниманием пользователя?

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

Цветовой круг

Теория цветa постоянно привлекала к себе внимание известный умов человечества: так, известный германский поэт Иоганн Вольфганг фон Гёте (Johann Wolfgang von Goethe) показал себя и как незаурядный естествоиспытатель — как раз ему в собственности честь изобретения круговой схемы цветового спектра, так именуемого «цветового колеса».

Цветовой круг складывается из 3 главных цветов, 3 вторичных цветов и 6 третичных. Дополнительными цветами именуются пары цветов, расположенных на круге в диаметрально противоположных позициях: красный дополнителен зеленому, фиолетовый — желтому, светло синий — оранжевому и т. д. Громаднейший вероятный цветовой контраст отмечается между парами дополнительных цветов.

зрительное восприятие и Цвет

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

Так звучит цитата из отчета по результатам опыта, совершённого исследователями из Университета Барселоны. Солидную часть внимания люди уделяют отдельным фрагментам неспециализированной картины, неизменно ведомые принципом восприятия окружающего мира «снизу вверх» (bottom-up, «от несложного к сложному», «от низших уровней к высшим», «от частного к неспециализированному»). Данный феномен растолковывает, из-за чего выбор цвета (низкоуровневый, «несложный» параметр восприятия) сильнейшим образом воздействует на уровень качества предстоящего сотрудничества пользователя с посещенным им в первый раз лендингом.

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

Отечественное восприятие цвета развивалось в течении тысяч лет, дабы оказать помощь нам отличить молодые и съедобные плоды листья от их природного окружения (врач Питер Кёниг)

В собственных изучениях о природе цветового контраста, проводившихся в тропических лесах Уганды — на так называемой «прародине человечества» — доктор наук нейробиопсихологии (и учредитель сервиса айтрекинга EyeQuant) врач Питер Кёниг (Peter Koenig) и его сотрудники поняли, что цветовой контраст, замечаемый между парой дополнительных цветов «красный — зеленый» играется громаднейшую роль в привлечении внимания человека в естественной природной обстановке, тогда как действие второй пары «светло синий — желтый» проявляется значительно меньше.

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

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

Просматривайте кроме этого: 85% клиентов делают собственный выбор на базе цвета!

семиотика и Цвет (наука о символах)

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

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

Но на помощь нам придет позаимствованный из семиотики (науки, исследующей свойства знаков и знаковых совокупностей) принцип троичной классификации, созданный математиком и американским философом Чарльзом Сандерсом Пирсом (Charles Sanders Peirce).

В соответствии с классификации Пирса, символы делятся на 3 класса и владеют главным отличительным свойством:

  1. Символ-икона (icon); иконичность (Iconicity), степень визуального сходства чего-то с чем-то, к примеру, фотографии и фотографируемого. Но иконичность может восприниматься и схематически либо иллюстративно: к примеру, красный и оранжевый считаются «теплыми» цветами, чёрные оттенки цветов воспринимаются как «тяжелые» и т. д.
  2. Символ-индекс (index); индексикальность (Indexicality), мера связи значения с контекстом символа. К примеру, зеленый банан воспринимается как недозрелый, желтый как спелый, коричневый — перезрелый.
  3. Символ-знак (symbol); символичность (Symbolicity), категория, в которой означаемое и символ связаны в рамках некой предварительной договоренности. Как раз символичность символа имеют ввиду маркетологи, в то время, когда говорят о языке цвета, к примеру: «Зеленый свидетельствует перемещение, а красный свидетельствует остановку». Символизм цветов и в этом классе — не имеющем явной логической связи между знаком и означаемым, в отличие от знаков-икон и знаков-индексов — все так же зависит от конкретного контекста потребления.

Цвет и брендинг

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

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

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

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

конверсия и Цвет, либо Необычная история Громадной Оранжевой Кнопки

Громадная Оранжевая Кнопка стала нарицательным знаком роли цвета в оптимизации конверсии (Conversion Rate Optimization, CRO). О ней с восторгом и любовью говорят в множестве блогов, посвященных практике и проблемам CRO. Однозначных объяснений этому феномену нет, но попытаемся установить кое-какие вероятные обстоятельства аналогичного успеха оранжевого цвета.

«Оранжевый надёжный» либо ярко-оранжевый (номер 152 по цветовой совокупности Pantone) цвет употребляется для выделения серьёзной информации из внешней среды, в особенности в условиях, требующих немедленного привлечения и быстрых решений внимания, таких как стремительное перемещение, охота, случаи стихийных бедствий. Подобное использование цвета разъясняется тем, что визуальная привлекательность ярко-оранжевого выделяет его из любого природного фона: темно-зеленый лес, голубое небо, темно-светло синий вода океана.

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

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

Лучшие образцы из практики баланс и Контрастность

Популярная формула создания верного цветового баланса лендинга выглядит как «60/30/10». В соответствии с этому правилу, главный цвет вашей целевой страницы обязан занимать 60% площади, вторичный цвет — 30%, а на цветовой выговор должны приходиться оставшиеся 10%. Преобладающий цвет должен быть наименее насыщенным, тогда как самый контрастный либо весьма насыщенный акцентирующий цвет обязан передавать самоё важное содержание (CTA, заголовок страницы и т. д).

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

Пробелы

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

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

На примере, представленном ниже, громадный навязчивый красный квадрат, служащий фоном для объявления о финальной распродаже, помой-му обязан сходу захватывать отечественное внимание, но на практике — что и подтверждает сеанс айтрекинга, совершённый сервисом EyeQuant — визитёры его по большей части игнорируют. Дело в том, что из-за собственного размера и цвета красный квадрат выглядит как некое дополнение пробела, а отнюдь не выделяется на его фоне. Значительно больше — если судить по тепловой карте — выделяется тёмная сандалия в самой нижней части страницы: ее цвет максимально контрастирует с остальным дизайном, а маленький размер объекта завлекает первичное внимание визитёров.

Знай собственную экосистему

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

Индустрия моды представляет собой одну из самых больших экосистем E-Commerce в Глобальной сети. Но она на удивление прекрасно унифицирована — главные игроки придерживаются в оформлении собственных ресурсов сходной цветовой гаммы.

Chanel представила миру моды собственную сейчас широко известную черно-белую гамму еще в 1920-е годы, после этого принесла ее в Интернет, и сейчас этому примеру следуют такие торговые марки как Net-A-Porter, TopShop, American Apparel и Sales Gossip.

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

В других областях электронного бизнеса все выглядит не столь категорично черно-белым. 🙂

«Экологически сознательные» торговые марки предпочитают зеленый, интуитивно предстающий для визитёров как символ единства с Матерью-Почвой, но они же обычно выбирают дополнительный к зеленому цвет — оранжевый — как цвет, олицетворяющий перемены к лучшему. Стоит, но не забывать, что трудясь с монохроматической шкалой (к примеру, в изысканных оттенках серого), вы легко имеете возможность привлечь интерес визитёров к серьёзному элементу за счет контрастной вспышки броского цвета, а попытки цветового брендинга в соответствии с символикой цветов смогут нарушить простую схему привлечения внимания «bottom-up».

И опять — тест, тест, тест!

Нил Пател, один из отцов-основателей ресурсов CrazyEgg и KISSmetrics, в один раз написал, что сотрудник Гугл, важный за создание кнопки для Gmail, совершил огромное количество А/Б-тестирований чтобы выбрать из 50 оттенков светло синий (если судить по вторым источниками — из 41 оттенка) тот единственный, что будет оптимальнеетрудиться. Для нас подобное количество тестов совсем вне досягаемости (в итоге, Gmail располагает 425 000 000 необязательных тестировщиков), но достижение статистически значимых результатов в полной мере по плечу любому клиенту маркетинговой платформы LPgenerator.

Да и как правило результаты достигаются с намного меньшими упрочнениями, как в известном сплит-тесте Hubspot, где красная кнопка, контрастная неспециализированной цветовой гамме лендинга, превзошла зеленую кнопку на 21%. Но никто неимеетвозможности сообщить с уверенностью, из-за чего произошло как раз так.

Да, красный — весьма заметный, «тревожный» цвет, но заметность любого цвета зависит от контраста с окружающим фоном и символического контекста, в каком кнопка употребляется (контекст задает текстовая надпись кнопки — также важный элемент). Единственное, что мы можем с уверенностью дать совет: убедитесь, что самые серьёзные элементы лендинга являются самыми заметными составляющими страницы, а после этого приступайте к тестированию, подбору цветов — и опять к тестированию.

Просматривайте кроме этого: Какие конкретно цвета оптимальнееподойдут вашей посадочной странице?

Главные выводы

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

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

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

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

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

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

По данным: blog.eyequant.com.

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

Цвет наше всё… Выпуск 67… Теория цвета by Амбалов


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

riasevastopol

More Posts