Как стать автором
Обновить

Комментарии 77

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

Отдельный котел в аду, конечно, для разработчиков штатных автонавигаторов. Косяков в них хватает, приколов (вроде разрешение 640х480 — сегодня-то!) тоже, но вишенкой на торте выглядит предложение дилера заплатить тысяч 50 за обновление карт в навигаторе.
Про экраны в Авто да, отдельная большая тема.
Вот пример с тех же выставок, от одного крупного Японского производителя.
image
Огромный (для авто) экран, гиганский Gauges (ИМХО не удобный), а камере заднего вида уделили всего уголок, при этом именно изображение с камеры тяжелее всего рассматривать же. Левая часть экрана вообще не используется почти. Я уже молчу на непонятные «дизайнерские» отражения на цифрах и стрелке спидометра сбивающие с толку.

Я думаю это временно. Года через 3 станут понятны все ошибки больших экранов в авто, мода поутихнет и станут делать хорошо.
Года через 3 станут понятны все ошибки больших экранов в авто, мода поутихнет и станут делать хорошо.

Сколько лет прошло с появления первого встроенного в авто навигатора с дисплеем… а воз и ныне там
не верю что они будут делать хорошо, была надежда на гугл с его auto… но достаточно отзывы на него на маркете почитать чтобы понять что и они тудаже… помоему место там проклятое или реально дух чужой (для ИТ) индустрии не дает нормальным дизайнерам делать хорошие вещи

Google в дизайн? Не смешите меня. Они Андроид свой несчастный привести в порядок до сих пор не могут, хотя там с десяток экранов, куда им в авто. Было бы интересно, если кто нибудь привел пример продукта от Гугола, в котором они смогли. Для меня Google = bad UI и исключений я не знаю.

У Гугла всеравно лучше чем у всех кто делает встраиваемые системы
Неважно что bad ui, это всеравно лучше будет.
Я ниразу не видел нормальный интерфейс в авто, ни одного вменяемого навигатора, встраиваемых систем видел не особо много… но там тоже темный лес и черти, но это и в статье хорошо описано… причем там еще бывают адские проблемы с логикой и юзабилити типа сделать кнопку стоп — программной (да еще и подтянуть железную кнопку к ком-порту и программно её мониторить, это норм в областях где нет жесткой сертификации), а экран при этом тормозит (это вообще бич всех таких систем, привет упомянутые автоматы в метро)

Попробуйте новые немецкие автомобили — немецкая тройка (Ауди, БМВ, Мерседес) выкупила HERE maps у Nokia и использует их в своих авто для навигации. В свое время это был лучший сервис, а немцы традиционно сильны в дизайне.

А, так вот куда делись HERE maps.
У меня на нокии c WindowsPhone все еще стоят, действительно годные и шустрые карты.
Нужно будет посмотреть, как это в авто-GUI интегрировалось.
Даже Here гордиться в смысле UI особо нечем. Google Auto и аналогичный механизм от Apple поудобнее будут. Про актуальность данных даже не вспоминаем.

Да, Яндекс будет еще сколько-то кукситься и думать, что они передаваят рынок под себя (ага, с «головами» в 2 Гб ОЗУ и необходимостью ставить «голову» вместо ПО на телефон), так что их на раздаче пирога автонавигаторов не ждем, но вообще у связки «телефон + голова» есть шанс побольше, чем у встроенного навигатора. Тем более что у Яндекса и на телефоне с UI проблем побольше, чем у гуглокарт.

