Ко мне обратился клиент с задачей разработать интерфейс для оператора конвейерной линии. Существующий интерфейс был собран на скорую руку, не устраивал клиента, и недостатков в нём хватало. Расскажу об одном из них.

Товар идёт по конвейеру, система отсеивает брак: неправильные этикетки, криво поставленные крышки. На мониторе у оператора среди прочего есть индикатор уровня брака в партии — круговая диаграмма. Зелёный сектор показывает годный товар, красный — брак.

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

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

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

Я предложила заменить круг на тахометр: шкала с зонами допустимых и недопустимых значений и стрелкой, которая показывает текущий уровень. Такая шкала отвечает именно на вопрос про положение относительно порога, а не про долю. При этом она охватывает не весь диапазон от 0 до 100%, а только рабочий, вокруг допустимого порога. Поэтому даже небольшой процент брака становится заметным, особенно при приближении к допустимому порогу.

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

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

Дизайнер на всю голову

В этом посте были ссылки, но мы их удалили по правилам Сетки