Хабрахабр

Дизайн интерфейсов встраиваемых систем


Осциллографы

Когда делаешь интерфейс ПО какого-нибудь лазера или яхты — это чистый кайф и творчество.
На прошлой неделе я посетил выставки expoelectronica и embeddedday именно как UI разработчик. Встраиваемые и промышленные системы — моя любимая тема в разработке дизайна. Целью было посмотреть на новинки вживую, пощупать, набраться опыта.
В итоге я посмотрел более 100 GUI различных систем, но вот с набором опыта возникли проблемы...

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

Много фото! Внимание!

Идея статьи пришла уже после. Прошу прощения за качество некоторых фотографий, они сделаны “для себя" в процессе разговоров и тестов.

Про дизайн в целом

Большинство систем, представленных на выставке, ничем не отличается от тех, что я видел в начале 2000-х, когда вообще мало кто задумывался о дизайне интерфейсов.

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

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

Красота — понятие относительное, но по опыту, хороший дизайн всегда красив, быстр и удобен.

Ищите хорошие примеры — посмотрите на осциллографы

Мой коллега высказал предположение, что данный тип устройств существует на рынке очень давно (в 1932 году был представлен первый осциллограф с ЭЛТ экраном), поэтому выйти на рынок без идеального дизайна корпуса и интерфейса практически невозможно – теряется одно из конкурентных преимуществ.
Это подтверждает и количество выставленных устройств данного типа, более 2х десятков. Все осциллографы на выставке были хороши во всём, что касается дизайна.


На этом фото прекрасно всё

К сожалению, осциллографы — единственные экспонаты, которые вызывали у меня восторг и чувство эстетического наслаждения.

Не используйте популярные Guidelines

(Material Design, Windows Metro и т.д.)


Навигационный киоск

Ошибкой назвать такой подход я не могу, это скорее рекомендация.

  • По опыту, гайды может использовать только дизайнер (хотя часто позиционируются они совсем по-другому)
  • Любые Guidelines создаются под конкретную платформу (или продукт). Используя, скажем, плоский стиль Win 10 в приложении на QT, HTML и даже в WPF, вы создаете "подделку", не дотягивающую до оригинала по качеству визуальной части (которая, по мнению многих, не так уж и хороша).
  • Вы не сможете использовать основные особенности базовой платформы: анимации, навигацию, валидацию, нотификацию и пр.
  • Всё это дополняется простеньким железом, не способным плавно отрисовать самодельные анимации (на реализацию которых, кстати, уйдет уйма времени ваших разработчиков, либо скачанная с GitHub библиотека на 150 МГб).
  • Добавим сюда промышленный сенсорный экран, неспособный к отзывчивости как планшеты на win10.
  • Кроме того, такой подход разрушает ожидания тех, кто действительно пользуются оригиналом.

Плоский стиль Metro — это только UWP платформа, iOS — только на iOS, Material — Андроид/Flutter

Такой подход в итоговой смете будет дешевле, чем, например, Material Design на Windows. Самое разумное в таких случаях (если очень хочется)— создать кастомный стиль, отдалённо основанный на каких-то гайдах.

Дизайн интерфейса должен быть един с дизайном железа

Тут, думаю, всё понятно.

Это вовсе не означает, что если ваш фирменный цвет — красный, то нужно всё окрасить в красный:


Вакуумный перчаточный бокс

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

Если интерфейс использует "физические" кнопки (особенно по бокам экрана как в банкоматах), клавиатуру, трекбол, джойстик или подобное, это нужно учесть.
Вот неплохой пример:


Портативный анализатор

  • С первого взгляда понятно, куда надо нажимать, но текст на нажатой кнопке-вкладке нечитабелен.

О логотипах

Зачастую его располагают прямо на рамке монитора: Одна из самых встречаемых ошибок — логотип производителя в заголовке ПО, тогда как лого уже присутствует на устройстве.


Камерная печь для пайки в паровой фазе


Линия производства печатных плат

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

  • Снова плохо читаемые блок-схемы.

Пользуйтесь вашей разработкой


Лазерный станок

Лазеры — это круто. Я люблю лазеры. Даже модная зеленая подсветка бокса не спасает. Но чем больше смотришь на эту фотографию, тем меньше хочется такой лазер.

