Исследование онлайн-аптек Украины: 30+ рекомендаций UX-специалистов с наглядными примерами

Статистика о поведении пользователей онлайн-аптек, 30+ распространенных ошибок юзабилити, которые влияют на показатели сайта, рекомендации от UX-специалистов студии Турум-бурум с визуальными примерами - все это включено в исследование.

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

В рамках исследования мы проанализировали 6 популярных Украинских интернет-аптек, сравнили их функционал и проверили, насколько удобно пользователям совершать покупки. Для выявления ошибок мы прошли путь пользователя, опираясь на собственный 10-летний опыт в проектировании интерфейсов и данные аналитики.

Данные аналитики о поведении пользователей в онлайн-аптеках

Перед проведением исследования мы собрали усредненные данные о поведении пользователей из аналитики проектов этой тематики.

Поведение пользователей на сайте:

• в среднем 1 пользователь за 1 сеанс просматривает 3 страницы;
• длительность сеанса составляет в среднем 1 минуту;
• покупатель в среднем собирает корзину из 4х товаров на сумму 300 грн.

Основными страницами входа являются:

• страница товара (около 70%);
• список товаров (до 20%);
• главная страница (около 15%).

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

Устройства

В 70% случаев (в среднем) это пользователь мобильных устройств, десктопом пользуется в среднем 26%, остальное планшет.

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

Задачи исследования

Для анализа мы выбрали 6 популярных онлайн-аптек и наиболее распространенные сценарии поведения пользователей на подобных сайтах.

Для новых пользователей мы оценивали сайты по таким общим критериям, как:

• понимание преимуществ заказа именно в этой аптеке;
• возможность приобрести этот товар;
• понимание способов доставки и оплаты.

Кроме этого, оценивали по специфическим критериям, связанным со сценарием поведения.

Сценарий №1

Пользователь ищет товар от конкретного заболевания или товар с конкретным действующим веществом.

Ожидания пользователя при этом сценарии:

• увидеть список товаров, которые соответствуют запросу;
• возможность выбрать подходящий товар из списка.

Сценарий №2

Пользователь ищет конкретный товар по его названию.

Ожидания пользователя при этом сценарии:

• найти и увидеть конкретный товар;
• увидеть цену за конкретную дозировку или объем.

Мы также проходили путь постоянного пользователя по такому сценарию:

Сценарий №3

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

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

Почему важно разделять поведение постоянных и новых пользователей?

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

Мы также анализировали сайты в зависимости от различных вариантов завершения пользовательского сценария:

• оформление заказа с доставкой;
• бронирование товаров в аптеке;
• покупка товаров в 1 клик.

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

Проблемы и точки роста на сайтах онлайн-аптек

В зависимости от сценариев и этапов движения пользователей по воронке, мы разбили проблемы на такие разделы:

• подбор товара
• каталог
• поиск по сайту
• детали товара (ошибки на странице товара)
• добавление товаров в корзину (проблемы в юзабилити на этапе корзины)
• принятие решения (оформление заказа, быстрая покупка)
• повторные визиты (недостатки главной страницы)

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

1. Подбор товара

а) Отсутствие фильтров

С фильтрами пользователи быстрее смогут найти нужный препарат.

Отсутствие фильтров затрудняет поиск нужного препарата

Рекомендация:

Обязательные фильтры для данной ниши:

• действующее вещество,
• страна производитель,
• форма,
• рецептурность,
• хранение.

Хороший пример реализации:

Важные фильтры развернуты, второстепенные скрыты

б) Неправильное расположение фильтров

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

Развернутый список подкатегорий занимает весь первый экран, из-за чего пользователь не видит фильтры, которые идут за ним.

Рекомендация:

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

На разных страницах выдачи должна быть разная структура:

В категориях последнего уровня располагайте фильтры.

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

При возврате по хлебным крошкам в обобщающую категорию первым раскрытым фильтром идет выбор подкатегории.

в) Неважные для пользователя элементы на первом экране в mobile

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

Примеры, где “шапка” на полэкрана, огромный не информативный баннер или пустое пространство.

Рекомендация:

Скройте все менее приоритетные элементы, покажите пользователю ту информацию, за которой он пришел.

Прототип правильной подачи контента в mobile:

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

г) Отсутствие производителя товара на странице выдачи

Для пользователей это может быть важным критерием при выборе продукта.

Рекомендация:

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

Пример с указанием производителя товара в выдаче

2. Каталог

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

а) Неудобный каталог в desktop

Огромные отступы между пунктами подкатегорий и отсутствие направления чтения усложняет поиск нужной категории. Также подкатегорий очень много и они не помещаются в 1 экран, из-за чего пользователи могут пропустить нужный им пункт.

Плохой пример реализации каталога

Рекомендация:

Сделайте поиск товаров быстрее и проще с помощью удобного каталога.

Хороший пример:

Каталог второго и третьего уровня открывается последовательно по направлению чтения

б) Ошибки каталога в mobile

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

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

Плохой пример раскрытия каталога вниз и недостаточного расстояния между категориями

Рекомендация:

Хороший пример: прототип каталога с последовательным переходом на уровни каталога для mobile.

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

3. Поиск

Поиск не стоит недооценивать, т.к. обычно его используют наиболее лояльные к бренду покупатели. О том, как в результате доработки одного только этого функционала мы увеличили коэффициент транзакции с поиска на 74,64%, читайте подробнее в кейсе Intertop.

Для онлайн-аптек тут наиболее распространены такие ошибки:

а) Отсутствие категорий товаров в поиске

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

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

Рекомендация:

При вводе названия в поиске должна отображаться как категория, так и подходящие запросу товары

б) Отсутствие поиска в mobile

Пример ошибки: поиск скрыт в иконку и недоступен при скролле страницы