И, повторюсь, конечно прикольно ощущать, что к цене авто в несколько лямов я могу дописать еще сотню-другую рублей просто за хорошую магнитоллу, и обновить ее потом за скромные полсотни до «свежих» карт, но, попользовавшись теми же гуглокартами на телефоне, начинаешь ощущать, что такое «свежесть» карт на самом деле, и платить за карты трехлетней давности, которые с умным лицом за полсотни рублей тебе зальют чуть не с компакт-диска (!) кажется уже не умным. а глупым делом. Но и без карт, получить себе экран чуть не во всю ширину торпедо, чтобы на нем во-о-от такими буквами и цифрами читать о температуре масла и бегущий текст радиостанций (зачем блин он мне во время вождения, кроме как отвлекать?), невольно думаешь, что за «большой» экран несколько переплатил.
Вот тут не соглашусь. Гугл делает отличные интерфейсы. Просто далеко не все дизайнеры могут пользоваться гайдлайнами. Сам пользуюсь различными сервисами и телефоном на чистом андроиде. И если вы говорите о собственных оболочках от производителей смартфонов, то это не имеет никакого отношения к гуглу.
Пользуюсь телефоном на чистом Андройде. Хотя нет, пользуюсь Microsoft Launcher (не имеет отношения к плиткам). И знаете, скругленная полоса поиска вместо ряда иконок, у которой при тапе видны квадратные границы — это убого, хоть ее и делали все дизайнеры Google.
А чего стоит «темная тема», которая в половине системы темная, а в половине белая. Следующего мажорного релиза, не иначе.
Ну так и поставьте нормальный лаунчер, раз в вашем кривая полоска поиска
А добавлять можно? :) Я не дизайнер, но кое-какие замечания к дизайну, и не только встраиваемых систем, у меня тоже сложились.
1. Не нужно выводить свой логотип на экран вообще. Ни в заставке, ни при загрузке, ни на рабочем пространстве. Этим грешат почти все — все любят свой бизнес. А не пользователя. Примеры: mail.ru агент. Когда включаешь его, он несколько секунд показывает тебе логотип компании. Зачем? Я не для этого программу запустил. Монитор Asus у меня, я до сих пор не могу привыкнуть, что при включении питания он выдает свой логотип. Я прихожу на работу, включаю UPS, монитор выводит логотип Asus, я жду пока загрузится комп… Потом понимаю, что комп я еще не включил, а UPS включил. Зачем подавать неинформативные признаки жизни? На мониторе под экраном и так написано, чьей это фирмы монитор. Всё, не куплю монитор этой фирмы…
2. Что касается разработки сайтов компаний: не нужно на главной странице сайта размещать приветствие ее руководителя. Люди не за этим сюда зашли. Понятно, что биг босс хочет всем показать, что именно он альфа-самец в этом стаде. Но клиенту нужно не это. Клиенту нужна информация о компании и об ее услугах.
3. Не нужно делать «долгие» сообщения. Самый отвратный пример — это автоматы для пополнения транспортных карт в метро. По десять секунд этот тормоз читает карту, пополняет карту и так далее. К самому дизайну претензий вроде как нет, навигация простая. Но вот по временной оси проблемы очевидны — аппарат крадет время.
У меня к дизайну киосков метрополитена в Москве много замечаний, основное это:
Не нужно весь дизайн делать красным. Это ужасно. А на блеклых экранах еще и нечитаемо. Там кстати та же проблема с хреновыми экранами и томатным цветом UI, что вовсе не соответствует фирменной стилистике, как в примере из статьи.
Кнопки отмены расположены очень близко к кнопкам действия на сенсоре плохой точности, особенно при оплате банковской картой постоянно на уголок кнопок жму, чтобы случайно отмена не нажалась.
GUI очень тормозной. Такое чувство что там переполнение памяти из-за долгой работы софта где-то. Т.к. иногда попадаешь на лютые тормоза, а иногда вроде бы и норм.
Но с другой стороны для таких объемов и количества использований (нужна надежность) всё около дела. Работает же и достаточно успешно.
Возможно, у монитора есть настройка для отключения показа логотипа.
У Lenovo и DELL не отключается, да и остальные непонятно зачем надпись «No Signal» выводят, только Apple Cinema Display не показывает ничего лишнего и не апскейлит изображение, если оно не того разрешения (но у меня его нет).
Не нужно выводить свой логотип на экран вообще. Ни в заставке, ни при загрузке.

А почему, собственно?
Насчет рабочего пространства полностью согласен. Но пока программа загружается, то есть момент, когда программа уже запустилась, но еще совершенно не готова к работе. Можно и порекламировать себя немножко. Какая разница, что будет в окошке, которое означает всего лишь то, что оно уже запущено (второй раз тыркать в иконку запуска не надо), но еще не готово к применению (не надо нервничать, ща будет)?

Поддержу. Пишу для панелей оператора, там заставка грузится в любом случае. Если при загрузке будет заставка не условного сименса, а любимой компании — никому плохо не будет, а директор будет добрее, проверено! =)
Угу, только руководство иногда может сказать: «А чего он так мало наш логотип показывает? Поставьте задержку!». И оно довольно, да. А покупатель потом вспоминает разработчика недобрым словом.
Если продаешь, то да, а если для внутреннего потребления, то директор и есть покупатель. Да и, бывает, оборудование переезжает внутри холдинга, а между предприятиями холдинга негласная конкуренция, тут неплохо показать, кто автор.
Если программа загружается — здесь еще логотип уместен. Главное — не «притормаживать» загрузку программы специально.
Вам вот понравился дизайн осциллографов — а у меня они все почти боль вызывают… Большинством в принципе не возможно пользоваться, из за отсутствия нормальных органов управления доступных исключительно тактильно. И когда понимаешь, что оно не осциллограф — а просто тупая и кривая программа под винду, не понятно зачем делать устройство, чтоб пялиться в слепой '10 TN экранчик c неудобным интерфейсом, если к этой самой винде можно 4k ips подоткнуть. Особенно доставило 2 USB на морде, в один из которых вставлен по видимому аппаратный ключ к особо дорогой программе на винде без которой этот осциллограф — тыква…
Ждал этого комментария.
У меня мало опыта работы с осциллографами, но в них действительно много хороших наработок по UI/UX за полвека их эволюции.
Основная мысль статьи — что со своим GUI надо работать. Особенно с новым и хотя бы пару месяцев по 8 часов в сутки на старте производства, тогда становится более — менее понятно, что именно нужно для работы конечному пользователю, а что излишне и можно запихнуть на задний план. (с железом так же).
К сожалению, многие, кто приходят к нам за дизайном, просто просят «сделать красиво» и после чего забивают на все остальное. Хотя по уму необходимо вернуться через полгодика тестов, указать дизайнеру на ошибки и пользовательский опыт/отзывы чтобы сделать лучше. Донести это до заказчика задача сложная, для большинства прибыль на первом месте, а мы тут с вами про заботу о потребителе.
По опыту хороший софт/UI выходит где-то на версии 2.5 — 3. Делая полный редизайн цикл начинается сначала.
Любой разработчик, который не взаимодействует с конечным потребителем железа (и UI), обречен на такие отзывы как ваш. Хотя только одного вашего мнения мало, нужно собрать минимум пару десятков по одному конкретному прибору.
Да тут вся индустрия больна… У нее стагнация давно. Когда ты держишь на ладошке 50 граммовый осциллограф — ты четко понимаешь, почему в нем _все плохо_ и почему в этом случае пожертвовали _всеми_ элементами управления. Но, он может просто лежать в кармане — лежать годами, пока не понадобится для чего то один раз в жизни, и за этот раз ему можно будет все простить. Потом ты берешь в руки «150грамм», и как то получается, что уже можно более менее жить, но лишь в 4-й версии UI от этой конторы, после огромной работы над ошибками, но он все еще влезает в сумку и это круто…

