Как мы собрали конструктор медицинских интерфейсов

Зачем нужен конструктор

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

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

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

Из чего состоит конструктор

Конструктор — это набор типовых страниц МИС, в которых можно переключать и настраивать внешний вид и функциональность. Что-то вроде Тильды, только в интерфейсах.

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

Пока конструктор находится в стадии MVP. Мы изучаем его возможности и интерес заказчиков.

Дизайн-система ускоряет разработку

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

Любой разработчик может бесплатно использовать Ant Design. Мы взяли эту дизайн-систему за основу, чтобы привести к одному виду интерфейсы восьми разных МИС.

Если заказчику не подходит Ant Design, мы используем его UI-кит или перерисовываем макеты в уникальном UI. Но сами концепции и механики выбираем в конструкторе.

Как работает конструктор

Конструктор состоит из 11 экранов.

Это разделы МИС:

• Список пациентов
• Поиск пациента
• Создание пациента
• Редактирование пациента
• Карточка пациента
• Мини-карточка пациента
• Анализы
• История посещений
• Документы пациента
• Амбулаторные данные
• Верхнее и боковое меню.

Каждый раздел — отдельный экран. У него есть:

• меню, которое можно настраивать,
• контент, который можно переключать.

Конструктор собран так, чтобы макеты в нем мог настроить менеджер, который не разбирается в Фигме.

Покажем на примере.

Личные данные пациента

Для раздела «Личные данные пациента» в конструкторе есть пять вариантов страницы и четыре разных тулбара. Менеджер показывает их по очереди.

Если вариант не подходит, переключаем на другой. У нас был вариант Tula, выбираем Samara.

Выбрали Samara. Теперь проработаем меню.

Один клик — и заменили меню Orel на Samara.

Настраиваем функциональность верхнего меню.

То же самое с боковым меню. Был Orel, стал EKB. Сайд-меню более специфичное, поэтому в нем меньше настроек. Можно включить-отключить логотип компании и карточку доктора.

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

Менеджер собрал этот экран за 10 минут. Скорее всего, в нем чего-то не хватает. Дизайнер позже добавит руками. И, скорее всего, не нарисует с нуля, а возьмет из готовых компонентов Ant Design.

И так с любой из 11 страниц. Где-то настроек больше, где-то меньше.

Еще пример

Посмотрите, как за 10 минут можно изменить список пациентов.

Это список до изменений.

Это список пациентов после изменений. Мы поменяли оба меню, тулбар и колонки таблицы.

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

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

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

Сейчас оно упирается в боковое.

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

Заменили.

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

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

Зачем нам конструктор

С ним выиграли все: заказчики, «Собака Павлова» и дизайнеры компании.

Заказчики

Раньше делали интерфейсы под себя с нуля, теперь — выбирают:

• делать уникальный интерфейс в привычном темпе за фулпрайс;
• кастомизировать типовое решение за меньшую сумму и сокращенное время.

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

Компания

Получила инструмент, который помогает:

• продавать экспертизу в медицинских проектах;
• быстро разрабатывать интерфейсы для МИС.

Мы прямо во время первых встреч показываем разные варианты интерфейса, останавливаемся на подходящих и быстро адаптируем их под заказчика.

Дизайнеры компании

Используют лучшие интерфейсные решения и компоненты «Собаки Павловой».

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

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

Как мы сделали конструктор

Мы выбрали восемь своих лучших медицинских проектов. Составили таблицу с функциями и разделами. Отметили, где что есть.

Получили список самых используемых разделов и функций. Сложили все референсы в Фигме на отдельных страницах.

Например, для раздела «История посещений» мы выбрали 3 референса и каждый перерисовали в Ant Design.

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

И так — с каждым из 11 разделов.

И вот что у нас получилось

• Список пациентов — 6 вариантов
• Поиск пациента — 5 вариантов
• Создание пациента — 6 вариантов
• Редактирование пациента — 8 вариантов
• Карточка пациента — 5 вариантов
• Мини-карточка пациента — 4 варианта
• Анализы — 5 вариантов
• История посещений — 3 варианта
• Документы пациента — 5 вариантов
• Амбулаторные данные — 2 варианта
• Верхнее меню — 5 вариантов
• Боковое меню — 5 вариантов

Что дальше?

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

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

И тут мы хотим посоветоваться с вами.

Если бы в вашей отрасли был похожий инструмент, какие его качества могли бы привлечь ваш интерес?

• Большое количество разделов
• Разнообразие типовых страниц
• Гибкость настроек для каждой страницы
• Проработанные флоу из нескольких экранов
• Разнообразие пользовательских ролей

Может, у вас другие ожидания от инструмента? Или не пользовались бы им? Оставили в нем все как есть? Пишите нам на почту или в Telegram.