Колір як інструмент забезпечення зручності вебсайту

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

Чимало важливих принципів роботи з кольором у графічному дизайні ми описали в матеріалі «Робота з кольором в дизайні».

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

Почнемо з того, з чого доводиться починати і вебдизайнерам при створенні палітри — з роботи з тлом.

Вибір кольору для тла сайту

Кольори тла сайту — це завжди важлива складова палітри.

Адже те, наскільки вдало (чи невдало) дизайнер обирає кольори для тла суттєво впливає на досвід користувача. І рішення про те, які кольори тла є комфортними для сприйняття, близько пов’язане з тим, які кольори дизайнер обирає для змісту. Адже тло і зміст завжди працюють спільно.

Часто дизайнери, підбираючи кольори, прагнуть досягти яскравості. Вони обирають «небанальний» колір тла і «яскравий» колір змісту. Виходить щось на кшталт:

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

При цьому кольори цілком можуть пасувати один одному відповідно до колірного кола Іттена, але для комфортності цього недостатньо.

Щоб контраст змісту і тла став комфортним для сприйняття слід обирати пари кольорів, що мають високий контраст за освітленістю (це параметр Brightness в моделі кольорів HSB).

Чим цей контраст сильніший, тим комфортніше сприйматимуться пари кольорів.

Як обирати зображення для тла

Часом дизайнери хочуть для кращої ілюстративності додати на тло зображення.

Звісно, це можна робити. Але сюжет на тло слід обирати свідомо.

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

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

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

Маски й затемнення

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

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

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

Якщо ви дійсно вважаєте зображення корисним та доречним — не варто ховати його за затемненням. Можливо, слід додати його окремою ілюстрацією?

Це не значить, що затемнюючі маски взагалі не слід застосовувати у вебдизайні.

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

Повітряна перспектива у вебдизайні

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

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

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

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

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

Зонування кольором

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

Який принцип вибору кольорів слід застосовувати в такому випадку? Ми рекомендуємо застосовувати принцип контрасту відповідно до спорідненості. Тобто, чим більшою є відмінність елементів за змістом чи функціями — тим сильніший контраст слід застосовувати.

Наприклад, для окремих смислових блоків великої статті можна використовувати слабкий контраст.

А от для тла меню, форми та описової частини сторінки можна використовувати сильніший контраст.

Якщо композиція дозволяє, можна зонувати зміст простими відступами між елементами.

А от функціональні елементи (форми та меню) часто корисно зонувати, просто з акцентної точки зору.

Кольори функціональних елементів

Ще одна група елементів, для яких вам доводиться обирати кольори — це функціональні елементи (поля форм, кнопки посилання тощо).

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

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

Наприклад, червоний колір за замовчуванням ми часто сприймаємо як колір заборони чи небезпеки. Жовтий — як попередження. Зелений — як колір заохочення, дозволу. А синій — як нейтральний.

Звісно, ви не зобов’язані дотримуватись саме такої системи асоціацій. Але корисно враховувати будь-який попередній досвід користувача при створенні колірної палітри.

Денна та нічна тема оформлення

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

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

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

Власне, темну тему ще часто називають нічною (бо для більшості користувачів вона є доречною у вечірній час), а світлу — денною (бо її комфортніше сприймати вдень).

Принципи інклюзивності у роботі з кольором

Обираючи кольори для вебсайтів, важливо пам’ятати і про вебдоступність.

Це сукупність принципів проєктування, що робить сприйняття сайту більш комфортним для людей, які мають певні фізичні вади. В контексті кольорів — це часткова чи повна колірна сліпота (тобто, нездатність людини розрізняти окремі чи всі кольори).

Докладно принципи вебдоступності описані в настановах Web Content Accessibility Guidelines (WCAG) 2.0.

У цьому матеріалі ми звертаємо увагу на декілька загальних рекомендацій:

  • Для вебсайтів не варто використовувати надто різнобарвні палітри в оформленні функціональних елементів.
  • Пам’ятайте, що частина ваших користувачів частково або повністю не розрізняє кольори, тому на функціональних елементах варто розмістити підказки чи іконки, які допоможуть сприймати контекст використання кнопки чи поля форми.
  • Щоб зрозуміти, як сприйматимуть ваш сайт люди з колірною сліпотою, можна використовувати спеціальний симулятор Coblis (від англ. Color blindness simulator). https://www.color-blindness.com/coblis-color-blindness-simulator/
  • Намагайтесь обирати для тла, змісту та функціональних елементів комбінації кольорів, що мають високий контраст. З цим вам може допомогти інструмент Color Safe — http://colorsafe.co/ 
·
3253
·
4
·
goodsuper 48
Наступна стаття
Відгук та емоційність сайту
1338
Головна