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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При этом размещать товары-аналоги только в блоках кросс-продаж — не самое хорошее решение. Такой пример мы встретили на сайте Апрель.

Лучше делать это явным образом, дав блоку однозначное название. Скорее всего при поиске аналогов пользователь будет искать в названии разделов именно это [аналоги] слово, а товары из разделов «Также покупают» или «Выгодная замена» может проигнорировать, так как привык, что в подобных блоках обычно предлагают сопутствующие или дополняющие товары.

Также не стоит дублировать содержание блоков на странице. Например, на сайте Асна в блоках «Рекомендуемые товары» и «Товары-аналоги» расположены разные товары с одним действующим веществом. Все эти товары можно разместить в блоке «Товары-аналоги».

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

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

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

К примеру, на сайте Вита в карточке товара указана цена товара и его старая цена. Но пользователь может не заметить, что предложение выгодное, потому что по отношению к фону цвет старой цены недостаточно контрастный (коэффициент контрастности — 1,78 (очень плохо).

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

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

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

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

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

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

Мы решили поработать с этим примером и расположить ту же самую информацию более доступным для восприятия образом, при этом сохранив акцент на ценах по программе лояльности.
Сделали более заметной обычную цену за счёт изменения начертания шрифта плюс расположили её сверху. Если на товар действует скидка по акции, показать это можно, разместив рядом перечёркнутую цену без скидки. Клубную цену расположили под обычной ценой. Яркий акцент на клубной цене при этом остался, а подпись «Клубная цена» стала заметнее за счёт цвета; пояснение о программе лояльности сохранилось.

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

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

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

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

В карточке товара на сайте 36,6 закрепляется только кнопка «Купить», поэтому пользователь будет вынужден держать в уме стоимость и название товара либо перед добавлением товара в корзину прокрутить страницу вверх.

Чтобы пользователю не нужно было скроллить страницу, лучше закреплять три элемента: название товара, цену и кнопку «В корзину», как на сайте Апрель. Так пользователь сможет во время изучения карточки товара найти всю важную информацию, свериться с названием и ценой и сразу добавить товар в корзину.

Если на странице закреплена только одна кнопка, то лучше закрепить кнопку «Наверх», по нажатию на которую происходит прокрутка страницы к первому экрану, как на сайте аптеки Ригла.

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

В случае если нужно приобрести не 1–3 штуки одного товара, а больше, пользователя может раздражать необходимость несколько раз подряд нажимать кнопку «+1», как на сайте 36,6. Количество товара в корзине здесь изменяется по одной штуке, а убрать товар из корзины, не переходя в корзину, нет возможности.

На первый взгляд, на сайте Ригла кнопка добавления в корзину работает по привычному пользователям паттерну. Кнопка меняет состояние, есть счётчик изменения количества товара в корзине. Но по умолчанию, до добавления товара в корзину, счётчик показывает количество «1». Это может быть воспринято пользователем как то, что товар уже добавлен в корзину. По умолчанию счётчик должен показывать ноль, либо не выводиться на экран вообще и появляться только после нажатия кнопки «В корзину».

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

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

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

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

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

На сайте 36,6 — похожая ситуация: здесь в карточках то появляется лейбл «Доставляем», то пропадает. Опция доставки в тех карточках, где лейбла нет, просто отсутствует без каких-либо пояснений.

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

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

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

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

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

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

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

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

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

Пользователю будет проще взаимодействовать с интерфейсом, если варианты будут располагаться на одном экране и текст будет виден полностью. Например, в виде чипсов, как варианты «Завтра», «Сейчас» на сайте Вита.

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

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

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

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

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

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

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

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

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

Ключевая информация о товаре считывается хорошо за счёт крупного фото, подписанной и крупной цены. Рядом указана цена без скидки, она выглядит второстепенной, но при этом заметна. Сокращают путь пользователя к покупке товара следующие элементы: выбор формы выпуска и фасовки в начале страницы, список аптек и закрепленная в правом нижнем углу кнопка «Наверх», по нажатию на которую происходит прокрутка страницы к первому экрану.
Но есть и что доработать:
— Навигацию по странице лучше не прятать в табы — они могут быть незаметны некоторым пользователям.
— Наполнять разделы контентом стоит по единому принципу, чтобы уменьшить когнитивную нагрузку на пользователя. Это же относится и к форматированию текстов.
— Работу кнопок добавления в корзину и изменения количества товаров сделать согласованной. Добавить возможность удаления товара из корзины. А от сообщения о том, что товар добавлен, отказаться в пользу заметного изменения состояния кнопки и текста на «В корзине».
— Добавить пояснение, почему доставка товара недоступна.
— Модальное окно со списком аптек стоит увеличить и сделать видимыми все фильтры. Увеличить контрастность линий, разделяющих карточки аптек. Добавить информацию о режимах работы и наличии товара в штуках.

В карточке можно просмотреть несколько фото товара, перейти ко всем аналогам. Есть яркие и подробные подсказки о ценах и начислении бонусов. Не покидая карточку, можно просмотреть список аптек. Сориентироваться при выборе помогают фильтры в виде чек-боксов и дополнительная информация в карточках (станции метро, режим работы, остаток товара в штуках).
Чтобы облегчить взаимодействие со страницей, советуем исправить некоторые моменты:
— Разместить варианты форм выпуска, дозировки, фасовки ближе к основной информации о товаре.
— Закрепить навигацию по разделам инструкции.
— Разместить действующую цену до цены без скидки и информации о бонусах; сделать этот блок более компактным.
— Закрепить при скролле не только кнопку «Купить», но и название со стоимостью товара, добавить возможность изменять количество товаров в корзине при помощи клавиатуры и удалять товар, не переходя в корзину.
— Добавить пояснение причины недоступности доставки.
— Проработать сообщения для случаев, когда по поисковому запросу результаты не найдены.

В карточке есть удачные решения, но для обеспечения качественного пользовательского опыта их можно улучшить:
— Хорошо, что есть возможность свернуть текст инструкции, но заголовок инструкции стоит сделать ярким, увеличить контрастность подзаголовков и размер текста инструкции.
— Добавить навигацию по разделам инструкции.
— Блок с мини-карточками аналогов располагать в одном месте во всех карточках и избегать дублирование товаров в блоке «Рекомендуемые товары».
— Закрепление цены и кнопки «В корзину» ускоряет сценарий покупки товара, но взаимодействие с ним затруднено, так как блок сливается с фоном страницы и перекрывается кнопкой заказа звонка/чата с помощником.
— Есть пояснение, что товар — «рецептурный препарат», но информация о невозможности доставки такого товара отсутствует.
— Список аптек находится в карточке товара, но текст в нём слишком мелкий, и информации недостаточно, чтобы сделать выбор. Например, не указано, сколько всего аптек доступно (в списке только десять), нет информации о количестве товара в наличии, остановках общественного транспорта, сроках самовывоза.

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

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

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