Психология цвета и Web дизайн

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

Безусловно, реакция на различные цвета для различных культурных групп проявляется по-разному – именно поэтому следует ещё более щепетильно подходить к этой теме. Я уверен, что культура влияет на предпочтения человека, в том числе и к цветам.

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

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

Почему цвета?

Я должен признаться, что никогда не задумывался на эту тему, пока не столкнулся с сообщением об успехе на сайте GetClicky.com (услугами, которого я пользуюсь, время от времени). При заполнении одной из форм, мне выскочило сообщение о том, что я успешно добавил мой URL, но до меня это дошло не сразу, потому что сообщение было на ярко-красном фоне:

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

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

После этого случая, я решил тщательно изучить формы на нескольких популярных сайтах и сделать выводы о цвете и принципе работы этих форм. Сайты, которые служили мне подопытными кроликами, были: Gmail, Twitter и Facebook. Эти ресурсы, все без исключения, являются популярными, а значит, над ними работали настоящие специалисты, психологи и т.д. Таки да! Там действительно есть чему поучиться.

Сайты

Gmail:

Пример: имя пользователя недоступно.

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

Пример: имя пользователя доступно.

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

Пример: простой пароль.

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

Пример: надёжный пароль.

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

Twitter:

Пример: логин / имя пользователя / пароль в Twitter.

Как вы уже, наверное, успели заметить, Twitter использует несколько различных цветов, для того чтобы указать на разные вещи. Они используют зеленый текст, чтобы показать, что первое поле абсолютно валидно, красный текст, для того чтобы показать, что имя пользователя уже занято, и серый текст, для того, чтобы сообщить вам, что пароль, который вы ввели слишком прост (я вводил 123456) – интересный результат. Таким образом, мы увидели, что и на этом сайте цвет успеха - зелёный.

Пример: пароль для Twitter.

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

Facebook:

Тут я просто не могу не высказать своё собственное мнение: я был просто в шоке от того, насколько неудобной является форма регистрации на Facebook. Процесс просто примитивен – сообщение об ошибке не выводился до тех пор, пока пользователь не нажмёт на кнопку. Но тут мы говорим о цветах:

Пример: регистрация на Facebook.

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

Опыт Getclicky

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

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

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

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

А это что? Красный текст для несохраненных изменений и зеленый для того, чтобы сообщить, что всё сохранено:

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

Результаты:

Вот результаты нашего быстрого теста:

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

88% опрошенных выбрали красный как цвет неудачи – оказывается не один я такой:

Тут тоже получился довольно-таки интересный результат: 71% опрошенных выбрали красный цвет, оценив его как наиболее заметный. 18% выбрали зеленый цвет. Надеюсь, это не заставит вас думать, что мы должны использовать красный, чтобы выделять наши сообщения?

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

88% людей чётко дали понять, что зелёный цвет больше всего подходит для сообщения, 'Вы успешно завершили задачу’:

94% опрошенных согласны с тем, что для слова «Предупреждение» больше всего подходит красный цвет:

Как можно это использовать?

Таким образом, данный тест показал, что не только для меня красный цвет ассоциируется с неудачей, а зелёный - с успехом.

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

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

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

• Комментарии