Від автора: нижче наводиться короткий уривок з книги Розробка UX: Форми, написаної Джесікою Ендерс. Це повне керівництво, в якому представлена розробка і дизайн веб форм, ключовий елемент ефективного UX. Передплатники плану SitePoint Premium мають можливість отримати доступ до неї безпосередньо, або ви можете придбати примірник в магазинах по всьому світу.
На даний момент наша форма не містить різноманітних кольорів:
На цьому етапі єдиними кольоровими елементами у формі є логотип і червоні зірочки, що вказують на обов’язкові для заповнення поля. Для даної частини процесу розробки так і повинно бути. Зараз я поясню, чому.
Використання великої кількості різних кольорів в спробі зробити форму більш «веселої» або «цікавою», насправді може погіршити досвід користувача:
Ця дуже яскрава форма насправді більш відразлива і заплутана, ніж весела. Деякі кольори можуть навіть негативно впливати на користувача:
Отруйні кольори в цій формі можуть дратувати очі деяких людей.
Будьте дуже обережні при виборі кольору
Люди неймовірно чутливі до кольору. Наш мозок обробляє його, навіть не усвідомлюючи цього. У формах ми можемо використовувати цю особливість людської біології в своїх інтересах. Визначте кольору для елементів, які насправді потрібно виділити. Ось деякі частини форми, які при виділенні кольором будуть працювати краще:
Важливі повідомлення, такі як повідомлення про помилку:
Посилання:
Індикатори прогресу заповнення:
Рубрики:
Фон форми:
Елементи брендингу, наприклад, логотипи і стандартні заголовки:
Можливо, ви помітили, що я не включив у цей список червону зірочку, що позначає обов’язкові для заповнення поля (*). Це пов’язано з тим, що я не рекомендую використовувати червоні зірочки для зазначення обов’язкових для заповнення полів. Додаткову інформацію див. нижче в розділі «Обов’язкові і необов’язкові поля».
Також зверніть увагу, що в кожному з наведених вище прикладів в цілому використовується дуже мало кольору. Чим більше кольору ви використовуєте, тим менше від цього користі:
У цій формі колір використовується майже для кожного елемента, тобто жоден з них не виділяється.
Які кольори слід використовувати?
Зазвичай компанія має палітру кольорів, на яку ви можете посилатися. Для мого Enders Bank блідо-зелений колір є основним, як ви можете бачити на зображенні нижче. Давайте використаємо цей колір, щоб виділити основну кнопку дії в нашій формі:
Тепер ми поставили для форми колір.
Дальтонізм
Різні джерела наводять різні цифри, але цілком ймовірно, що у 4-10% користувачів вашої веб-форми може бути присутнім деякий недолік у здатності сприймати кольору (зазвичай, але неточно, званий дальтонізмом). Найбільш поширена форма дальтонізму — червоно-зелений, коли людині важко розрізняти ці два кольори.
Враховуючи це, ви ніколи не повинні покладатися виключно на колір, коли маєте намір повідомити щось у веб-формі. У наведеній нижче формі використовується червоний текст для підписів обов’язкових для заповнення полів і чорний текст для підписів необов’язкових полів. Жахливо, якщо хтось не можете відрізнити червоне від чорного! Не кажучи вже про те, як ця форма буде виглядати з повідомленнями про помилки для тих, хто добре розрізняє кольори.
Колір — єдиний компонент в цій формі, з допомогою якого позначені обов’язкові для заповнення поля, що робить форму недоступною для багатьох користувачів.
Набагато кращий підхід — просто сказати людям, які поля є необов’язковими (як описано в розділі «Обов’язкові і необов’язкові поля нижче):
Аналогічно, повідомлення про помилки повинні супроводжуватися символами або затінення тла, а не тільки виділятися червоним кольором тексту (див. главу 5 «Валідація»):
Символ знака оклику означає, що користувачі можуть візуально розпізнати — це повідомлення про помилку, навіть якщо у них є проблема з сприйняттям кольорів. Якщо ви хочете дізнатися більше про дальтонізмі, є кілька відмінних веб-ресурсів на цю тему, включаючи симулятори:
Ми дальтоніки
«Доступність квітів»
Колірна контрастність
Але є ще дещо гірше того, щоб покладатися виключно на колір для спілкування з користувачем — недостатня колірна контрастність. Відсутність достатнього контрасту кольорів, не дозволить чітко бачити різні елементи форми навіть тим з нас, хто володіє хорошим зором:
Зелений фон форми надто зливається з зеленим тлом полів, і обидва зелених занадто схожі на білий, використовуваний для тексту. А це приклад дуже великого розкиду гами кольорів, що порушує загальну естетику і ускладнює сприйняття форми користувачем. І в наші дні таке зустрічається дуже часто:
Ви можете розрізняти поля в цій формі, але прочитати мітки дуже складно. Особливо поширеним контрастним поєднанням на сьогоднішній день є використання світло-сірого на білому тлі. Оскільки це робить сайти виглядають чистими і мінімалістичним, ця колірна комбінація досить поширена. Шкода, що вона абсолютно непридатна:
Елементи форми мають бути досить контрастними. Щоб домогтися цього, я рекомендую вам ознайомитися з такими ресурсами:
«Інтеграція перевірки контрастності в процес веб-розробки»
«Три поширені помилки розробників: Колірний контраст»
І краще дотримуйтеся поєднання темно-сірий або чорний на білому фоні:
Кольори в нашій формі досить контрастні.