Авторизация
Забыли пароль?
Сброс пароля
Вернуться к авторизации

Интерфейс лазерного оборудования Azor

06 июня ‘24

Заказчик: Azor

Разработка стильной и безопасной панели управления для аппарата, использующегося в салонах премиум-класса

Агентство-исполнитель кейса

Digital-агентство Атвинта

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

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

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

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

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

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

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

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

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

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

Разработка инетерфейса

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

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

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

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

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

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

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

Так как некоторым врачам удобнее включать готовые программы, мы создали меню с выбором процедур. Для каждого режима отрисована своя иконка, которая продолжает тематику процедуры и помогает пользователю быстрее найти нужную плашку. Всего создано 15 иконок для уникального стиля Azor.

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

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

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

Работа с интерфейсами лазерного оборудования специфична:

  • Так как лазер является травмоопасной процедурой и влияет на здоровье пациента, необходимо учесть аспект безопасности
  • Во время процедуры врач сконцентрирован на пациенте, у него нет времени изучать панель управления — все должно быть понятно с первого взгляда
  • Экраны аппарата компактного размера, а значит, нужно оптимально использовать доступное пространство и не перегружать его лишними деталями
  • Клиники эксплуатируют оборудование до 10-15 лет, поэтому дизайн должен быть минималистичным, чтобы сохранить актуальность на долгий период

Эти нюансы были учтены при разработке интерфейса.

4. Заключение

Итоги проекта:

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

Агентство-исполнитель кейса

Digital-агентство Атвинта

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