· Дмитрий Макаров, дизайнер интерфейсов · 4 минуты на чтение
Лучшие паттерны медицинских интерфейсов
Последние восемь лет мы регулярно делаем медицинские интерфейсы, 2-3 проекта в год. И как бы ни отличались заказчики и задачи, мы снова и снова рисуем одни и те же экраны — страницы пациента, списки, анализы, документы.
После десятка медицинских проектов становишься специалистом по типовым экранам. Мастером страниц пациента. Йодой дашбордов врача.
И опыт этот передаваться должен. Юным падаванам, чтоб не изобретали велосипед и не рисовали двадцать первую страницу анализа биоматериалов, когда двадцать уже есть:)
Для этого нужна система, и мы начали её строить.
Мастер света свечи. «Доктор, изучающий анализы»
22 лучших паттерна
Мы создали в Фигме файл, в который сложили все лучшие паттерны медицинских информационных систем.
Как мы собирали паттерны
Сперва мы составили список всех медицинских интерфейсов. Получилось 22. Выбрали из них лучшие — те, у которых заберем паттерны. Стало восемь.
Составили таблицу с этими интерфейсами и отметили, какие разделы в них есть. Получили список разделов и функций, которые разрабатывали чаще всего.
Собрали по этой таблице все референсы из восьми проектов. Сложили в едином файле Фигме на отдельных страницах.
Например, для раздела «История посещений» мы выбрали 3 референса.
Сперва нам показалось, что этого достаточно. Но вскоре мы пошли дальше — пересобрали самые нужные страницы и функции на компонентах дизайн-системы Ant Design. То есть, привели часть паттернов к единой дизайн-системе, чтобы ими можно было пользоваться в будущих проектах.
Так выглядят 3 варианта «истории посещений» на Ant Design.
Конструктор интерфейсов
Эти три варианта мы собрали в один компонент, в котором можно переключать варианты экранов. И то же самое проделали с еще десятью разделами. Получили конструктор, про который уже рассказали отдельно.
Из чего состоит конструктор:
- Список пациентов — 6 вариантов
- Поиск пациента — 5 вариантов
- Создание пациента — 6 вариантов
- Редактирование пациента — 8 вариантов
- Карточка пациента — 5 вариантов
- Мини-карточка пациента — 4 варианта
- Анализы — 5 вариантов
- История посещений — 3 варианта
- Документы пациента — 5 вариантов
- Амбулаторные данные — 2 варианта
- Верхнее меню — 5 вариантов
- Боковое меню — 5 вариантов.
Когда к нам приходят заказчики из медицины, мы им показываем конструктор — это практически каталог лучших паттернов, которые мы советуем переиспользовать. И часто переиспользуем как основу для МИС.
Позже, в процессе кастомизации и разработки второстепенных страниц, мы используем тот самый файл в фигме, в котором собраны все разделы из выбранных восьми проектов. Всего этих разделов 45.
Recycle this
Этот набор из 45 страниц оказался полезен не только дизайнерам, но и менеджерам.
Заказчик на созвоне говорит: у меня будет список врачей, карточка врача, электронная очередь, подписание документов, проведение приема и еще десять других сущностей.
Менеджер включает демонстрацию экрана, идет в файл, показывает страницу с похожими сущностями и спрашивает: это похоже на список врачей?
Даже если отличий много, их легко обсуждать на существующих примерах.
Заказчик отвечает: да, таблица подходит, но уберем вот эти три колонки, добавим другие, поменяем тулбар и еще добавим фильтры.
От техзадания в гугл-доке мы перешли к картинке и комментариям, которые фиксируют, что именно надо переделать.
Причем паттерны помогают обсуждать дизайн на разных уровнях, от глобальных до детальных:
- Какой будет обвязка экрана и навигация
- Как будут работать поиск и фильтры
- Как визуализировать пошаговые процессы
- Информация на одном экране или в табах
- Вы хотите карточки или список
Готовые решения ускоряют работу
Мы сделали свой небольшой Пинтерест для медицинских интерфейсов. Только у нас все решения проверены реальными проектами.
Как только мы слышим про раздел или функцию, идем в собственные же референсы. Находим подходящий и показываем заказчику. Если экран концептуально решает задачу, кастомизируем под его ситуацию.
Ему нужна запись к врачу — у нас есть.
Обсуждаем детали, уносим в разработку и получаем оригинальный экран записи к врачу.
Стоит ли говорить, что готовые решения ускоряют сам дизайн? Когда перед тобой есть готовый референс, подготовить макеты гораздо проще и быстрее. Дизайнеры больше не изобретают двадцать первую страницу пациента. Она у них наполовину готова.
Другой неожиданный эффект от файла — дизайнеры теперь сами ходят в него за референсами. Оказывается, если все сложено в одном удобном месте, проще взять оттуда готовую подходящую таблицу или модальное окно, чем рисовать.
Итог
Одним файлом мы решили сразу несколько задач:
- ускорили процесс обсуждения требований;
- упростили и ускорили разработку дизайна;
- создали базу проверенных решений, которые переиспользуем в других проектах.
Главное — теперь опыт не уходит вместе с сотрудником, а остается в виде макетов, готовых к повторному использованию. Компания нашла способ копить экспертизу в прикладном виде.
А как вы переиспользуете дизайн-наработки? Поделитесь опытом: напишите нам на почту или в Telegram.
Вам нужен медицинский интерфейс?
Заказать дизайн
Напишите нам на we@sobakapav.ru
Что мы можем сделать?
Что угодно от исследования пользователей до дизайна интерфейса под ключ.
Примеры из практики
Мы наверняка уже делали интерфейс, пожожий на тот, который вам нужен. Проверьте.