Тут черт возьми — перед вами 30ти килограммовый шкаф! Как в нем вообще возможны какие либо в принципе жертвы, классическим интуитивно понятным интерфейсом!? — его же с места сдвинут 2 раза в жизни когда будут двигать стол… И эта компоновка… — из истории «про диаметр ракеты и жопу лошади»… За слепым '10 экраном, пространство создает впечатление, будто там до сих пор ЭЛТ труба стоит. А дизайнеры то «новые» — с вот этими всеми идеями, о том как на эту «жопу лошади» современный сенсорный интерфейс натягивать… бррр… И самое главное, что хочет юзер?! — на морде побольше USB! — потому, что основная функция этого «компьютера на винде», скинуть семпл измерений на флешку. Чтоб побыстрее отбежать от этого «типа прибора», к настоящему компьютеру на винде — и там уже КОМФОРТНО в привычном каждому мышыно-клавиатурном интерфейсе «винды на каждый день» заняться тем же самым виндо-компьютерным анализом этого семпла. А слепое шумящее пропеллерами чудовище вырубить, чтоб на уши не давило… Такая вот у них «эволюция»…

Но когда их видишь на выставке один раз в жизни или когда вдруг зашел где оно стоит — это прям вау какое дизайнерское поделие — хоть сразу в музей тащи…
Ценный фидбэк. Я пока делал только один GUI для осциллографа формата «пачка сигарет» с одним энкодером, учту на будущее.
Эту проблему я описал в разделе статьи про лазер и их «компьютер на колесиках» и комментарием ниже. Подключать обычный ноут к «шкафу» — наиболее оптимальное решение в половине случаев.
С лазерами (и сваркой) вообще засада — там газовая эмиссия метала в атмосферу… В такой атмосфере «просто компьютеры» или компьютеры из магазинных железок долго не живут вообще — поэтому там нафиг надо все изолировать. А если производство мелкое (1 цех) то обычно рядом кто то еще и болгарит и тут же точило где гафниевые электроды точат — добавляем к парогазовым оксидам металлические частицы любого размера. Поэтому в идеале конечно там не должно быть никакого интерфейса кроме одной зеленой кнопки «Хочу». Если люди или оборудование могут пострадать — можно добавить еще красную «упс — что то пошло не так»……
Вот, описано реальное рабочее пространство)
Компьютер можно подключить с расстояния (из другого помещения), как я понял из того что видел по конкретному случаю на софте нужно только программу резки задать, далее нужна одна кнопка пуск. На крайний случай есть целый ряд защищенных устройств в продаже.
Но то что на самом лазере должны быть кнопки это верно, в том числе и аварийный STOP с ключиком (Ключик для ТО, чтобы никто не смог включить ничего никаким способом, когда он убран, пока руки и голова внутри прибора)
Ключ не нужен — ты его поворачиваешь, когда пропуск показываешь вахтеру, чтоб попасть на производственную территорию… А далее работает ТБ и всякие нарушители ТБ без пальцев ходят…
Я про ключ блокировки аварийной кнопки STOP. Если его нет внутри, то блокировку нельзя отключить.
Я когда на Тех.Обслуживание в бетономешалку ползал, предпочитал данный ключ держать при себе.
На верхней картинке осциллографы R&S, на работе есть такой, которому что-то около 10 лет (еще Win XP и резистивный экран), при этом нареканий по удобству работы к нему нет. Возможно ваш опыт складывается на дешевых китайских тектрониксах и хантеках, они действительно вызывают боль.
Это не так работает — как раз опыт тут не нужен, он только замыливает ваши ощущения от кривого интерфейса. К любому ведь можно привыкнуть. Важен именно первый подход. Классические аналоговые осциллографы и их советские клоны имеют столетнюю историю эволюции эргономики органов управления — это для меня золотой стандарт эргономики осциллографа поэтому я хочу видеть осциллограф или таким, или приставкой к компу — а не чем то средним. Естественно я понимаю, что есть какие то ограничения в каких то формфакторах устройств, и нельзя сделать таким «наладонник»…