<извините, сейчас буду ругать лазеры, не могу промолчать>
Я не знаю кто это спроектировал, но он явно не работал за своим "промышленным" компьютером на колёсиках.

  • Возможно, тут очень удобный интерфейс, но пользователь этого не оценит, двигая дешевой мышкой в ограниченном пространстве по покрашенному металлу. Еще и рука навесу.
  • Меня умиляет сделанная с заботой о человеке дырочка под лампочки Num и Caps клавиатуры. Это самая обычная (т.е. не промышленная) клавиатура, которая будет в грязи по самое “не балуй” уже спустя месяц. Совсем не весело работать лазером с застрявшим "Escape". Единственный способ почистить клавиатуру — разобрать всю увесистую конструкцию.
  • Прорезь под кнопки управления монитором… Возможно, это очень высокоточный лазер, но выпилить 5 миллиметров ниже, чтобы кнопка "Power" влезла полностью — не получилось даже у производителя. Да, там самый обычный настольный монитор внутрь засунут, а не встроенный экран.
  • Зеленая кнопка STOP. Я точно знаю, что такие кнопки есть с подсветкой оранжевого и красного цветов. Интересно, нажимал ли кто-нибудь аварийный грибок случайно, потому что на нём тоже надпись STOP, которая явно заметнее?

</закончить ругать лазеры>

Прямое. Какое это имеет отношение к дизайну UI? Абсолютно любое ПО будет проигрывать, если оно установлено на проблемном железе. Взаимодействие пользователя с системой начинается с устройств ввода-вывода.

В 10 метрах от стенда этого лазера стояла витрина с промышленными клавиатурами.

Если пройти еще метров 20, то увидим стенд с современными промышленными кнопками.

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

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

Учитывайте параметры экрана

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

Когда всё очень мелко:


Тут еще и разрешение экрана выставлено неверно, интерфейс вытянут по вертикали

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

Дизайн ПО явно под конкретный экран:


К сожалению, не запомнил что это такое

Рациональное использование пространства


Тестер изоляции импульсом напряжения

Чем меньше монитор, тем больше надо уделять внимание физическим размерам элементов UI.
Первое, что бросается в глаза — надпись PASS, являющаяся результатом теста (пройден, все хорошо).

На маленьких экранах низкого разрешения это явно не очень эргономично.

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

Учитывайте ограничения цветовых возможностей дисплея

Простая загрузка картинки на устройство позволяет понять, не потерялись ли цвета, насколько плоха "лесенка" градиента на фоне.

Например, стильный темно-синий фон "сверху" выглядит на TN матрицах примерно вот так: Не забудьте посмотреть под разными "рабочими" углами.


Сварочные аппараты

Вживую цвета казались лучше. Возможно, данный UI случайно вышел на фото с "засветами". Издалека мне он даже понравился.

Еще немного проанализируем этот интерфейс:

  • Явные проблемы с сеткой. Где-то тесно, а где-то огромные пробелы. Левая часть слишком прижата к рамке монитора, иконки на ней вообще с нулевым отступом (хотя margin справа сделан огромный)
  • На нижний ряд кнопок дизайнера не хватило. Оставлены в системном виде.
  • Элемент Toggle Switch. Лучше закрашивать фон во включенном состоянии, иначе проблемы с пониманием позиции переключателя. Посмотрите на красный Toggle “Настройка”, он включен или выключен? Или на нем валидация т.к. что-то не в порядке с настройками?
  • Подписи к однотипным элементам желательно делать одинаковыми. Где-то с большой буквы, где-то с маленькой, разными шрифтами и размерами.
  • 2 кнопки "Пуск", могу ошибиться, но вроде они для разных целей, можно легко запутаться.
  • Кнопка "Выключение" расположена неудачно.

Физика,беспощадная ты…Цветовые характеристики промышленных мониторов очень далеки от профессиональных. Часто UI на стандартном мониторе (особенно если у дизайнера Super IPS от Apple) выглядит иначе, чем на дисплее, под который этот дизайн был сделан.

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

Глядя на фото выше, отвечу еще на один важный вопрос:

Темный VS светлый GUI

Практика показывает, что темный — лучше по следующим параметрам.

  • Дисплеи для встраиваемых систем обычно берутся дешевенькие китайские или дорогие промышленные. По параметрам цветопередачи и яркости и те и другие слабенькие, а значит, у вас всегда будет проблема с градациями серого, близкими к белому и к черному. Т.е. вам придется увеличивать контраст. Если в темной теме для отделения двух панелей друг от друга вы можете взять для их фона достаточно далеко расположенные на спектре цвета (чтобы ваш дисплей их отобразил как явно разные), то со светлым UI уже сложнее, т.к. при таком подходе вы уйдете в грязно-серый, все будет выглядеть не достаточно ярко.
  • Ровный светлый оттенок для фона вывести довольно сложно ввиду частой неравномерности подсветки таких дисплеев, что может привести к затемнениям по углам. У темных UI этого недостатка не будет.
  • Черный фон дает больше свободы в "сигнальных" цветах. Для встроенных систем это важно.
    На черном фоне вы без труда выведете свето-зеленую, голубенькую, пурпурную, желтую и оранжевую лампочку (LED), оставив ей красную подсветку для ошибок. Легким размытием достаточно просто сделать эффект "свечения". Все цвета будут ясно различимы пользователем даже на расстоянии. Желтый же цвет на белом фоне, да еще и с размытием, вовсе не заметен.
    По сути всё, чем вы можете расставлять акценты в светлом интерфейсе, — это синий, красный и зеленый. Если вы используете, например, синий в качестве основного цвета элементов и красный для валидации, то выходит, что в вашем распоряжении только зеленый, ну и возможно какой-то оттенок оранжевого, чего явно маловато.
  • Монитор — это источник света. В темном помещении при 8-ми часовом рабочем дне светлый UI через год приведёт к очкам на носу пользователя.
  • Это модно. Посмотрите на популярность идущего флешмоба в соцсетях по поводу темной темы для VK. Тот же reddit сделали недавно темную схему. Темная VisualStudio, Photoshop, 3D пакеты и пр. Пользователям нравится.