Рекомендация:

Поиск должен быть на видном месте и доступен в любой момент, т.к. он используется в 15% сеансов.

4. Детали товара

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

• подойдет ли мне этот товар (в т.ч. и по цене)?
• есть чем его заменить?
• какие особенности и инструкция этого товара?
• лучше купить тут или поискать где дешевле?

Если у вас нет ответов на эти вопросы, пользователи могут уйти с вашего сайта. Вот перечень ошибок на этом этапе:

а) Отсутствие заменителей

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

Например, здесь заменители отсутствуют

Рекомендация:

Аналоги должны отображаться в карточке товара.

Пример реализации предложения аналогов в карточке товара

б) Отсутствие описания вариантов доставки в карточке товара

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

Рекомендация:

В карточке товара есть описание возможных вариантов доставки и цена каждого из них.

в) Неудобный выбор аптек при резервировании товара

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

Рекомендация:

Хороший пример реализации поиска ближайшей аптеки.

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

г) Отсутствие количества добавляемого товара или возможности купить часть

Пользователям, иногда необходимо больше, чем 1 упаковка, и они хотят добавить её до перехода на страницу чекаута.

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

Отсутствие возможности купить 1 пластинку препарата

Рекомендация:

Хороший пример, где есть возможность вместо целой упаковки купить часть:

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

Прототип для desktop

Оптимальный прототип для mobile

д) Отсутствие кнопки “Купить” в нижней части страницы

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

Рекомендация:

Зафиксируйте кнопку, так пользователи с большей вероятностью купят товар.

Правильный прототип:

При скроле вниз кнопки купить зафиксированы

5. Добавление в корзину и проверка корзины

При добавлении товара в корзину, пользователь ожидает:

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

а) Объединение корзины и чекаута усложняет задачу пользователя

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

Рекомендация:

Лучше разделять эти задачи и фокусировать внимание пользователя на конкретном действии.

Мы подготовили для вас прототипы, которые лучше решат поставленную задачу:

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

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

б) Отсутствие возможности изменить количество товара в корзине

Рекомендация:

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

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

После изменения количества товара в корзине пользователь может увидеть, как изменится цена, только нажав на кнопку “Пересчитать”.

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

Рекомендация:

Предоставьте пользователю возможность мгновенно видеть стоимость товара, после изменения его количества.

г) Кнопка перехода в оформление заказа в самом низу страницы

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

Рекомендация:

В качестве хороших примеров, мы подготовили 2 варианта прототипа корзины: с фиксированной кнопкой “оформить заказ” внизу и кнопкой сверху.

д) Кнопки изменения количества близко расположены друг к другу

Пользователи могут не попасть на мелкие кнопки и неправильно оформить заказ

Рекомендация:

Прототип с достаточным расстоянием между кнопками:

6. Принятие решения о покупке

На этапе оформления заказа потенциальный покупатель хотел бы видеть:

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

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

В этом примере стоимость доставки указана “от 50”, а сроки не известны

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

Рекомендация:

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

Шаг №1 фокусирует внимание пользователя на персональных данных

Шаг №2 содержит исчерпывающую информацию о стоимость доставки и ее сроках

б) Полноценная шапка на странице оформления заказа

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

Плохой пример шапки со множеством точек выхода

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

Рекомендация:

В шапке рекомендуем оставить только 3 элемента: логотип, заголовок страницы и телефон для связи. Все остальное - это дополнительные точки выхода.

в) Неудобный выбор аптек без карты в чекауте

Рекомендация:

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

Хороший пример:

Есть возможность поиска аптек по району и на карте

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

Точка роста при поиске аптек на карте

г) Нарушен приоритет кнопок целевого действия

Рекомендация:

Выделите для пользователя одно целевое действие, тогда он с большей вероятностью его выполнит.

Прототип правильного решения:

д) Отображение списка товаров перед формой в mobile

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

Рекомендация:

Хороший пример:

Список товаров расположен уже под формой

е) Нарушена последовательность ввода информации

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

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

Рекомендация:

Прототип правильного чекаута для mobile:

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

7. Повторные визиты

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

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

Вот основные ошибки, с которыми сталкивается этот сегмент пользователей:

а) Отсутствие товаров пользующихся спросом на главной странице

Рекомендация:

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

Пример баннера на первом развороте экрана в период карантина

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

б) Незафиксированная шапка при скролле

Отсутствие ключевых элементов навигации - каталога и поиска, значительно усложняют путь пользователя.

Одна из распространенных ошибок - шапка не зафиксирована сверху при скролле

Рекомендация:

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

Прототип главной страницы с фиксированной шапкой, каталогом и поиском.

в) Отсутствие программы лояльности

Здесь есть возможность ввести промокод, но не предусмотрена программа лояльности для постоянных клиентов.

Рекомендация:

Использование скидок и программ лояльности может увеличить количество постоянных пользователей. Так можно объединить оффлайн и онлайн аптеки. Пример хорошей реализации:

Результаты исследования

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

В остальных примерах заметен фокус бизнеса на оффлайн-аптеках, а не онлайн. Анти-примером является сайт АНЦ, который уже морально устарел и не похож на современное e-commerce решение.

Общие рекомендации для онлайн-аптек:

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

В это непростое время карантина донесите пользователям преимущество покупок лекарств с доставкой на дом, объясните, что так безопаснее.

2. Ошибки юзабилити и точки роста не стоит недооценивать, т.к. они существенным образом могут повлиять на показатели конверсии. Даже незначительное быстрое изменение может улучшить KPI сайта. В качестве примера смотрите кейс Intertop о том, как благодаря поэтапным доработкам интерфейса по ESR подходу удалось увеличить конверсию на 55%.

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

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