Боль у меня вызвал лекрой. Я не смог в нем разобраться без инструкции — это уже первый и основной признак не нормального интерфейса осциллографа (такое случилось впервые), а вот как раз китайские боль не вызывают — потому, что нельзя купить дешевое говно и требовать от него свойства нормального продукта… Но когда то, что якобы позиционируется как нормальный продукт, и имеет цену от космического корабля по юзабелити по сути оказывается говном — это больно, еще больнее когда ты понимаешь, что даже на китайском что то делается быстрее-проще-интуитивно понятнее… И если вы видите на фото в интернете «виндограф», а сбоку лежит клава и мышь — это тоже абсолютный провал дизайнеров его интерфейсов.

Я пользуюсь им раз в пол года, так что глаз не замылен. Впрочем на пути от С1-72 через Tektronix, Agilent и до R&S я на каждом этапе был поражен технологиями. Да, "пакетники" на аналоговых приборах более информативны, чем современные энкодеры, но на этом все преимущества заканчиваются.

Мне так или иначе пару раз в неделю приходится иметь дело с разными, и не классический дизайн управления я прощаю лишь портативности.
К слову о китайских осциллах и их интерфейсах — не помню конкретно фирму, но цифровые ослики в универе запомнились тем, что на морде была отдельная физическая кнопка с подписью «NOT USED», которая делала… бинго! Ничего!
Что касается конкретно R&S (того что на фото) то они смогли сделать удобный интерфейс, он сенсорный поддерживает drag and drop, позволяет расставить окна с сигналами как угодно, сильно упростили настройку сложных фич, которые кнопками настраивать сплошная боль, в общем мне понравилось
п.с. в USB торчит стилизованная флешка, на ней профиль проводов сгенерированный на анализаторе для компенсации этих самых проводов, там 2 провода подключено разной длины
Спасибо за очень полезный обзор!

Можете посоветовать литературу, где был бы изложен системный подход к созданию промышленных UI?
Вот прямо ничего конкретного по промышленным UI посоветовать не могу.
Но мы с коллегой открыли для себя мир старой Советской литературы про эргономику и устройство всяческих приборных панелей.
Например вот:


Недавно вот такой список литературы обнаружил, но еще не приступал к его изучению:
ссылка

Эти знания (в основном про UX) не утратили в актуальности именно в промышленных дизайнах.
Похоже, это на самом деле единственная достойная работа на сегодняшний день по этой тематике.
Я в том году занимался переделкой визуальной части библиотеки компонентов софта для имитационного моделирования технических систем (внизу вставлю гифку, чтобы было понятно о чём речь), и в процессе подготовки безуспешно попытался найти в библиотеке ТУ Дрездена профильную литературу на эту тему. Об этой книге я слышал ещё в университете, но не помнил точного названия, и нагуглить её не смог. В итоге довольствовался обрывочными воспоминаниями пересказа базовых принципов.

Анимация

Мне кажется «Психбольница в руках пациентов» практически вся про это.
Присоединяюсь к посту! Спасибо за статью! Занимаюсь частично промышленными системами, очень интересна тема промышленных UI. Аналогичный вопрос — чтобы вы посоветовали почитать на эту тему? Может быть у вас есть примеры хороших UI, с которых стоит поучиться?
По литературе, ответил выше. Что касается примеров хороших UI, все очень субъективно. Обычно делаем целый анализ под конкретную область применения, т.к. у всех разные «специфики» и хотелки и цели. Идеального ничего нет, я привел в пример осциллографы, понимая что кто-нибудь из пользователей, кто реально использует их в работе скажет обратное в комментариях, что и произошло.
Я подумаю, пока не знаю как ответить объективно.
Пока дам ссылку на свою старую статью про проектирование одной конкретной системы умного дома, для понимания как строится UI с карандашных набросков до рабочего варианта и с улучшением до версии 2
inediapps.com/blog/smarthome.html
Хотя сегодня, спустя 5 лет я бы там много чего поменял и улучшил (сама индустрия умных домов шагнула вперед, сменилось железо и пр.)
Что помешало дать возможность пользоватею напрямую подключить к лазеру его любимый ноутбук с данным ПО?

