От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка и дизайн веб форм, ключевой элемент эффективного UX. Подписчики плана SitePoint Premium имеют возможность получить к ней доступ напрямую, или вы можете приобрести экземпляр в магазинах по всему миру.
На данный момент наша форма не содержит разнообразных цветов:
На этом этапе единственными цветными элементами в форме является логотип и красные звездочки, указывающие на обязательные для заполнения поля. Для данной части процесса разработки так и должно быть. Сейчас я объясню, почему.
Использование большого количества различных цветов в попытке сделать форму более «веселой» или «интересной» может на самом деле ухудшить опыт пользователя:
Эта очень яркая форма на самом деле более отталкивающая и запутанная, чем веселая. Некоторые цвета могут даже негативно воздействовать на пользователя:
Ядовитые цвета в этой форме могут раздражать глаза некоторых людей.
Будьте очень осторожны при выборе цвета
Люди невероятно чувствительны к цвету. Наш мозг обрабатывает его, даже не осознавая этого. В формах мы можем использовать эту особенность человеческой биологии в своих интересах. Определите цвета для элементов, которые на самом деле нужно как-то выделить. Вот некоторые части формы, которые при выделении цветом будут работать лучше:
Важные сообщения, такие как сообщения об ошибке:
Ссылки:
Индикаторы прогресса заполнения:
Рубрики:
Фон формы:
Элементы брендинга, например, логотипы и стандартные заголовки:
Возможно, вы заметили, что я не включила в этот список красную звездочку, обозначающую обязательные для заполнения поля (*). Это связано с тем, что я не рекомендую использовать красные звездочки для указания обязательных для заполнения полей. Дополнительную информацию см. ниже в разделе «Обязательные и необязательные поля».
Также обратите внимание, что в каждом из приведенных выше примеров в целом используется очень мало цвета. Чем больше цвета вы используете, тем меньше от этого пользы:
В этой форме цвет используется почти для каждого элемента, то есть ни один из них не выделяется.
Какие цвета нам следует использовать?
Обычно компания имеет палитру цветов, на которую вы можете ссылаться. Для моего Enders Bank бледно-зелёный цвет является основным, как вы можете видеть на изображении ниже. Давайте используем этот цвет, чтобы выделить основную кнопку действия в нашей форме:
Теперь мы задали для формы цвет.
Дальтонизм
Разные источники приводят разные цифры, но вполне вероятно, что у 4-10% пользователей вашей веб-формы может присутствовать некоторый недостаток в способности воспринимать цвета (обычно, но неточно, называемый дальтонизмом). Наиболее распространенная форма дальтонизма — красно-зеленый, когда человеку трудно различать эти два цвета.
Учитывая это, вы никогда не должны полагаться исключительно на цвет, когда намереваетесь сообщить что-то в веб-форме. В приведенной ниже форме используется красный текст для меток обязательных для заполнения полей и черный текст для меток необязательных полей. Ужасно, если кто-то не можете отличить красное от черного! Не говоря уже о том, как эта форма будет выглядеть с сообщениями об ошибках для тех, кто хорошо различает цвета.
Цвет — единственный компонент в этой форме, с помощью которого обозначены обязательные для заполнения поля, что делает форму недоступной для многих пользователей.
Гораздо лучший подход — просто сказать людям, какие поля являются необязательными (как описано в разделе «Обязательные и необязательные поля» ниже):
Аналогично, сообщения об ошибках должны сопровождаться символами или затенением фона, а не только выделяться красным цветом текста (см. главу 5 «Валидация»):
Символ восклицательного знака означает, что пользователи могут визуально распознать — это сообщение об ошибке, даже если у них есть проблема с восприятием цветов. Если вы хотите узнать больше о дальтонизме, есть несколько отличных веб-ресурсов на эту тему, включая симуляторы:
Цветовая контрастность
Но есть еще кое-что хуже того, чтобы полагаться исключительно на цвет для общения с пользователем — недостаточная цветовая контрастность. Отсутствие достаточного контраста цветов, не позволит четко видеть различные элементы формы даже тем из нас, кто обладает хорошим зрением:
Зеленый фон формы слишком сливается с зеленым фоном полей, и оба зеленых слишком похожи на белый, используемый для текста. А это пример слишком большого разброса гаммы цветов, что нарушает общую эстетику и затрудняет восприятие формы пользователем. И в наши дни такое встречается слишком часто:
Вы можете различать поля в этой форме, но прочитать метки очень сложно. Особенно распространенным контрастным сочетанием на сегодняшний день является использование светло-серого на белом фоне. Поскольку это делает сайты выглядящими чистыми и минималистичными, эта цветовая комбинация довольно распространена. Жаль, что она совершенно непригодна:
Элементы формы должны быть достаточно контрастными. Чтобы добиться этого, я рекомендую вам ознакомиться с такими ресурсами:
«Интеграция проверки контрастности в процесс веб-разработки»
«Три распространенных ошибки разработчиков: Цветовой контраст»
И лучше придерживайтесь сочетания темно-серый или черный на белом фоне:
Цвета в нашей форме достаточно контрастны.
Автор: Jessica Enders
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.