При должной сноровке дизайнера можно сделать полное "ВАУ". Светлые интерфейсы прекрасно смотрятся в белом корпусе. Но нужен хороший, яркий дисплей и сильно освещенное помещение.
Также светлые UI дают фору темным на e-ink дисплеях.

Наблюдайте за пользователями

Не нужно изобретать велосипеды, пользователи сами подскажут, как им удобнее.


ПО для лазерной гравировки и резки

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

Docking window + MDI window + Ribbon + Tab Control

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

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

В современных платформах разработки даже компонента для него уже нет, но многие упорно продолжают строить проект на древних технологиях: MDI window — интерфейс, морально устарел еще в 2003-м.


Ультразвуковой акустический микроскоп

Современный UI на таком в принципе не возможен. Поддержка такой архитектуры с каждым годом все сложнее и дороже.

Хотя, это не значит, что вы не можете сделать хорошо.

Вот вам хороший интерфейс на стареньких стандартных компонентах:


ПО для автоматизации проектирования электронных устройств

  • MDI + Docking, но я не могу придраться
  • Очень похоже, что сделано на Delphi. Там раньше любили подобную компоновку и такую форму табов.
  • Правильно использование MDI (только холст и вынос инструментов в Docking)
  • Хорошие представления схем
  • Лаконичный набор иконок
  • Работает на Win10

Тема этого вопроса слишком широка, поэтому, пожалуй, я остановлюсь.

Схемы и чертежи


Вакуумная установка плазмохимического травления

Чтобы данная блок-схема смотрелась хорошо, нужно просто заменить грязный серый фон на белый и сделать надписи темными.

Это будет восприниматься как цветной чертеж на бумаге и перестанет резать глаза.

Когда у вас нет дизайнера — делайте общепринято.

Если вы хотите блок-схему на темном фоне, то необходимо проработать все компоненты индивидуально под ваш дизайн (“закосить” под чертеж не получится).

Выглядеть в итоге это может вот так:

Моя работа 10-летней давности
Конструктор схем корабельного водопровода на WPF.

Блок-схемы нужны, если их в системе действительно много, либо конфигурация линии/оборудования/процессов может быть самой различной и нельзя нарисовать дизайн UI под конкретный случай.

Я дизайнер, я так вижу


Пульт управления ядерным реактором установкой травления

В нем сосредоточилось все плохое, о чем я пишу в этой статье. Это самый худший UI из всех, что я встретил на выставках. Ну хорошо, на вкус и цвет, как говорится.
Просто несколько важных моментов, смотря на фотографию: На мои ненавязчивые вопросы про внешний вид ПО, его удобство для хорошего и дорогого железа, просто отмахнулись, сказав: "Дизайнеры у нас уже есть".

  • Не раскрашивайте в яркие кричащие цвета обычные панели компоновки.
  • Не показывайте того, чего нет (кнопки про запас и яркие Disabled элементы).
  • Четко разделяйте интерактивные элементы-кнопки от простых заголовков и панелей.
  • Определитесь, мышь или сенсорный интерфейс.
  • Работать с 10ю окнами одновременно на производственных системах — это проблема, а не фича, как пытались представить на выставке несколько участников, открыв максимально-возможное их количество, а в паре случаев еще и на 2х мониторах.

Про иконки

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


Пример с иконками, которые узнают все

И речь не о том, что все иконки должны быть белыми. Также важно, чтобы все иконки были в единой стилистике. Мода на однотонные иконки – временная, а ваше устройство будет использоваться дальнейшие 5-20 лет.

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

Без руководства пользователя под рукой работать с данным UI будет невозможно.
Совсем без надписей тоже оставлять нельзя, особенно такие иконки.

Единство стиля


Аппарат для микросварки