А тут начнуться рассуждения что ПО особо секретное и его надо защищать суперважными токенами и ключами (привет станкам выпущенным в 90-е 2000-е с lpt ключами снятыми с производства тыщу лет назад которые не заводятся на не-встроенных в материнку lpt портах)
Справедливости ради. На выставке присутствовало множество решений, где просто был подключен обычный ноут/планшет/пк к железу. Я думаю это оптимально для очень большого стека оборудования.
я не спорю с тем что это удобно.
я к тому что объяснение «почему так не сделано» будет довольно забавное.
==
и кстати бывают еще казусы в этом стиле. например устанавливал сервак со специальным оборудованием по перехвату и корректированию видеосигнала, который прям весь такой специализированный но гениальный софт работает ТОЛЬКО на Windows 7 Prof, серверные версии винды не поддерживаются в принципе (ответ производителя «а зачем?? все норм работает на семерке!», линукс (ха! что это??))… вот мне пришлось поупражняться чтобы на эту семерку взромоздить дрова для сервера на все его raid контроллеры и т.п.
Большинство продуктов на выставках были импортом. Немецкие, Китайские, Швейцарские, Американские системы часто просто русифицированы (я специально уточнял эти моменты в разговорах).

Русификация — особенная боль. Когда часто короткие английские слова заменяются на русские и текст перестает умещаться в кнопках. Получается такой вот треш:


У конкретно этих чуваков проблема в том, что на их родном японском-то всё шикарно помещается, вот и рисуют чтоб было стильно модно молодёжно. А потом начинается локализация и внезапно происходит «ой» с последующим «Доб.изб.мест.на...».

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

Хотя они этот код так любят, что у них есть в плей маркете и аппсторе навигатор свой, в котором на самом деле крутится эмулятор автомагнитолы…

Ну и до кучи гугл с зенрином что-то не поделили, так что на какое-то время гугловские карты в Японии не у дел.
Поэтому в тойоты Яндекс.Авто начали ставить. Только ради этого купил бы следующую машину с яндексом.
Занимался промышленными интерфейсами несколько лет назад. В самом начале я разочаровался в том, что предлагали SCADA-решения на тот момент и решил запилить свой UI на WPF (ну, то есть мне позволили тратить на это время). Тогда же мне подвернулась книга The High Performance HMI Handbook (ISBN 0977896919) — очень неплохая подборка рекомендаций по UX в контексте пром.интерфейсов. Не могу сказать, что я сторонник нарочито-унылых экранов как предлагается в той книге, но от вырвиглазных бесполезных украшательств она меня уберегла.

Код за моим приложением скрывался таксебешный, но вот отдельными фичами и внешностью своего первого проекта я горжусь. Там нужно было сделать вакуумную печь, и я наворотил там от души:
  • визуализация состояния запорной арматуры через анализ графа;
  • валидация команд ручного режима, в том числе по тому же графу («нельзя открыть этот клапан, потому что это приведёт к прямому контакту печи с атмосферой» — руками все комбинации не перебрать);
  • регистрация и отображение показателей в графиках за произвольный промежуток времени (от секунд до дней) — один цикл термической обработки занимал сутки;
  • устойчивость к перезапускам;
  • возможность управления с нескольких постов.


И так далее. Когда тебе дают время и полный контроль над поведением автоматики это всё-таки клёво, хоть и немного страшно: одна неправильная команда, и что-нибудь или даже кто-нибудь может очень сильно пострадать.



А ещё имитировал висящий на стапеле ракетный двигатель с помощью игрового движка когда делал автоматику и UI для стенда испытаний руль-машинок (просто гидроцилиндр на самом деле). В общем, промышленные интерфейсы это поле непаханное для современного IT и UI-дизайна в частности.

по элементам, конечно, нужно сетку поправить, но схемы — очень хорошо представлены.
Как я и упомянул в статье — схема «под бумажный чертеж» всегда смотрится.
Функционально конечно такие UI оценивать можно только на производстве.
На первом фото узнал Telerik )
Wow, приятно увидеть свою старую разработку в деле.
одна неправильная команда, и что-нибудь или даже кто-нибудь может очень сильно пострадать.

Без тестового стенда имитирующего реальный прибор, как правило делать что-то нельзя в таких случаях.
Вообще не раз наблюдал как многие программисты делали правки прямо по живому проекту, из последнего — команда субподрядчик правили БД прямо на рабочем сервере, тестового себе не сделали, что приводило к периодическим крэшам основного сервака. Пользователи не имели доступа к БД иной раз сутки и более. Хорошо нами была предусмотрена возможность оффлайн работы для критических задач. Мои предупреждения, что компания клиента может потерять таким образом все данные или часть (бекап раз в какой-то период там все же делался) просто игнорировались.
По промышленным HMI и логотипам. Промышленные системы визуализации что WinCC и TIA Portal от зименс, что RSView и FTView от бредли сами генерят шаблоны с дополнительным логотипом на экране. Дальнейшая судьба у этого логотипа: остаться в том же виде, либо быть подменённым на логотип интегратора, либо быть подменённым на логотип заказчика, либо быть удалённым. Я обычно вижу варианты 1 и 2, сам обычно удаляю, если нет отдельных хотелок от заказчика. В одном дивном поделии от немцев, кстати, специально для россии дефолтный язык — немецкий, главный экран — экран с адресом этих самых немцев, т.е. вообще к технологии не относящийся.
НЛО прилетело и опубликовало эту надпись здесь
Я дизайнер, я так вижу.
А что если мнения дизайнера недостаточно, и требуется объективное доказательство: в цифрах, графиках, таймингах, и так далее.
В этом случае для каждого элемента графического интерфейса заполняется таблица необходимости визуального присутствия на экране в той или иной ситуации. Там будет много цифр, и многие из них будут с потолка — но этого уже будет достаточно для правильной сортировки элементов графики. То-есть диплома дизайнера уже не нужно, достаточно уметь считать.

