UX форм поиска на сайтах российских клиник

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

Это наше 15-е исследование. Оно посвящено поиску на сайтах клиник. Мы рассмотрели разные подходы к реализации этого функционала, хорошие решения с точки зрения UX и отметили моменты, которые можно улучшить.

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

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

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

Согласно исследованиям NNGroup, пользователи предпочитают поиск, когда сталкиваются с большим объёмом информации. Например, при работе с Google, YouTube, маркетплейсами. Они также обращаются к строке поиска, если уверены, что на сайте есть нужный им продукт или услуга. Навигацию пользователи используют, когда такой уверенности нет, а также для знакомства со всеми предложениями компаниями.

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

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

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

Мы проанализировали топ-20 крупнейших медицинских компаний в рейтинге Forbes за 2021 год. В большинстве случаев клиники предлагают пользователям стандартную поисковую строку без дополнительного функционала. Например, таким образом он реализован у клиник Мать и дитя, MedSwiss, Семейный доктор.

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

Однако мы нашли и такие клиники, на сайтах которых поиск обладает более интересным функционалом, нацеленным на взаимодействие с пользователем.

Мы выбрали 5 клиник, чтобы на их примере рассмотреть хорошие и не очень практики в проектировании поиска. В список вошли:

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

✦ DocMed

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

При клике на иконку лупы раскрывается отдельная поисковая панель. Это удачное решение — внимание пользователя фокусируется на одном действии.

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

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

✦ Meдси

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

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

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

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

«Meдси» позволяет начать поиск и через Enter, и по клику на соответствующую кнопку.

✦ EMC

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

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

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

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

✦ CMT

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

✦ Чайка

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

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

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

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

✦ DocMed

При вводе двух символов в поле поиска появляются поисковые подсказки.

Подсказки на сайте полезны:

В поисковое поле DocMed подгружаются разделы сайта, в которых есть совпадения по набранному запросу: врачи, услуги, новости. Система показывает количество результатов в каждом разделе — это важная функция. Она помогает пользователю понять, с каким объёмом информации ему придётся работать, хочет ли он просматривать все найденные результаты или предпочтет переформулировать запрос для более узкой выдачи.

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

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

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

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

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

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

Для врачей выводится фотография, имя, специализация и график приёма.

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

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

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

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

Для перехода к результату поиска после введения запроса нужно нажать на кнопку «Все результаты поиска».

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

✦ Медси

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

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

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

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

✦ EMC

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

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

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

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

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

✦ CMT

При вводе запроса отображаются поисковые подсказки:

В реализации функционала подсказок много плюсов:

По наведению курсора фон выбранного варианта меняется. Фон стоило сделать контрастнее — его задача выделять ссылки для перехода. В текущем варианте серый фон очень слабо отличается от белого, на котором выводятся результаты. Для пользователей с нарушениями зрения он не будет работать.

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

Названия некоторых разделов не позволяют понять, куда они ведут, например «Диагностика / Диагностика ЛОР-заболеваний».

Это процедуры? Или приём врача? Можно подумать и догадаться, однако с первого взгляда смысл не считывается. Название может не совпадать с ментальной моделью пользователя. Можно протестировать другие названия — например, «Обследования», «Процедуры», «Консультации».

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

✦ Чайка

При вводе запроса в поле отображается выпадающий список с 5 подсказками и кнопкой «Все результаты».

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

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

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

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

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

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

В списке с подсказками не выделяются совпадения текста в запросе и результатах, — это минус.

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

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

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

→ Шоурил 2022 с нарезкой работ
→ Телеграм-канал студии
→ Телеграм-канал Исследовательского центра

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

#ux #исследование #сайты #клиники #поиск #uxresearch #юзабилити #пользовательскийопыт #пользователи #uxисследования