Мы читаем цвет раньше текста
Как цвет меняет смысл сообщений в интерфейсе
Что вы почувствовали? Секундную тревогу?
А теперь? Неужели облегчение?
Вы уже знали ответ. Вы поняли это до того, как успели прочитать буквы.
Красный уже предупредил вас. Зелёный уже успокоил.
Но откуда вы вообще знаете, что красный — это плохо, а зелёный — хорошо?
КРАСНЫЙ
В интерфейсе — ошибка. На биржах Китая, Японии и Кореи — рост.
ЗЕЛЁНЫЙ
В интерфейсе — успех. На тех же биржах — падение.
ЖЁЛТЫЙ
Предупреждение. На светофоре — «приготовьтесь».
СИНИЙ
Ссылка и справка. В Риме синий считали цветом варваров, а сегодня европейцы в опросах чаще всего называют его любимым.
Сам по себе цвет ничего не значит. Его значение — договорённость.
Возможно, мы читаем цвет раньше текста.
Но читаем ли мы сам цвет — или то значение, которому нас научили?
С чего начнём чтение?
Цвет здесь подсказывает, но смысл всегда дан подписью и значком.
Почему мы замечаем цвет раньше слов?
Почему мы вообще успеваем среагировать на цвет раньше, чем прочитать слово?
Что вы видите? Красное пятно.
Вы уже решили, что это опасно, — не видя самого предмета. Только цвет и размытый силуэт. Остальное мы достраиваем сами.
Контуры проступают…
Это помидор. Мы сами себя напугали.
Цвет, контраст, движение и форму мозг выхватывает раньше, чем мы успеваем направить внимание.
Но «заметить» не значит «понять»: цвет сообщает, куда смотреть, а не что это значит.
Наше восприятие работает не как книга:
В 1935 году Джон Ридли Струп нашёл асимметрию: слово мешает назвать цвет, а цвет почти не мешает прочитать слово. Взрослый человек читает так автоматически, что не может это выключить.
Мы привыкли, что цвет помогает быстро понять ситуацию. Но именно поэтому он может начать спорить с текстом.
Мы можем получать визуальный сигнал ещё до того, как успеваем осознанно прочитать сообщение.
Отсюда популярная идея, что красный сам по себе тревожит и даже снижает результаты тестов. Её проверили: мета-анализ 2020 года не нашёл надёжного эффекта. Красный работает не как кнопка в мозге, а как выученный сигнал.
В природе красный не означал «заказ отменён».
Но здесь начинается проблема.
Мы сами научили его этому.Как мы вообще научились понимать эти цифровые цветовые правила?
ответ — в истории красного
Мы не рождаемся со словарём интерфейсных цветов
Мы привыкли думать, что всё очевидно.
Красный, зелёный, синий кажутся очевидными. Но даже само представление о том, что такое цвет и как его понимать, менялось на протяжении истории.
IV век до н. э. Аристотель объяснял цвета через взаимодействие света и темноты. Он представлял их как последовательность переходов между белым и чёрным, а не как спектр отдельных цветов, который мы знаем сейчас.
Для него цвет был связан с тем, как свет проявляется в окружающем мире. Его представления, с изменениями, оставались влиятельными на протяжении многих столетий.
XVII век. Исаак Ньютон провёл эксперименты с призмой и показал, что белый свет можно разложить на спектр цветов.
В 1704 году в «Оптике» он свернул спектр в круг. Но и здесь есть культура: сначала Ньютон различал пять цветов, а потом добавил оранжевый и индиго, чтобы их стало семь — как нот в гамме. Спектр непрерывен; число его цветов — решение человека.
Но круг Ньютона — не шкала хороших и плохих цветов. Он показывает порядок цветов спектра и помогает изучать их отношения.
Но на протяжении большой части европейской истории красный был совсем не «плохим» цветом.
Как показывает Мишель Пастуро в книге «Красный. История цвета», красный был одним из самых престижных цветов Средневековья.
Престиж был буквально дорогим. Лучший красный давали насекомые: сначала кермес, а после завоевания Америки — кошениль. В XVIII веке ценнее неё из Мексики вывозили только серебро. Красная ткань была не просто цветом, а демонстрацией денег.
Он становился знаком положения человека.
Красный — особый цвет и для языков. В 1969 году Берлин и Кей заметили: если в языке всего три слова для цвета, то третье после «тёмного» и «светлого» почти всегда — красный.
Красный одновременно связывали с кровью, огнём, любовью, страстью, войной, религией. В христианской традиции он мог обозначать кровь Христа и мученичество, но рядом с этим существовали ассоциации с грехом и адским огнём.
природасвежестьжизнь
А зелёный?
Но исторически зелёный был гораздо менее однозначным.
Пастуро показывает его как цвет переменчивости: молодая трава, незрелый плод — то, что ещё изменится. У этого была и техническая причина: стойкой зелёной краски долго не существовало, а цеховые правила запрещали красильщикам смешивать синий с жёлтым. Зелёные ткани выцветали.
Поэтому зелёный связывали не только с жизнью и надеждой, но и с непостоянством, ядом, обманом. А в XIX веке модный зелёный пигмент для обоев и тканей действительно содержал мышьяк.
Даже границы между цветами проводит язык. В русском «синий» и «голубой» — разные слова, и в эксперименте Джонатана Винавера и коллег (2007) русскоязычные быстрее различали оттенки по разные стороны этой границы, чем англоязычные. Словарь цветов не врождённый: мы его наследуем вместе с языком и культурой.
Цветовой круг помогает понять отношения между цветами. История — понять отношения между людьми и цветами.
Но сегодня мы почти не сомневаемся, что красный в интерфейсе — это проблема, а зелёный — успех.
Почему?
Потому что мы видим эти сочетания снова и снова.
Интерфейс учит нас своему языку. И чем чаще мы им пользуемся, тем меньше замечаем, что вообще когда-то этому языку учились.
Но если интерфейс может научить нас, что красный — это ошибка, а зелёный — успех, то насколько легко он может научить нас другому?
Интерфейс учит нас читать цвет
Если значение цвета не является универсальным, откуда мы знаем, что зелёная кнопка означает успех, а красная — ошибку?
Нас этому учат.
Не словами и не инструкцией.
Впервые открывая новое приложение, мы ещё не знаем его визуального языка.
Каждое «✓ Готово» на зелёном — маленький урок. После тысячи повторений связь закрепляется сама.
Каждый раз происходит примерно одно и то же: зелёный появляется рядом с положительным результатом.
И в следующий раз, когда мы увидим просто цвет, нам уже не обязательно читать весь текст, чтобы предположить:
«Всё в порядке».
То же самое происходит с красным.
Красный снова и снова появляется там, где нужно остановиться. Эта грамматика старше компьютеров: интерфейсы унаследовали её от железной дороги.
В 1830–40-х годах на железной дороге красный означал «стоп», зелёный — «осторожно», а белый — «путь свободен».
По распространённой версии, от белого отказались, когда выяснилось, что выпавшая красная линза превращает «стоп» в «путь свободен». «Можно» досталось зелёному по инженерной причине, а не потому, что он «спокойный». Сегодня мы читаем это решение в каждой кнопке — уже на автомате.
Цвет не только сообщает. Он ещё и удерживает.
В исследовании Университета Цинциннати (2022) около 220 студентов перевели телефоны в чёрно-белый режим и стали проводить в них в среднем на 39 минут в день меньше. Значки уведомлений, яркие иконки, красные точки работают как приманка, а без цвета экран становится просто инструментом.
Но есть одна проблема.
Нажмите на метку, чтобы вернуть «правильный» цвет.
Мы прекрасно понимаем слова. Но сообщения всё равно кажутся неправильными. Почему?
Потому что теперь два сигнала говорят одновременно:
текст говорит одно, а цвет — другое.
И мы оказываемся между ними.
Какому сигналу мы поверим первым?
Когда цвет спорит с текстом
А теперь поменяем цвета местами.
Что-то кажется неправильным.
Хотя текст понятен, цвет вызывает другое ощущение.
Текст говорит: «Всё хорошо».
Цвет говорит: «Обрати внимание, что-то не так».
Вы смотрите на слова: «всё хорошо».
Мы уже не просто читаем — мы сверяем два источника. Цвет захватывает взгляд, слово — смысл.
Цвет в интерфейсе не просто украшает текст. Он участвует в создании смысла.
Водите линзой по уведомлениям.
Но возникает новый вопрос: если один и тот же цвет может означать разные вещи, от чего зависит его значение?
красный сам по себе…
Цвет не существует сам по себе. Его смысл появляется только внутри контекста.
Один цвет — разные смыслы
Что означает этот цвет?
дальше — мини-ситуации
Один цвет.
Но совершенно разные сообщения.
Проблема не в самом цвете.
Значение появляется из связи:
красный — только оттенок
магазин, банк, дорога, игра
что мы уже видели раньше
цвет + ситуация + опыт человека = значение
То же самое происходит в интерфейсах.
Мы не знаем заранее, что означает каждый цвет. Мы учимся правилам конкретной системы.
Красный в банке пугает, а красный ценник радует. Меняется не цвет, а правило, которое мы к нему применяем.
Мы читаем не сам цвет. Мы читаем значение, которое научились за ним видеть.
Если цвет зависит от контекста, может ли интерфейс передать смысл только с помощью цвета?
Цвет помогает читать, но не может говорить один
Что будет, если оставить только цвет?
Что оно означает?
Есть причина ещё важнее контекста: примерно у 8% мужчин нарушено различение красного и зелёного. Поэтому стандарт доступности WCAG запрещает передавать смысл только цветом. Хороший интерфейс дублирует сигнал:
Включайте слои по одному.
Цвет помогает нам быстрее заметить сообщение,
но именно текст и контекст помогают понять его значение.
Так действительно ли мы понимаем значение цвета?
Да, но не потому, что у каждого цвета есть своё универсальное значение.
Мы понимаем цвет, потому что научились его читать.
Сначала через культуру и историю.
Потом через цифровые интерфейсы.
Каждый день мы встречаем одни и те же визуальные правила — и начинаем читать их автоматически.
Мы читаем цвет раньше текста.
Но мы читаем не сам цвет.
Мы читаем смысл, который научились за ним видеть.
цвет — раньше слов
всё, чему нас учили интерфейсы, — в одном взгляде
Цвет говорит первым.
Смысл договаривают слова.
Красный не означает «ошибка», а зелёный не означает «успех». Эти значения мы выучили — в истории, культуре и тысячах экранов. Поэтому хороший интерфейс никогда не доверяет смысл одному цвету.
Игры: поиграйте ещё
Это плохая новость?
Один и тот же серый. Четыре окружения.
Смотрите на квадраты. Кажется ли, что серые — разные?
Назовите цвет, а не слово
Нажимайте кнопку того цвета, которым написано слово. Сначала 8 слов, где цвет и смысл совпадают, потом 8 слов, где они спорят. Отвечайте как можно быстрее.
Нажмите на цвет, которым НАПИСАНО слово, а не на то, что в нём сказано. 8 раундов.