Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Дизайн кнопок для дальтоников

7 октября 2015 | Опубликовано в статьюшечки | 1 Комментарий »

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

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

Навигационные панели

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

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

Разделенные кнопки

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

Некоторые пользователи увидят просто две кнопки — с темным и светлым цветом заливки. Легко запутаться в том какая из кнопок на данный момент активна. Устраните это недопонимание, добавив галочку к активной кнопке.

Переключатели

Переключатели тоже далеко не всегда хорошо работают только в цвете. Если состояния включенного и выключенного переключателя отличаются только цветом, сложно понять в каком именно состоянии он находится на данный момент.

Чтобы исправить это, просто добавьте галочку или маркеры «on» и «off» на переключатели.

colorblind-toggleswitches

Цвета недостаточно

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

Автор урока anthony

Перевод — Дежурка

Смотрите также:




Комментарии

Оставить ответ


четыре + 3 =

Вставить изображение