Важно делать однотипные элементы одинаково.

Хочу разобрать этот интерфейс:

  • На данном экране нижние 2 группы "Запуск" и "Режим" просятся сделать их в стилистике верхних групп с иконками.
  • Интерфейс слишком разбросан, нет единой сетки и размеров. Кнопки блока "Опции" неоправданно мелкие.
  • Слайдер "длительность" имеет значение, округленное до сотых. Двигая ползунок очень трудно ловить такую точность. Необходимо добавить хотя бы кнопки "-0,01" и "+0,01".
  • "Крутилка" мощности справа имеет максимум в 16,20. Необходимо чуть раздвинуть кнопки "<" и ">" чтобы влезало число 18,88
  • Лого в заголовке лучше убрать, внизу на мониторе есть отлично оформленный и светящийся логотип.

Хороший GUI, чуть поправить мелочи в юзабилити и будет шикарно.

Еще несколько моментов

Большинство продуктов на выставках были импортом. Если вы думаете, что такие интерфейсы только на Российском рынке, а за рубежом уже давно AR, как у железного человека — вы ошибаетесь. Немецкие, Китайские, Швейцарские, Американские системы часто просто русифицированы (я специально уточнял эти моменты в разговорах).

Это конкурентное преимущество. Дизайн UI важен. Интерфейс, который понятнее и быстрее, увеличивает производительность труда. Это часть продукта, которая может испортить первое впечатление и даже послужить отказом от использования.

Это значит, что для интеграции дизайна в ПО препятствий нет. 90% GUI на выставках работали под Windows. Где-то в десяти случаях я точно видел WPF (стандартная иконка в заголовке), а это еще на порядок проще.

Возможно, это и верно, но по моему опыту у многих дяденек за 40 в руках ежедневно или айфон, или идеальная по дизайну кнопочная Nokia. В разговоре с одним из производителей промышленной линии производства компонентов мне была сказана фраза: “Наши пользователи — это дяденьки за 40, поэтому интерфейс такой". Ошибочно полагать, что им не нужен современный UI на системе, с которой они будут работать 8 часов в сутки 5 дней в неделю.

К слову, о опыте

Работать повезло за японской промышленной сенсорной панелью от Hakko Electronics. 13 лет назад я 3 года отработал оператором завода по производству бетона. Дизайн не отличался особыми изысками, но он был, был именно в удобстве, продуманности, логичности и, немаловажно, — в надежности. Весь софт и железо были итальянской сборки. В то время я почерпнул очень много понимания, каким должен быть UI для 8-часовой и более работы с ним (рабочий день был 12-15 часов посменно). Темный интерфейс, использующий "железную фишку" экранной панели с настройкой яркости.

Это дало четкое представление того, каким интерфейс быть НЕ должен. Однажды меня на месяц отправили в командировку на русский заводик. По уши в грязи, не расставаясь с кувалдой, которая служила стартовым импульсом для придания инерции движущимся частям. Те дни я запомнил на всю жизнь. Полностью уставший и вымотанный, я вводил грязными руками абсолютно никак не валидируемые данные по следующему замесу в программку на MS-DOS с обычной Logitech клавиатуры за 100 рублей.

Удивительным ли будет упоминание о том, что клавиатуру приходилось ежедневно вытряхивать, иначе залипание какого-нибудь «Enter» могло привести к двухчасовому веселью с кувалдами и лопатами?

Для сравнения – на домашнем заводе я часто даже сменку не переодевал, хотя раз-два в день кувалду тоже брать приходилось.

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

Разработать хороший дизайн встраиваемой системы, не работая за самим устройством вполне возможно, но гарантией тут может быть только опыт предыдущих разработок. Практика – лучший учитель. К сожалению, это получается далеко не всегда (часто нужны всяческие допуски, недешевое или длительное обучение, может быть просто страх сломать дорогое оборудование, не все согласны оплачивать такие изыскания и пр.) Намного продуктивнее посадить дизайнера за "штурвал" производства на недельку.

Заключение

Главное в этом деле — помнить, что вы делаете интерфейс продукта не для галочек и сертификатов, не для ваших партнеров в галстуках, не для одноразового выпиливания лазером детальки в тестовом режиме, не для картинок на Dribble (это к дизайнерам), а для людей, которые будут реально работать с вашим ПО по 8-15 часов в сутки.

Это далеко не весь материал с выставок, но статья вышла достаточно объемная. Хотелось бы показать и рассказать больше. Хорошо, если информация оказалась вам полезной.

S. P. Буду рад, если укажете мне на ошибки. Извиняюсь, если не разбираюсь в устройстве работы какого-то конкретного железа, что повлекло ошибочное мнение о функционале той или иной системы.

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»