Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Суворі заводські хлопці працюють з ванільним інтерфейсом

Привіт, мене звати Катерина, і я розробниця у компанії OLSOM вже понад три роки. Наша команда працює над трансформацією MES сервісу. І це історія про маленький редизайн не маленького індустріального продукту. Тому цей матеріал може бути цікавим для тих людей, які у своїй роботі мають справу зі складними інтерфейсами.

Загальна інфа

Ми працюємо у досить вузькому, але конкурентному напрямку — виробничому IT. Компанія вже понад 10 років розробляє MES/MOM системи для заводів. Наше програмне забезпечення вирішує завдання автоматизації робочих процесів, збору даних у режимі реального часу та відстеження (трохи більше про всі процеси, які ми покриваємо можна прочитати в матеріалі DOU Хто такий і чим займаєтся MES-консультант).

Більшість функцій наших софтових продуктів зрозуміла дуже вузькому колу користувачів. Саме тому довгий час ані наші конкуренти, ані наша компанія сильно не переймалися зовнішнім виглядом екранів, які відображаються працівникам заводів. На першому місці завжди стояла функціональність. Встигнути за потребами клієнтів та новими вимогами стандартів було набагато важливішим, на перший погляд, ніж зрозумілий (а тим більше, приємний) зовнішній вигляд екрану. У компанії є кілька продуктів, які покривають своїм функціоналом різні етапи та вимоги виробництва. Ці продукти пов’язані між собою та складають певну «екосистему».

Чому вирішили робити редизайн

Морально застарілий дизайн. Більшості наших продуктів вже досить багато років, до них постійно додавався новий функціонал та фічі. Інтерфейс продукту виглядав архаїчним і не сучасним. Тренди оновлюються щорічно, та хочеться йти в ногу з часом. Проте це не означає, що треба бігти й бездумно використовувати їх в себе на проєкті (гласморфізм чи то інтерактивні величезні шрифти на екранах станцій виглядали б недоречно). Потрібно шукати золоту середину, та розуміти, для якої цільової аудиторії ваш продукт. В цьому питанні бажання користувачів та компанії сходилося, хотілося оновленого UI.

Незручність використання софту. Симпатичніша «моська» це прекрасно, але це лише частина редизайну. Переробка UX не тільки вносить свіжі кольори та вишукані шрифти, але й найголовніше — це стосується змін у використанні продукту. Тому оновлення інтерфейсу точно не мало виключно косметичну мету. Зокрема, у нас досить критично стояла проблема навігації по сайту та її масштабування. Наявність в софті дуже великої кількості вкладених попапів також негативно вплинула на взаємодію з користувачем.

Важкість підтримки коду. Цей пункт не стосується дизайну, але то був великий біль і один з основних чинників прийняття рішення все переписувати. Відсутність стандартизації призвела до того, що в продуктах плодилися компоненти з однаковою логікою, які за нею ж потрібно було об’єднати. Можна було зустріти декілька видів чекбоксів, що відрізнялися кольором бордеру чи то лише фоном, різні дропдауни з «іншою» тінню, безліч варіантів кнопок тощо. Для цього всього був різний код. Принцип «Змінюєш в одному місці — зміниться всюди» не працював. З новими задачами збільшувався й час на розробку, бо щоразу було вигадування нового колеса.

Специфіка інтерфейсів для софту на заводах

Наші продукти — це складні системи. Вони відрізняються рядом факторів:

  • велика кількість сценаріїв,
  • критичність використання простору екрану,
  • просунуті користувачі.

Користувачі мають певний поріг входження та часто перед початком користування проходять навчання чи отримують мануали з використання. Це, безперечно, плюс. Та проблема полягає в тому, що ти не тільки працюєш з простором і стараєшся, щоб на потрібний екран все «влізло», а й в тому, що інтерфейс росте постійно, об’єкти даних розширюються і якщо в менюшці сьогодні 3 пункти, то це не означає, що завтра їх не може бути вже 100.

Різні процеси на заводах

На різних заводах процеси налаштовані по-різному, не буває двох ідентичних заводів. Тому для деякий продуктів досить критично стоїть питання конфігурабельності. Таким чином ми даємо можливість користувачам та MES-консультантам керувати відображенням деяких даних. Так, наприклад, на одному нашому проєкті — OEE (overall equipment effectiveness) — один з тих екранів, який найчастіше використовується саме на так званому plant shop floor (місці, де і відбувається безпосередньо виробництво) є можливість налаштувати головний екран відповідно до тих даних, які необхідні операторам на тому чи іншому заводі.





