Осциллографы
Встраиваемые и промышленные системы — моя любимая тема в разработке дизайна. Когда делаешь интерфейс ПО какого-нибудь лазера или яхты — это чистый кайф и творчество.
На прошлой неделе я посетил выставки expoelectronica и embeddedday именно как UI разработчик. Целью было посмотреть на новинки вживую, пощупать, набраться опыта.
В итоге я посмотрел более 100 GUI различных систем, но вот с набором опыта возникли проблемы...
Подумав, что как-то могу помочь развитию отрасли в целом, я решил разобрать конкретные примеры с выставок 2019 года, проведя анализ ошибок в интерфейсах. Далее я постараюсь дать рекомендации, которые могут пригодиться не только разработчикам конкретной системы, но и остальным. Все логотипы скрыты, чтобы никого не обидеть.
Внимание! Много фото!
Прошу прощения за качество некоторых фотографий, они сделаны “для себя" в процессе разговоров и тестов. Идея статьи пришла уже после.
Про дизайн в целом
Большинство систем, представленных на выставке, ничем не отличается от тех, что я видел в начале 2000-х, когда вообще мало кто задумывался о дизайне интерфейсов.
Предугадывая реакцию читателей, что «рюшечки и украшения» не нужны промышленной системе, отвечаю:
Дизайн UI — это не просто красивая картинка, это способ подачи информации пользователю и взаимодействия с ней. В теме статьи еще и сессией 8 и более часов в сутки.
Дизайн может быть несовременным, без анимации, основанным на стандартном системном 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
Тема этого вопроса слишком широка, поэтому, пожалуй, я остановлюсь.
Схемы и чертежи
Вакуумная установка плазмохимического травления
Чтобы данная блок-схема смотрелась хорошо, нужно просто заменить грязный серый фон на белый и сделать надписи темными.
Это будет восприниматься как цветной чертеж на бумаге и перестанет резать глаза.
Когда у вас нет дизайнера — делайте общепринято.
Если вы хотите блок-схему на темном фоне, то необходимо проработать все компоненты индивидуально под ваш дизайн (“закосить” под чертеж не получится).
Выглядеть в итоге это может вот так:
Конструктор схем корабельного водопровода на WPF. Моя работа 10-летней давности
Блок-схемы нужны, если их в системе действительно много, либо конфигурация линии/оборудования/процессов может быть самой различной и нельзя нарисовать дизайн 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, поэтому интерфейс такой". Возможно, это и верно, но по моему опыту у многих дяденек за 40 в руках ежедневно или айфон, или идеальная по дизайну кнопочная Nokia. Ошибочно полагать, что им не нужен современный UI на системе, с которой они будут работать 8 часов в сутки 5 дней в неделю.
К слову, об опыте
13 лет назад я 3 года отработал оператором завода по производству бетона. Работать повезло за японской промышленной сенсорной панелью от Hakko Electronics. Весь софт и железо были итальянской сборки. Дизайн не отличался особыми изысками, но он был, был именно в удобстве, продуманности, логичности и, немаловажно, — в надежности. Темный интерфейс, использующий "железную фишку" экранной панели с настройкой яркости. В то время я почерпнул очень много понимания, каким должен быть UI для 8-часовой и более работы с ним (рабочий день был 12-15 часов посменно).
Однажды меня на месяц отправили в командировку на русский заводик. Это дало четкое представление того, каким интерфейс быть НЕ должен. Те дни я запомнил на всю жизнь. По уши в грязи, не расставаясь с кувалдой, которая служила стартовым импульсом для придания инерции движущимся частям. Полностью уставший и вымотанный, я вводил грязными руками абсолютно никак не валидируемые данные по следующему замесу в программку на MS-DOS с обычной Logitech клавиатуры за 100 рублей.
Удивительным ли будет упоминание о том, что клавиатуру приходилось ежедневно вытряхивать, иначе залипание какого-нибудь «Enter» могло привести к двухчасовому веселью с кувалдами и лопатами?
Для сравнения – на домашнем заводе я часто даже сменку не переодевал, хотя раз-два в день кувалду тоже брать приходилось.
Эти знания я уже 10 лет кладу в основу проектов, стараясь максимально доносить их до клиентов. Надеюсь, благодаря этому многие операторы избавлены от головной боли.
Практика – лучший учитель. Разработать хороший дизайн встраиваемой системы, не работая за самим устройством вполне возможно, но гарантией тут может быть только опыт предыдущих разработок. Намного продуктивнее посадить дизайнера за "штурвал" производства на недельку. К сожалению, это получается далеко не всегда (часто нужны всяческие допуски, недешевое или длительное обучение, может быть просто страх сломать дорогое оборудование, не все согласны оплачивать такие изыскания и пр.)
Заключение
Главное в этом деле — помнить, что вы делаете интерфейс продукта не для галочек и сертификатов, не для ваших партнеров в галстуках, не для одноразового выпиливания лазером детальки в тестовом режиме, не для картинок на Dribble (это к дизайнерам), а для людей, которые будут реально работать с вашим ПО по 8-15 часов в сутки.
Хотелось бы показать и рассказать больше. Это далеко не весь материал с выставок, но статья вышла достаточно объемная. Хорошо, если информация оказалась вам полезной.
P.S. Извиняюсь, если не разбираюсь в устройстве работы какого-то конкретного железа, что повлекло ошибочное мнение о функционале той или иной системы. Буду рад, если укажете мне на ошибки.
