Комментарии 133
Знакомая проблема.
Для отслеживания производства решил попробовать Яндекс.Трекер и Асану. И оказалось - то, что хорошо (наверное) походит для IT, не очень приспособлено к реальному производству.
Главная на сегодняшний день проблема - сложность отслеживания однотипных изделий. Вот, например, у нас есть заказ на 500 штук некоторых изделий, которые мы грузим партиями разного объёма, в зависимости от потребности заказчика: в этом месяце им надо 60, в следующем месяце 80, и так далее. И, соответственно, мне нужно завести подзадачу на изготовление 60 штук так, чтобы из основной задачи эти 60 штук вычлись. И все эти трекеры этого не умеют - видимо, у программистов таких задач не встречается.
И кроме как уходить на заточенные под производство системы - других вариантов, похоже, нет.
Масштабирование при использовании готовых решений — всегда трудоемкая (и не всегда выполнимая как надо) задача, с учетом ограничений кастомизации и специфических требований. Особенно с мнемосхемами, когда требуется детализация агрегатов и их предсказуемое поведение.
На мой взгляд, сочетание хорошей аналитики, фигмы и реакта — самое гибкое решение на сегодняшний день
Возможно, стоит изменить подход. Можно создать задачу типа. Сделать 500 шт вот этого для вот этого. А в самой задаче чек лист с пунктами : сделать 50, сделать 80 и т.д. Это не решит проблему подсчёта, но позволит организовать все в виде задачи.
Хороший пример того что дизайн это в первую очередь не красивенько, а удобненько
Спасибо) Действительно — в своей работе стараемся ставить удобство пользователей на первое место
И это правильно. А ещё удобство может ощущаться на слух.
Я как-то написал приложение для ТСД для сотрудников склада. Приложение подавало звуковой сигнал в случае ошибки, а не просто показывало его на экране, так как на экран сотрудники не смотрят во время работы.
Спустя несколько дней выяснилось, что этим невозможно пользоваться на складе глубокой заморозки (большой холодильник на 100-200 кв. м.). Выбранный мной звук ошибки совершенно случайно совпал по тембру со звуком компрессора этого холодильника, поэтому заглушался им напрочь. Поменял звук - стало удобней.
Классный пример! Со звуком тоже столько нюансов, мы даже при всем желании не везде можем его внедрить — бывает ну очень шумно на рабочем месте)
Удобно — основная задача дизайна. Функция - потом эстетика
А почему именно производство только?
Я вот уже до невозможности устал бороться с манией у дизайнера и руководства пихать шрифты 12px. Не говоря о том, каких там только размеров нет.
Мелкий 12px блекло-серый цвет - прям уххх! Кому такое будет удобно? Наверно, только дизайнеру, у которого карточка на весь экран, когда он "рисует". И руководство, у которого х1.5 увеличение на ноуте...
Накипело
Да, и правда повсеместная проблема. При обучении стараемся на это обращать внимание — особенно на серые шрифты и элементы, это в большинстве случаев всегда история с доработками.
В последнее время актуальны интерфейсы с крупными шрифтами, надеюсь тренд сохранится)
По моему это не самое плохое, ничего хуже условных таблиц-строк без отображения контуров полей с супер-широкими межстрочными интервалами НЕ СУЩЕСТВУЕТ. Это считается современным, приятным и не нагруженным интерфейсом. Типа как в параметрах windows 10. Там где можно вывести нормальное количество информации, мы растягиваем её в 2-3-4 раза, превращая любую информацию в "бесконечные" вертикальные меню.
Да вот за это "воздушность, современные шрифты" на производстве я бы отрывал руки (зачеркнуто) выдавал дизайнерам для работы старые 19" мониторы, выкрутив контраст на минимум. Я хоть не в металлургии, а сижу в офисе, но смотреть на новую версию софта, с которым мы работаем параллельно пользуясь старой - хочется плакать. От нового дизайна. Старая да, времён Windows XP, но там все поля ввода видны сразу. В новой мало того, что их перемешали, так ещё вывели бледно-серым на белом фоне, с такой же прозрачной рамкой. Вглядываться, где нужное из двух десятков - ух развлечение.
А зачем туда лезли вообще, если все привыкли? Старым интерфейсом было неудобно или неприятно пользоваться?
Вообще не совсем понятно, зачем там дизайнер, программисты формошлёпят на чём удобно (в том же Material, например) и фиксят все замечания от пользователей, без лишних людей и траты времени. Типа "сделай, чтобы я вот этот label видел, стоя вон у того станка за три метра от контроллера/монитора" или "сделай мне моноширинный шрифт" - зачем в таких случаях дизайнер?
А вообще welcome в суровый промышленный дизайн интерфейсов
Знаете, как на заводском наречии будет "Шрифт мелковат!". Вот так : "Всё х**во, всё!". А знаете как будет "Не отображаются нужные элементы?". Вот так : "Всё х**во, всё!". А как будет "сенсорный экран не работает если в перчатке?". Вот так : "Всё х**во, всё!".
Вот поэтому и существует промышленный дизайнер. Задолго до компов, кстати.
Знаю, поэтому и не понимаю: программист матерные пожелания заказчиков понимает, в отличие от дизайнера. И тем более лучше, чем через испорченный телефон в виде дизайнера. И в статье промышленных дизайнеров нет. И всё ещё непонятно, зачем трогали вообще.
На производстве есть конструктор, который должен обеспечить 3d макет + адекватные чертежи. А инженер + слесарь/токарь etc это должно реализовать. Или указать на возможные нюансы. И совместно придти к чему-то хорошему.
Чем разрабокта хуже? Я повсеместно топлю за инженерный подход к делу, где люди, в том числе и дизайнер, !должны! понимать, что и для кого делают. Иначе, какой в это смысл? Ну кроме зарабатывания деньжат до тех времен, пока не сменят этот штат, потому что продукт не жизнеспособный
А трогали, потому что позаботились о пользователях, а не склепали стандартный интерфейс и забили
Конечно, дизайнеру также необходимо разбираться в специфике продукта, который он реализует. Мы всегда за качество финального продукта — чтобы в дальнейшем гордиться своей работой)
Я не понимаю вашей демагогии и абстрактных неуместных аналогий. На переписывание ПО ради заботы о пользователях и, тем более, не дай бог, ради нестандартного интерфейса, в промышленности деньги не выделяют.
Вот как раз ради заботы о пользователях все производственное ПО и пишется, ведь если на заводе производительность труда увеличиться хотя бы на 3% то деньги выделят (да еще и проконтролируют :))
Так-то, мало ли причин может быть? Было старое приложение на голом win32 api, например или, там, Delphi, а теперь предприятие переезжает на какой-нибудь линукс дистрибутив и промышленные планшеты на андроидах. Очевидно и UI будет переделываться в HTML, для единообразия на всех устройствах.
А как программист решит проблему эргономики расположения элементов, отрисует детализированные мнемосхемы? Разные специалисты — разная зона ответственности.
Что касается старых интерфейсов: не всегда то, что было на старте, было удобным. В статье отмечала, что некоторые подходы устарели — например, повторение рутинных действий, таких как выделение табличных строк по одной. Мы со своей стороны делаем все, чтобы привычные паттерны не только сохранить, но и оптимизировать. Делается это для упрощения взаимодействия с формой и увеличения скорости работы.
А зачем туда лезли вообще, если все привыкли? Старым интерфейсом было неудобно или неприятно пользоваться?
Зачем люди приходят на любой проект? Деньги!.
Проблема в том, что программист сделает именно ЭТОТ лэйбл, чтоб он был виден. И не факт, что с первого раза будет так как нужно. И так по каждому элементу, по несколько раз. В то время как дизайнер учтет замечание комплексно. Да и какими средствами сделать этот лейбл видимым? Просто увеличить, сделать черным, сделать жирным или средним или может быть ярко красным? А на других экранах тоже эти изменения нужны? Про каждый элемент спрашивать программисту у пользователя? Что-то получается еще больше нецелевого времени у разработчика уйдет на это. Вряд ли профессиональному прогеру понравится такая работа, он же про разработку, а не про выдумывания цветов, размеров и шрифтов
Согласна, у дизайнера в этой части намного больше опыта, компетенции и фантазии ;) Есть много забавных видео на тему "Когда бэкенду дали в разработку фронтенд", разница в мышлении очевидна
Согласна, у дизайнера в этой части намного больше опыта, компетенции и фантазии
У дизайнера как раз в этой теме ноль опыта и компетенции (опять же, мы не про промышленных дизайнеров сейчас, это вообще отдельная профессия).
"Когда бэкенду дали в разработку фронтенд"
При чём здесь веб-разработка вообще?
Ни одному программисту не придет в голову что надо делать моноширинный шрифт, что надо не более 3 край 5 цветов, какие цвета? Какой размер? и т.д. и т.п.
Сначала было без дизайнеров (даже если люди так себя называли). А потом появились дизайнеры и сделали нормально.
Вывод простой – можно нанимать дизайнеров интерфейсов и будет нормальный интерфейс! ?
Кстати, темная тема серовато-голубая. Кажется для проф. интерфейсов лучший выбор
- отлично различаются цветные элементы
- нет проблем с бордерами, отступами, обводками, глубиной
- меньше не напрягает глаза. Видна и в светлое и в темное время суток, в освещенном месте и в полумраке. В обычной темной теме чтобы отличить инпут или кнопку на фоне приходится сильнее фокусироваться.
- очень нейтральная
Зачем все делают у иллюстраций прозрачный фон? Какой в этом смысл?
Скриншот
Радует, что где-то делают крутые вещи для производства и даже стараются учесть специфику производства. Так может и технически переоснастите ребят )
«Протрите мониторы», «Замените мониторы на те, где будет нормально видно», «Откалибруйте мониторы» — в ответ на пользовательские претензии отвечали дизайнеры
Вот это шикарно. Честно говоря даже в голову такой ответ не пришел бы никогда. Подгонять мониторы под дизайн.
Это так везде, не только у металлургов. Делал сборную страницу путешествий для турагентства с параметрическим поиском. В ТЗ стояло тупо "улучшить, добавить поиск по параметру".. в реалии страница на Ангуляр ещё 2 или младше (уже не помню) грузилась у менеджеров по 10секунд .. привыкли.
Тоже "пошел в народ": Сидит клиент, девочка жмет кнопку и спокойно продолжает с клиентом, после чего тычет в её строчку и .. продолжает трещать с клиентом, пока оно всё прогрузится ленивой загрузкой.. решил что "это не работа, надо переделать".
Под капотом Yii2, запросы ангуляра отрабатываются в режиме ActiveRecord по 150 запросов к БД, ибо в итого достается примерно 3/4 таблиц всей туристической БД.. жесть просто. 10секунд отклик, это ещё сервак классный...
Переделал и .. будучи не дизайнером, всё что смог применить это тупую табличную верстку, примерно как у Вас, но с подтабличками в ячейках и всплывающими деталями по данному месту. Например в ячейке "дата отбытия" была кнопка с "?" нажав на которую можно было гглянуть набор данных из рейсов данной АК тип борта, мест, запас на регистрацию.. а в ячейке "оплачено" кроме даты оплаты, вывел ещё и номер чека и также, нажав на кнопку можно было увидеть всплывающий виджет (дивка) с суммой, кто платил, через как платил, комиссии и сборы.
Всё это выгребалось из БД одним запросом (около 80строк на скуле, генерация через построитель Yii2) время отдачи страницы стало 0.15сек на 10 тысячах записей о клиентах.
.. выкатил с полным параметрическим поиском, где сверху в табличке в шапке стояли поля для ввода поисковых данных. Где-то строковый ввод, где-то дополнительно можно задать идент или перечень идентов записи явно (менеджеры их знали по большей части на память) и .. получил нагоняй от начальства: "всё поменялось, ввожу данные в фильтр, ничего не происходит - не работает".. пришел посмотреть: и правда. открывает страницу, инфы стало в разы больше, но она вся нужна: "это убрать? нет. А это? нет, оставь я уже присмотрелся, ничего лишнего нет, просто не привычно".. вводит данные в фильтр, который выводит тот же набор, но в меньшем составе и .. по привычке: нажал кнопку и отвернулся допить кофе.. поворачивается через те самые 10 секунд: "вот. Ничего не изменилось" .. ну как не изменилось? было 5 страниц к просмотру, осталось 3.. о, и правда. А давай так: упс.. 0.15сек .. готово! -"так, понял, оставь, поиграемся.."
.. прошел месяц: Ну как, переделать? Не,не,не оставь. Смотри, если я вот сюда задаю это и вот сюда это, а вот сюда .. он правильно ищет только те, которые подходят под весь фильтр? -Да. А что? .. ну вот и я сколько ни пробую вроде не вижу промахов.. круто, спасибо. Девочки пищат от удобства..
И? Где тут "современный воздушный" или какой ещё стиль? Кмк, то что полезно в общеупотребимом ПО "для покупателя", на производстве не приживается. Нужна четко выверенная, контрастная инфа и оперативно. Время отклика дольше 1сек - нонсенс на переделку. Шутка производственника "забудьте всё чему Вас учили в ВУЗе .. " по-прежнему актуальна.
Ну и ещё одно замечание: интерфейс для производства по качеству оцениваю с давних времен очень тупо: полезная инфа должна быть видна первой. Далее, любой страничке присваиваю условные 10 баллов. Далее из них вычитаю количество требуемых нажатий оператором для получения следующей инфы уточняющего или какого ещё характера для продолжения работы. Если в итого меньше 8 баллов - интерфейс требует переработки.
Хороший пример, у нас встречались такие кейсы. И, конечно, мы в наших решениях не ограничиваемся только стилизацией элементов: различные фильтрации и сортировки, приоритизация вывода данных на страничке, компактное отображение данных, индикация в нужных местах — все это необходимо продумать еще на этапе проектирования.
Это также в компетенциях дизайнера, который вместе с аналитиком определяет степень целесообразности применяемого решения в зависимости от пользовательского запроса
Нужна четко выверенная, контрастная инфа и оперативно.
Разрешите пожать Вам руку. Вот плюс небольших компаний, можно встретиться с разработчиком и обсудить все на месте. А вот когда работаешь в огромной федеральной структуре, твои жалкие попытки донести до разработчиков мысль "ребята, вы сделали это хреново, потому что все жутко тормозит, каждый день вываливается с ошибкой" аналогичны пожеланиям "жалуйтесь в Спортлото".
нажал кнопку и отвернулся допить кофе.. поворачивается через те самые 10 секунд: "вот. Ничего не изменилось" .. ну как не изменилось? было 5 страниц к просмотру, осталось 3
А при этом была какая-нибудь анимация, или хотя бы курсор менялся? Т.е. была ли хоть какая-то визуальная обратная связь от системы после нажатия?
Аналогично, интерфейс оператора, проверяющего автоматический парсинг товарных позиций с сайта поставщика. Парсер умел находить в тексте заданные параметры (настройка на страницу тоже оператором) и выдавал страничку для итоговой приемки, показывая что нашел, весь кусок оригинального текста описания.
И вот тут .. поначалу выделял в тексте найденные параметры (артикул, размер, цвет, модель, бренд..) сел сам же потестить и .. внезапно понял, что сличая глазками вид слева (результат автопарсинга) и справа (оригинал) .. тщательно выискиваю то, что не подсвечено цветом в общем тексте.. поменял подсветку и всё пошло куда как лучше: смотришь выделенное и сразу видно, есть в нем нечто содержительное и пропущенное (оператор не задал выявление этого параметра) или там тупо "вода".. хорошо что "в прод" вылил инвертированную версию. :)
Оу, да-да-да! Было такое на химпроме - компа на производстве нет, производство врывоопасное - давайте поставим планшет. Ну, звучит как план - подрядчик приносит ПО - система на фласке, айпадик новенький - гууди-крути все! А на месте - здоровенная дурища во взрывозащищенном исполнении с низким разрешением, не особо отзывчивым экраном - так еще и wifi не по всему помещению есть, так что чистый клиент-сервер без локального кэширования на железке - мимо кассы.
В проекте Техпомощи-2 я не делал белый фон вообще. Там фон был тёмно-серый, обороты двигателя кроме цифры ещё и цветом отображались, тоже самое подходящая передача. Вчитываться не нужно нигде кроме логов когда что-то глюкануло. Оставил несколько "будильников" на случай отказа автоматики, был ещё штатный спидометр + тахометр. Тоже самое мастерская ПМ-1, там мнемосхема простая. Зумер/бипер везде заложил, ещё были указательные реле по цепям 380В. В кабине машины был бипер с возможностью отключить, снаружи зумер с отключением автоматикой. Нужно было снять нагрузку или открыть аварийный отсек. Опять же всё можно обойти/отключить.
Я не металлург, но меня эта "легкость и простота" современных интерфейсов тоже уже "слегка" под..замучила.
Помню еще времена плохих, перегруженных интерфейсов (такой вот я динозавр), которыми при этом было вполне удобно пользоваться на ультровыпуклом 14-ти дюймовом ЭЛТ мониторе. Сейчас мы имеем огромные мониторы, плоские, с отличной цветопередачей, контрастностью, разрешением, по меркам какого-либо 95-го года монитор моего ноутбука - это просто высшая лига, тогда такой экран бы стоил как чугунный мост. И что, удобство работы во столько же раз повысилось? Авотхрен! Открываешь какое-либо приложение (а скорее всего это будет вебморда, транслируемая в приложение), и наблюдаешь "легкий интерфейс" с парой полей ввода и "кнопочкой" на пол экрана, что-бы добраться до того что тебе надо, приходится по этому интерфейсу блуждать пол дня, в особо запущенных случаях еще и в гугл лезть за справкой. Ладно если бы все это отображалось на крохотном экранчике мобильного телефона доайфонных времен, но вся эта "легкость" наблюдается на огромном мониторе, с массой свободного пространства, куда без проблем можно засунуть вообще весь интерфейс приложения.
Вас понимаю и разделяю негодование, вопрос профессионализма дизайнеров и требований к интерфейсам. Либо к владельцу продукта: по опыту, самое сложное — «подружить» нескольких дизайнеров на проекте, чтобы продукт был собран с применением одинаковых паттернов.
К сожалению, пока нет единого подхода и рекомендаций, время экпериментов. И если в вебе я это могу понять, на производстве нужно быть очень осторожными с внедрениями инноваций)
Обратная связь была не самой приятной: пользователям не было видно чисел на экране, в наши «воздушные» таблицы помещалось мало данных, а белый интерфейс в темных помещениях ослеплял.
Это не только на производстве. Это и в быту. и у любого человека в возрасте.
Стиль "Win98" разрабатывался с научной точки зрения, и гораздо старше чем сама ОС. MaterialUI был разработан на основе "так вроде бы выглядят буклетики которые мы всем раздаем". MaterialUI это ярчайший (извините, тут ирония, он бледнейший) пример того как нельзя
а) выбирать цвета,
б) делать макеты страниц и размещать текст,
в) обращаться с семиотикой (*)
г) учитывать нужды слабовидящих, людей с проблемой восприятия цветов или мерцания.
*А современные дизайнеры вообще знают что такое семиотика ?
Material — это скорее удобная база, на основе которой можно выстраивать любой тип интерфейса. Вопрос в другом, насколько Material применим в конкретных кейсах — часто его возможностей не хватает для специфических запросов, приходится изобретать новые подходы.
С термином «семиотика» встречаюсь впервые, но знакома с понятием «семантика цвета». Например, вопреки общепринятому стереотипу о рекомендации применения «песочных» цветов на сайтах для ОАЭ, есть мнение, что арабы обожают холодные оттенки: их тянет к прохладе, поэтому веб-продукты в холодных тонах имеют бОльший шанс взлететь в арабских странах.
Судя по описанию семиотики, многие вещи мы конечно же применяем. Это и улучшение считывания текстовых кнопок с помощью подходящих по смыслу иконок, и правильная индикация. По последнему пункту мы проводили AB-тесты, где показывали различные вариации размеров текста, яркости оттенков и их контрастности
Хочу покритиковать ваше решение не по форме а по существу:
много чисел, но мало информации в такой таблице.
Так и хочется спросить - А есть информация по купальникам?(шутка)
столбец -"дата". Дата может быть различной в разных строках? Если нет, то зачем ее столько раз выводить на экран.
Далее столбец "маршрут". Указан маршрут 7. А какой максимальный номер. Судя по полю названия выделено место на максимальный номер 999999999 что так много маршрутов? Аналогично колонки "бригада" "смена" . Далее столбец НТД, в котором указан ГОСТ. Хочу спросить Зачем указан ГОСТ? Его кто-то помнит наизусть и проверяет качество по нему?
------------------
На другом примере экрана есть столбец "сечение" и написано аж в две строки 250x1040, 250x1140. Вопрос все тот же. А оно кому-то надо. Кто-то рулеткой измеряет сечение?
еще меня очень веселит , когда в столбце многозначные числа в каждой строчке и все разные.
Всегда хочу спросить, Ну и кто что из этого понял На сколько отличается число в первой строке от числа в десятой? И что это означает? Куда бежать? Если Всем это пофиг, так как никто не сможет вычислять в реальном времени в уме, то зачем это все на экране.
И так на всех производствах. Приходят дизайнеры и раскрашивают экраны, меняют шрифты, Выводят еще больше чисел одинаковых или разных. Но кто и что решает на основе этой информации?
Если решения типовые, то они должны приниматься автоматом и показываться на экране вместо этого винегрета чисел. Рабочим нафиг не нужны все эти числа, а технологи просто прозевают критическую ситуацию. Мог бы рассказать реальные случае, но это другая тема.
Мой совет, работайте над содержанием , а не над формой. Рюшечки и кружева на производстве нужны лишь дизайнерам.
Спасибо за подробный разбор кейса, данные на иллюстрациях приведены для примера — к сожалению, не все актуальные типы данных мы можем размещать публично.
Но в целом соглашусь, совет дельный — просто раскрасить форму недостаточно, грамотное расположение элементов и параметров также играет ключевую роль
На мой взгляд существует некоторая путаница в целях дизайнера при создании продукта, который будет продаваться массово обывателю и создании продукта, который является рабочим инструментом в производстве. В последнем случае важна функциональность, а не внешняя красота продукта. Это не предмет для хвастовства перед знакомыми, а инструмент для эффективного и безопасного труда. Хорошо, что авторы статьи стали понимать это в процессе знакомства с производством.
Судя по полю названия выделено место
Так, чтобы поместилось название. И поместилось не впритык к названиям других столбцов.
Хочу спросить Зачем указан ГОСТ? Его кто-то помнит наизусть
Да, разумеется, опытный специалист будет помнить номера ГОСТов, ОСТов и ТУ, с которыми часто работает. И основные параметры из них.
А оно кому-то надо.
Может быть и надо. Потому что так проще контролировать производство - когда ты видишь не только номер партии, но и краткую информацию по ней. И, опять же, с опытом это видно на глаз, 1070 мм от 1320 мм заметно отличаются, особенно когда лежат рядом.
Возможно вместо 1070 и 1320 можно написать А и В либо 10 и 13, либо простой код вместо длинных чисел. При наличии большого числа ненужных чисел легко "замылить" важные для производства данные.
Нельзя, потому что завтра у нас будет 1030 например.
Но на нормально поставленном производстве возьмут белый маркер и на поковке напишут - 14864 / 1070*250. А на соседней поковке - 14865 / 1030*250. Так будет удобнее и производству, которого все эти номера заказов не сильно волнуют, но надо было сделать поковку шириной именно 1070 мм плюс-минус допуск из ГОСТа (и допуск этот мастер помнит наизусть), а не "примерно 10 дм". И грузчику, который возьмет накладную, магнитом зацепит поковку для заказа 14864 и кран-балкой закинет её в машину.
А может быть, и можно. Вот например у нас в одно изделие ставятся четыре пружины, а поскольку был печальный опыт - пружины проходят 100% входной контроль. И мы при контроле пишем на каждой пружине её реакцию под нагрузкой - но не полностью, а округленно, два знака вместо четырёх. А потом при сборке изделия селективно ставим две жёсткие пружины и две мягкие, или четыре средние - и стабильность характеристик изделия повышается относительно того времени, когда мы ставили все четыре пружины в допуске, но без селекции. И округленной до 100 ньютон (то есть примерно до 1,3 мм высоты, исходя из жёсткости) характеристики пружины нам достаточно.
А вот для другого изделия нам нужно попасть в 0,5 мм установкой регулировочной проставки, и для надёжности мы используем высоту пружины, округленную до 0,1 мм (или 10 Н по жёсткости).
А для третьего изделия нам надо убедиться, что высота упругого элемента в допуске, а потом парами собрать элементы так, чтобы их суммарная высота была как можно ближе к номиналу - и мы указываем на каждом изделии не его характеристику, а номер. А характеристику обрабатываем программно, и программа отдаёт нам пары номеров.
Пишите еще ) Мы сами "немного" в производстве (металлобработка, небольшое производство). Таких глобальных задач нет - собираем все экраны на Ant. Но тема с дизайном сложных промышленных систем очень интересна. Спасибо вам за статью!
Первый вариант очевидно плох даже для офиса, хотя завод конечно дополнительно усугубляет.
1. Отвратительный контраст (а у меня хороший монитор).
2. Плотность информации — куча пустого места, но тексты при этом обрезаются, а таблица скроллится по горизонтали, мда.
3. С цифрами вообще удивительно. То, что таблицы нужно набирать моноширинными (другое название табличные) цифрами — это база, которую пишут в начальных статьях по типографике. Как можно этого не знать с 12 годами опыта?
Всё-таки есть изрядная доля истины в выступлении Бирмана, где он говорит, что сейчас исследованиями часто подменяют знание основ.
Все постепенно приходилось внедрять. Особенно отзывается комментарий про пустое место на экране, я не написала об этом в статье — но это тоже было одной из горячих проблем. Однозначно, грамотное использование пространства на мониторе — это первое, на что было необходимо обратить внимание, в версии 2.0 это также учли.
Это было непросто — привнести свой взгляд и опыт с учетом уже готовых наработок, но в итоге удалось прийти к правильно заложенной базе для дальнейшего развития проектов
На мой взгляд, сегодняшний дизайнер учится делать интерфейс ТОЛЬКО для телефонов с сенсорным экраном. Там эта лёгкость, шрифты и цвета уместны. На экране компьютера, например, рабочее место бухгалтера, технолога или менеджера, где управление мышью и клавиатурой (+сочетание клавиш и переключение tab-ом) такие дизайны напрягают.
Насчёт большой серой таблицы:
>А удобно выстроенный набор данных и цвета, от которых не устают глаза
И сделали светло-серый шрифт на сером-немного-темнее фоне? Дата сегодняшняя вовсе не читаема. Тут бы контрастнее и толще текст местами.
Разное выравнивание заголовков (где-то по центру, где-то по правому краю). То же самое про данные в этих столбцах. Особенно противно выглядят столбцы снизу слева - "тип", "мат." (столько пустого места, но "материал" не влезло?), "проба" - вот "Ч"/"С" к какому столбцу относятся? И в то же время сверху справа есть столбец с "7" (это же семёрки?) уже по правому краю. Также оформление заголовков очень похоже на данные - как-то бы их иначе сделать.
Нет вертикальных линий столбцов в таблицах. Да, сейчас так модно, но это неудобно, когда в таблице много колонок. Еще неплохо сделать заливку строк через одну.
Химический анализ, как понимаю, относится к выбранной строке? Как-нибудь бы ярче эту строку показывать, а так анализ, визуально, вообще, ни с чем не связан.
Таблица плавок ведь содержит больше строк? Или ровно 10? Лучше бы полоса прокрутки все время отображалась, даже если список меньше. Да, современная тенденция делать интерфейс для телефонов и убирать её, но именно эту таблицу выводят на широченный экран. Пользователю надо сразу понять, что все строки видно или нет. Надеюсь там где-то ниже на экране также написано "всего XX плавок по текущему фильтру".
Много пустого места как по вертикали, так и по горизонтали. Как мне кажется, это одна из причин, почему MS Excel не теряет популярности - там нет таких промежутков и есть рамки на каждой ячейке - там попросту удобнее анализировать информацию глазами.
С точки зрения подхода в целом, управление с клавиатуры у нас также есть. Про мобильную разработку для производства стоит написать отдельную статью)
Кардинальное отличие мобильной разработки — создание удобных областей «тапа» на экране, отсутствие правых кликов (которые есть в десктопе), доступность нужных параметров на одном экране и добавление дополнительного управления элементами с помощью свайпов. Мы это активно применяем в интерфейсах для планшетов.
Касаемо пунктов:
Совершенно верно, светло-серый шрифт в отличие от белого не так напрягает глаза в темноте. Все контрастные элементы проверялись по шкале WebAIM.
Выравнивание заголовков зависит от наполнения столбцов: числовые значения необходимо выравнивать по правому краю.
Слишком толстый шрифт не всегда подходил — ввиду того что на мониторах не всегда включено сглаживание шрифтов по умолчанию, шрифт Medium был подобран оптимально.
С линиями соглашусь, с внедрением нового функционала таблиц, аналогичного Excel, это нововведение было применено. А вот по чередующимся строкам — спорно, бывают ситуации с большим количеством подсветки строк и ячеек, чередование может сбивать с толку в этом случае.
Очень правильный момент заметили — но мы и это решили: выбранная строка закрепляется сверху при скролле.
Общее количество элементов мы отображаем в случае выделенных строк, это действительно удобно. Если необходимо, данный параметр мы также выводим по запросу — он не всегда нужен для постоянного мониторинга.
Согласна, Excel с точки зрения работы с таблицами — идеальный инструмент, мы стремимся к тому, чтобы приблизиться к нему по удобству и функциональности.
Большое спасибо за развернутый комментарий!
Кажется, кто-то забыл, что слово "дизайн" означает буквально конструирование\инжиниринг, даже несмотря на то, что это написано на каждом айфоне в мире.
И потому типичные дизайн-подходы это именно то, что подходит для производства, а раскрашивание кнопок и игра со шрифтами - нет.
Отдельно доставляют неразличимые длинные строки с цифрами: чередование светлых-темных строк с целью зрительно разделить их при просмотре придумали даже не позавчера.
Как инженер с двумя специальностями, в кораблестроении и IT, в том числе, активно работающий во фронтенд разработке, хотелось бы сказать, что это очень грамотный и правильный подход.
В своё время один матерый инженер-разработчик тыкал меня носом в чертежи и говорил: "Ну начертил ты деталь, поставил размеры, а подумал, как токарь её делать будет? Откуда этот размер он будет откладывать, если фаску уже снял? А тут уже выточку сделал, куда он штангенциркуль прикладывать будет?".
Когда я пришел в разработку, правда давно это было, этот подход, продумывать, как это будет работать с точки зрения конечного пользователя, очень сильно помог. Как выяснилось - в разработке это очень нечастая ситуация, код и разметку пишут многие, а цельную картину видеть просто не хотят, и переносят свои представления в продукт.
Спасибо! Да, не каждый дизайнер / разработчик ставит себя на место конечного пользователя, и большинства проблем взаимодействия можно было бы избежать при таком подходе
Ну начертил ты деталь, поставил размеры, а подумал, как токарь её делать будет?
Ох да. А в ВУЗе этому, как правило, не учат. Приходится на производстве всё это постигать самому.
А потом после "делать" идёт "контролировать", когда деталь с производства поступит в ОТК. И там будут те же вопросы.
А потом сборка, когда выясняется, что изделие просто так не соберешь, и нужна хитрая оснастка и усложнение процесса сборки.
Вы своим рассказом попали прямо в больное место. ) Я сам примерно так начинал, а иные коллеги и до сих пор что-то подобное исповедуют.
На самом деле вся ситуация ярко показывает, что отсутствие системного подхода может приводить к неприятностям и дополнительной работе, которой можно было избежать.
Бросилось в глаза, что с самого начала не были учтены интересы стейкхолдеров, причём самых важных --- потребителей. Только они могут сказать, что им нужно и в каком виде. Я, конечно, не призываю следовать формуле "клиент всегда прав" и делать за все хотелки. О решениях нужно договариваться, но учитывать как можно больше ролей, пусть это и не всегда просто.
Второй момент, это отсутствие "заземления", когда абстрактный проект "приземляется" на то, что происходит в реальном мире. В вашем случае это особенно важно, поскольку связано с производственной безопасностью.
Но очень круто, что вы в итоге всё учли и поправили, это правда классно. )
Находясь на старте с неким базовым набором без знания матчасти, было просто необходимым съездить и посмотреть, с какой целью мы все это делаем и для кого)
Ключевое — заложить базовые элементы, на основе которых будет выстраиваться пользовательский опыт для многих проектов; без системного подхода тут действительно не обойтись
Вот запретить бы вообще все это фантазирование и послать подальше (в направлении хипстерских стартапов) всех креативных дизайнеров, а сделать типовой индустриальный дизайн с утвержденным набором шаблонов. Например, цветов должно быть три, максимум четыре. Так и программисту будет просто и пользователю привычно.
Понятно, выработка стандарта для индустриальных интерфейсов дело не простое. Но это должно быть сделано однажды и на десятилетия.
Собственно, глядя на улучшеный результат, я четко вижу движение от изначального хипстерства в направлении интерфейсов аля IBM3270/5250.
Текстовые терминальные интерфейсы совершенно напрасно вывели из оборота. Очень круто выглядит, минимальные требования к АРМ, платформенная независимость, доступность при самом самом поршивеньком коннективити (достаточно ssh).
IBM Omegamon ?
Насколько я помню у IBM было собственное руководство по разработке таких интерфейсов и там было и про цвета и их комбинации, и про взаимное расположение элементов, и про количество элементов на экране и про именование команд и сокращений и про допустимое количество «шагов» (переходов) между пунктами и многое другое. Полезное руководство было.
Кстати до сих пор в IBM z/OS многие действия быстрее и «короче» выполнить в терминале 3270 чем через аналогичное браузерное приложение.
Спасибо! Да, однозначно движемся в сторону упрощения. В создании минимального набора цветов, да еще и с поддержкой двух тем, мы достигли идеала процентов на 80, на мой взгляд. И пока нет предела совершенству)
Четыре цвета — это было бы очень удобно, но в наших таблицах может требоваться до 10 цветов. Плюс мнемосхемы, где нужен визуальный объем. Поэтому задача выработать стандарт — действительно непростая, но выполнимая
Российское производство которое живет на винде - обречено! Разнесут вас американцы или израильтяне, как только подвернется подходящий момент. Вот в новостях уже про Арктик СПГ пишут - завинчивают им гайки.
С удовольствием прочитал! Очень был рад за простых работяг, что все же прислушались к их мнению, ведь вероятно там где нет конкуренции приложений (как допустим на мобильном телефоне) - главная задача разработчиков "следовать ТЗ" а не вникать в реальные проблемы пользователей, так как выбора каким приложением пользоваться у конечного пользователя просто нет. Или работает с тем, что наваяли или уходит с работы. В связи с этим вопрос - а что по Вашему послужило источником первоначальных проблем - неверная организация труда, недостаточная квалификация, отсутствие в команде необходимых специалистов (допустим UX-аналитика) или что-то иное?
Вы точно подметили — особенно с учетом неизбежной миграции, привыкать к новой системе людям так или иначе бы пришлось. И это, пожалуй, было основной причиной, почему хотелось сделать хороший проект.
На тот момент даже не было амбиций как-то глобально за это взяться, действовала только в рамках своей зоны ответственности. А там одно за другое..и не остановиться теперь )))
На мой взгляд, источником первоначальных проблем была самоуверенность: если в стандартном вебе, да даже в банкинге, все интуитивно понятно — в металлургии на входе намного сложнее дела обстоят с аналитикой и сопутствующими вводными. Понадобилось время, чтобы основательно разобраться в вопросе и работать в правильном направлении
Спасибо, очень хороший материал. Отдельно добавлю что не за горами тот момент, когда в индустриальном окружении и в более лёгких индустриях, например дискретном производстве, будут всё большую роль играть мобильные приложения. Вот в них, по нашему опыту, необходимость вылизывать каждый мм дизайна исходя из оптимизационной задачи под окружение, пользователя, свет, необходимой скорости ввода, количества данных и т.п. стоит ещё более остро. И да, дизайнеры даже в самых продвинутых странах на эту тему ещё не очень активно работают.
З.Ы. а вы знаете что по статистике около 8% мужчин имеют отклонения в восприятии цвета (а-ля дальтонизм и тому подобные, менее известные) поэтому всеми любимый красный/жёлтый/зелёный это то, что не работает в условиях высокой интенсивности без пиктограмм? Особенно если нет регулярного медосмотра по зрению на цвета (а это 98% производства).
Статью не читал ещё. Сразу накину ответ на заголовок: Потому что типичные дизайн-подходы херня полная. Особенно там, где mobile-first разработка.
Спасибо автору. Да, в действительности нужно всегда помнить, что в Вашей системе будет работать Человек на протяжении долгого времени. Также на CodeFest 13 была лекция с подобным "месседжем" (https://13.codefest.ru/lecture/2265).
Осталось свозить всех остальных дизайнеров ui в мире на завод и ткнуть в это мордой.
У меня все хорошо со зрением, но в современных интерфейсах не видно ничего , все бледное на бледном, и даже оттенками не выделяется.
Глазовыжигающие мониторы без достаточного диапазона регулировки яркости тоже те ещё выкидыши маркетинга. Все хвастаются максимальной яркостью, хотя она нужно исключительно при мощном внешнем освещении, вот вы много знаете людей которые работают за монитором на улице?
Я одно время занимался SCADA-гуями. Дизайн всегда проходил один и тот же путь:
выясняем у заказчика, что именно нужно вывести на экран
вывести на экран нужно ВСЁ!!!!1111, даже если число параметров больше числа пикселей на мониторе
кое-как размещаем всю эту тонну "критически важных" показателей
"на земле" работяги смотрят на это богопротивную мерзоту и завешивают монитор тряпочкой, чтобы не мельтешил
выясняем у работяг, а что же им тогда нужно
а им нужна какая-нибудь температура вон на том датчике. И чтоб краснела, если меньше 10 по цельсию
оставляем на экране 1 температуру
Хорошо когда можно однозначно назвать самый важный показатель. У нас бывает одна и та же форма — но разные ролевые модели: одному цеху нужно одно, другому — другое... еще от ответственного зависит.
Поэтому было решено дать возможность кастомизировать форму «под себя», настраивать столбцы и данные в таблицах, менять местами показатели. Оптимизировали на годы вперед;)
"на земле" работяги смотрят на это богопротивную мерзоту и завешивают монитор тряпочкой, чтобы не мельтешил
Лучшее, у нас так тоже первое время делали ٩(◕‿◕｡)۶
Спасибо вам ха то что делаете полезно для людей, а не красиво для презентаций!
Это вечная проблема дизайнеров, которые живут в своём мире хороших мониторов и Ретина-матриц и не видят проблемы в том, чтобы различать тёмно-серую девятипиксельную Гельветику от серого восьмипиксельного Ариала. И им бывает очень сложно объяснить, что пользовательский монитор не различает эти цвета, а все кегли ниже 12 просто нечитаемы.
Вот такое нам и нужно было превратить в современную систему, которой приятно и удобно пользоваться
Нас ругали, просили вернуть старую систему
так может просто не надо, если вас не только не просят делать другое, а просят вернуть старое? не раз такое наблюдал: есть рабочий инструмен, всë работает, всë ок, но кто-то решил показать свою небесполезность и сделал новый интерфейс. зачем? зачем тратяться деньги на это?
«Замените мониторы на те, где будет нормально видно»
т.е. всë работало нормально, сделали новый дизайн который никому не сдался, теперь чтобы им пользоваться нужны новые мониторы?
оО
Обычно нет, разработка новой системы решает множество проблем, о которых конечные пользователи не в курсе, например, расширяемость или интеграции с чем-то. Интерфейс обновляется просто до кучи, но пользователи видят в первую очередь его, и, соответственно, просят вернуть именно его, что обычно невозможно.
Лучше и не скажешь, спасибо!
Ну так не надо смешивать в одной кастрюле разработку новой системы и нового дизайна. Это принципиально разные вещи. Умные люди придумали, что можно разделить фронт и бек в том числе и для того, чтобы поменять бек без затрагивания фронта.
PS. Я знаю (не понаслышке), что сделать на НЛМК новую MES систему без переделки фронтовой части не получится, потому что ее нет, это двух-звенная архитектура, но был ли смысл лезть с модным дизайном в UI без UX? Это больше похоже на желание пустить пыль в глаза менеджерам заказчика, ибо изменения бэковой части они не смогут увидеть
Привет, спасибо за статью! Я занимаюсь очень похожими делами, только склоняюсь к автоматизации тех процессов и там вопросов к интерфейсам тоже очень много.
Темный интерфейс почти всегда лучше светлого, но мы делаем сразу оба, пусть оператор сам выбирает. Интерфейс под монитор и панель оператора очень отличается и по цветам и по содержанию, на панельках светлая тема чаще удобнее. Тоже много раз слышал "сделайте мне большую красную лампу без этих ваших штуковин" Вообще тема промышленных интерфейсов она очень интересная. У меня в профиле есть несколько статей на эту тему и если интересно, могу в лс прислать еще несколько примеров между было/стало.
Из вашей статьи подчеркнул себе про моноширинный шрифт, спасибо, это и правда актуально.
Мы также используем две темы, но именно в цехах популярна темная; при этом в обеих темах соблюдается читаемость.
В ваших статьях увидела отличные примеры обновления мнемосхем — здорово, что работаем в похожем ключе, вообще рада на Хабре видеть столько людей, погруженных в тематику)
Вот тут в цеху на панельке сделали только светлую тему и с большими кнопками. тоже несколько раз переделывали после разговоров с операторами. При этом в операторской сделана диспетчеризация, там темная тема.
Старые производственные интерфейсы морально устарели
но после редизайна оказалось, что
приходилось напрягаться, чтобы хоть что-то прочитать
А что было в тех. задании? Почему сразу был взят Material UI, а исследование провели после того, как был отброшен первый вариант?
А вообще удивляет тенденция организаций редизайнить то, что как бы должно нормироваться ГОСТами и делалось явно под какие-то материальные вещи и процессы, а не под интернет-магазин. Хорошо, что до дорожных знаков и интерфейсов АЭС ещё не добрались. Даже простой реферат в ВУЗе оформляется по стандарту, где уже указаны размеры шрифтов.
Полностью разделяю идею выработать общие стандарты, как раз к этому и идем. Например, наша палитра MES — идеально подходящая под запросы производств: используется на многих проектах, неоднократно протестирована в различных условиях, еще и поддерживает автоматическое переключение тем.
Material был взят с той же целью — при разработке опираться на проверенный стандарт, не изобретая велосипеды там, где не нужно
Рад за ваших заказчиков. Повезло им с Вами. Хорошие у вас заготовки на будущее - современные системы автоматизации служат не более 10 лет, дальше начинается проблемы с запчастями... Эх, где бы видеокарту времен Windows NT найти....
Наши пользователи — не всегда люди с хорошим зрением, «тонкие и легкие» шрифты не способствовали скорости работы и воспринимались плохо.
Вот только был пост об этом же: https://habr.com/ru/articles/771092/
Обращалось внимание на отрыв дизайнеров от народа :)
Если позволите, совет: у вас ковш одинаково выглядит и отличается только цветом красный/зеленый. Мы однажды разрабатывали систему, в которой была индикация красный/зеленый кружочек. Тест прошел, или нет. Текст тоже был, но текст не так наглядно, как иконка. Так вот, довольно быстро пришел коллега и попросил разные иконки т.к. он не отличает красный от зелёного (дальтонизм). Ваш ковш - та же история. Оператор легко может оказаться человеком, не отличающим эти цвета, т.к. это самая распространенная форма искажения, именно красный и зелёный.
Отсюда можно вывести мораль: результатом работы дизайнера в данном случае должен быть не только дизайн per se, но и перечень критериев, под которые этот дизайн подгонялся.
И этот перечень должен учитываться последователями в будущем.
Большое спасибо за статью, мы выпускаем станки с ЧПУ с блоком управления своего производства, т.е. мы и пользователи и программисты/дизайнеры одновременно, как поняли из Вашей статьи совершили много ошибок и даже не подозревали о них. Так что удачи Вам и пишите почаще. :-)
Это восхитительно - где-то всё-таки бывают люди, которые делают нормальные интерфейсы!
А не то, что называется "красивым интерфейсов для цветных аймаков".
Где только не работал, везде интерфейсы были созданы людьми, которые не были знакомы с процессами. Например, работал в Макдональдсе, собирал продукцию. Там есть экран, на котором появляются наименования. Так вот, во время работы очень не хватало разных цветов под разные сандвичи, т.к. на приближение к монитору и чтение названия уходило время, но очень надо было издали определять что ещё добавили, чтобы поставить соответствующее количество котлет на прожарку.
На складских терминалах пункты меню были слишком тонкими даже для женских пальцев, промахивались и мучились все.
После этого я понял, что если мне когда-нибудь придётся делать интерфейс для производства, то я его сделаю только после месяца изучения работы клиента.
Интересные примеры) На каждом собеседовании дизайнерам задаю вопрос: был ли опыт работы с нестандартными интерфейсами? В планшетах, кстати, то же самое.
Особенно важно в создании интерактивных интерфейсов понимать, как человек будет с ними взаимодействовать, и от этого отталкиваться при проектировании
Спасибо за статью. Было интересно читать о проделанной работе над ошибками и эволюции продукта.
Надеюсь вас не домотивировали писать еще комментаторы, считающие vim, mc commander и windows xp эталонами интерфейсов.
Почему типичные дизайн-подходы оказались неприменимы к интерфейсу для производств