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

1. Вводная задача от заказчика, проблематика, цели

Клиент

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

Оборудование применяется в хирургии, травматологии, дерматологии и других медицинских направлениях. Благодаря мобильности и простоте в эксплуатации «Плазморан» используют как в операционных, так и в полевых условиях. С аппаратом работают в федеральных и региональных больницах, например, в клиниках МВД, РЖД и Минобороны.

Задача

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

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

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

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

Задачи:

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Решение

Мы разработали минималистичный медицинский интерфейс для установки «Плазморан» и адаптировали его под условия реальной эксплуатации.

Работу начали с фиксации пользовательских сценариев:

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

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

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

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

Что реализовали:

• Экран самотестирования с пошаговой проверкой всех подсистем: плазмотрон, подача газа, питание и охлаждение. В случае ошибки программа подсвечивает проблемный блок и выводит инструкцию.
• Главное меню с крупными кнопками и возможностью быстро переключаться между режимами.
• Цветные акценты для улучшения навигации и систему плиточных переключателей, которая удобна для врачей.
• Режим автообработки с калькулятором — врач вводит фазу заживления и площадь раны, а система автоматически рассчитывает длительность процедуры.
• Разделили справочную информацию на ситуативную, которая видна экране, и отложенную — в подсказки добавили инструкции, видео и схемы.
• Интерактивные сценарии управления — старт, пауза и стоп, с отложенным запуском и защитой от случайных нажатий.
• Завершающий экран с напоминанием о необходимости выключить подачу газа.
• Motion-графику запуска и UI kit для дальнейшего масштабирования интерфейса.

Аналитика

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

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

Что отразили в структуре:

• Порядок действий врача — от включения установки и прохождения самотестирования до выбора режима, расчета параметров и запуска плазмогенерации.
• Форматы ошибок. Прописали действия при сбоях плазмотрона, охлаждения, подачи газа и питания. Для каждого сценария предусмотрена визуальная индикация и пошаговая инструкция.
• Особенности эксплуатации — работа в перчатках, на улице или при плохом освещении. Учли требования к крупным элементам, контрастности и читаемости.
• Навигация между режимами. Собрали и визуализировали список состояний и режимов. Добавили рекомендации и подсказки по работе с каждым из них.

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

Дизайн

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

Дизайн-концепция и презентация решений

Работу начали с подготовки концепции экрана.

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

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

Для клиента подготовили презентацию: 3D-макеты, состояния элементов и реакции интерфейса на действия. Это позволило показать идеи и перейти к работе с экранами.

UI-дизайн и визуальные паттерны

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

Крупные элементы управления для работы в перчатках

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

Интуитивные цвета кнопок для быстрой навигации в интерфейсе

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

Читаемость при плохом освещении в полевых условиях

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

Числовой ввод в калькуляторе для расчета площади раны

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

Минималистичный стиль для врачей

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

Адаптивность экрана для ускорения работы специалистов и новичков

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

Интерактивная модель интерфейса

Разработали интерактивный прототип, чтобы показать работу системы:

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

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

UI Kit и масштабируемость

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

1. Упростить верстку для технической команды клиента;

2. Вносить изменения, адаптировать и развивать интерфейс.

3. Результаты сотрудничества

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

Итоги:

• Унифицированный интерфейс. Макеты покрывают основные режимы работы с учетом всех сценариев, состояний и ошибок.
• Готовый UI Kit для масштабирования. Все компоненты собраны в библиотеку. Интерфейс легко адаптировать под другие модели и режимы работы установки.
• Интерактивные макеты и motion-графика. Визуализация усиливает доверие к продукту, снижает порог входа и облегчает обучение.
• Оптимизация рабочих сценариев. Подсказки, крупные кнопки, продуманная навигация и отложенный старт снижают вероятность ошибок и повышают безопасность.
• Актуальный дизайн. Минимализм, функциональность и читаемость обеспечивают долгий срок жизни интерфейса.

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