Как это выглядит. Например для станка лазерной резки в момент непосредственной резки металла: любая графика о редактировании, настройке, профилактике — всё это лишнее. Там должно показываться символическое изображение раскроя в полный лист (со всеми размерами не влезет). Символическая траектория движения механики на десяток секунд вперёд (или больше). Время до окончания (крупно), состояние расходных материалов, и список ошибок механики (мелко: ошибка позиции, ошибка чистоты заготовки и так далее).
Всего остального в этом режиме быть не должно.
А оно есть.
требуется объективное доказательство: в цифрах, графиках, таймингах, и так далее.

Требуется кому?
Все показатели, что описаны ниже, как раз нужно инженеру по дизайну отдать (либо он должен вывести все необходимые параметры сам, если их нет).
Дизайн это вообще сплошная инженерия, рисовать картинки может и сын маминой подруги.
Хотя если пытаться представить графику дизайна «отсортированную цифрами», то ничего хорошего точно не получится.
cyber_roach большое спасибо за статью! Почитал с интересом и понастольгировал. Справедливости ради, стоит сказать про логотипы — ни разу не видел на производстве брендированную панель. Но в каталоге того же Siemens, такая возможность, конечно, упоминается. Возможно, «станочники» чаще берут брендированные панели, мы делали АСУТП собственных установок.
Еще про иконки — в основном использовали панели Siemens серии KPT — сенсорная с кнопками — в кнопки вставляется впихивается с матом и слезами печатная полоса из специально подобранной по толщине и жесткости обложки от каталога с подписями или иконками. Получалось довольно интересно — на физических кнопках пиктограммы, дублировали их экранными кнопками с подписями.

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

Там процентов 70-90 функционала на экране не отображена. Функционал запоминаешь по режимам и кодам. Прокрутка меню вообще не интуитивная.
Как раз таки текст там читабельный. Там особенность экрана, то что он контрастный и чёткий.
Лучше конечно сделали бы текст более жирным, но там всего 4 уровня градации у экрана. Поэтому локализация выглядит как вырви глаз.
А можете покритиковать следующий дизайн?
imgur.com/a/vS25R9R
Ну и может посоветовать чего.
Слишком сложная система для разбора в комментарии.
Нужно понимать производственные процессы, чтобы как-то критиковать юзабилити.
Если бы вы пришли ко мне как заказчик, мы бы с ребятами засели тут на неделю — две только на разбор полетов, что, где как и для чего, вплоть до изучения толмутов по железу и инструкций техники безопасности.
Но что касается мелочей, если не повторять моменты из статьи:
* Навигацию по разделам я бы переместил наверх… но не точно. Возможно тут боковое меню подойдет, как например тут: inediapps.com/portfolio/hyterus.html
Навигацию по схемам — точно налево бы переместил, т.к. сначала выбираем схему, а потом работаем с ней (ваша компоновка подойдет больше для арабов или японцев), хотя это достаточно субъективно, я скорее стремлюсь к общепринятым компоновкам сейчас тут т.к. не знаю нюансов работы. Если UI только под мышь — то точно налево.
Верхние статусы все, вместе с лого/датой и управлением, возможно лучше выделить для них правую/левую часть по вертикали, сверху они довольно разрознено получаются. Так же хорошая практика статусы — в статусную строку помещать, но тут у вас довольно сложно, надо накидать все варианты и посмотреть как выглядит, удобно ли. (мои советы про распечатку на бумаге тут как нельзя кстати, в любом графическом редакторе можно просто подвигать все элементы и напечатать десяток листков с вариантами, попытаться поработать с ними «виртуально». там уже не надо быть дизайнером чтобы увидеть что лучше подойдет для общей компоновки панелек системы.)
+ я бы на навигацию добавил иконки.
* формат даты неудачен, особенно для таблицы сообщений.
12:30:15 28 Сентября 2019 (полный формат для РФ)
* подсветку строк в таблице сообщений я бы заменил просто на лампочки в начале, если загорится что-то красное будет видно. Слишком длинные цветовые полосы.
* в печах горит огонь (или в подогревателях), ок, но лучше дополнительно подписать что-то вроде «В работе», если все электроникой управляется, то выключенную печь вообще можно в Disabled (полупрозрачной сделать например) это даст понимание, что выключено вообще от сети, что включено, что включено и работает
* надо как-то решать вопрос валидации ввода данных. У вас много текстовых полей ввода, идеально — когда пользователь видит до валидации, в каких пределах от может ввести температуру, давление и пр. Даже инженеру-специалисту ошибиться — пара пустяков. Лучше предупреждать ошибки, чем и исправлять.
* нарисуйте сетку поверх UI, чтобы все выровнять. пример inediapps.com/portfolio/abudhabi.html (см. раздел «Гайдлайны»)

