not found
Юзабилити

Пользовательское бессознательное или как заставить цвета работать

Автор: Аслан Патов30.05.2014

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

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

Выбор цветов: индивидуальные, корпоративные и даже национальные особенности

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

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

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

В качестве примера рассмотрим дизайн туристического сайта Дублина:

not found

Вполне логично и ожидаемо, что сайт компании, приглашающей в Дублин, будет выполнен в «корпоративных» цветах Исландии – цветах национального триколора. Однако, разработчики поступили мудро, отказавшись от использования темно-зеленого, оранжевого и белого цветов, отдав приоритет природным оттенкам, преобладающим на побережье Дублина. Такое решение значительно облегчает визуальное восприятие сайта, а выстраивающийся ассоциативный ряд не связан с национальной символикой, которая, по большому счету, является условностью и не представляет особого интереса для туриста, чего не скажешь о природе и местных красотах Дублина. Кроме того, мягкие естественные тона всегда пробуждают в человеке доверие, снимают психологическую защиту и напряженность, способствуют спокойному и внимательному изучению текста.

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

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

Китайцы известны своей страстью к копированию и одним из ярких примеров этой наклонности является taobao.com, чрезвычайно успешный клон Ebay:

not found

Обратите внимание на четко обозначенный, уверенный акцент на красном (помните – удача, праздник). Теперь смотрим на привычный ebay.com в его нынешней ипостаси:

not found

Ощущаете, насколько вас расслабляет внешний облик Ebay после просмотра ударного, прямолинейного и воспламененного Taobao? Если да, то вы совершенно точно не китаец. Как показывает опыт, цветовая гамма, характерная для современных «ибеев», среднестатистическому китайцу кажется пустоватой, малопривлекательной, а порой даже «вызывает недоверие» к сайту.

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

Кнопочки!

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

На самом деле, не нужно быть искушенным специалистом, чтобы подобрать подходящий цвет для интерактивных элементов. Задам простой вопрос: «В вашем распоряжении два цвета – серый и синий. Какой из них вы используете для кнопки «Авторизация», и какой для кнопки «Выход»? Понимаете, о чем я?

Просматривая ведущие ресурсы, связанные с онлайн-покупками, обратите внимание на цвета кнопок, призывающих к активному действию. Синий (Ebay), темно-желтый (Amazon), зеленый (Apple Store).

not found
Синий – привычный цвет гиперссылки, активного «кликабельного» элемента.
not found
Желтый цвет, особенно с темным или золотым отливом, привлекает внимание («посмотрите на меня!») и побуждает к согласию.
not found
Зеленый – просто визуальное воплощение безоговорочного принятия.

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

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

not found

Текст, шрифт, фон

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

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

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Аслан Патов
Создатель проекта.
Комментарии
Оставить отзыв

You must log in to post a comment