Особливості дизайну веб форми: Колір

18

Від автора: нижче наводиться короткий уривок з книги Розробка UX: Форми, написаної Джесікою Ендерс. Це повне керівництво, в якому представлена розробка і дизайн веб форм, ключовий елемент ефективного UX. Передплатники плану SitePoint Premium мають можливість отримати доступ до неї безпосередньо, або ви можете придбати примірник в магазинах по всьому світу.

На даний момент наша форма не містить різноманітних кольорів:

Особливості дизайну веб форми: Колір

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

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

Особливості дизайну веб форми: Колір

Ця дуже яскрава форма насправді більш відразлива і заплутана, ніж весела. Деякі кольори можуть навіть негативно впливати на користувача:

Особливості дизайну веб форми: Колір

Отруйні кольори в цій формі можуть дратувати очі деяких людей.

Будьте дуже обережні при виборі кольору

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

Особливості дизайну веб форми: Колір

Важливі повідомлення, такі як повідомлення про помилку:

Особливості дизайну веб форми: Колір

Посилання:

Особливості дизайну веб форми: Колір

Індикатори прогресу заповнення:

Особливості дизайну веб форми: Колір

Рубрики:

Особливості дизайну веб форми: Колір

Фон форми:

Особливості дизайну веб форми: Колір

Елементи брендингу, наприклад, логотипи і стандартні заголовки:

Особливості дизайну веб форми: Колір

Можливо, ви помітили, що я не включив у цей список червону зірочку, що позначає обов’язкові для заповнення поля (*). Це пов’язано з тим, що я не рекомендую використовувати червоні зірочки для зазначення обов’язкових для заповнення полів. Додаткову інформацію див. нижче в розділі «Обов’язкові і необов’язкові поля».

Також зверніть увагу, що в кожному з наведених вище прикладів в цілому використовується дуже мало кольору. Чим більше кольору ви використовуєте, тим менше від цього користі:

Особливості дизайну веб форми: Колір

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

Які кольори слід використовувати?

Зазвичай компанія має палітру кольорів, на яку ви можете посилатися. Для мого Enders Bank блідо-зелений колір є основним, як ви можете бачити на зображенні нижче. Давайте використаємо цей колір, щоб виділити основну кнопку дії в нашій формі:

Особливості дизайну веб форми: Колір

Тепер ми поставили для форми колір.

Дальтонізм

Різні джерела наводять різні цифри, але цілком ймовірно, що у 4-10% користувачів вашої веб-форми може бути присутнім деякий недолік у здатності сприймати кольору (зазвичай, але неточно, званий дальтонізмом). Найбільш поширена форма дальтонізму — червоно-зелений, коли людині важко розрізняти ці два кольори.

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

Особливості дизайну веб форми: Колір

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

Набагато кращий підхід — просто сказати людям, які поля є необов’язковими (як описано в розділі «Обов’язкові і необов’язкові поля нижче):

Особливості дизайну веб форми: Колір

Аналогічно, повідомлення про помилки повинні супроводжуватися символами або затінення тла, а не тільки виділятися червоним кольором тексту (див. главу 5 «Валідація»):

Особливості дизайну веб форми: Колір

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

Ми дальтоніки

«Доступність квітів»

Колірна контрастність

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

Особливості дизайну веб форми: Колір

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

Особливості дизайну веб форми: Колір

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

Особливості дизайну веб форми: Колір

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

«Інтеграція перевірки контрастності в процес веб-розробки»

«Три поширені помилки розробників: Колірний контраст»

І краще дотримуйтеся поєднання темно-сірий або чорний на білому фоні:

Особливості дизайну веб форми: Колір

Кольори в нашій формі досить контрастні.