UX карточек товаров на сайтах онлайн-аптек

Привет, это Аня — UX-дизайнер студии Everest. Уже больше шести лет мы разрабатываем крупные веб-сервисы и мобильные приложения с фокусом на UX для банков, ритейла, телекома и других отраслей.

В 2022 году мы запустили собственный Исследовательский центр, который регулярно публикует экспертные обзоры популярных сайтов и сервисов с фокусом на UX-составляющую. Это наш 17-й материал.

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

Заказ лекарств онлайн становится для пользователей всё более привычным способом покупки. По аналитическим данным, 46% россиян выразили готовность полностью перейти на онлайн-заказы медикаментов. За 2022 год 65% респондентов сделали заказ через сайт. Половина из них использовали смартфон или планшет. Столько же оформили заказ через приложение. Поэтому в исследовании рассматриваем адаптивные версии сайтов.

Для исследования выбрали сайты онлайн-аптек, которые входят в 20 лучших компаний e-commerce-сегмента российской фармацевтической розницы по итогам 1–3-го кварталов 2022 года согласно рейтингу российских аптечных сетей RNC Pharma. Для анализа взяли сайты, в карточках товара которых примерно одинаковый набор элементов, но подходы к их реализации отличаются.

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

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

Расположение названия и фото

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

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

Из-за них полезный контент смещается вниз и становится доступным пользователю только после скролла. Например, на сайте 36,6 в первый экран не помещается фото, а на сайте Апрель — название товара.

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

Формат фото

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

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

Ещё лучше, если есть функция увеличения фотографии, как на сайте Аптека от склада.

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

Если пояснение действительно важно, то стоит расположить его рядом с фотографией, как в примере аптеки 36,6. Ещё одно хорошее решение, которое хотели бы отметить, — это наличие нескольких фотографий товара с заметным индикатором количества фотографий.

Основные характеристики

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

На сайте сети Апрель в карточку товара вынесены основные характеристики и есть ссылка «Все характеристики». По клику на неё раскрывается модальное окно, но количество характеристик почти не изменяется. Получается, от пользователя требуется лишнее действие, которое не приносит новой информации.

Чтобы пользователь мог быстро оценить, подходит ли товар, все основные характеристики лучше располагать в карточке товара, не раскрывая модальные окна. Например, так выглядят основные характеристики товара на сайте аптеки Вита. В них указаны: производитель/бренд; форма выпуска; вид упаковки; условия хранения; активное вещество; дозировка; срок годности; страна.

Форма выпуска, дозировка, фасовка

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

Рассмотрим, какими способами можно это сделать, на примере сети 36,6. Можно попробовать найти товары по названию через поиск вверху страницы и перейти в каждую карточку.

Или прокрутить страницу до блока «Формы выпуска» — там есть карточки товаров с другой формой выпуска.

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

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

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

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

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

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

Пример такой реализации можно найти на сайте Асна. Текст инструкции здесь размещён в аккордеоне, по умолчанию он раскрыт. С одной стороны, хорошо, что текст можно свернуть, — не нужно прокручивать весь контент, чтобы посмотреть следующие разделы. Но развернуть текст обратно может быть проблематично, так как в свёрнутом состоянии заголовок «Описание» незаметен. Текст не проходит проверку контрастности (коэффициент 1,47 — очень плохо), а значит, для людей с ослабленным зрением контент может быть недоступен.

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

Похожее решение используется на сайте аптеки Ригла. Здесь навигация по странице объединена с навигацией по инструкции, весь контент спрятан в табы. Есть выделенные из инструкции разделы «Описание», «Характеристики», в отдельной вкладке размещён полный текст инструкции. Ещё есть вкладки «Отзывы» и «Наличие в аптеках». Но из-за того, что не соблюдается единый принцип наполнения табов контентом, блок с инструкцией в некоторых карточках оказывается пустой, а инструкция полностью размещена в табе «Описание» или «Характеристики» (это видно на примере ниже). Из-за такой путаницы пользователю придётся искать инструкцию в разных местах.

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

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

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

Визуальное оформление инструкции

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

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

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

Та же самая инструкция, но с крупным текстом и заметными заголовками воспринимается намного проще.

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

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

Если вам нужно исследование с упором на UX и юзабилити интерфейса, пишите на почту info@everest-media.ru

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

→ Наш сайт
→ Шоурил с нарезкой работ
→ Телеграм-канал студии

Предыдущее исследование:
— UX калькуляторов страхования ипотеки на сайтах российских страховых компаний

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

#маркетинг #it #marketing #ux #исследование #ит #интерфейсы #сайт #uxresearch #uxисследования #аптеки