Велика кількість ролей та сценаріїв

Сценаріїв використання може бути багато і потрібно розуміти, які з них найбільш пріоритетні. Буває й так, що пріоритетні всі.

Для прикладу: головний екран на заводі X щодня безпосередньо використовується операторами з різними режимами доступу, але щотижня повз екран проходить менеджер, якому хочеться, щоб всі важливі для нього значення були помітні на відстані 5 метрів.

Звідси питання: урізати інформацію для операторів чи зробити зручно для менеджера?

Девайси

Для різних етапів виробництва може бути використане різне обладнання. Наші системи взаємодіють зі складськими девайсами (терміналами та роботами), термопласт автоматами, механічними та автоматизованими лініями зборки, роборуками та автоматизованими викрутками, фрезерувальними та ЧПУ станками і багато іншого.

Цей перелік можна ще довго продовжувати, бо згідно канонам Індустрії 4.0 MОМ/МЕS системи пронизують усі процеси на виробництві та, як нервові закінчення, моментально реагують та передають інформацію. І зазвичай екрани для різних процесів відрізняються як фізично, так і функціонально. От невеликий приклад кількох продуктів на девайсах, які можуть бути використані на заводах:

Девайси на заводах

Доступність

Не на останньому місці стоїть й питання доступності. Достатня контрастність тексту, розміри кнопок, розмір шрифту. Кольори теж грають свою важливу роль. Особливо це стосується інтерфейсу екранів на безпосередньому виробництві, щоб оператор міг коректно реагувати на ту чи іншу ситуацію, яка склалась на його станції.

Чим вища критичність стану системи — тим більша «зібраність» оператора за екраном.

Відсутність аналітики та зворотного зв’язку

Усі процеси, що відбуваються під час виробництва сек’юрні, програмне забезпечення відповідає виключно заданому функціоналу і жодних додаткових даних крім тих, що вимагаються технічним завданням, збирати не можна. Тому для локальної мережі встановити зовнішні системи аналітики досить проблематично.

А при використанні кастомних рішень гостро стоїть питання, як це дивно не звучить, використання доступного місця для зберігання даних, бо все зберігається на локальних серверах. Тому ми керувалися загально прийнятими патернами проєктування інтерфейсів, підлаштовуючи їх під потреби наших користувачів, та збирали необхідну інформацію безпосередньо від представників заводів.

Які проблеми вирішив редизайн та чим ми керувались, коли його робили

Швидкість розробки

Проблема: відсутність стандартизації, великий час поставки нових рішень і підтримки старих; розробка нових рішень зазвичай містила в собі багатогодинні мітинги щодо вигляду компонентів, сенсу в яких було небагато.

Вирішення: ми створили дизайн-систему з основних компонентів користувацького інтерфейсу, що спростило та пришвидшило процес прототипування. Наразі ми продовжуємо формувати та розвивати нашу бібліотеку елементів та стандартів, згідно з якими візуалізується новий функціонал. Цей процес практично безкінечний, оскільки продукт розвивається і в ньому з’являються нові елементи та оновлюються старі.

Навігація

Проблема: важко швидко знайти потрібний пункт меню через обмежену видимість меню і багаторівневу вкладеність; незручно користуватись навігацією через невдале розташування в шапці; незрозуміло, на якій сторінці зараз знаходишся; кількість підпунктів меню може сягати більше сотні і дані від заводу до заводу можуть ще розширюватись.

Розташування меню в шапці старого порталу

Деталі: до редизайну навігація знаходилась в шапці, спочатку не було ніяких проблем. Але, так як кількість розділів збільшувалась, навігація трансформувалась у франкенштейна. З’явились стрілочки, при натисканні на які показувалась решта меню, що було прихованим від користувача.

Вирішення: меню ми перенесли вліво і зробили його вертикальним, з можливістю кількох режимів, додали поле пошуку з підсвічуванням введенного в поле пошуку значення. Стан меню зберігається. Такий підхід дозволяє додавати будь яку кількість елементів та вкладеності. Додали хлібні крихти для кращого розуміння, де саме знаходиться користувач.

