Разработали интерфейс ИИ-сервиса для рентгенологов: как это было

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

Разработали интерфейс ИИ-сервиса для рентгенологов: как это было

Приветствуем! Это — Третье мнение. Мы создаём ИИ-сервисы, которые помогают врачам и медсёстрам в диагностике заболеваний и уходе за пациентами.

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

Татьяна Смелова
UX/UI-дизайнер

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

Как врач работает с ИИ-сервисом

Всё начинается с пациента, который проходит исследование: рентген, маммографию или компьютерную томографию.

ИИ-система его обрабатывает: выделяет находки, описывает их и выдаёт предварительные результаты.

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

Разработали интерфейс ИИ-сервиса для рентгенологов: как это было

В чём сложности

Единых шаблонов для описания исследований — нет. А на практике врачи по-разному описывают и классифицируют отклонения.

Патологий и их признаков — много. Сейчас на КТ органов грудной клетки ИИ-сервис «Третье мнение» находит 9 признаков заболеваний, в будущем — их станет ещё больше. Для каждого нужно подобрать обозначения и при этом выдержать баланс, чтобы данные были читаемы для специалиста.

Так выглядит компьютерная томография органов грудной клетки

Проекций, срезов и снимков тоже много. Для маммографии, например, данные выводятся на 4 снимках в 2 проекциях:

Так выглядит маммографическое исследование
Так выглядит маммографическое исследование

Здесь ИИ-сервис может обнаружить больше 10 признаков рака молочной железы, не считая другие заболевания. Поэтому нужно заранее продумать, как избежать перегруженности и наслоения данных в интерфейсе.

Главная задача — разработать интерфейс, который будет удобным для большинства врачей-рентгенологов.

Начинаем с UХ

Прежде чем взяться за дизайн, мы провели много консультаций, узнали у врачей принципы написания медицинских заключений, обсудили типичные и сложные случаи. Затем создали прототип визуализации и начали проводить UX-тестирования, наблюдая за взаимодействием специалистов с ИИ-сервисом и паттернами их поведения.

Во время тестов столкнулись с несколькими проблемами:

Какой объем информации отображать в визуализации?

В диагностике не всегда есть стандарты, как писать заключения, поэтому врачи используют разные подходы. Для примера возьмём КТ органов грудной клетки. Специалист может описать на исследовании:

  • каждый очаг по отдельности
  • только наименьшие и наибольшие очаги
  • группы очагов одного типа
  • только самые крупные очаги

Выделять сразу всё — плохая идея: изображение станет перегруженным. Мы искали баланс между полнотой информации и доступностью восприятия, чтобы сократить время на чтение исследования и убрать «визуальный шум».

Как решили задачу:

→ ИИ обводит все очаги на изображении, чтобы не было ощущения, что он их не нашел.

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

→ Добавили градацию цвета: большие очаги сделали яркими, чтобы обратить на них внимание, малые и средние — приглушенными, чтобы не перегружать изображение.

Как выглядит исследование после доработки интерфейса
Как выглядит исследование после доработки интерфейса

Как подписывать патологии?

Если на одном исследовании было много отклонений, метки с их названиями накладывались друг на друга и создавали хаос.

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

Здесь мнения врачей тоже разделились:

  • Для одних удобнее выносить метки за пределы исследования, как в атласе
  • Других это отвлекает — лучше обводить патологии и подписывать их в одном месте
  • Третьим комфортнее просто «подсветить» находку и самим её описать

Как решили задачу:

→ Оставили подписи патологий рядом с обводкой. Они выручают врачей с небольшим опытом и экономят время: не нужно искать текст глазами по всему интерфейсу.

→ Добавили иерархию. Обводим и подписываем только подозрительные находки, остальные — обводим, но не подписываем.

→ Подобрали размер шрифта. Подписи можно прочитать не вглядываясь, и они не заслоняют исследование.

Так мы сделали информацию читаемой и избежали перегруженности изображения.

Слева – до: подписываем и обводим все находки. Справа — после: обводим все находки, но подписываем только подозрительные.
Слева – до: подписываем и обводим все находки. Справа — после: обводим все находки, но подписываем только подозрительные.

Как тестировать визуализацию?

Сначала UX-тесты проходили на одном «показательном» исследовании, но это было неинформативно. Мы упустили, что патологий может быть в несколько раз больше.

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

Как теперь выглядят исследования с разным количеством патологий
Как теперь выглядят исследования с разным количеством патологий

Прорабатываем UI

В процессе UX-тестов обнаружили ещё одну проблему — цветопередача и цветоощущение.

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

Слева визуализация на цветном мониторе, справа — на черно-белом
Слева визуализация на цветном мониторе, справа — на черно-белом

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

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

Для примера: как видит интерфейс человек с дейтераномалией (вид дальтонизма)

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

Тестируем на практике

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

Например, маммографию обычно смотрят в 2 или 4 окнах, а в Figmа смотрели в одном.

Слева — прототип в Figma, справа — во вьюере на рабочей станции
Слева — прототип в Figma, справа — во вьюере на рабочей станции

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

Текст стал читаемым даже при большом количестве открытых окон.

Результаты

По мнению врачей, интерфейсы ИИ-сервисов «Третье Мнение» — действительно удобные:

Разработали интерфейс ИИ-сервиса для рентгенологов: как это было

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

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

Посмотреть, как работает интерфейс вживую, можно по ссылке. Больше об ИИ для медицины рассказываем в телеграм-канале ↓

51
52 комментария

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

11
Ответить

А какая еще цветоаномалия распространена среди рентгенологов?

Ответить

Классная аналогия с третьем мнением в нейминге, огонь 🔥

5
Ответить

Жиза, мне тоже зашло!

1
Ответить

Отдельный респект за адаптацию для врачей с особенностями цветовосприятия)

4
Ответить

Благодарим! Стараемся сделать сервис инклюзивным)

2
Ответить

Приятно, что в нашей стране есть компании, которые создают такие классные современные разработки!!!

4
Ответить