Опыт взаимодействия и восприятие цвета пользователем

http://spyrestudios.com/the-user-experience-and-psychology-of-colour/
  • Перевод


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

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

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

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

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

Спонсор перевода: Студия Айкен

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


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

image

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

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

Мы решили посмотреть на поля формы регистрации у нескольких популярных сайтов и найти (если они существуют) общепринятые правила, которым те следуют. Сайтами, которые мы выбрали для анализа, стали Gmail, Twitter и Facebook — все чрезвычайно популярные, которые (по крайней мере, должны) очень серьезно вникать в дизайн своего сайта, его удобство и простоту использования.

Сайты как примеры


Gmail


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

image

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

image

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

image

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

image

Twitter


Пример: Twitter Имя/Логин/Пароль.
Как вы видите, Twitter использует несколько разных цветов для указания на различные вещи. Они выбрали текст зеленого цвета для того, чтобы показать в первом поле, что всё в порядке, текст красного цвета, чтобы показать, что выбранное имя пользователя уже занято, и текст серого цвета, чтобы показать, что выбранный нами пароль слишком простой (мы набрали 123456) — кстати, интересная мера, направленная на повышение уровня безопасности. Пока что зеленый выглядит как цвет успешного выполнения действия.

image

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

image

Facebook


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

image

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

Случай с Getclicky


Итак, вернемся к примеру Getclicky — текст красного цвета для подтверждения. Мы оставили в Twitter'е сообщение команде сайта Getclicky и вот какой ответ от них мы получили:

image

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

image

image

image

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

image

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

image

image

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

Результаты:


Предлагаем вашему вниманию результаты (полученные ко времени написания данной статьи) нашего быстрого теста (вы можете пройти его здесь если вдруг вы его пропустили):

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

image

Колоссальная часть респондентов (88%) выбрали красный цвет как цвет неудачи — рады слышать, что не только мы:

image

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

image

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

image

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

image

Красный цвет пока является лидером по результатам — 94% респондентов выбрали красный цвет для предупреждающих сообщений:

image

Что это всё значит?


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

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

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

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

Что вы можете вынести из данной статьи?


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

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

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

Как мы говорили раньше: «Постройте его и они придут. Постройте его хорошо, и они вернутся», и, в конце концов, разве это не то, чего мы все добиваемся?
Айкен
31,00
Компания
Поделиться публикацией

