Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

В связи с событиями в мире спрос на лекарства в 2022 году в РФ растет каждый месяц (по данным DSM Group). Отдельные товары может быть непросто найти в текущей реальности из-за проблем с поставками. Поэтому мы решили проверить, насколько сайты аптек помогают (или мешают) пользователям с поиском нужного лекарства.

Для исследования взяли 5 крупных аптек. Выбирали по количеству точек на 01.01.2022 из отчёта аналитической компании RNC Pharma за 2021-й. В список вошли:

Как можно искать товары в аптеке

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

Итак, как можно искать товары в аптеке:

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

Сравнительная таблица вариантов поиска товаров

Посмотрим, какие варианты поиска товаров есть у выбранных аптек.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Сравнительная таблица строки поиска

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Давайте посмотрим на возможности строки поиска во всех аптеках подробнее.

UX поля поиска

Апрель

Шапка сайта (Header)

У «Апреля» шапка компактная, аккуратно сверстана.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Поле поиска

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

Есть голосовой поиск, что необычно для десктопа.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Саджест

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Есть ссылка на все результаты. Конечно, можно посмотреть все найденные товары по нажатию на Enter или на иконку поиска, но если просматривать выпадающий список, переход по кнопке внизу будет удобнее.

Хорошо, что ограничили количество выпадающих результатов в подсказках и не стали делать скролл. Всё-таки это всего лишь подсказки, а не полноценная выдача.

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

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

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

Саджест появляется с первой введенной буквы и сразу пытается угадать запрос. Естественно, это крайне сложная задача. Сайт обращается к БД каждый раз после добавления новой буквы и постоянно меняет варианты подсказок. Можно было бы начать подгружать саджест, например, с третьей буквы (распространенный вариант появления подсказок). Мелькало бы меньше вариантов, подсказки были бы точнее.

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Планета здоровья

Шапка сайта

У планеты здоровья довольно объёмная шапка. При просмотре с ноутбука занимает примерно ¼ экрана, — это не очень хорошо. В таком виде она присутствует на всех страницах и занимает полезное место. Можно было бы сделать шапку компактнее и поднять выше информацию о товарах.

Проблема шапки проявляется в полной мере не на главной, т. к. на ней обычно в e-commerce располагаются рекламные материалы как способ сообщить об акциях и переходы к внутренним страницам. Большая шапка может вызывать неудобство на внутренних страницах, где надо сосредоточиться и выбрать товар. Из-за высокого хедера вместо двух-трёх рядов карточек товара (в зависимости от их вида), в экран попадает один-два ряда. У «Планеты» при полной шапке входит ровно один ряд карточек товара, а второй даже не выглядывает.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках
Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Поле поиска

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Саджест

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Выдача по запросу «аспи» всё-таки находит аспирин, но не на первом уровне. Допустимо, т. к. запрос не дописан до конца. Но у конкурентов результаты лучше и даже по такому полузапросу аспирин на первом месте.

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Вита

Шапка сайта

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Поле поиска

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

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

Чтобы избежать таких проблем, стоит сразу продумывать, как будет сжиматься шапка (если это необходимо), и оставлять ключевые элементы на своих местах и в широком варианте, и в сжатом. Всё-таки поиск в e-commerce — это важнейший элемент навигации. Хорошую реализацию можно посмотреть у «Апреля».

А ещё бывает так, что пользователи не догадываются прокрутить вверх, чтобы найти меню. Проверено на UX-тестировании на одном из проектов Everest. У нас было 20 респондентов (по 5 человек из разных сегментов), из них трое не нашли информацию в шапке и не поняли, что можно проскролить вверх, после того как шапка сжалась. Процент небольшой, и тест был качественный, а не количественный, но даже такие проблемы встречаются у пользователей.

Строка поиска на фоне шапки выглядит бледно:

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Саджест

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Кнопка поиска

