Зрозумілий, доречний, доступний — колір в дизайні інтерфейсів

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Всім привіт! Мене звати Настя, я Senior Experience Designer в компанії EPAM. З кольором я працюю вже близько 9 років, з них останні 5 — в контексті UX дизайн практики.

Колір, мабуть, один з найбільш неоднозначних інструментів для відтворення інформації. Ми починаємо працювати з ним ще у дитинстві, і там все так просто: у тебе є 12 кольорових олівців і ти точно знаєш, що сонце жовте, а трава зелена. Але що робити, коли ти можеш використати близько 16 мільйонів кольорів (точніше 16 777 216 колірних кодів HEX), а тобі потрібно проілюструвати дуже абстрактні речі?

Нижче я опишу основні принципи застосування кольору, які допомагають особисто мені не розгубитися. Ця стаття не претендує на вичерпність в темі кольорознавства чи теорії кольору, проте допоможе порефлексувати, чому інколи буває так складно підібрати правильний колір.

Колір як код

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

Здавалося б, достатньо взяти правильний колір і застосувати його в правильному місці. Проте проблема полягає в тому, що колір — це багатовимірна характеристика, вона може одночасно нести різний тип інформації: позначати об’єкт, вимірювати величину, відображати чи імітувати реальність, декорувати та викликати емоцію.

Едвард Тафті в «Представленні інформації» наводить гарний приклад багатовимірності кольору на основі топографічних карт. Ось мій дещо схожий, проте спрощений, приклад на основі Google Maps і її модифікацій.

1. Колір маркує обʼєкт, надає читачеві розуміння, що це взагалі таке. Нам, до прикладу, зрозуміло, що є дві великі зони: одна — синього кольору, ймовірно, вода, друга — зеленого, суходіл. Це зображення можна було б передати за допомогою обмеження зон лініями, проте в такому випадку нам необхідне додаткове буквене кодування сутності позначеної зони і, відповідно, більше часу на прочитування. Колір економить наш час.

2. Колір дозволяє візуально оцінити абсолютну або відносну кількість. Зона зеленого кольору неоднорідна, вона змінюється за насиченістю. Цілком ймовірно, що суходіл — це не рівнина, а горбистий рельєф, причому що вище чи глибше, то насиченіший колір застосовано. Цікаво, що зона води заповнена одним кольором, бо рельєф дна моря чи океану ніяк не впливає на пересування користувача в реальному світі, увесь наводний транспорт рухається поверхнею води, а отже, ця додаткова інформація зайва.

3. Колір відображає чи імітує реальність і полегшує цим сприйняття. Зони білого кольору на карті інтуїтивно прочитуємо як сніг, розуміємо, що це вершини гір. Білий колір для позначення снігу — логічний та простий вибір, бо сніг в природі білий. Ми, звісно, можемо заповнити зону будь-яким іншим кольором, але навряд чи користувач карти зрозуміє нове позначення з такою ж легкістю.

4. Колір як декор візуально оживляє інформацію, прикрашає її, заохочує глядача розглядати зображення. На відміну від ідентичного чорно-білого варіанту, кольорова версія видається цікавішою та більш приємною.

5. Колір несе в собі привід для емоції в того, хто прочитуватиме зображення. Ще не розуміючи цілком, яка саме інформація закодована, глядач підсвідомо відчуває емоцію. Карта барвиста, проте не надто яскрава, в ній багато елементів, але вони спокійно взаємоіснують і заохочують розглядати деталі.

Якщо форма слідує за функцією, то за чим слідує колір?

«Форма наслідує функцію» — відомий принцип в дизайні, пов’язаний з архітектурою кінця XIX та початку XX століття та промисловим дизайном загалом. Він стверджує, що форма об’єкта повинна в першу чергу відповідати його функції. У контексті UX дизайну цей принцип часто означає, що спочатку необхідно зрозуміти, яку функцію виконує система чи її елемент, а вже потім працювати над формою на основі функціональних вимог.

Де знаходиться колір в цьому «рівнянні»? Колір не наслідує форму, тобто він може залежати від неї, а може і ні. Що більш абстрактну сутність позначає об’єкт, то менше його форма впливає на вибір кольору.

Колір часто залежить від функції об’єкта, але також не завжди.

