Лучшие паттерны медицинских интерфейсов

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.