UX/UI в операционной. Когда от дизайна кнопки зависит жизнь пациента
В медицинских интерфейсах нет права на ошибку. Диджитал-агентство Атвинта рассказывает, как команда создавала экраны хирургической установки.
Как мы работаем с интерфейсами оборудования
На связи диджитал-агентство Атвинта (ТОП лучших веб-разработчиков России для медицины и промышленности по версии Рейтинга Рунета).
В нашем портфолио больше десятка проектов по разработке экранов оборудования — мы оснащали интерфейсами аппараты для косметологов, ученых и заводских рабочих.
Наша основная специализация — веб-интерфейсы, и на контрасте мы как никто другой понимаем специфику работы с панелями управления:
- контекст — на оборудовании выполняется работа с физическими объектами и людьми, например, производится товар или проходит лечение, причем это могут быть разные помещения: офис, медкабинет, цех и т.д.
- последствия — риск ошибки очень высокий: можно поранить человека или испортить партию товара
- отсутствие стандартизации — размеры экрана и его характеристики в каждом проекте разные, от этих вводных зависит и будущий интерфейс
Читайте нашу статью с советами по созданию медицинских интерфейсов:
Это Атвинта. Проектирование в медицине — дело ответственное, ведь от интерфейса зависит здоровье пациента и результат процедуры. На примере лазерных аппаратов мы расскажем, как сделать удобную панель управления для врача и безопасную — для посетителя клиники.
Недавно наше портфолио пополнилось еще одним экраном — на этот раз мы работали с хирургической установкой. О подробностях расскажем в этой статье.
Про установку: хирургический аппарат для полевых условий
Нам предстояло создать экраны управления хирургической установкой «Плазморан». Этот аппарат используют для заживления серьезных ран, например, от огнестрельного оружия и сильных ожогов.
С аппаратом работают в федеральных и региональных больницах, например, в клиниках МВД, РЖД и Минобороны.
Нужно было переработать предыдущую версию экрана — интерфейс требовал доработки в части безопасности и читаемости. Это могло создавать риски в экстренных ситуациях.
Заказчик попросил нас сделать безопасный и удобный интерфейс для хирургов, который снизит вероятность медицинских ошибок.
Производитель доверился именно Атвинте благодаря нашему опыту в проектах с медицинским оборудованием.
Специфика оборудования
Важная деталь — операции с «Плазмораном» делают даже в полевых условиях. А для дизайна это условия со звездочкой, ведь надо учесть разную освещенность во время использования и разные сценарии применения.
Сегодня установка работает в стерильной операционной, а завтра — на месте происшествия.
Также врачи работают с установкой в перчатках. Поэтому интерфейсу важно оставаться читаемым даже во время запотевания экрана, бликов и при разном освещении. Доктор должен работать уверенно и безошибочно в любой ситуации.
Характеристики экрана: LED с разрешением 1024x768.
Решение
Мы разработали минималистичный медицинский интерфейс для установки «Плазморан» и адаптировали его под условия реальной эксплуатации.
Работу начали с пользовательских сценариев:
- как врач включает установку;
- что происходит при самотестировании — система автоматически проверяет питание, уровень газа, состояние охлаждения и работу плазмотрона;
- каким образом рассчитывается время обработки;
- как интерфейс реагирует на ошибки и что делает в случае сбоя.
Это позволило продумать логику системы и избежать перегрузки экрана.
Взаимодействие с инженерами
В интерфейсах для оборудования мы всегда думаем о технической реализации. Предлагаем несколько вариантов дизайна и проверяем, насколько они подходят под конкретную модель установки. Проект шел в связке с инженерами заказчика, которые будут внедрять интерфейс.
Так мы учли все нюансы еще на этапе проектирования.
Как устроен интерфейс
Учли требования к размерам кнопок, освещению, читаемости и визуальной иерархии данных. Интерфейс строится вокруг четырех основных режимов работы. Для каждого спроектированы отдельные экраны, состояния запуска, паузы, завершения и подсказки.
Что реализовали:
- Экран самотестирования с пошаговой проверкой всех подсистем: плазмотрон, подача газа, питание и охлаждение. В случае ошибки программа подсвечивает проблемный блок и выводит инструкцию.
- Главное меню с крупными кнопками и возможностью быстро переключаться между режимами.
- Цветные акценты для улучшения навигации и систему плиточных переключателей, которая удобна для врачей.
- Режим автообработки с калькулятором — врач вводит фазу заживления и площадь раны, а система автоматически рассчитывает длительность процедуры.
- Разделили справочную информацию на ситуативную, которая видна экране, и отложенную — в подсказки добавили инструкции, видео и схемы.
- Интерактивные сценарии управления — старт, пауза и стоп, с отложенным запуском и защитой от случайных нажатий.
- Завершающий экран с напоминанием о необходимости выключить подачу газа.
- Motion-графику запуска и UI kit для дальнейшего масштабирования интерфейса.
Рассмотрим каждый этап в подробностях.
Аналитика: подготовка логики экранов
Собрали вводные данные с помощью специалистов заказчика и инструкций. Зафиксировали все режимы работы установки, специфику эксплуатации в полевых условиях и требования к эргономике. Клиент также прислал свои пожелания и примеры интерфейсов.
Изучили пользовательские сценарии и оформили user flow — маршрут врача от включения устройства до завершения процедуры. В схеме показали ключевые точки входа, подсказки и возвраты. Такая визуализация помогает согласовать логику экранов и сократить число итераций на этапе дизайна.
Что отразили в структуре:
- Порядок действий врача — от включения установки и прохождения самотестирования до выбора режима, расчета параметров и запуска плазмогенерации.
- Форматы ошибок. Прописали действия при сбоях плазмотрона, охлаждения, подачи газа и питания. Для каждого сценария предусмотрена визуальная индикация и пошаговая инструкция.
- Особенности эксплуатации — работа в перчатках, на улице или при плохом освещении. Учли требования к крупным элементам, контрастности и читаемости.
- Навигация между режимами. Собрали и визуализировали список состояний и режимов. Добавили рекомендации и подсказки по работе с каждым из них.
Результатом аналитического этапа стала структура всех экранов, которая легла в основу интерфейса.
Дизайн: акцент на безопасность и минимизацию человеческого фактора
На этапе дизайна сфокусировались на двух целях: создать интуитивный и безопасный интерфейс для врачей, а также заложить визуальную систему, которую заказчик сможет использовать для других установок или модернизации «Плазморана».
Концепция и презентация решений клиенту
Сначала — подготовка концепции экрана.
Изначально у клиента был запрос на темный минималистичный интерфейс. С учетом условий эксплуатации — полевые операции и возможные блики — такой дизайн мог оказаться непрактичным.
Поэтому мы предложили два вида экрана — темный вариант и светлую тему с контрастной типографикой, которая лучше читается при любом освещении.
Интерфейсы оборудования всегда показываем на объемных мокапах. Так заказчик может оценить, как экран смотрится вместе с дизайном установки.
Для клиента подготовили презентацию: 3D-макеты, состояния элементов и реакции интерфейса на действия. Так мы наглядно показали идеи и перешли к работе с экранами.
UI-дизайн и визуальные паттерны: убрали лишнее
Задача дизайна в этом проекте — совместить медицинские требования с удобством эксплуатации в полевых условиях.
В прошлой версии экрана врачи отмечали сложную навигацию и мелкие кнопки. Мы учли обратную связь и предложили другой варианты реализации интерфейса.
Убрали всю вложенность и сделали простой интерфейс: нажал на кнопку — и экран тут же показывает изменения. Больше не нужно переключаться между вкладками меню, чтобы понять, какой режим включен и все ли работает. Одно нажатие — один экран, никакой путаницы.
Читайте кейс о разработке конструктора квартир:
Это Атвинта. Для ТОП-4 девелопера России мы создали модуль, в котором покупатели могут представить будущий интерьер — расставить стены и мебель. В статье рассказываем, как сервис помогает обустроить будущее гнездышко без дизайнеров и сложных программ.
Крупные элементы управления для работы в перчатках
Интерфейс рассчитан на работу в перчатках. Все кнопки и интерактивные зоны — увеличенного размера и с большим отступом между элементами, чтобы исключить случайные нажатия.
На стартовом экране мы сделали большие кнопки с короткими надписями, но они были одинаковыми и сливались между собой. Чтобы понять, какой режим активен, нужно было всматриваться в текст и запоминать расположение.
Мы предложили добавить в каждую кнопку символ и цвет. Так врач за долю секунды видит нужный режим и сразу запоминает его расположение.
Интуитивные цвета кнопок для быстрой навигации в интерфейсе
Сделали акценты на кнопках основных параметров. Зеленые — положительные действия, красные — критические команды и предупреждения, а синие — это нейтральные функции. Такая система помогает быстрее ориентироваться в интерфейсе и снижает риск ошибки.
Читаемость при плохом освещении в полевых условиях
Использовали контрастную палитру и отказались от бликующих градиентов. Интерфейс одинаково хорошо читается и при ярком освещении, и в условиях низкой видимости.
Числовой ввод в калькуляторе для расчета площади раны
Вместо всплывающей клавиатуры, как на смартфоне, встроили клавиши ввода прямо на экран. Врач сразу видит результат и продолжает работу.Калькулятор с автоматическим расчетом площади раны
Минималистичный универсальный стиль для врачей
Отказались от лишней графики и декоративных элементов, чтобы сохранить актуальность дизайна и не перегружать интерфейс.
Как оптимизировать действующие интерфейсы:
Это Атвинта. Сейчас мы развиваем около 20 продуктов для наших клиентов. Это образовательные платформы, корпоративные сервисы и медицинские приложения. В статье показываем, как развиваем такие сложные интерфейсы.
Адаптивность экрана для ускорения работы специалистов и новичков
Все рабочие блоки подстраиваются под раскрытие подсказок и ошибок. Это дает врачу полное представление о происходящем, не перегружая интерфейс.
Мы разбили всю информацию на ситуативную и отложенную. Первая — на экране, вторая спрятана в справку. Так опытные врачи работают быстрее, а новички получают нужные объяснения по мере необходимости.
Интерактивная модель интерфейса
Разработали интерактивный прототип, чтобы наглядно показать работу системы:
- Переход к разным режимам и этапам переключения экранов.
- Состояния паузы, стопа и завершения с фиксацией времени, а также возможностью вернуться или начать заново.
- Подсказки при расчете площади раны и визуальные рекомендации во время обработки.
Такой подход помогает клиенту увидеть результат работы, а инженерам корректно настроить дизайн на оборудовании.
UI Kit и масштабируемость
Подготовили UI kit на русском языке с понятными названиями элементов по просьбе клиента, так как внедрять интерфейс будет команда заказчика. В библиотеку компонентов вошли шрифты и цветовая гамма, статичные элементы, состояния кнопок, всплывающие окна и иконки. Это позволит:
- упростить верстку для технической команды клиента;
- вносить изменения, адаптировать и развивать интерфейс.
Отзыв
ООО «ПлазмоПром»:
«Команда Атвинты быстро погрузилась в проект и предложила визуальные решения, которые помогли переосмыслить интерфейс установки. Особенно хочется отметить инициативность ведущего дизайнера, а также быструю обратную связь со стороны менеджера проекта».
Результат
Наша команда разработала новый интерфейс для хирургической установки «Плазморан» — безопасный и адаптированный под реальные условия работы врачей.
Итоги:
- Унифицированный интерфейс. Макеты покрывают основные режимы работы с учетом всех сценариев, состояний и ошибок.
- Готовый UI Kit для масштабирования. Все компоненты собраны в библиотеку. Интерфейс легко адаптировать под другие модели и режимы работы установки.
- Интерактивные макеты и motion-графика. Визуализация усиливает доверие к продукту, снижает порог входа и облегчает обучение.
- Оптимизация рабочих сценариев. Подсказки, крупные кнопки, продуманная навигация и отложенный старт снижают вероятность ошибок и повышают безопасность.
- Актуальный дизайн. Минимализм, функциональность и читаемость обеспечивают долгий срок жизни интерфейса.
Наш интерфейс экономит время врачей, снижает нагрузку в экстренных ситуациях и делает работу с оборудованием понятной даже для специалистов без технической подготовки.
Классная статья! Как заказать дизайн оборудования или веб-интерфейс у Атвинты?
• оставляйте заявки: info@atwinta.ru
• смотрите кейсы atwinta.ru