Проте колір завжди підпорядкований загальній ідеї. Ідея чи задум часто містить в собі щось більше, ніж просто дати можливість користувачеві виконати основні функції, мова йде також про призначення, ідентичність, бренд, стиль, тяглість в часі, унікальність тощо. Ідея надає причину для вибору, дозволяє залишатись послідовним та аргументовано опиратись суб’єктивним смаковим поглядам стейкхолдерів, якщо ті суперечать їй. Тож перед тим, як приступати до дизайну намагаємося чітко і зрозуміло визначити та описати загальну ідею.

Перш за все — не нашкодь

Один колір — це багато різної інформації. Що більше кольорів задіємо, то складніше буде з ними вправлятися, адже окрім транслювання власних закодованих сенсів, вони починають взаємодіяти між собою, часто створюючи нові значення. Більше 20-30 кольорів радше зашкодить системі, аніж допоможе їй.

«Сім разів подумай, один раз додай новий колір» — щоразу збільшуючи кількість кольорів в системі, згадуємо, що нам радить той таки Тафті: «Above all, do no harm». Кожен колір (до прикладу, в дизайн-системі) повинен бути аргументованим і логічним. Якщо ми прибираємо колір і це ніяк не впливає на загальну картину, значить цей колір зайвий.

Взаємодія кольорів

Колір — активний учасник композиції на рівні з формою об’єктів. Ми можемо створити ритмічний або метричний ряд, додати динаміки чи, навпаки, підтримати статичність зображення — і все за допомогою кольорів. При чому кількісно їх повинно бути не менше трьох: колір фону та два кольори, що чергуються.

Контраст кольорів дозволяє виділити один об’єкт на фоні іншого, розділити інформацію на категорії за пріоритетністю: «важливе», «неважливе». Максимальна диференціація дозволяє швидше і ефективніше зчитувати інформацію — наш мозок любить відмінності. Тому великі площі заднього фону базових кольорів (білий, світло-сірий, чорний) добре поєднуються з меншими яскравими площами контенту, виділяють їх та дозволяють легко зчитати.

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

Колір і типографія

Типографічні елементи загалом мають мало спільного з кольором. Історично в друкарському мистецтві основа всього — чорний текст на білому фоні. В дизайні інтерфейсів все дуже схоже: чорний, а також відтінки сірого та синього є найпоширенішими кольорами для відображення тексту. Будь-які додаткові експерименти з кольором тут рідко можна назвати виправданими.

Цікавий момент: в перших друкованих книгах червоний (яскравий та світлий) в невеликій кількості інколи протиставлений великому масиву чорного кольору. При чому найкращий ефект зберігається, коли червоний є саме в малій кількості відносно чорного.

Доступність

Будь-яка інформація, яку ми передаємо користувачеві через екран, повинна перш за все бути доступною. Сприйняття кольору може змінюватись, залежно від того, хто на нього дивиться. Такі зміни через сприйняття є, хоч і не частою, проте все ж загрозою правильному зчитуванню інформації. Декілька порад в такому випадку:

1. Не покладати відображення важливих елементів лише на колір, додавати текстовий опис.
2. Користуватись міжнародними стандартами доступності інтерфейсу, навіть, якщо це не прописано у вимогах клієнта. Наприклад, WCAG 2.1.
3. Перевіряти комбінації кольорів на коефіцієнт контрастності, особливо для тексту, але не лише. WCAG 2.0 рівня AA вимагає коефіцієнта контрастності принаймні 4,5:1 для звичайного тексту та 3:1 для великого тексту. WCAG 2.1 вимагає коефіцієнта контрастності принаймні 3:1 для компонентів інтерфейсу користувача. WCAG рівня AAA вимагає коефіцієнта контрастності принаймні 7:1 для звичайного тексту та 4,5:1 для великого тексту.

Отже, підсумуємо

• Колір — це одночасно різний тип інформації: означення, кількість, відображення або імітація реальності, декорація, емоція.
• Щоб впевнено і послідовно обирати колір, намагаємося зрозуміти загальну ідею продукту, над яким працюємо.
• Що більше кольорів, то складніше працювати. Обережно додаємо кожен новий колір, шукаємо логічне підґрунтя для цього.
• Кольори класно взаємодіють між собою за законами композиції: ритм, метр, контраст, акцент. Користуємося цим.
• Скептично оцінюємо власні експерименти з кольором тексту.
• Пам’ятаємо про доступність. Посилаємося на міжнародні стандарти доступності під час вибору кольору.

Ну і, зрештою, більш впевнено працювати з кольором мені також допомагає надивленість, рефлексія стосовно власних попередніх дизайн-рішень та юзер-тестування.