В первой части этой серии из трех статей, посвященной разработке пользовательского опыта для промышленной среды, я объяснил, что промышленная автоматизация более человекоориентированна, чем вы думаете. Затем я рассказал о том, как сама промышленная среда является источником трудностей для UX-дизайнеров при создании программного обеспечения для человеко-машинных интерфейсов (ЧМИ), когда они стараются учесть условия работы и в заводском цеху, и в диспетчерской. В конце я поделился некоторыми ключевыми принципами эффективного дизайна ЧМИ, которые применяются в обеих средах.
Хаотичная обстановка в заводском цехе мешает пользователям сосредоточиться. Кроме того, необходимость использования средств индивидуальной защиты (СИЗ) влияет на их способность выполнять действия на терминале ЧМИ. Условия работы в диспетчерской имеют ряд уникальных особенностей. Например, в диспетчерской пользователи должны контролировать несколько больших экранов ЧМИ в течение 8-12 часов, что может привести к усталости глаз.
Здесь, во второй части, я объясню некоторые методы, с помощью которых UX-дизайнеры, работающие в области промышленной автоматизации, могут решать проблемы, связанные с дизайном автономных сайтов клиента и локализацией информации для пользователей со всего мира.
Краткое изложение ключевых принципов эффективного проектирования ЧМИ
Вот некоторые ключевые принципы эффективного проектирования ЧМИ, которые я подробно рассмотрел в первой части. Эти принципы применяются как к заводскому цеху, так и к диспетчерской:
- Не допускайте графического насилия. Фотореалистичная или скеоморфная графика отвлекают внимание пользователей от самого важного — информации.
- Выбрасывайте, выбрасывайте, выбрасывайте. Удалите ненужные элементы дизайна. Если элемент не является информативным, это просто украшение, которое может создать излишнюю нагрузку на пользователей.
- Аккуратно применяйте контрастность и яркость. Эффективный дизайн помогает пользователям оставаться продуктивными, принимая меры по снижению усталости глаз, которая происходит, потому что глаза должны постоянно фокусироваться и переориентироваться.
- Ответственно используйте цвет. Активное использование цвета, которое не нужно для понимания информации пользователями, усиливает на них когнитивную нагрузку.
- Используйте гештальт-принципы. Пользователи должны легко понимать информационные отношения между элементами.
- Делайте больше с меньшими затратами. Упростить — значит не только оставлять больше пустого пространства. Обеспечьте простоту, используя информацию с учетом контекста, оптимально располагая и сокращая ее.
Преодоление изоляции
UX-дизайнеры, работающие в области промышленной автоматизации, должны учитывать сценарий автономной работы (т.н. «островной» сценарий), в котором работники могут использовать приложение, в отдаленном месте, например, на Аляске. Иногда остров буквален, например, стационарная нефтяная вышка в Мексиканском заливе. Существуют риски для безопасности, поэтому промышленные производители почти всегда подстраховываются, создавая автономные безопасные сети. Давайте рассмотрим некоторые общие способы, с помощью которых изоляция влияет на решения UX.
Содержание справки
Разумеется, ничем не заменить последовательные действия, которые дают простое понимание пользовательского интерфейса, но нереально ожидать, что дизайн будет учитывать все возможные сценарии. Работая изолированно, пользователь вряд ли просто сможет найти в Google конкретное решение проблемы, с которой он столкнулся в заводском цехе. Ключ к решению этой проблемы — в хорошем содержании справки, поэтому правильно разработанное промышленное приложение имеет удобные ссылки на разделы справок.
UX-дизайнеры, работающие в области промышленной автоматизации, тесно сотрудничают с разработчиками информационных систем для создания соответствующих инструкций по использованию каждой функции приложения. Лучше всего, если справка будет находиться рядом с теми частями пользовательского интерфейса, которые могут запутать рабочие процессы или вызвать ошибки. Например, поместите короткий текст справки рядом с полем ввода, в котором может возникнуть ошибка, если пользователь неправильно вводит данные. Это сэкономит время пользователей, сохраняя их в контексте задачи. Если не представляется возможным разместить контекстную справку в самом интерфейсе, лучшим решением будет нарисовать ясный значок или ссылку на соответствующую справочную документацию, которая будет идти в комплекте с установленным приложением.
Знакомство с рабочим процессом
В веб-сайтах или приложениях, ориентированных на потребителя, ознакомительный этап обычно помогает пользователям узнать возможности и функции пользовательского интерфейса, чтобы они могли сразу быть продуктивными. Но ознакомительный этап может быть сложнее для изолированных промышленных приложений — у некоторых из них нет графического интерфейса, и они могут работать оффлайн. Процесс знакомства с приложением или запуск при первом включении компьютера (ЗПВК) изолированного промышленного приложения может потребовать добавить шаги, чтобы определить такие данные пользователя, как язык пользователя, дата и время или требования безопасности, поскольку приложение изолированно от более крупной системы или сети.
Мы все устанавливали приложения на наших персональных компьютерах, планшетах и смартфонах. Но установка промышленных приложений намного сложнее — она может повлиять на инфраструктуру в миллионы долларов — и далеко не такая удобная. В промышленной среде пользователь может быть обязан сначала выполнить шаги по запуску рабочего процесса в безопасных условиях лаборатории или рабочей станции, а затем установить настроенное устройство в производственном помещении. Для этого ему, возможно, придется прервать производственный процесс. Поэтому пользователь должен быть уверен, что алгоритм запуска работает правильно и будет налажен насколько возможно быстро. Переживания пользователя будут касаться и других частей системы. Вот некоторые ключевые принципы для разработки хорошего бортового опыта:
- Четко изложите шаги, необходимые для завершения рабочего процесса. Пользователям не стоит угадывать, сколько усилий потребуется для настройки системы. Помогите пользователям увидеть ход шагов, добавив индикатор выполнения или аналогичную функцию, которая позволяет им видеть весь рабочий процесс и где они находятся внутри него в настоящее время. Это также может помочь пользователям мысленно подготовиться к тому, что будет дальше.
- Предоставьте пользователям простой способ вернуться назад. Ошибки случаются, поэтому эффективный рабочий процесс должен быть не только рациональным, но и лояльным к пользователю.
- Обеспечьте единообразное размещение кнопок. Пользователям не нужно повторно запрашивать навигацию каждый раз, когда они хотят перейти к следующему шагу. Логичное место расположения кнопок навигации — в нижней части окна или экрана, где оказывается взгляд пользователей после того, как они внесли соответствующую информацию. Кнопка «Далее», которая позволяет пользователям перейти на следующий экран, должна быть справа, а кнопка «Назад», которая возвращает к предыдущему экрану, должна быть слева. Это особенно важно, когда индикатор прогресса имеет направление слева направо, потому что пользователи думают, что вся навигация будет следовать установленному направлению индикатора.
- Сосредоточьтесь на процессе. Размещение в середине рабочего процесса шага, заставляющего заниматься поиском малозначимой информации, вырывает пользователя из состояния сосредоточенности на рабочем процессе. Предоставляйте пользователям вначале легкую информацию, приберегая потенциально трудные шаги на потом. Уверенность и концентрация идут рука об руку.
- Сделайте каждый шаг кратким. Выделение конкретных шагов позволяет сфокусироваться на вводе данных, сделать этот процесс логичным и достижимым. Лучше избегать объединения шагов — например, объединение требований безопасности с часовым поясом или другими несвязанными фрагментами информации. Необходимость заполнения длинной формы уменьшает уверенность пользователей.
- Обеспечьте мгновенную проверку и обратную связь. Пользователям не нужно нажимать «Далее», чтобы узнать, что что-то пошло не так. Лучше всего сразу проверить данные в строке, чтобы пользователи могли исправлять ошибки перед переключением их контекста. Опять же, концентрация — важнее всего. С помощью индикатора прогресса можно также предоставлять пользователям обратную связь, например, отмечая галочкой завершенные шаги. Тем самым пользователи смогут убедиться в том, что они верно выполнили предыдущие этапы." Наконец, сделайте кнопку «Далее» недоступной, пока пользователь не предоставит всю необходимую информацию.
- Адаптивный дизайн формы. Расположите названия полей над полями ввода, которые им соответствуют. Обычно это лучше, чем горизонтальное расположение меток и полей, которое я покажу позже.
Пользовательский интерфейс расположенный ниже четко показывает шаги процесса с помощью индикатора прогресса. Логичное размещение кнопки «Назад» в нижней части окна обеспечивает простой способ вернуться назад, а кнопка «Далее» позволяет пользователю перейти к следующему шагу. Пользовательский интерфейс позволяет избежать отвлекающих факторов, которые могут нарушить процесс, а также показывает краткие шаги, обеспечивает мгновенную проверку и обратную связь. Расположение полей формы передает их назначение.
Базовый макет ознакомительного этапа пользовательского интерфейса
Контроль версий
Поддержка пользователей в последней версии программного обеспечения может быть проблемой, когда их клиентский компьютер или устройство не подключено к интернету — реалистичный сценарий в промышленных средах. Возможно, потребуется запланировать обновления и выключить компьютеры, поэтому влияние обновления программного обеспечения на систему может быть серьезным. Это может доставить много хлопот руководителям предприятий.
Иногда UX-дизайнеры, работающие в области промышленной автоматизации, должны учитывать такие схемы работы, которые их раздражают — например, создавать функции и инструкции для ручного метода загрузки новейшего программного обеспечения с подключенного компьютера, а затем осуществлять его перенос на автономный компьютер, на котором работает программа. Это не здорово, но это необходимое зло в изолированных системах. Вы можете уменьшить трудности ручного процесса обновления, предоставив четкие и сжатые инструкции в соответствующем контексте — когда и где инструкции наиболее актуальны. Хотя промышленные пользователи, вероятно, мыслят системно, как и все остальные, они не хотят иметь дело с туманными рабочими процессами, которые оставляют их с чувством неуверенности.
Телеметрия
Здесь нет Google Analytics, или, если на то пошло, какого-либо другого метода отслеживания, который требует постоянного подключения к Интернету. Поэтому UX-дизайнеры должны иметь план того, как они будут собирать информацию о телеметрии, чтобы у них был способ понять, как пользователи используют продукт, прежде выпускать продукт в производство. Такие инструменты, как Mixpanel, могут помочь отслеживать автономные сценарии. Но такие инструменты все равно требуют периодической онлайн-синхронизации, так как они должны отправлять данные в облачный сервис.
Основные выводы
Хотя вы можете проектировать взаимодействие, полностью зависящее от подключения к Интернету, представьте, что ваш пользовательский интерфейс каким-то образом доступен, когда он не подключен. Если бы вы оторвали приложение от его страховочной веревки — интернета, что было бы, если бы пользователи тем не менее смогли пользоваться программой?
Понимание пользователями того, что они могут сделать и чего не могут, является крайне необходимым, поэтому вы должны создавать функции, которые не будут работать в автономном режиме. Не ставьте пользователей в положение, когда они ожидают, что что-то будет работать, тратят время на безуспешные попытки, а в итоге ничего не могут сделать и не понимают, что произошло. Если вы оставляете действие, не функционирующее в автономном режиме, пользователи воспринимают, что функция все еще действует. Чтобы обеспечить точность данных, уведомите пользователей о том, что содержимое не может быть использовано, и поставьте временную метку: последнюю дату синхронизации данных системой. Но, если данные устарели, показывайте их с осторожностью. Многие UX-дизайнеры считают, что предоставление последних доступных данных всегда лучше, чем отображение пустой страницы или экрана, или сообщения об ошибке. К сожалению, это не всегда так. Например, в области промышленной автоматизации показ недействительной или устаревшей информации в приложении может быть катастрофическим, если данные представляют информацию о запущенной машине или критическом процессе. В таких сценариях лучшим и более безопасным решением будет использование подхода преувеличения— показывать, что что-то точно неправильно.
Ваш ознакомительный этап может быть просто учебным процессом, который позволяет пользователям узнать ваше приложение или веб-сайт. Но насколько эффективен этот рабочий процесс? Не наполняете ли вы пользователей слишком большим количеством информации? Опять же, процесс является ключевым. Появляющиеся поверх экрана учебные подсказки в виде текста и стрелочек, указывающих на элементы интерфейса, перебивают внимание пользователей и рушат процесс. Современные пользователи, даже те, кто находится в промышленной среде, нетерпимы к задержкам, поэтому рассматривайте контекстуальную адаптацию и подсказки, когда и где они больше всего важны.
Локализация
Если вы разрабатываете приложения для глобального использования, вы, вероятно, знакомы с некоторыми препятствиями, которые могут отвлечь вас от любых благих намерений лучшего дизайна. Промышленная автоматизация по своей природе носит глобальный характер, и дизайн таких систем редко соответствует единому языку, культуре или языку. Вот некоторые методы, которые UX-дизайнеры, работающие в области промышленной автоматизации, могут использовать для решения проблем локализации.
Используйте вертикальную компоновку
Поместите названия полей над полями ввода. Это не только помогает оптимизировать использование пространства на небольших экранах, это, как правило, более мягкий способ обработки полей с неизвестными количеством символов. Несмотря на то, что может быть веская причина использовать горизонтальное расположение полей, размещая названия полей слева от полей ввода — при переключении языков могут возникать неожиданные ситуации. Как показано на рисунке 2, такой язык, как португальский, может вызвать проблемы с компоновкой. Если пользовательский интерфейс ограничен фиксированной шириной экрана, нужно будет что-то предпринять.
Локализация может привести к неоптимальным макетам
И наоборот, как показано на рисунке 3, пользовательский интерфейс с вертикальной компоновкой — с надписями над полями ввода — может лучше размещать названия полей неопределенной длины, в то же время обеспечивая доступ к полям ввода.
Вертикальные макеты соответствуют неизвестным длинам значений
Используйте пиктограммы с осторожностью
Чрезмерное использование пиктограмм, особенно пиктограмм без названий, может нанести ущерб локализации. Однако ответственное использование пиктограмм может помочь уменьшить сложности локализации. Кроме того, пиктограммы обычно имеют большую область нажатия. Одни пиктограммы узнаваемы повсеместно — например, значки функций «Сохранить», «Отмена», «ОК», «Поиск» и «Пауза», но многие другие — нет. Такие действия, как подавление или отсрочка аварийного сигнала трудно представить в виде пиктограмм Кроме того, они лучше подходят для конкретных случаев, и от их более широкого применения не станет лучше, так как их не будут понимать. Здесь все становится не понятным. Не все поставщики промышленной автоматизации придерживаются одинаковых наборов пиктограмм, библиотек значков и стандартов. Поэтому UX-дизайнерам, работающим в области промышленной автоматизации, может потребоваться подписать названия ко всем пиктограммам для ясности и согласованности. Пиктограмма с самым неясным значением должна стать шаблоном для остальных.
Привлечение экспертов
Некоторые слова имеют отрицательные значения в других культурах — или они просто не соответствуют той ментальной модели, которая существует у говорящих на английском языке. Дизайнеры, которые создают глобальные решения, должны тесно сотрудничать с терминологами и специалистами по локализации, чтобы гарантировать, что все копии, пиктограммы и все остальное, что является способом коммуникации позволяет избежать отправки неправильного сообщения целевому локальному пользователю. Важно, чтобы эксперты по терминологии участвовали на ранних стадиях, а не в самом конце проекта, чтобы гарантировать, что запуск продукта не задержится из-за недопустимого языкового недоразумения, которое вы будете должны исправить в последний момент.
Использование избыточной маркировки
Красный цвет означает нечто иное для пользователей из Азиатско-Тихоокеанского региона, нежели для западных пользователей. Большинство западных жителей ассоциируют зеленый цвет с хорошим или включенным, а красный цвет с проблемным состоянием или остановкой. Однако в Китае красный цвет обычно означает счастье или удачу.
Но эти проблемы не только культурные. Нет двух одинаковых заводов. Даже похожие заводы в одном городе, штате или стране могут отличаться набором правил из-за принятых ими стандартов. Рассмотрим этот сценарий: на заводском цехе завода A зеленый цвет может означать, что машина работает, поэтому рабочие не должны входить в рабочее пространство. В этом случае красный может означать, что машина остановлена или находится в неисправном состоянии, поэтому рабочие могут войти в рабочее пространство, чтобы восстановить ее. И наоборот, в заводском цехе завода Б зеленый может означать, что можно войти в рабочее пространство, потому что машина остановлена, и безопасно входить. Красный может означать, что машина работает, и существует опасность, поэтому пользователь должен оставаться в стороне. Опасные сценарии могут возникать, если у рабочих есть устаявшиеся привычки, основанные только на цвете.
Дело осложняется тем, что 99% всех пользователей с дефектами цветового восприятия страдают от красно-зеленой цветовой слепоты. Настоящая ирония заключается в том, что обычно потенциально разрушительные действия представляют через отношения между этими двумя цветами. На экране ЧМИ будет необходимо подробно объяснить значение каждого цвета, с помощью значка или краткой подписи.
Основные выводы
Хотя вы и не можете создавать приложения, специально предназначенные для пользователей в других странах, тем не менее важно знать страны и контексты, в которых люди будут применять ваш пользовательский интерфейс. Отбросьте свои предположения, проникнитесь чувствами пользователей и подумайте об их потребностях перед тем, как создавать дизайн, который имеет реальную ценность.
Кроме того, даже если вам не нужно создавать текстовые метки и значения полей для размещения любого количества языков, расположение ярлыков и полей по вертикали обычно лучше, чем использование горизонтальной компоновки. Это не только облегчает подгонку контента в пределах видимой области небольшого экрана, но также позволяет избежать устаревшего табу, который препятствует дизайнерам размещать какой-либо важный контент ниже конца экрана. Современные парадигмы пользовательского интерфейса более терпимо, чем когда-либо, относятся к прокрутке.
Наконец, не полагайтесь только на цвет, чтобы сообщить смысл. Он также может относиться к культуре, языку и стандартам, ориентированным на клиента.
Заключение
Изолированные среды не дают пользователям промышленной автоматизации множество удобств, которые большинство UX-дизайнеров считают само собой разумеющимися. Подключение к Интернету, скорее всего, является исключением, чем нормой, поэтому включение или обновление данных приложений может иметь серьезные последствия для бизнеса, когда эти процессы влияют на инфраструктуру миллионов долларов. Большинство руководителей предприятий не хотят останавливать машину, производственную линию или процесс. Поэтому UX-дизайнеры, работающие в области промышленной автоматизации, должны учитывать такие проблемы для разработки эффективных и эффективных рабочих процессов для пользователей.
Что касается локализации, UX-дизайнеры, работающие в области промышленной автоматизации, должны заранее думать об этом, выбирая те или иные дизайнерские решения, чтобы пользователи всех языков, культур и местностей могли быть продуктивными и находиться в безопасности. Недостаточно создать продукт для говорящих на английском языке и успокоиться на этом. Дизайнеры не должны исходить из предположения, что значения определенных цветов или иконографических систем универсальны или понятны — даже пользователями, находящимися на разных заводах одного и того же клиента.
Промышленная среда, которую я затронул в первой части, и проектирование с учётом необходимости локализации — всего лишь некоторые из общих препятствий, с которыми сталкиваются UX-дизайнеры, работающие в области промышленной автоматизации. В третьей части я расскажу о некоторых методах, которые UX-дизайнеры, работающие в области промышленной автоматизации, могут использовать для преодоления проблем, связанных с:
- Проектированием через посредничество дизайнеров ЧМИ
- Получением доступа к специфическим пользователям промышленной среды
- Решением вопросов, связанных с устаревшими или конкурирующими продуктами
UX for the Industrial Environment, Part 2, Jon Walter на UXmatters, 11.09.2017