By Viacheslav Mykhailov in Дизайн-Ґайди — 14 квіт 2023 р.

Кольори в UX дизайні: підбір і взаємодія

Color/Pattern Practice by Visual Jams on Dribbble

Веб-дизайнери та дизайнери користувацького інтерфейсу (UI/UX) використовують кольори у своїй роботі, щоб привернути увагу до елементів інтерфейсу, підвищити впізнаваність бренду та покращити сприйняття користувачів. Вибір кольорової палітри може суттєво вплинути на весь процес, оскільки різні кольори можуть викликати різні емоції та настрій у користувачів.

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

І. Кольорові моделі

Кольорові моделі — це системи, що використовуються для визначення кольору. Вони визначають, які кольори можуть бути створені та як вони можуть бути відображені.

RGB (Red, Green, Blue) — це адитивна кольорова модель, яка використовується для створення кольорів на екрані. Один з найпоширеніших типів кольорової моделі; використовується для створення кольорів на екранах та базується на комбінації трьох основних кольорів: червоного, зеленого та синього. Ці кольори комбінуються в різних пропорціях, щоб створити мільйони кольорових комбінацій. RGB широко використовується в візуальному діджитал дизайні.
CMYK (Cyan, Magenta, Yellow, Key) — це субтрактивна кольорова модель, яка використовується для друку. Базується на комбінації кольорових фарб: голубого, пурпурного, жовтого та чорного. CMYK зазвичай використовується для друку брошур, листівок, журналів та інших друкованих матеріалів.
HSL (Hue, Saturation, Lightness) — це кольорова модель, яка базується на трьох основних властивостях кольору: відтінку, насиченості та світлоcті. Вона використовується для вибору кольорової палітри для веб-дизайну та дизайну користувацьких інтерфейсів. HSL дозволяє відбирати та змінювати кольори з більшою точністю та гнучкістю.

*things in boxes by Jason K Yun on Dribbble*

II. Властивості кольорів

Знання властивостей кольорів може допомогти дизайнерам правильно підібрати кольорову палітру для веб-сайтів та мобільних додатків. Ось деякі приклади кольорів та їх асоціацій у бізнес-доменах:

Синій колір асоціюється зі стабільністю, довірою та професіоналізмом. Часто використовується в фінансових та банківських послугах, наприклад в мобільному додатку Revolut, де він підсилює враження надійності та безпеки.
Жовтий колір може бути використаний, щоб привернути увагу до акційних пропозицій та стимулювати дії користувачів. Наприклад, в мобільному додатку AliExpress, жовтий колір використовується для позначення знижок та акцій.
Зелений колір асоціюється зі здоров’ям, екологією та зростанням. Він може бути використаний у веб-дизайні, щоб показати екологічну свідомість бренду. Наприклад, в мобільному додатку ECO Planet, зелений колір використовується для показу природних елементів та продуктів з екологічного виробництва.
Червоний колір може викликати емоційний зв’язок з аудиторією та створити враження терміновості та важливості. Наприклад, в мобільному додатку Uber, червоний колір використовується для кнопки «Замовити» і підсилює враження швидкості та надійності.

III. Кольорові комбінації

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

Аналогова гармонія

Комбінація кольорів, які знаходяться поруч один з одним на колірному колесі.

Синій, фіолетовий та рожевий колір у додатку Instagram використовуються в аналоговій гармонії для створення враження м’якості та спокою.

Комплементарна гармонія

Комбінація протилежних кольорів на колірному колесі.

Синій та помаранчевий колір у мобільному додатку Spotify використовуються для привернення уваги користувача та забезпечення відчуття жвавості та енергії.

Триадна (потрійна) гармонія

Комбінація трьох кольорів, які знаходяться на рівних відстанях один від одного на колірному колесі.

Жовтий, синій та червоний колір у веб-сайті Adobe використовуються в триадній гармонії, щоб підкреслити відчуття моці та стабільності бренду.

Монохромна гармонія

Комбінація кольорів, які відрізняються лише за насиченістю та яскравістю.

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

Додаткова гармонія

Комбінація кольорів, які знаходяться на протилежних боках колірного колеса.

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

Тетрадна (подвійна) гармонія

