The Specifics of User Interface Design for Medical Websites

Введение

Несмотря на активное развитие цифровых технологий, здравоохранение до сих пор отстаёт более чем на 10 лет от других отраслей в вопросах внедрения современных подходов к дизайну интерфейсов [1]. Более чем 70% медицинских информационных сайтов и порталов имеют устаревшие, неинтуитивные и визуально непривлекательные интерфейсы, что приводит к снижению продуктивности работы персонала и увеличению времени на выполнение стандартных операций. Плохой пользовательский опыт становится одной из причин низкой вовлечённости пациентов. До 60% пользователей покидают медицинские онлайн-сервисы ещё на этапе регистрации или ввода личных данных из-за неудобного интерфейса [2]. Жесткие правовые требования и высокая стоимость сертификации новых интерфейсов затрудняют внедрение современных дизайн-трендов [3] и решений.

1. Принципы и критерии

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

1.1. Принцип минимализма

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

1.2. Ясная структура

Логическая организация разделов, например записи на приём, карточек врачей, результаты анализов, контакты и другие подобные, обеспечивают логичную и четкую структуру интерфейса. Единообразие визуальных и навигационных решений предполагают согласованность паттернов интерфейса, помогающих создавать стабильные ожидания и ассоциации у пользователей. Такой подход снижает вероятность ошибок, способствует более быстрому освоению интерфейса [6]. Все ключевые функции должны быть доступны за минимальное количество кликов, а для их освоения можно не обладать специальными цифровыми навыками.

1.3. Адаптивность

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

1.4. Инклюзивность

Интерфейс медицинского сервиса должен быть ориентирован на максимально широкую аудиторию, учитывать потребности пожилых пользователей и лиц с ограниченными возможностями. Это предполагает соблюдение стандартов доступности, в частности рекомендаций WCAG 2.1 [8], а также принципов универсального дизайна, способствующих снижению цифрового неравенства [9]. Интерфейс должен исключать неоднозначные формулировки, давать пользователю понятный отклик на его действия. Таким образом, система становится по-настоящему доступной для всех категорий граждан.

1.5. Безопасность и соответствие нормативным требованиям

Медицинские данные относятся к категории чувствительной информации [10], в связи с чем безопасность их обработки должна быть обеспечена на всех уровнях. Интерфейс должен соответствовать требованиям законодательства — как российского (например, Федеральный закон № 152-ФЗ «О персональных данных»), так и международного (в том числе GDPR [11]). Это предполагает внедрение механизмов безопасной аутентификации, защиту каналов передачи данных, информирование пользователей о правилах обработки персональной информации, а также реализацию прав на доступ, изменение и удаление персональных данных. Надёжность и прозрачность подобных механизмов напрямую влияют на уровень доверия к цифровым медицинским сервисам.

2. Анализ User Flow

Пройдя шаги типовых пользовательских сценариев взаимодействия с медицинским веб-сайтом, можно выделить некоторые проблемные зоны. Например, при воспроизведении процедур записи на приём, поиска врача, просмотра результатов анализов, выявляется проблема осложненной многоступенчатой регистрации с необходимостью подтверждения через электронную почту, СНИЛС, полис ОМС и прочие, вероятно, затрудняющая для пользователя процесс входа. Следует остановиться на двух-трёх полях ввода и таким образом обеспечить успешное завершение регистрации, продолжение взаимодействия с сервисом. Помимо этого, введение виджетов быстрого доступа, например, поле для записи на приём, размещенного на главном экране поможет сориентироваться на сайте и быстрее найти нужный функционал. Персонализация личного кабинета с учётом предыдущих обращений пациента [12] также упростит взаимодействие с сайтом.

Недостаточная визуальная контрастность, страницы, перегруженные текстом, затрудняют навигацию и ухудшают восприятие информации. Минимизация текстовой информации, использование иконок упростит считывание данных и снизит визуальный шум. Для пользователей с ослабленным зрением важно обеспечить поддержку экранных ридеров и голосового сопровождения, управление навигацией с клавиатуры, увеличенный размер шрифта и высокий контраст элементов. Практики инклюзивного и универсального дизайна, предполагают разработку интерфейсов, которые с самого начала создаются «для всех», а не адаптируются постфактум [1; 2].

При проектировании медицинских веб-сайтов нельзя не учесть нормативно-правовую базу. Интерфейс ресурса должен обеспечивать сбор согласий о политике обработки данных, надёжную авторизацию и аутентификацию, техническая реализация которых должна включать SSL/TLS, двухфакторную аутентификацию, защиту от CSRF и XSS, шифрование данных. Обязательна поддержка хранения и журналирования действий пользователя для последующего аудита. Отдельное внимание должно уделяться интерфейсам для медицинского персонала, которые должны обеспечивать быстрый доступ к критически важной информации без нарушения конфиденциальности данных пациента.

3. Исследовательская часть

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

3.1. Критерий 1. Баланс контента

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

Критерии оценки:

1. оценка «0» — баланс отсутствует;
2. оценка «1» — баланс при простом расположении контента;
3. оценка «2» — баланс при сложном расположении контента.

3.2. Критерий 2. Интуитивная навигация

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

Критерии оценки:

1. оценка «0» — в навигации отсутствуют логика и баланс;
2. оценка «1» — использована элементарная навигация;
3. оценка «2» — использована сложная навигация.

3.3. Критерий 3. Комфортная цветовая схема

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

Критерии оценки:

1. оценка «0» — цветовая схема не позволяет комфортно воспринимать контент;
2. оценка «1» — использована комфортная, но простая цветовая схема;
3. оценка «2» — использована комфортная сложная цветовая схема.

3.4. Критерий 4. Простая типографика

Эффективный пользовательский интерфейс основан на правилах типографики, которые направляют конечных пользователей к самой важной информации в первую очередь и облегчают чтение содержимого экрана. Для достижения этих результатов обычно используется кегль шрифта 14–25 pt. Для заголовков допускается использование более крупных размеров — 20 pt и выше, а для основного текста лучший диапазон — 14–18 pt. Важно соблюдать баланс размера заголовка и основного текста, чтобы избежать напряженного визуального контраста. Также важно устранить чрезмерное выделение, такое как подчеркивание, жирный шрифт и курсив.

Критерии оценки:

1. оценка «0» — отсутствует логика и баланс в использовании типографики;
2. оценка «1» — типографика аналога логична, но элементарна;
3. оценка «2» — графически сложное использование типографики.

3.5. Критерий 5. Визуальное представление

Одной из наиболее распространенных последних тенденций в дизайне интерфейсов является переход к более наглядному представлению информации и элементов управления интерфейсом. Пользователи привыкли к присутствию анимации, иллюстрированных статичных и анимированных материалов на веб сервисе. Анимация может быть сложным элементом сайта веб-сервиса или простыми анимированными иконками или графикой, которые в ёмкой форме передают информацию и обеспечивают микровзаимодействия. Использование анимации дает интерфейсу особый̆ уровень сложности, оставаясь при этом простым в использовании. Кроме того, подобные виды визуализации отлично подойдёт для сложных медицинских терминов, числовых статистик.

Критерии оценки:

1. оценка «0» — иллюстрации и/или анимация в аналоге отсутствуют;
2. оценка «1» — наличие иллюстраций или анимации;
3. оценка «2» — наличие и иллюстраций, и анимации.

Было организовано юзабилити-тестирование 5-ти представителей 3-х возрастных групп: 18–35, 36–59, 60+. Респондентам требовалось пройти три предложенных сценария: поиск информации о враче; запись на приём; переключение на версию сайта для слабовидящих.

По итогам исследования было выявлено, что только в 18% сайтов имеется полноценный вариант, адаптированный под пользователей с нарушениями зрения. В 70% сервисов пользователи старше 60 лет испытывают трудности на этапе регистрации или в моменте поиска нужной информации. 45% сайтов не имеют мобильной версии вовсе, или реализуют её частично, то есть не все её функции доступны. Лишь 12% включают персонализацию интерфейса или предлагают помощь в заполнении форм. На 64% ресурсов отсутствует индикатор прогресса выполнения и загрузки функционала, что вызывает ощущение «зависания» и неотзывчивости сервиса. Также было выявлено, что значительная часть медицинских веб-интерфейсов не соответствует базовым требованиям цифровой инклюзивности. Особенно остро проблема выражена на сервисах государственных учреждений, где до сих пор используются устаревшие CMS [13] и шаблоны сайтов, не адаптированные под мобильные устройства и возрастные особенности пациентов. Анализ также показал, что простые изменения, такие как внедрение кнопок быстрого доступа, уменьшение количества шагов при записи на приём, выделение цветом ключевых действий, существенно повышают успешность пользовательских сценариев.

Таблица 1. Результаты исследования медицинских веб-сервисов

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

Заключение

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