Особенности дизайна веб формы: Цвет

Особенности дизайна веб формы: Цвет

От автора: ниже приводится краткий отрывок из нашей книги Разработка UX: Формы, написанной Джессикой Эндерс. Это полное руководство, в котором представлена разработка и дизайн веб форм, ключевой элемент эффективного UX. Подписчики плана SitePoint Premium имеют возможность получить к ней доступ напрямую, или вы можете приобрести экземпляр в магазинах по всему миру.

На данный момент наша форма не содержит разнообразных цветов:

Особенности дизайна веб формы: Цвет

На этом этапе единственными цветными элементами в форме является логотип и красные звездочки, указывающие на обязательные для заполнения поля. Для данной части процесса разработки так и должно быть. Сейчас я объясню, почему.

Использование большого количества различных цветов в попытке сделать форму более «веселой» или «интересной» может на самом деле ухудшить опыт пользователя:

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Особенности дизайна веб формы: Цвет

Эта очень яркая форма на самом деле более отталкивающая и запутанная, чем веселая. Некоторые цвета могут даже негативно воздействовать на пользователя:

Особенности дизайна веб формы: Цвет

Ядовитые цвета в этой форме могут раздражать глаза некоторых людей.

Будьте очень осторожны при выборе цвета

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

Особенности дизайна веб формы: Цвет

Важные сообщения, такие как сообщения об ошибке:

Особенности дизайна веб формы: Цвет

Ссылки:

Особенности дизайна веб формы: Цвет

Индикаторы прогресса заполнения:

Особенности дизайна веб формы: Цвет

Рубрики:

Особенности дизайна веб формы: Цвет

Фон формы:

Особенности дизайна веб формы: Цвет

Элементы брендинга, например, логотипы и стандартные заголовки:

Особенности дизайна веб формы: Цвет

Возможно, вы заметили, что я не включила в этот список красную звездочку, обозначающую обязательные для заполнения поля (*). Это связано с тем, что я не рекомендую использовать красные звездочки для указания обязательных для заполнения полей. Дополнительную информацию см. ниже в разделе «Обязательные и необязательные поля».

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

Особенности дизайна веб формы: Цвет

В этой форме цвет используется почти для каждого элемента, то есть ни один из них не выделяется.

Какие цвета нам следует использовать?

Обычно компания имеет палитру цветов, на которую вы можете ссылаться. Для моего Enders Bank бледно-зелёный цвет является основным, как вы можете видеть на изображении ниже. Давайте используем этот цвет, чтобы выделить основную кнопку действия в нашей форме:

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Особенности дизайна веб формы: Цвет

Теперь мы задали для формы цвет.

Дальтонизм

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

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

Особенности дизайна веб формы: Цвет

Цвет — единственный компонент в этой форме, с помощью которого обозначены обязательные для заполнения поля, что делает форму недоступной для многих пользователей.

Гораздо лучший подход — просто сказать людям, какие поля являются необязательными (как описано в разделе «Обязательные и необязательные поля» ниже):

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

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

Цветовая контрастность

Но есть еще кое-что хуже того, чтобы полагаться исключительно на цвет для общения с пользователем — недостаточная цветовая контрастность. Отсутствие достаточного контраста цветов, не позволит четко видеть различные элементы формы даже тем из нас, кто обладает хорошим зрением:

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

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

Особенности дизайна веб формы: Цвет

Элементы формы должны быть достаточно контрастными. Чтобы добиться этого, я рекомендую вам ознакомиться с такими ресурсами:

И лучше придерживайтесь сочетания темно-серый или черный на белом фоне:

Особенности дизайна веб формы: Цвет

Цвета в нашей форме достаточно контрастны.

Автор: Jessica Enders

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по созданию дизайна сайтов в Photoshop

Станьте профессиональным веб-дизайнером, создавая востребованные макеты сайтов.

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree