Интерфейсы промышленных устройств: как делать дизайн для продуктов, у которых нет аналогов

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

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

Что такое IoT-устройства

Есть привычные устройства с выходом в интернет вроде компьютеров, планшетов, смартфонов, и есть те, что еще не вошли прочно в нашу жизнь. На бытовом уровне это «умные» розетки, чайники, холодильники, роботы-пылесосы и прочие приборы из экосистемы «умного» дома. Все они объединены общим термином Internet of Things.

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

Что важно учитывать при разработке интерфейса для промышленного IoT:

  1. Это графическая оболочка, а не просто интерфейс приложения.
  2. Привычные паттерны не всегда работают.
  3. Характеристики электроники влияют на результат.
  4. Не все, что кажется мелочью дизайнеру, действительно мелочь.
  5. Сначала проектируем основное устройство.
  6. Тестирование на каждом этапе.

Каждый из этих принципов раскроем в статье на примере разработки интерфейса для медицинской смарт-лаборатории.

Про IoT-продукт для смарт-лаборатории

Год назад digital-агентство «Атвинта» начали сотрудничество с американским стартапом, который поставляет оборудование и программное обеспечение на предприятия здравоохранения и в биотехнологические лаборатории США.

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

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

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

В видео — как работает прибор. Мы уже рассказывали подробно о разработке софта для него в статье на vc.ru.

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

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

Принцип 1. Графическая оболочка, а не интерфейс

Разрабатывая дизайн для нового продукта, вы по сути проектируете дизайн операционной системы.

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

Проектирование на уровень выше

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

Избежать этого помог сториборд со всеми экранами, точками входа, выхода и принятия решений. В нем мы добавили стартовый экран на уровень выше главного. Это помогло объединить все рабочие экраны и избежать тупиковых сценариев.

Стартовый экран — это аналог рабочего стола в привычных операционных системах. С него можно перейти в любой раздел и на него же можно выйти из любого окна приложения.

Сториборд помог разобраться, какие экраны реально нужны, а от каких можно безболезненно отказаться. А заодно с его помощью упорядочили ход проекта:

  1. Систематизировали работу всех дизайнеров на проекте. Благодаря схеме всем было понятно, как взаимодействую между собой экраны, какие экраны нужны, с какого экрана и куда можно перейти. Это позволило избежать лишней работы или тупиковых экранов на этапе дизайна.
  2. Выстроили работу с заказчиком. После утверждения схемы владельцу стартапа стало понятно, что описанных экранов достаточно, чтобы реализовать все нужные пользователям инструменты. До этого на каждом созвоне заказчик предлагал новые идеи по функциональности, и мы никак не могли зафиксировать объем работы и сроки. Теперь же смогли выстроить четкий план проекта: сроки больше не разъезжались из-за новых пожеланий со стороны клиента. Все новые идеи складировали в бэклог.

Стандартные элементы: устройство работает или нет

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

Как понять, работает ли устройство, а если прибор сломался — в чем именно проблема? На привычных устройствах все сообщения выводятся на панели уведомлений. Аналогичный элемент нужен и для IoT-устройств.

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

Сообщения об ошибках сделали двух типов:

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

Теперь всегда понятно, что происходит с электроникой и на что обратить внимание, если возникла проблема.

Принцип 2. Привычные паттерны не работают

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

Экран может быть неотзывчивым к слабым прикосновениям, и тогда на нем невозможно реализовать свайп-взаимодействия. Или, как в нашем случае, экран утоплен в устройство и рамка мешает касаться небольших элементов по краям. А значит, в этой зоне нельзя размещать кнопки и нужно придумывать альтернативные поведенческие решения.

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

Так, у нас была задача на главном экране информативно показать, как меняются показатели среды в камере в течение эксперимента. Классическое визуальное решение — разместить подробный график. Но у нас диагональ экрана — 7 дюймов. Это всего на дюйм больше экрана iPhone 11. На небольшом экране детализированный график будет плохо считываться.

Теперь специалист с одного взгляда считывает, график какого показателя он просматривает, и что с этим показателем сейчас происходит.

Еще одна задача — показать ход эксперимента в целом, сразу со всеми графиками на одном экране.

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

Принцип 3. Характеристики электроники влияют на результат

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

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

Дизайн может снизить или увеличить нагрузку на софт

Вот пример, когда дизайнерское решение помогло избежать перегрузки процессора.

На главном рабочем экране с графиками пользователь может вручную изменить параметры модуля с помощью кнопок «минус» и «плюс». На изображении ниже пользователю нужно понизить влажность в камере.

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

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

Придумали такое решение: рядом с кнопкой пишем новое значение, а время, нужное для изменений, показано через заполнение прогресс-бара вокруг кнопки. Человек, видит, что значение еще не применилось и ждет, прежде чем совершить следующее действие. В результате существенно уменьшилась нагрузка на программную часть.

Еще один нюанс про железо из серии «Тестировали да не вытестировали»

Если присмотреться к скриншоту ниже, видно, что интерфейс сплюснут по вертикали. Так выглядел интерфейс первых готовых устройств. Когда нам прислали скрин, мы сначала подумали, что где-то напутали и сделали интерфейс не в том разрешении.

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

Принцип 4. Мелочей нет

Задача была перед новыми IoT-продуктами и стартапами всегда глобальная: создать продукт, который выделяется не только функциональностью, но и удобством для пользователей. А значит особенно важно погружение в целевую аудиторию и тестирование на каждом этапе на тех, кто будет пользоваться продуктом.

Это может решить какую-то проблему людей, либо наоборот создать им сложности, если опираться только на собственное понимание, что важно, а что — нет.

Погружение в аудиторию

Как писали выше все служебные элементы мы разрабатывали с нуля, клавиатура — не исключение. За основу взяли самую распространенную в Америке клавиатуру для iPad.

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

Тестирование на каждом этапе

Тестирование проводили на каждом этапе: после проектирования, после дизайна основных экранов, после каждой итерации программирования.

На этапе проектирования с тестами нам помогал клиент. Мы отправляли интерактивный прототип для UX-тестирования заказчику. А заказчик встречался с сотрудниками лабораторий в США, демонстрировал перелинкованные интерфейсы будущим пользователям и давал простые задания: запустить эксперимент без предварительных инструкций или считать показания датчиков по экранам.

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

Для тестирования на последующих этапах разработчики сделали демо-стенд на Raspberry Pi с экраном и эмулятором модулей.

Принцип 5. Сначала основное устройство

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

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

На веб-платформу интерфейс перенесли почти без изменений: размеры и горизонтальное расположение экрана позволяют реализовать все те же паттерны. Из нового — в веб-сервисе добавили раскрытое меню справа и раздел со статистикой по экспериментам в табличном формате.

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

Детальнее рассмотреть сводные графики возможно в портретном режиме. О возможности перехода в портретный режим разместили подсказку в верхнем правом углу.

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

Итого

Хорошо спроектированный интерфейс — это часть успеха продукта.

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

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

Главные правила такие:

  • Правильно понимать структуру, чтобы не создать тупиковых экранов и не пропустить первый навигационный экран. Ведь у вас нет операционной системы, которая поможет пользователю, если он заблудился.
  • Знать целевую аудиторию: кто и как будет пользоваться.
  • Тестировать с реальными пользователями и реальными образцами устройствами.
  • Помнить про ошибки. На разработке для новых продуктов не получится обойтись совсем без ошибок. Зато можно помнить о них и много тестировать.
  • И да, еще раз тестировать. Протестировать не забудьте.
0
44 комментария
Написать комментарий...
Руслан Халиков

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

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Все верно, к тому же в IoT-устройствах обычно не самое мощное железо. Поэтому мы не использовали анимации. Анимации есть только в статье, для презентации как раз :) 

Ответить
Развернуть ветку
Илья Горбаров

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

Ответить
Развернуть ветку
Alex Chernyshev

А это только прототип или дошло до реализации в устройстве?

Ну просто снова темный интерфейс ,  полное игнорирование и типового расположения управляющих кнопок и типовой цветовой индикации ( ну там 'красный' - опасность, 'желтый' - внимание ).

А так - самое оно для behance какого-нибудь )

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

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

Ответить
Развернуть ветку
Alex Chernyshev

Ну вот даже не знаю насчет типовых историй - вы же не для инопланетян интерфейс делали? 

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

По поводу темного интерфейса вот тут уже видно проблему:
https://leonardo.osnova.io/9abbe938-1d96-9b21-b578-6e43aa12f2f7/-/resize/242/

Не самый дорогой экран,  большой угол наклона и уже видно не очень, причем это еще в помещении, на улице будет вообще никак.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Тут еще стоит учитывать качество фото.

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

Ответить
Развернуть ветку
Alex Chernyshev

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

В такой обработке еще поверю ) 
А так - я вообще-то тоже человек, тоже работаю с данными, в том числе с графиками. И черный фон как-то не помогает концентрироваться на главном.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Илья Горбаров

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

Ответить
Развернуть ветку
Илья Горбаров

А по поводу что именно дошло до реализации и к чему это привело мы уже писали https://vc.ru/services/82254-iot-razrabotka-dlya-medteh-startapa-za-chto-mozhno-poluchit-15-mln-v-ssha

Ответить
Развернуть ветку
Гриша Булыжников

говорят нет фото камеры, то под рукой не оказалось, то нда всплыл. постят статью о разработке для устройства без фото конечного устройства. такая вот статья.

Ответить
Развернуть ветку
Тарас Мукин

За всё время чтения не покидало ощущение излишней перегруженности интерфейса графическими решениями "из веба" несмотря на то, что речь шла во многом о необходимости делать иначе. Очень много градиентов, очень много анимации, да и в целом очень много всего. Графические решения безусловно нужны — грамотные акценты могут повысить читаемость сложной информации в разы — но здесь как-то 30/70 функционального дизайна и неполезных красивостей.

Например: прогресс-бар на всех картинках красивый и тоненький, с градиентом, но цвета всего остального в интерфейсе и визуально сливается с оформлением. Я бы предложил выделить ему в интерфейсе свой цвет, сделать полосу шире и нанести временные отметки "по ходу пути" (если время эксперимента предсказуемо).

Круглые кнопки "+" и "-": почти везде они явно самая активная часть интерфейса, и сделаны большими — но почему-то не простой белой заливкой всего круга, что выделило бы их ещё больше и тач-таргет был бы очевиднее.

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

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

Ну и так далее. Можно продолжать писать отдельные претензии, но суть одна — при взгляде на такой интерфейс хочется чтобы даже ежу было понятно что вот тут главный блок, тут переключалки графиков, тут важные прямо сейчас кнопки. У вас всё сливается в одну ровную, красивую, гладкую и модную мешанину, в красивости которой приходится вглядываться. Отдельные решения кайфовые — левый блок вкладок (опять же минус тенюшки и градиентики) кайфовый, почти везде выделяется и понятно что делает. Но дальше оформительство много где ломает хорошие композиционные решения.

Ответить
Развернуть ветку
Илья Горбаров

О, вы хоть статью читали ) В отличие от комментаторов выше - это приятно.

Стоит заметить, что статья - это выжимка из 40 минутного доклада, всё в неё не помещается по понятным причинам.

Основной интерфейс, это как раз экран создания сессии, его можете в кейсе у нас на сайте найти.

+/- это не основные элементы управления, а корректирующие, если по ходу эксперимента что-то пошло не так.

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

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

Под прогрессбаром отображается оставшееся время эксперимента. 

Ну и так далее. Мы решили массу подобных вопросов по ходу разработки, и гордимся результатом. Потому, что он выглядит удивительно гармонично на готовом устройстве.

Ответить
Развернуть ветку
Гриша Булыжников

где устройство то?)

Ответить
Развернуть ветку
Илья Горбаров

Дальше комментарии листайте, там вам ответили, непоседа вы наш. Фоток этого устройства под рукой не оказалось, но спецом для вас поищем и выложим )

Ответить
Развернуть ветку
Гриша Булыжников

серьезно? вы пишите статью про проектирование интерфейса для оборудования, но у вас нет фото этого самого оборудования и конечного результата? вам не кажется это странным?))

Ответить
Развернуть ветку
Илья Горбаров

Молодой человек, ознакомьтесь с таким термином как NDA. Может быть это вам... хотя вряд ли.

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

Возникли сомнения? Вы ими поделились, нам очень важно ваше мнение. Следующая доступная опция: можете остаться с ними на едине, я не против. 

Ответить
Развернуть ветку
Гриша Булыжников

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

Ответить
Развернуть ветку
Илья Горбаров

Дружок, ключевая мысль была про не должны тебя развлекать )

Но если кому-то тоже интересует этот вопрос - поясню. Мы не можем упоминать название и логотип заказчика. Фотки с фризером замазанные были, фоток с замазанными лого камеры - нет. Если найдём и не забудем про твоё пожелание - выложим. 

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

А конспирологические теории призываю распутывать в другом месте.

Ответить
Развернуть ветку
Гриша Булыжников

ну, за "дружка" незнакомому человеку можно и в зубы получить. благо это интернет, чувство собственной безопасности, да?)

Ответить
Развернуть ветку
Илья Горбаров

Слыхал, что муд%$ если человека назвать или тупые вопросы долго задавать, то можно.

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

Ответить
Развернуть ветку
Гриша Булыжников

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

Ответить
Развернуть ветку
Илья Горбаров

Что вы сударь, мы всегда рады мнениям интересных личностей и одарённых людей. Вот и ваше мнение важно для нас, оставайтесь на связи.

Нахер-то послать никогда не поздно. )

Ответить
Развернуть ветку
Гриша Булыжников

Сударь, запятые расставь, а потом можно и про манеры твои пообщаться. Это еще и дирехтор сего коллектива, вот это стыдоба))

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо за такой развернутый комментарий. 

Тут важно понимать, что в теории нет разницы между теорией и практикой, а на практике есть. Так как мы делали это для продукта под конкретный тип  пользователей - сотрудников медлабораторияй - в интерфейс включены все их пожелания. Каждый экран, каждое взаимодействие и отображение тестировались с участием самих пользователей и правилось под их фидбэк. Например, график с градиентом под ним оказался визуально более легко читаемым визуально, чем без градиента. 

В планах подготовить второй материал с инфой, на чем основывались идеи. Часть информации есть вот в этой статье: https://atwinta.ru/material/blog/iot-lab-design 

Ответить
Развернуть ветку
Designer Startup

Всю статью не читала, долистала до картинки переди"Принципом 3" и сразу стал ясен уровень..

Располагать меню в левом нижнем углу, где на нормальном производстве будет пыть и грязь - гениально. Еще гениально было расположить кнопку "стоп" в правом нижнем углу и сделать её милипусенькой, даже меньше кнопки "Пауза". И к тому же, разве по ГОСТ кнопка "Стоп" не должна быть круглой? Вы же их читали?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

В нормальной лаборатории не может быть пыли и грязи, а ГОСТы в США, для рынка которого создан прибор, - свои. Может, стоило все-таки прочитать статью? :)

Ответить
Развернуть ветку
Designer Startup

Кроме того, вместо чтения статьи, я погугла стандарты (англоязычные) и говорится, что у кнопки Стоп должно (возможно, рекомендуется) быть желтое обрамление. Вот так вот.

Рассуждать об идеальных условиях в лаборатории хорошо, но делать надо с учетом, что тыкать будут всё-таки грязными руками в кишках чужого, и все эти ваши углы корпуса будут в грязище :)

Я уж молчу, что если захотят протереть экран в районе тоже угловой кнопки Стоп.

Ответить
Развернуть ветку
Илья Горбаров

Статью, всё-таки прочитайте. Это интерфейс микробиологической камеры, а не станка. Требования к нему совершенно другие. Проще говоря, их нет.

А если всё-таки читать, что-то перед тем как писать своё мнение, которое есть у каждого. Но не всегда это мнение чем-то подкреплено, к сожалению. 

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

Приятного чтения.

Ответить
Развернуть ветку
Designer Startup

"интерфейс микробиологической камеры"

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

"Заблокированная кнопка экстренная Стоп" - абсолютно гениальное решение. 

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

Ответить
Развернуть ветку
Илья Горбаров

Спасибо за ваше мнение, оно очень важно для нас, оставайтесь на связи.

Ответить
Развернуть ветку
Designer Startup

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

Ответить
Развернуть ветку
Илья Горбаров

Так сложилось, что я этот проект вёл от идеи до реализации, проектировал архитектуру и в целом знаю про него всё.

Рад, что хоть один человек в тредике чем-то полезным занимался и во всём разбирается, в отличие от всех остальных. )

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

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

Так вот, там есть защита от случайных нажатий. Кнопка срабатывает только от определенного времени непрерывного воздействия. С учетом конструкции прибора и экрана в нем, протирать, удерживая несколько секунд - не выйдет. 

Да и  все-таки  для умных людей делали, они во время эксперимента вряд ли они станут протирать именно этот угол :) 

Ответить
Развернуть ветку
Designer Startup

Делать в промышленности (и не только) надо для дураков)) Умные руководят и кнопки не нажимают, или безработные, как я. Пожалуйста, обращайтесь, за ваши деньги всегда готова погуглить и дать рекомендации.

"Кнопка срабатывает только от определенного времени непрерывного воздействия."

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

Ответить
Развернуть ветку
Гриша Булыжников

я так и не увидел интерфейса действующего устройства. в статье показаны просто рисованные анимированные картинки. где живое устройство?

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

На сайте - 3D модель устройства из видео-презентации для инвесторов. 
По условиям договора упоминать бренд заказчика и показывать конкретно это устройство нам нельзя. Есть фото интерфейса с фризеров, под которое мы адаптировали текущий интерфейс.

Ответить
Развернуть ветку
Гриша Булыжников

интересно. значит заказчик разрешил использовать свой ui для других ваших заказов? или для другого своего устройства? но "по договору" можно показывать одно, но нельзя показывать другое устройство?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Нет, конечно же, их ui использован на их же оборудовании :) Они занимаются поставкой электроники и софта в медлаборатории. Фризеры на фото тоже из их линейки продуктов, к ним мы адаптировали и разработанное по, и интерфейс.

Ответить
Развернуть ветку
Dmitry Los

Крутая тема, с удовольствием полистал статью, проникся. Вы молодцы.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо!

Ответить
Развернуть ветку
Алексей Гарбовский

Подскажите, как работает корректировка пароля, если пользователь не видит введенные значения?

Ответить
Развернуть ветку
Baltuskin

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

Ответить
Развернуть ветку
41 комментарий
Раскрывать всегда