Внешний вид, конечно, мне не нравится, но хотя бы в мелочах напишу.
* уберите серый фон с мнемосхемы, у вас тексты не читаются + стандартные текстовые поля встанут получше
* Кнопки навигации визуально слишком бледные (подобные кнопки часто для Disabled состояния делаются) сделайте их, возможно, синими. Синий как нейтральный цвет — идеален. Оранжевое выделение синей кнопки встанет хорошо. Это вам даст серый для блокировки кнопок которые нельзя нажимать в данный момент.
Ага, спасибо. Несколько уточнений:
Верхние статусы все,… возможно лучше выделить для них правую/левую часть по вертикали
Проблема в том, что их достаточно много, а еще больше «зарезать» ширину основной области экрана не хотелось бы — и так иногда не хватает. Ну и, это по идее и должна быть статусная строка — «глобальная» информация по всем экранам сверху, «локальная» — справа(/слева) и на каждом разделе/экране может быть своя. Ну, такой был план.
особенно для таблицы сообщений… подсветку строк...
Сообщения в журнале скроллятся, но идея интересная. Подобрать подходящие цвета для разных типов сообщений было той еще мукой, чтобы не сливались, но и не вырывались вперед.
У вас много текстовых полей ввода
Не понял, что создало такое впечатление, но текстового ввода в системе вообще нет (все на этапе разработки/конфигурирования). Числовой ввод есть только для аналогов (во всплывающем окне) и некоторых других полей. И да, разумеется некоторые пределы есть.
нарисуйте сетку поверх UI чтобы все выровнять
Элементы на «табличных» экранах симметрично выровнены, а основные мнемосхемы вроде как выравнивать и нет смысла.

Кнопки/фон — буду думать.
Индикаторы и навигацию можно совмещать — я разбивал процесс на подпроцессы(участки) и в левой стороне экрана создал колонку кнопок-индикаторов с пиктограммой подпроцесса и подписью. В зависимости от наличия и категории активных алармов индикатор менял цвет. По нажатию/клику на пиктограмму, происходит переход на мнемосхему подпроцесса.

На панелях оператора это позволяет существенно экономить место и довольно информативно отображает состояние установки в целом.
Еще замечание по цветам — красный и ядовито-зелёный лучше вообще не использовать. Это мнение сугубо моё и тех, кто продвигает идеи high performance HMI — в идеале мнемосхема должна быть серой и однотонной, чтобы взгляд не цеплялся за каждую открытую задвижку. Но как только происходит какое-то изменение, требующее внимания (выход параметра за границы нормы, остановка оборудования по блокировке или неисправности), тут же нужно привлекать внимание оператора цветовой индикацией.

Если оборудование в норме, то незачем об этом кричать зелёным цветом. Красный — для нарушения предаварийных границ, либо критических сообщений.

Конечно, если красный/зелёный цвет для открытых/закрытых клапанов обязывает использовать стандарт предприятия, никуда от этого не деться (разве что с насыщенностью поиграться, если допустимо. Бледно-бледно красный всё еще красный, в какой-то степени =). Или с размером индикатора )

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

Если какую-то информацию можно не показывать — её нужно не показывать!
«БП исправен» — ну славно, конечно. Только вот исправен он будет 90% времени. Зачем это видеть оператору?
«Питание кранов в норме» — та же ситуация.

«Ручной» режим работы — это плохо? То, что оператор управляет ГРС — это плохо? Возможно, жёлтая индикация, тут излишня.

«На связи» — это прекрасно. Но излишне — в случае обрыва связи, проще заместить именно этим индикатором все элементы управления, недоступные из-за потери связи. При наличии связи этот индикатор абсолютно лишний.

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

Печи, из стандартного пака графики. Они уже всех задрали, честно. Для любой печи используется эта топка. Возьмите условное графическое обозначение из стандартна — будет лаконично и понятно — точно такое же будет и на технологических схемах.

Обозначение ручных кранов (Вы уверены, что на схеме АСУ они нужны? Она всё равно никогда не будет достаточно подробной и приближенной к реальности, чтобы по ней ориентировались в трубопроводах) и управляемых выполнено в разных стилях. На управляемых кранах отображается байпас, судя по всему. Он имеет управление и контроль состояния? Нет — нахер с пляжу.
Вы используете одновременно и системные и не системные единицы давления — это очень плохо… Понятно, что не системные дает вам какой то сторонний датчик, в идеале их надо переводить тут же в системные и отображать там же (исходные можно тоже отображать, в скобках для диагностики специалистами производителя датчика)…

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