Закріплене меню в широкому форматі

Вузьке меню дає можливість побачити більше колонок на певних репортах, без скролу

Метод тику

Проблема: кнопки, які не можна натискати користувачу, ведуть або до помилок, або просто нічого не роблять.

Деталі: як відбувається знайомство з новим софтом? Оператори уважно перечитують весь мануал і роблять все згідно з ним, якщо щось не ясно — ідуть читати ще раз. Ага, звісно... Це можливо, певно, в утопії. В реальності люди проходять навчання, а потім йдуть і вивчають софт «методом тику». Розуміючи це, ми не маємо права дозволити зайти в зони софта, забороненого для конкретного користувача, або дозволити йому зробити щось, що призведе до критичної помилки в системі.

Вирішення: функції, недоступні для оператора, — приховані. Якщо функція є в користувача, але має бути доступна після певних дій, вона disabled. На заводах можуть бути кілька етапів верифікації. Наприклад, щоб оператор Карлос зробив changeover на станції він має відсканувати свій бейджик чи ввести пароль, і якщо в нього є доступ до цієї функції, він її зробить. Якщо треба перевірка тімліда зміни, він кличе тімліда Хуана, Хуан приходить і сканує вже свій бейжд, чим підтверджує, що Хуан може зробити changeover.

Статус задачі

Проблема: після натискання на кнопку незрозуміло, чи відбулось щось і задача виконана, чи сталась помилка.

Вирішення: тепер чи то після видалення, додавання, збереження, чи то заборони верифікації тощо, з’являються різного типу нотифікації (error, warning, info, success) з таймаутом. В планах є зробити історію дій користувача.

Підбір модальностей сигналу

Проблема: висока концентрація операторів на заводі має бути підкріплена певними «дратуючими» факторами в софті.

Деталі: суть в тому, що ми за допомогою певної інформації говоримо користувачу про її важливість. Як-от модальність — певні характеристики відчуттів тих явищ, що сприймаються нашою сенсорною системою (звук, біль, смак, колір, тиск тощо).

Вирішення: ми використовували колір та звук. На продукті для складів повсякчас використовують сканери і при успішному скануванні користувач чує один звук, а при неуспішному, відповідно, інший.

На іншому ж інтерфейсі для станцій поточний її статус відповідає певному кольору, і щоб оператор розумів, що на його станції може бути щось не так, «шапка» змінює колір і починає блимати.

Людяний дизайн

Проблема: софти для різних заводів рідко коли відрізняються чимось, що може якось особливо порадувати користувача. Тут передусім йде функціонал, а те, що відчуває оператор в процесі користування — не так важливо.

Вирішення: ми вирішили розрадити монотонні сервіси пасхалками та ілюстраціями. Спочатку ми змінювали логотип на різні свята: додали квіти на 8 березня, зробили анімований сніг на Новий рік, додали літаючих привидів на Геловін тощо. А потім на екранах з’явилися інопланетяни з підказками. Наче, такі прості рішення, але зовсім неочікувано вони знайшли відгук у користувачів жорстко функціональних продуктів.

Після цього, як не дивно, наші MES-консультанти почали отримувати той бажаний для нас зворотній зв’язок. Суворі мужики з європейських заводів почали присилати відгуки... І це було прекрасно =)

P.S.

Редизайн — це зміни, а люди не люблять зміни і змінюватись. Легкі та прогресивні зміни зробили процес переходу користувачів на новий інтерфейс не таким болючим, а для компанії це стало підґрунтям для вирішення бізнес-питань.

Тут описана лише частинка того, що зроблене, а ще більше ж планується. Слон виявився дуже великим, тож ми їмо його шматочками.

Що було досягнуто? Швидкість розробки без вигадування велосипедів зросла, швидкість створення нового інтерфейсу також зросла і стала більш стандартизованою завдяки UI-kit.

Оновлений та більш юзерфрендлі дизайн сприяє переходу заводів зі старих систем на нові та продажу цієї системи новим клієнтам. Система тепер виглядає більш конкурентоспроможною на цьому ринку. Також, відмовитись від однієї системи, яка стояла роками на заводі, через дуже складний процес. Але зараз все більше заводів переходять на AGW.

👍ПодобаєтьсяСподобалось14
До обраногоВ обраному4
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Підписатись на коментарі