Разбор кейса: UI/UX-дизайн приложения, которое напомнит вам вовремя принять лекарство

Аудио перевод статьи
0:00
0:00
·

Мое приложение поможет пользователям вовремя принимать таблетки. Отсканируйте рецепт, сохраните лекарство, установите напоминания. Это просто!

1. Введение

Проблема

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

Решение

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

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

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

Увидеть, что у меня получилось, вы можете здесь.

Простой онбординг (знакомство с продуктом): Многие пользователи этого приложения — люди старше 40 лет, которые проходят лечение и не хотят возиться с новыми технологиями. Чтобы снизить барьер принятия я попытался разработать простой онбординг: вход с помощью одноразового пароля либо напрямую.

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

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

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

Редактирование отсканированных лекарств: После того как название лекарства извлечено из рецепта, пользователь может его отредактировать. Напоминания можно установить как для конкретного лекарства, так и для всех лекарств сразу. 

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

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

Вкладка "Лекарства": Чтобы у пользователя был полный список принимаемых лекарств, а также препаратов, которые он перестал принимать, я добавил отдельную вкладку:

  • Она содержит историю приема лекарств
  • Информация может быть использована врачами в процессе лечения

2. Исследование

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

Анализ конкурентов

Я нашел на рынке аналогичные продукты и протестировал 3 наиболее популярных приложения в Google Play.

Перед вами подробный анализ:

Ключевые выводы по итогам анализа приложений выше:

  1. Ни в одном из приложений пользователи не могут делать снимки лекарств.
  2. Что касается отчета о формировании привычек: я обнаружил его только в приложении My Therapy, но и он поначалу показался мне сложным для понимания.
  3. Пользователи обычно принимают лекарства утром, в середине дня и вечером, а не в определенное время. Имеет смысл разделить каждый день таким образом, однако я не встретил подобного решения ни в одном из вышеперечисленных продуктов.
  4. Ни одно из приложений не включало решения для пользователей, которые не могут понять рецепт. Это и навело меня на мысль о технологии машинного обучения для распознавания рукописного текста, которую я использовал в своем приложении.
Онлайн-опрос

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

В опросе приняли участие пользователи в возрасте от 24 до 75 лет.

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

Интервью и персоны

Я пообщался со своей бабушкой, чтобы понять ее потребности. Беседа преимущественно носила неформальный характер — бабушка всегда готова поделиться со мной своими мыслями. Поскольку я не мог приехать к ней, мы общались через Google Meet: я хотел лучше понимать её ответы и видеть, как она реагирует на вопросы.

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

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

3. Дизайн

Генерация идей

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

Наброски и вайрфреймы

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

Высокодетализированные прототипы

Онбординг

Онбординг —  важнейший аспект дизайна приложения, поскольку речь идет о знакомстве пользователя с приложением.

Мне хотелось, чтобы процесс онбординга решал следующие задачи:

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

Дизайн-идеи для достижения указанных целей:

  1. Чтобы объяснить людям, какие функции есть у приложения и как они могут его использовать, я разработал 3 визуально привлекательных экрана.
  1. Поскольку основная аудитория — люди в возрасте 40+ лет, многие из которых не имеют достаточного опыта использования новых приложений, я постарался максимально упростить процесс регистрации.

Чтобы это сделать я принял 2 решения:

  • Регистрация (вход/создание нового аккаунта) не должна быть обязательной: Многие пользователи хотят использовать приложение просто так, без входа или регистрации. Некоторые из них не знают, как вводить одноразовый пароль, или не имеют электронной почты, чтобы зарегистрироваться, если речь идет о людях старшего возраста. Чтобы облегчить задачу, я создал кнопку Get Started (“Начать”), которая позволяет сразу начать использовать приложение.
  • Регистрация с помощью одноразового пароля: Размышляя о том, как спроектировать регистрацию пользователей, я выбирал из 2 вариантов: регистрация с помощью одноразового пароля или с помощью адреса электронной почты.

Я остановится на опции с одноразовым паролем по 2 причинам:

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

Сканирование рецепта

Распознавание рукописного текста — вполне осуществимая с технологической точки зрения задача. Я признаю, что результат может быть не совсем точным, поскольку указанная технология не слишком сильно развита. Кроме того, необходимо учесть, что почерк врача разобрать сложнее, чем почерк обычного человека, но нужный результат может быть достигнут в ближайшие годы.

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

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

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

Пользователи могут просто нажать на кнопку с зеленой галочкой (“Готово”), чтобы завершить процесс сканирования и сохранить результат.

Список сохраненных лекарств

При сканировании рецептов возникли некоторые вопросы, которые требовали дополнительного внимания:

Каким образом будет фиксироваться время приема каждого лекарства?

Чаще всего врачи указывают в рецепте не точное время приема, а часть дня — утро, вечер или ночь, либо обозначают ее с помощью точек (1 точка — утро, 2 — середина дня и 3 — вечер).

Поскольку в большинстве случаев время в рецепте не упоминается, нужно научить алгоритм распознавать точки и понимать, что они представляют различные фазы дня. Время по умолчанию, например 8:00 для утра, устанавливается заранее, а у пользователя есть возможность изменить его на странице настроек.

Фиксация продолжительности лечения или приема лекарства: Обычно врачи пишут “15 дней” или “30 дней” рядом с назначенным лекарством, чтобы пациент знал, в течение какого времени ему нужно принимать медикаменты. Машинный алгоритм способен распознать такую надпись. При необходимости люди, конечно, могут отредактировать эту информацию.

Установка напоминаний для конкретных или всех лекарств: Важно учитывать, что некоторые пользователи хотят установить напоминания лишь для конкретных лекарств. Чтобы у них был выбор, я добавил в каждую карточку кнопку-переключатель, с помощью которой человек может включить напоминания для отдельных препаратов.

Список может быть длинным. Как же пользователю в этом случае установить напоминания для всех лекарств? Чтобы избежать повторяющейся работы, ему необходимо просто переключить тумблер “Set Reminder For All” (установить напоминания для всех).

Редактирование информации о сохраненном лекарстве

Пользователю нужно нажать на иконку редактирования, чтобы изменить информацию о конкретном лекарстве.

Добавление изображения лекарства

Анализируя другие подобные приложения, я заметил следующее: Ни в одном из них не было функции, которая позволяла бы пользователям добавлять фотографии медикаментов.

Мне кажется, что это очень важная функция, поскольку:

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

Добавление инструкций

Проектируя экран с инструкциями, я прошел несколько итераций. При приеме лекарств инструкции играют важную роль. Иногда машинный алгоритм может распознать рекомендации, написанные врачом на рецепте, но чаще всего это не так.

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

Я разработал несколько решений. В итоге я остановился на результатах 2 итераций, чтобы выбрать окончательный дизайн, взвесив все "за" и "против" обоих вариантов.

Из 2 подходов я выбрал второй, потому что:

  • Чекбоксы показались некоторым потенциальным пользователям, с которыми я обсуждал дизайн, более подходящими для выбора нескольких вариантов.
  • Если я захочу добавить до 8 опций, интерфейс с чекбоксами не будет выглядеть таким загроможденным, как в случае с тегами.

Напоминания о приеме лекарств по дням

После того, как пользователь отсканировал рецепты и сохранил лекарства, они будут отображаться во вкладке "Home" (главная) по дням.

Как я разрабатывал карточки лекарств:

Ключевой вывод, который я сделал в ходе исследования:

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

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

Чтобы представить эти данные в простой и удобной форме, я проделал несколько итераций.

По перечисленным выше причинам я остановился на 3 варианте. Я спросил некоторых пользователей, не кажутся ли им изображения слишком маленькими, большинство из них ответили, что все нормально, но стало бы лучше, если бы их можно было увеличить. Решение оказалось простым: если пользователь нажимает на изображение, оно будет показано в полном размере во всплывающем окне.

Календарь для выбора дат:

Разработка календаря может показаться элементарной задачей, и в большинстве случаев так оно и есть. Но у меня все же возникли некоторые сложности.

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

Почему было критически важно разработать именно такой UI?

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

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

Чтобы достичь цели, я создал 2 версии календаря.

Подход 1:

Подход 2:

Протестировав оба варианта и побеседовав с пользователями, я остановился на втором решении по следующим причинам:

  • Когда я протестировал эти 2 варианта с пользователями старше 50 лет, я понял, что им проще нажать на экран и открыть календарь, чем водить пальцем в пределах небольшой области на экране.
  • Большинство пользователей сказали, что им нравится привычный вид календаря в подходе 2.
  • Я считаю, что в 1 случае труднее переместиться на 2-3 недели вперед, чем во 2. Кроме того, с точки зрения простоты интерфейса, дизайн 2 выглядит более аккуратным, в нем больше внимания уделяется сегодняшней и ближайшим датам, а, чтобы увидеть остальные даты, нужно открыть календарь.

Экран уведомлений

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

Чтобы привлечь внимание пользователя, я решил:

  • Четко сформулировать задачу. Например: “Нужно принять 2 лекарства".
  • Добавить в карточку каждого лекарства крупное изображение и выделить дозу, чтобы она сразу бросалась в глаза.

Чтобы спроектировать оригинальный экран напоминания, я просмотрел множество примеров и в конце концов остановился на идее, которая показалась мне самой подходящей.

Все элементы интерфейса на экране уведомлений служат единой цели: замотивировать пользователя и помочь ему вовремя принять лекарство. Они показаны на рисунке ниже:

Когда пользователь нажмет на кнопку "Пропустить" или "Отложить", приложение спросит, почему он это сделал. Это поможет человеку отслеживать принимаемые решения. Функция находится в процессе разработки, я добавлю решение сюда, как только оно будет готово.

Вкладка “Лекарства”

Во вкладке "Лекарства" пользователь может найти все сохраненные и активные (с включенными напоминаниями) медикаменты, а также лекарства, для которых он ранее устанавливал напоминания.

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

Экран разделен на 2 секции: "Активные лекарства" и "Неактивные лекарства".

Отображение общего количества активных лекарств (например, “Total: 6” — всего 6) важно. Так пользователи могут узнать, сколько всего препаратов они принимают одновременно.

Оценки и итерации

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

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

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

Основные предложения и проблемы пользователей были следующими:

Поиск решений для проблем выше:

Очень утомительно нажимать “Complete” (Готово) для каждого лекарства на экране уведомлений. Было бы лучше, если бы это можно было сделать один раз.

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

Я придумал 2 способа это сделать:

1. Разместить рядом с каждым лекарством чекбокс и добавить опцию "Отметить все". Так пользователи могут выбрать любое количество лекарств или все сразу. Но это решение сопряжено с определенными проблемами:

  • Из-за чекбоксов интерфейс выглядит загроможденным, поскольку на экране и так много кнопок.
  • Чтобы предоставить пользователям возможность отметить все опции сразу, мне в любом случае нужно добавить кнопку “Выбрать все”. Тогда человек сможет отметить все, а затем нажать кнопку “Complete All” (Завершить все), чтобы выполнить действие. Эта идея натолкнула меня на мысль о другом более простом решении.

2. Выдвигающаяся секция в нижней части экрана, которая включает опции "Завершить все", "Отложить все" или "Пропустить все". Пользователь может выполнять действия для отдельных лекарств или развернуть эту секцию и выполнить действия сразу для всех препаратов в списке.

У этой идеи есть 2 преимущества по сравнению с предыдущей:

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

Что если в списке во вкладке “Лекарства” накопится много опций? Это произойдет через некоторое время. Как я смогу найти конкретное лекарство, ведь это долго.

Как найти лекарство в длинном списке:

  • Сортировка опций
  • Поиск по списку

Чтобы разработать подходящее решение, я попытался объединить эти 2 идеи. 

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

Старая версия:

После добавления поля поиска:

Финальный прототип

Наконец, я дошел до создания финального прототипа приложения. Вы можете найти его здесь.

Область применения и дальнейшие улучшения

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

Сейчас я работаю над вкладкой “Прогресс”. Как только она будет готова, я обязательно добавлю информацию о ней сюда.

Спасибо за внимание.

Источник:
bootcamp.uxdesign.cc
·
comments powered by HyperComments