Цифровизация различных сфер жизни плотно вошла в нашу жизнь. Переход бизнеса в мобильные телефоны пользователей понятен — смартфон есть почти у каждого. И аптечный ретейл не стал исключением. Нам стало интересно, насколько 3 самых популярных приложения аптек удобны в использовании. Поэтому мы попросили наших разработчиков провести аудит, сегодня расскажем о результате этого эксперимента.
Анатолий, Мария, Дмитрий и Александр, Android- и iOS-разработчики Иностудио, прошли путь пользователей и рассказали о своих впечатлениях.
Если вы задумываетесь о разработке мобильного приложения для аптеки, в этой статье можете почерпнуть идеи — примерную структуру, навигационные особенности, варианты подачи контента. И поймёте, какие ошибки лучше не повторять. Если интересно познакомиться с кейсом нашей компании, посмотрите приложение для аптек «Столички».
Аптека.ру
При первом запуске приложения пользователю показывается туториал. Цель этого приёма — обучить пользователя работе с приложением. Туториал Аптека. ру состоит из двух экранов, отдельных иллюстраций под каждый из них нет, очень мало текста. Из-за этого информативность и полезность этого шага остаётся под вопросом.
Главная страница
После прохождения туториала на главном экране сразу же открывается диалог с рекламой и предложением зарегистрироваться. Такой ход обычно отпугивает пользователя.
На главной странице находится поиск с возможностью голосового ввода. На практике это редко срабатывает из-за сложных названий препаратов. Но сканер штрихкодов исправляет эту проблему и позволяет пользователю ускорить поиск лекарств.
Далее на экране расположен список категорий товаров и множество рекламных акций в виде плиток. Снизу в приложении расположено меню навигации.
Категории товаров
При нажатии на категорию товара открывается экран, где можно посмотреть, от каких брендов есть товары в данной категории и более детальные подкатегории. Если нажать на конкретный бренд, откроется экран со списком товаров соответствующего бренда с возможностью фильтрации по категории. Также здесь можно посмотреть информацию о бренде и поделиться им с другими пользователями.
При нажатии на подкатегорию открывается список товаров с возможностью сортировки по популярности, цене и названию, также можно открыть экран с фильтрами. Если название написано в 2 строки или у товара больше одной фото, карточки товара увеличиваются в размере, выделяясь из всего остального списка.
В приложении много фильтров. Есть индикация включённых фильтров и возможность их сбросить.
Скидки
При нажатии на плитку с акцией может открыться текстовое описание акции, список товаров или детальное описание одного товара. Это указывает на то, что нет системности в построении интерфейса. И пользователю может быть сложно в этом разобраться — вроде нажимает одни и те же элементы, а попадает на совершенно разные экраны в итоге.
Вкладка «Скидки» содержит товары со скидками и акции, однако этот экран практически полностью копирует главную страницу приложения. Ниже находятся «Дополнительные витаминки» — это товары, за которые начисляются дополнительные баллы программы лояльности. Изначально пользователю кажется, что «Витаминки» — это категория товаров, а не баллы программы лояльности. Мы сами не сразу догадались. Пока в приложении не найдёшь спрятанный пункт про бонусные баллы, будешь задаваться вопросом, почему в «Витаминках» находится крем для лица.
Корзина
Далее в меню идёт корзина. В ней есть список товаров с возможностью выбора элементов для последующего удаления. Эта функциональность выбора является совершенно ненужной, потому что товар можно удалить с помощью крестика.
В идеале функция выбора работает так: пользователь отмечает некоторые товары галочкой, чтобы купить их, а остальные оставляет в корзине. Приложение рассчитывает стоимость только выбранных товаров. А в приложении «Аптека. ру» чекбоксы участвуют только в функции удаления товара.
Удобно, что можно указывать количество нужных товаров числом, не требуется много раз нажимать на «+». Есть возможность ввести промокод. Есть бонусная программа — за заказы пользователь получает «витаминки».
При нажатии на кнопку «Оформить заказ» пользователь попадает на экран оформления доставки. Выбрать пункт доставки можно как на карте, так и с помощью списка.
Избранное
В «Избранном» находятся товары, которые пользователь отметил соответствующим образом. Пользователь может создавать списки, чтобы упорядочить свои избранные лекарства.
Профиль пользователя
В профиле у пользователя есть возможность добавить email, персональную информацию и изменить регион. С этого экрана можно попасть на страницу с бонусной программой «Витаминки», списком заказов, листом ожидания, благотворительной программой, бонусной программой «Приведи друга», списком пунктов выдачи.
Некоторые пункты из списка дублируют другие разделы приложения. Нажатие на «Лист ожидания» перекидывает пользователя на один из списков в «Избранном». Нет смысла дублировать здесь «Пункты выдачи», так как они открываются при оформлении заказа, что более логично для пользователя.
Отдельного внимания заслуживает пункт «Обратная связь», в котором скрыт пункт «Консультация». Можно описать симптомы и получить совет по лекарствам или совет обратиться к врачу. Также есть возможность посмотреть информацию о сервисе и выйти из профиля. Есть пункт настройки, в котором можно выбрать только тему приложения.
Резюме по приложению «Аптека. ру»
Агрессивная реклама при входе в приложение — на главном экране сразу же открывается диалог с рекламой и предложением зарегистрироваться. Лучше предлагать пользователю регистрацию после того, как он провёл в приложении какое-то время. Так он сможет понять, нравится ли ему приложение и будет ли он им пользоваться.
В приложении есть несколько вкладок, которые дублируют друга. Вкладка «Скидки» содержит товары со скидками и акции, однако этот экран практически полностью копирует главную страницу приложения. В личном кабинете пользователя «Лист ожидания» дублирует товары в «Избранном». А «Пункты выдачи» дублируют список точек, которые открываются при оформлении заказа. Лучше убрать экраны с одинаковой функциональностью, чтобы не перегружать приложение и не тратить время пользователей.
Еаптека
Красивый стартовый экран (сплэш) при запуске приложения вместо обычной загрузки.
Приложение проверяет обновления в Google Play. Если есть новая версия, предлагает сразу её установить.
В приложении нет агрессивной рекламы. Как и в Аптека. ру, есть голосовой поиск и сканирование кода.
На многих экранах есть возможность принудительного обновления контента. Для этого нужно потянуть экран вниз. Это удобно. Например, если удалили какой-то товар из корзины с другого устройства, можно обновить информацию сразу на текущем.
Обнаружили баг: если потянуть главный экран вниз за раздел «Истории», то экран будет скроллиться без шапки. В одном из наших приложений мы сталкивались с таким багом и успешно его пофиксили. Всё дело во вложенных элементах, которые могут скроллиться. Решение заключается в том, что нужно написать кастомный AppBarLayout.Behavior и переопределить логику обработки прикосновений, связав её с родительским RecyclerView.
Истории
В историях много различных советов, полезной информации, познавательных статей. Через истории можно попасть в соответствующие разделы. Раздел с историями есть только на Android, на iOS нет.
Главная
На главной странице чат с фармацевтом. Можно обратиться за помощью с выбором лекарства и прикрепить фото.
Категории товаров
В приложении удобно расположены категории товаров.
Фильтры раскрываются в bottom sheet — «шторке», которая выезжает снизу и располагается поверх основного экрана. Фильтры меняются в зависимости от выбранной категории товаров.
Карточка товара
Если открыть фото товара, а потом закрыть, полностью перезагружается страница товара.
В карточках товара навигация используется как на лендинге — длинная страница, поделённая на категории — «Доставка», «Характеристики», «Инструкция» и т. д. Такой тип навигации характерен для сайтов, но не для мобильных приложений.
В карточке товара список категорий расположен горизонтально, что подразумевает горизонтальную смену контента. Это должно работать так: пользователь листает категории, нажимает на них, и появляются экраны с соответствующим контентом. Реализовали такую навигацию в нашем приложении для бронирования рабочих мест.
Как это выглядит:
Но в приложении «Еаптека» это реализовано иначе. Контент представлен длинным полотном и расположен вертикально. При скролле экрана категории сверху меняются, а при нажатии на категорию экран скроллится до нужного места.
Как это выглядит сейчас:
Аптеку для самовывоза можно выбрать на карте или из списка.
Корзина
Удобная корзина. Можно удалить товар свайпом или очистить всю корзину одним нажатием кнопки. При случайном удалении товара его можно вернуть обратно.
Корзиной можно поделиться с другими пользователями.
Избранное
Есть поиск по избранному, но нельзя создавать свои списки лекарств, как в Аптека.ру.
Настройки приложения
Много настроек, можно включить только нужные уведомления. Есть список просмотренных уведомлений.
Резюме по приложению «Еаптека»
У приложения интуитивно понятный интерфейс, в нём пользователям легко ориентироваться. Много различных подсказок, что тоже облегчает взаимодействие. Понятная бонусная программа — за оплату лекарств начисляются бонусы, которые можно тратить на следующие покупки. В приложении есть функция удаления профиля, только находится не в самом очевидном месте.
Из минусов можно отметить отсутствие тёмной темы. И различие главных экранов на разных платформах — на iOS нет историй и возможности обратиться к специалисту (эта функция на iOS в личном профиле).
Аптека Апрель
После скачивания приложения сразу открывается окно авторизации/регистрации, этот шаг можно пропустить.
Главная страница
Поиск реализован так же, как и в других приложениях. Найти товар можно с помощью текста, голосового набора или штрихкода.
Когда находишься на главной странице, внизу не подсвечивается пункт меню. Из-за этого не сразу понятно, на какой странице находишься. Остальные пункты меню становятся синими, когда переходишь на соответствующие вкладки.
Меню
Кнопка «Меню» не переводит ни на какую вкладку, это просто выдвижное меню. Поэтому его можно убрать из боттом-бара — нижних кнопок приложения.
На iOS постоянно выезжает боковое меню, даже если просто пытаешься проскроллить категорию вбок или приблизить/отдалить карту. Это вызывает раздражение.
Справочная служба в меню и версия приложения кликаются вместе, закрывается меню, и ничего не происходит. Чтобы открылся телефон со скопированным номером, нужно попасть пальцем точно в номер.
С информационных экранов нельзя вернуться назад, только выйти из приложения. Не хватает кнопки «Назад». На экранах, где есть такая кнопка, всё равно нельзя выйти на предыдущий экран, предлагает сразу выйти из приложения.
Долго грузятся страницы меню. Не выделен выбранный пункт бокового меню. Вместо этого всегда выделены 2 пункта — «Арендодателям / Продавцам бизнеса» и «Работа у нас». Во-первых, такая логика противоречит UX бокового меню. Во-вторых, это далеко не самые важные пункты в приложении для заказа лекарств, чтобы их выделять.
При попытке просмотреть «Адреса аптек», приложение снова предлагает выбрать город, хотя он уже был выбран при первом входе в приложение.
Категории товаров
В приложении удобный каталог товаров. Минус — в категориях товаров нет иконок, которые помогают пользователю ориентироваться в приложении.
Когда в каталоге переходишь в определённую категорию, сверху есть 2 кнопки выхода — стрелки «Вперёд» и «Назад». Ещё можно выйти системной кнопкой «Назад». Стрелка «Вперёд» неожиданно кидает пользователя на предыдущий экран, это неправильно.
Если выбрать подкатегорию, то откроются все подпункты данной подкатегории.
В списке товаров карточки могут идти в одну или две колонки, пользователь может выбрать, как ему удобно.
Малое количество фильтров, можно выбрать только сортировку.
Карточка товара
Описание товара представлено в виде длинного полотна. Лучше разбить на подпункты, которые можно развернуть отдельно.
После описания следуют отзывы о товаре.
Можно посмотреть, в каких аптеках лекарство в наличии.
Есть рекомендации «С этим товаром часто покупают». После них располагаются блок с предложением аналогов. Это удобно, пользователи могут сравнить цены и выбрать подходящий вариант.
У лекарств, которые отпускаются по рецепту, есть соответствующий значок. Они недоступны для заказа с доставкой, их можно только забрать самовывозом. Только пользователь об этом не узнает, пока не попадёт на экран выбора способа доставки. Пользователю трудно сразу понять, что это за значок. Нужно добавить всплывающую подсказку, которая пояснит смысл этой иконки и процесс покупки таких лекарств.
Акции
Акции вынесены в отдельный пункт меню.
Корзина
Если удалить товар или добавить его в корзину, поверх экрана появится значок загрузки, который блокирует дальнейшее использование приложения. Если необходимо удалить несколько товаров, то придётся подождать, пока разблокируется экран. И так с каждым пунктом.
В корзине карточки товаров не полностью кликабельны, нужно нажимать именно на название товара.
Нет возможности одним нажатием удалить 1 пункт товара, нужно только нажимать на «-».
Много навязчивых предложений в корзине.
Нет обновления корзины по свайпу вниз. Если удалить товар из корзины, он не пропадает из списка, и можно перейти к оформлению 0 товаров за 0 рублей. Из-за этого возникают ошибки на следующем экране. Причём написано, что это ошибка сети. Корзина должна автоматически обновляться при любой манипуляции с ней, и кнопка заказа должна становиться неактивной.
Резюме по приложению «Аптека Апрель»
В приложении нет push-уведомлений, есть только уведомления внутри самого приложения. Push-уведомления — это дополнительная точка контакта с пользователями. Например, можно информировать пользователей об акциях, спецпредложениях, доставке заказов.
Приложение не адаптировано под новые устройства с управлением жестами. Например, нельзя свайпом вызвать меню. По всему приложению разные отступы от края — это проблема вёрстки. Нет тёмной темы.
В приложении прозрачная программа лояльности. Единственный не очень удобный момент — у карты лояльности постоянно меняется штрихкод. Это не позволяет сделать скриншот экрана, чтобы потом воспользоваться картой без интернета.
Если вашей компании нужно разработать мобильное приложение, обращайтесь за консультацией к нашим специалистам. Они предложат решение, исходя из ваших задач.