Комбінація кольорів, які знаходяться на відстані 60 градусів один від одного на колірному колесі.

Синій, зелений та червоний колір у мобільному додатку Fitbit використовуються в тетрадній гармонії, щоб підкреслити динамічність та енергію бренду.

Акварельна гармонія

Комбінація кольорів, які знаходяться поруч один з одним, але мають різну насиченість.

Різні відтінки синього та зеленого колору використовуються в акварельній гармонії на веб-сайті Apple, щоб підкреслити чистоту та свіжість бренду.

Спокійна гармонія

Комбінація кольорів, які мають подібну насиченість та яскравість.

Блакитний та сірий колір використовуються в спокійній гармонії на веб-сайті Slack, щоб підкреслити простоту та глибину бренду.

IV. Інструментарій та фактори

При підборі кольорових комбінацій дизайнери можуть використовувати різні інструменти для допомоги в цьому процесі.

Сервіс Color Hunt пропонує безкоштовні кольорові палітри, які можна використовувати в UX дизайні.
Сервіс Paletton дозволяє вибрати кольорову схему, враховуючи особливості бренду компанії та її цільової аудиторії.
Сервіс Coolors дозволяє швидко і легко підібрати кольорову палітру для проєкту, а також встановлювати правила їх взаємодії.

Крім того, різні дизайн-інструменти, такі як Adobe Photoshop, Sketch, Figma, мають вбудовані функції кольорового підбору, які дозволяють швидко вибрати кольорову палітру для проєкту.

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

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

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

V. Використання навколишнього середовища

*AR — Museum guide by Pegah Navid on Dribbble*

Колір може бути використаний не тільки в межах дизайну, але й у поєднанні з навколишнім середовищем, щоб доповнити користувацький досвід.

Коли користувач переглядає веб-сайт або мобільний додаток зі свого смартфона вночі, білий фон може дуже різко відчуватися на тлі темряви. Щоб зменшити рівень незручності для очей користувача, дизайнер може використати темний фон або пом’якшені кольори, щоб створити більш комфортну атмосферу.

Також важливо враховувати ефект фреймінгу (англ. framing effect) при використанні кольорів у дизайні.

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

Використання контрастних кольорів навколо кнопки «Купити» може зробити її більш помітною та залучити увагу користувача.

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

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

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

VI. Доступність

Щоб забезпечити доступність використання кольорів в дизайні інтерфейсів, рекомендую звернути увагу на наступне:

Використовуйте достатню контрастність між кольорами.
Це дозволяє людям з різними типами кольорового сприйняття легко розрізняти елементи інтерфейсу. Як правило, рекомендується використовувати контраст між текстом і фоном не менше 4,5:1.
Уникайте використання кольору як єдиного способу передачі інформації.
Наприклад, якщо вам потрібно позначити обов’язкові поля для заповнення на формі, краще використовувати додаткові знаки або текст, а не просто забарвлення поля.
Враховуйте можливість деяких людей не розрізняти деякі кольори.
Наприклад, люди з дальтонізмом можуть не відрізнити червоний і зелений кольори, тому не слід використовувати ці кольори як позначення для операцій, що вимагають спеціальної уваги.
Використовуйте різні способи позначення даних залежно від їх важливості.
Наприклад, якщо вам потрібно позначити, які елементи є обов’язковими для заповнення, використовуйте більш насичений кольори або жирний шрифт.
Тестуйте доступність кольорів вашого інтерфейсу з різними інструментами.
Це дозволить вам перевірити, наскільки добре розрізняються кольори в вашому дизайні.

Для того, щоб провести певні тести можу порекомендувати кілька інструментів. Наприклад, Color Contrast Checker дозволяє перевірити контрастність кольорів, яка повинна відповідати WCAG 2+ (Web Content Accessibility Guidelines) для забезпечення доступності веб-сайтів. Іншим інструментом є Accessibility Scanner, який допомагає виявити проблеми з доступністю на мобільних пристроях.

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

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

VII. Поради і перевірка

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

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

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

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

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

VIII. Висновок

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

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

Щось ця стаття далась мені особливо тяжко... Дякую за терпіння і підтримку, побачимось наступного тижня!Як завжди, буду вдячний за конструктивну критику :)