Мне кажется по возможности стоит избегать цифровых наименований… В данном случае, это «Выходы 1 и 2». Людям более свойственно оперировать назначениями и пространственными ориентирами, чем цифрами. Понятно, что внутри однотипные объекты нумеруются и схема их соединения не очевидна — но тут функциональное назначение разное «в город» и «на ТЭЦ-1» — возможно стоит переименовать параметры по назначению убрав цифры. (Оборудование кстати тоже). Фраза Хьюстон «у нас проблемы в выходе на ТЭЦ-1» более однозначна чем фраза «на выходе 1» вас не переспросят — «выход 1 это который куда?»
По-моему, все дело в том, что большие фирмы, выпускающие что-то, что «совсем не компьютер», разработке ПО и дизайну в частности выделают ресурсы по остаточному принципу. Интерфейсы автомобилей, лазеров, и конечно же, принтеров и сканеров тому пример и подтверждение. Сплошь и рядом «железяка» супер, а софт для нее — овно с большой буквы г…
Зачастую, в небольших компаниях проблема еще и в том, что один человек занимается и подбором железа, и разработкой алгоритмов, и программированием среднего уровня, и разработкой интерфейса, и его реализацией. В итоге как раз интерфейс и делается по остаточному принципу, потому что ср*ки горят.
Ну все же Никон-Кенон-Фольксваген-Минолта-НР ну совсем не небольшие компании :)
Пять копеек, может, кому сгодится.

У Siemens вышли курсы и учебник к ним — HMI Design Workbook. Заказал, пока ещё не читал.
Электронную версию можно заказать здесь, со временем вроде сделают и заказ бумажной книжки.

К книжке есть двусторонний плакат с «выжимкой» в виде ПДФ. Я его прилепил в группах «АСУТП и Безопасность» в ФБ и «BIG_ASU» в VK (сообщение пока еще на модерации) — берите, если кому надо.
Спасибо за информацию!
Также можно еще коротенькие видеоуроки посмотреть.
Вообще, Siemens, конечно молодцы в плане дизайна, чего не скажешь о качестве софта.
Спасибо за статью, было очень интересно читать и посмотреть на промышленные интерфейсы.

Всё написано по делу, я бы лишь добавил по теме с тёмными интерфейсами: на дешевых дисплеях с тёмным фоном также есть проблема с пересвеченными/недосвеченными его участками и, как правило, это более заметно, чем на светлых фонах. Это выражается в желтых пятнах по краям дисплея. Чем менее освещено окружение такого монитора — тем более заметны пятна.
Секрет фирмы в том чтобы «методом тыка» подобрать наиболее комфортные цвета под конкретную модель дисплея. Это может оказаться какой-нибудь темно-зеленый с оранжевым. (привет сбербанку )) или темно-голубой с опять же оранжевым.
Хотя все равно будет хреново если дисплей явно плох, но хоть как-то терпимо без сильной пятнистости
Денис, спасибо, что включили наше устройство в свой обзор! На 12 фото измеритель уровня громкости и звука от компании «Тракт», мы его еще немного доработали, в т.ч. интерфейс. Если понадобится следить за громкостью эфира — обращайтесь :)
Спасибо!
Проблема промышленных IU в том, что естественный отбор здесь не работает от слова совсем. Если разработчики чипсетов для мобильной электроники делают основную работу по железу, то производителям смартфонов остаётся только инвестировать в GUI, дизайн и маркетинг. В этой сфере работают лучшие дизайнеры, а бюджеты на дизайн составляют основную часть стоимости новой модели.
Теперь предположим, сколько закладывает производитель пресса стоимостью в 2млн $ в дизайн интерфейса? Едва ли больше 1%. И если конкурент с блеклыми цветами GUI предложит чуть большее давление, нетрудно догадаться, чью продукцию предпочтут.
В автоиндустрии та же история. На что смотрим мы выбирая новое авто? Расход, стоимость ТО и доступность запчастей. Потом на экстерьер и интерьер. А о кривом интерфейсе магнитолы узнаём зачастую не на первой тысяче пробега. Если девушка красиво играет на пианино, зачастую она дурна автопроизводитель в рекламе делает основной упор на улучшенную приборную панель с инновационной графикой, то с другими параметрами автомобиля дела обстоят не так радужно, как правило.
Вы пишите, что интерфейс осциллографов для вас является примером для подражания. Очевидно, и в этой сфере конкуренция достигла такого накала, когда каждый элемент GUI важен
Спасибо. Вы пишете так, будто хороший дизайн — признак проблем в других частях продукта.
Спешу не согласится, по моей практике как раз наоборот, дизайном занимаются в основном те производители, кто уже решил основные проблемы с железом. Хотя да, есть и те кто с дизайна начинают или пытаются обойти конкурента впереди.
В статье как раз и утверждаю, что UI системы неотделимо от всего остального: качества железа и его дизайна, характеристик продукта и надежности, внутреннего кода и пр. Если упор сделать только на дизайн это ничего не даст, а часто даже испортит, как та девушка с пианино, хотя, возможно, она отличная хозяюшка, кто их разберет, пианисток.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории