Статусы в интерфейсах — это состояния данных. Данные бывают разные, соответственно статусы тоже. К счастью для дизайнеров, они встречаются в подавляющем количестве сервисов (есть где подглядеть).
Я работаю UX дизайнеров в продукте DocShell. Сервису уже 10 лет, год назад мы сделали редизайн, но кое что осталось прежним, в том числе визуально отображение статусов.
Как статусы выглядят сейчас
Наши таблица содержат данные об оборудовании, которое установлено в организации. Статусы отражают состояние оборудования. Пользователи сами вносят необходимые сведения, после, данные из таблиц формируют итоговый документ для отчетности перед гос. органами.
Для тех, кто не понимает что означают разноцветные кружочки, при наведении появляется браузерная подсказка.
Что мы имеем
У нас есть 2 набора статусов для двух таблиц, есть условно полярные значения (шкалы хорошо-плохо, которые можно в принципе связать с цветовой индикацией), но есть и средние значения, которые в цветовую шкалу не совсем укладываются. Как мы все знаем у человека есть определенные ожидания (ассоциации) связанные с цветом. Зеленый ассоциируется с чем-то хорошим, в интерфейсах — статус успешного процесса. Красный же наоборот, с чем-то негативным или используется там, где внимание пользователя должно быть максимальным (пример: сообщение об ошибке).
В чем же проблема наших статусов и почему стоит потратить время команды на изменения?
- Есть некоторая нестабильность поведения браузерной подсказки. Они то появляются, то нет.
- Маленькая область наведения на статус 19х15 px, чтобы прицелиться и увидеть подсказку нужно усилие.
- Стоит сказать, что пользователь может и не догадаться, что туда вообще можно навести.
- Пользователю приходится совершать лишнее действие прежде чем добраться до смысла отображаемой информации.
- Статусов много и их значения имеют определенную специфику. Понятно, что зеленый скорее всего — хорошо, а красный наверное плохо. Что значит при этом серый и оранжевый приходиться усваивать со временем. При этом не нужно забывать о доступности (Accessibility) и о том, что есть люди с нарушением зрения, а также с нарушением восприятия зеленого и красного. Для них наша привычная цветовая индикация попросту не будет работать.
Что же со сценариями и какие данные нам могут помочь принять решение?
Итак, у нас есть 4 статуса и по логике статусы должны всегда быть актуальны и отражать существующее положение дел, так как данный атрибут влияет на формирование итогового документа. Если данные не верные, для пользователя (руководителя организации) могут последовать проверки и штрафы.
Когда пользователь впервые вносит оборудование в список, должен проставить статус “приобретено, но не установлено”. После того как произвели установку, статус должен быть заменен на соответствующий и так далее. Между этими этапами может пройти прилично времени, поэтому пользователю приходится искать какой статус стоит на данный момент.
По факту
По факту происходит все иначе, часть пользователей выставляет сразу конечный статус. При таком сценарии, некоторые статусы вообще могут не присутствовать и быть пропущены.
Выставляют кто как горазд, кто то честно, кто то обманывает и ставит, что все в порядке, стоит и настроен как положено, и несут ответственность за данное уже они сами — когда придет проверка и спросит с них.
Пользователям важно, чтобы в документе стоял один (конечный) статус и в таблицах они проверяют именно его.
Для меня главное, чтобы вот это зелененькое горело, потому что иначе он у меня не отобразится в списке
Итог
Было принято решение статусы менять, так как они не отвечают требованиям доступности и скрывают информацию, которую можно показать сразу. При этом статусам необходимо текстовое сопровождение. Но цвет все таки решено было оставить, так как пользователи привыкли на него ориентироваться и при беглом сканировании он полезен. Из-за длинны текста и ограничений, которые накладывает таблица, оставили цвет в виде вертикальной цветной полосы.
Совет
У пользователя есть определенные ожидания относительно цвета, заложенные в ментальной модели. Убедитесь на 100%, что ваш интерфейс и ожидания пользователя совпадают, при 100% понятности для пользователей можно ограничиться только цветом. Это работает когда статусы отражают определенную шкалу — хорошо-плохо, да-нет, высокое-низкое и так далее, т.е имеют определенный эмоциональный окрас. Но если нет шкалы и статусов больше чем 2 или 3, рекомендую текстовое сопровождение.
Также цветовое обозначение можно дополнить подписью или иконкой, чтобы при искажении или даже отсутствии цветов, элемент сохранял свою функцию. К примеру, при тяжелой форме протанопии человек теряет способность видеть красный. Тогда, например, исправление формы усложняется, если дизайнер использовал только цвет для указания ошибки. Хорошим решением будет дополнить цвет подписью или графическим символом.