Похожие публикации

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

    0
    классный сайт, улетает в rss-ридер
      +2
      Нам с детства навязывают аналогию:
      — Красный — запрещено, ошибка, срочно!
      — Желтый — обратить внимание, но не страшно
      — Зеленый — вперед, всё хорошо.
      Конечно же, светофор ;)

      И кстати: когда я проходил тест, то понял «success» не как «всё хорошо», а как «человек, добившийся благосостояния»

        0
        … Не это ли влияет на наш выбор, а не само восприятие?
          0
          Это ассоциации на подсознании.
          Красный — кровь
          Зеленый — трава

          Живи мы в инопланетном мире, в которой красная трава и синяя кровь, всё было-бы по другому. Светофор бы был сине-красно(-фиолетовый).
            0
            но для светофора всё-таки выбирали не поэтому — а потому, что именно эти цвета, как самые интенсивные, хорошо различимы на расстоянии
            • НЛО прилетело и опубликовало эту надпись здесь
              +9
              Вы, когда клубнику едите, не паникуете?
                +7
                Волнуюсь слегка!
                  0
                  А вы паникуете, когда кровь видите?
                  0
                  красный — клубника, помидор, вино. зеленый — лягушка, змея, плесень.
                  0
                  аналогично. и из-за этого выбрал фиолетовый.

                  N.B. кстати, в тесте и в статье не синий, а голубой же. понятно, что перевод с английского, но в русском есть отдельное название для этого цвета.
                    –5
                    голубым в последние 10-20 лет стало стыдно называть даже цвет = ) пусть будет светло-синий :D
                      0
                      стыдно? цвет?

                      (\(\
                      (-_-)
                        0
                        В Украине после оранжевых событий народ реагирует также на оранжевый цвет в одежде и везде где бы то ни было. Стоит мне надеть оранжевую майку на пляж (живу в Крыму, где лояльность на стороне Яныка) и 80% знакомых скажет какую-то плоскую шутку насчет моего любимого цвета. Ну не дибилизм ли?
                          0
                          У вас там в Крыму видимо сильно засело в памяти у людей. В Киеве все нормально, можно носить оранжевые футболки, шапки… :) А про Яныка лучше посмотреть и поржать вот тут.
                            0
                            Да везде «можно». Сам факт того, что обсуждается что это можно уже пипец полнейший :) Я к тому это написал, что цвета очень жестко закладываются в ассоциации и годы прошли, а многие до сих пор на это странно реагируют
                            0
                            дебилизм. Цвета надо называть цветами, а для других определений должны быть свои термины )
                      0
                      У вас в посте рефссылка ведь?
                        +1
                        Честно говоря, меня это тоже в оригинале насторожило, наверное лучше убрать после слэша все… Хотя, люди старались, делали тесты и т.д., даже не знаю, стоит ли менять ссылку.
                          0
                          Просто привык, что об этом хотя бы предупреждают.
                            +1
                            Убрали линк вообще.
                              +1
                              Радикально)
                        0
                        В цвете заложено много психологических моментов, и хотя я не претендую на роль эксперта в этой области, время от времени я встречаюсь с чем-то, что кажется несколько парадоксальным.


                        Хочу добавить, что сам цвет воспринимается в первую очередь глазом. Таким образом красный цвет может быть как ярким, теплым или контрастным, так и не быть таким — просто потому, что информация воспринимается глазом относительно фона. Так что и психологическое воздействие будет даже при одинаковом RGB цвета сообщения, совсем разное.
                          +5
                          К вопросу о восприятии цвета разными традиционными культурами, картинка:
                          image

                          Как ни странно, красный первоначально не был исключительно цветом опасности и ошибки. Неужели светофоры так замылили глаза?
                            0
                            В принципе, в природе красный изначально обозначал опасность — всякие ядовитые ягоды, земноводные, насекомые (если я правильно помню уроки биологии). А позднее другие животные/растения начали его мимикрировать, потому сейчас не все красное — опасно.
                              0
                              Почти все в природе, включая опасных тварей, стараются быть понезаметнее и не отсвечивать лишний раз. Хищники — чтобы успешно охотиться (что за охота, если тебя видно до горизонта и дичь разбегается?), жертвы — чтобы хищник не заметил и мимо прошел. А красными и прочими яркими бывают те, кому нужна заметность: ягоды — чтоб сожрали и семена подальше рассеяли, цветы — чтобы привлечь опыляющих насекомых, птицы (обычно самцы) — чтобы самки видели издалека (и поют иногда, чтоб еще и слышали).

                              Обозначение опасности красным — это уже человеческая культура. Скажем так, с опасностью для человека (изначально дневного животного) из всех цветов чаще других цветов связаны черный и красный, но черный удобен как нейтральный и контрастный к белому. Зеленый слишком распространен в качестве безопасного в окружающей среде, чтобы эффективно выполнять роль индикатора опасности.
                            +2
                            А я почему-то в первых двух тестах выбрал красный и фиолетовый.
                              0
                              не расстраивайтесь, это не тест на профпригодность или на различимость цветов ) и вы не какой-нибудь особенный, просто вы не с большинством )
                                +2
                                Я и не расстраиваюсь.) Это были издержки моего перевода вопросов. «Success» в значении успех, победа, и дальше по ассоциации «красный флаг победы»
                              +1
                              Годная статья. В закладки. А по поводу зеленого и красного, то по-моему, для представителей западной культуры это уже должно быть на уровне рефлекса.
                                +1
                                Памятка начинающему дизайнеру =)

                                –2
                                Помидоров не боитесь?
                                  +3
                                  Некий Макс Люшер ещё в 40-х годах 20го века исследовал влияние цветов на психику.
                                  Тест Люшера используется в некоторых компаниях и организациях при приёме на работу.
                                  Кто не проходил — рекомендую, удивитесь скорее всего.
                                    0
                                    Тест Люшера обязателен для медкомиссии на водительские права и при призыве в армию. Думаю все о нем знают и проходили не раз (кроме откосивших и купивших права :)
                                      0
                                      А все знают что вы о всех думаете, извините? Ну, кроме откосивших и купивших права?
                                      Вы, к слову, из какой страны пишите?
                                    +1
                                    Да, а вот что делать с людьми страдающими долтонизмом? :) У них есть определенные реакции на разные цвета?
                                      0
                                      Не знаю как остальные, но лично меня смутил третий вопрос в тестировании. 2 цвета выпало, осталось еще 2… Поскольку голубой не такой «красный», как фиолетовый выбрал его. А на 4-й выбора попросту не осталось, как-то не приходит к подсознанию, что один цвет может означать несколько целей. Так что имхо тестирование несколько предначертанно, чтоли
                                        +1
                                        Очень даже может. Характеристики разные. К примеру, красный символизирует неудачу, но это не мешает ему к тому же быть самым заметным.
                                        –1
                                        Тема интересная, но статья немножко ниочем. Зеленый — хорошо, красный — плохо.
                                          0
                                          «Сайт выглядит угрожающе, у вас тут все цвета негативные. Красный — это же цвет крови! Зелёный — цвет сумасшествия! Чёрный — цвет смерти, а белый — цвет клинической смерти!» (с)

                                            +1
                                            Спасибо за статью. Понравился тест и главное — результаты. Теперь если кто будет выпедриваться — «хочу в форме ввода оранжевые буквы „Принято“ — буду тыкать носом.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое