Pull to refresh
0
Rating

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

Айкен corporate blog
Translation
Original author: Jacob


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

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

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

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

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

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

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


Должны признаться, что мы никогда не задумывались о них до того момента, как мы получили сообщение об успешном выполнении от сайта 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% своего выбора цветов для текстовых сообщений, что делает всё ещё более запутанным, а постоянство, вместе со следованием определенным общепринятым правилам, является ключевым моментом.

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


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

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

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

Как мы говорили раньше: «Постройте его и они придут. Постройте его хорошо, и они вернутся», и, в конце концов, разве это не то, чего мы все добиваемся?
Tags: юзабилитицветвеб-дизайн
Hubs: Айкен corporate blog
Total votes 51: ↑46 and ↓5 +41
Comments 42
Comments Comments 42

Top of the last 24 hours

Information

Founded
Location
Украина
Website
aiken.ua
Employees
11–30 employees
Registered