Запуск процесса поиска находится в нестандартном месте.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Можно нажать Enter — и всё найдётся, но оставлять запуск поиска только по Enter можно лишь на сайтах, где основная ЦА — молодежь. Для сайтов, куда могут заходить люди старшего возраста, кнопки лучше просто так не демонтировать и желательно понятно подписывать, что они делают. Например, делать кнопку в виде кнопки, а не просто иконки и писать на ней текст «Найти» или «Искать».

У «Виты» за кнопку запуска поиска отвечает иконка лупы перед поисковым запросом. Догадаться об этом можно по ховеру на иконке. Это не совсем корректно. Если мы хотим использовать иконку в качестве кнопки, стоит её размещать в конце поисковой строки, т. к. сначала пользователь вводит запрос и только потом запускает поиск, но не наоборот. Следовательно, и кнопка запуска поиска должна стоять после ввода запроса.

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

Верные примеры использования иконки лупы и кнопок можно посмотреть у «Апреля»

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

и «Планеты здоровья».

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Мелодия здоровья

Меню сайта

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Поле поиска

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Так же, как и у аптеки «Вита», нет кнопки «Найти», но иконка лупы при этом просто подсказывает, что это за поле — она не интерактивная. Как уже говорилось выше, такое поведение поля поиска нормально для молодой ЦА, но для сайта аптеки на десктопе лучше иметь в поле кнопку поиска.

Саджест

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

При этом подсказки выводятся по алфавиту, а не по популярности товара. В поисковом запросе подразумевался «парацетамол».

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Кнопка поиска

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

Ригла

Шапка сайта

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Самая загадочная иконка — список со стрелкой

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Но со 100%-й уверенностью сказать, какой функционал здесь заложен, сложно. Советуем компании дать какое-то пояснение под заголовком формы.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

К бургеру тоже можно добавить подпись «Каталог» для большей наглядности.

Поле поиска

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Не самое дружелюбное поведение для поиска.

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

Саджест

Из положительного есть история поиска (три запроса до линии под полем поиска), но очистить их нельзя:

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

В истории хранится 4 запроса. И каждый последующий стирает самый давний:

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

Можно добавить кнопку «Стереть историю» — мало ли что пользователь там искал и, возможно, не хочет, чтобы кто-то ещё видел его запросы :) Очистка истории запроса по кнопке даёт пользователю больше контроля в работе с сайтом.

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

И снова навести на него курсор.

Исследование. Разбираем UX формы поиска лекарств в онлайн-аптеках

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

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

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

Выводы по каждой аптеке

Апрель

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

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

Планета здоровья

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

Кроме того, стоит подумать о сокращении размера шапки. Сейчас она съедает много полезного места на небольших экранах.

Вита

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

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

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

Мелодия здоровья

«Мелодии» не хватает кнопки поиска. Запуск возможен только по Enter. Не стоит забывать о разных типах пользователей — аптеками пользуются люди разного возраста. Интерфейс должен быть очевиден всем — там, где это возможно.

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

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

Из плюсов поиск заметен и не меняется при скролле. Плейсхолдер работает правильно.

Ригла

У «Риглы», с одной стороны, в поиск заложены интересные фичи, но функционал требует доработки. В шапке — неоднозначные иконки без подсказок и описания иконки. Поиск меняется по активации и заслоняет собой даже логотип.

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

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

Из хорошего — есть история поиска (но нет её простой очистки). Саджест срабатывает с третьего символа. Есть разбивка на категории и товары. Выделяют совпадение символов в запросе и подсказках. Саджест выдаёт в топе самый популярный товар. Есть очистка поля поиска.

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

99
13 комментариев

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

3
Ответить

Спасибо за отзыв о нашей работе ❤️

2
Ответить

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

Краткий пересказ статьи, если кому-то лень читать

1
Ответить

Максим, круто, что прочитали наше исследование ❤️
Правда, в сфере UX всё обстоит несколько сложнее😉

1
Ответить

Чуточку дополню. На сайтах «Планета Здоровья» и «Мелодия здоровья» в выпадающем саджесте нельзя перемещаться по результатам поиска используя стрелки на клавиатуре.

1
Ответить

Юра, спасибо за дополнение))

Ответить