UX ошибки: Поле поиска по сайту не заметно, приходится искать

UX ошибки: Поле поиска по сайту не заметно, приходится искать

Пришел на сайт с определенной целью — быстро забить запрос и дальше по делам. И тут бац! — нет поиска! Логотип здоровенный, баннер яркий, кнопки «Купить» и «Акции» на месте, а поиска нет.

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

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

Пробую нажать Ctrl+F — это уже смешно, ищу поиск через поиск в браузере. Нахожу слово «поиск» в футере, но это ссылка на страницу с подсказками, а не поле для ввода. Возвращаюсь к шапке. Лупа все такая же маленькая. Жму — и открывается поверх контента, перекрывая баннер. Я вообще не понимаю, куда смотрю и где курсор.

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

Когда проблема критична, а когда нет

Критично:

• Интернет-магазины с широкой номенклатурой (маркетплейсы, ритейл с тысячами SKU).
• Медиа, каталоги знаний, справочные центры, документация SaaS.
• Госуслуги и сервисы, где пользователь приходит с конкретной задачей и термином.
• B2B-каталоги, где поиск — основной путь к узким позициям.
• Мобильные версии при высокой доле трафика со смартфонов и сценариях «быстрый запрос».

Некритично или мало влияет:

• Лендинги с одной целью и коротким путём (заявка, звонок, запись).
• Узкие сайты с 5–10 страницами, где навигация очевидна.
• Продукты с жёстко заданным сценарием (мастер шагов), где поиск не нужен.
• Кампании, где трафик идёт на глубинные страницы по конкретным ссылкам.

Что об этом говорят другие пользователи

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

Бесполезные ответы

• Я поиском не пользуюсь.
• Кажется, где-то видел, не помню где.
• Ну, как-то справился.

Полезные ответы

• Искомое место — правый верхний угол. Там лупа без подписи и очень светлая, заметил её только через 10–12 секунд. На мобильном спрятана в бургер-меню.
• Я пролистал экран и потерял шапку, поиск уехал. Вернул наверх, потратил лишние 2 действия. Ожидал фиксированную шапку.
• Иконка лупы 16 px, клик-зона маленькая. На тачпаде промахивался. Нужна подпись «Поиск», сейчас непонятно, что это.
• Плейсхолдер исчезает сразу после фокуса, я не уверен, что можно вводить. Контраст текста в поле слабый, на светлом баннере его не видно.
• Я ожидала строку поиска на странице каталога. Её там нет, есть только фильтры. Вернулась на главную — потратила около 20 секунд.

Pro юзабилити I UX в Telegram

Решение проблемы

1. Сделайте поиск видимым. Поставьте его туда, где его ждут: правый верхний угол шапки, на всех страницах. Дайте полю рамку и контраст к фону. Добавьте подпись «Поиск» и кнопку «Найти» или иконку плюс текст.
2. Не прячьте поиск. Не убирайте его в бургер, выпадашки и вторые клики. На десктопе держите строку видимой всегда. При скролле закрепите шапку, чтобы поиск был под рукой.
3. Сделайте кликабельную площадь крупной: минимум 44×44 px. Увеличьте размер поля до комфортного: чтобы влезало 30–40 символов. Контраст текста и рамки — не ниже 4.5:1.
4. Дайте понятную микрокопию. Плейсхолдер «Поиск по сайту» или «Что вы ищете?» без воды. Не заменяйте подпись одной лупой — иконку поддержите текстом.
5. На мобильном выведите отдельную иконку с подписью «Поиск» в шапке. По нажатию показывайте поле сразу, без лишних анимаций и перекрытий, с автофокусом и открытой клавиатурой.
6. Сделайте поиск доступным. Явный label, aria-label, фокус-стиль, таб-порядок. Подсветка фокуса заметная. Горячая клавиша / или Ctrl+K.
7. Упростите ввод. Запускайте поиск по Enter и по клику. Сохраняйте введённый запрос на странице результатов, чтобы его можно было поправить. Предлагайте подсказки и автодополнение без задержек.
8. Поставьте поиск там, где он нужен. На страницах каталога и помощи — тоже. Не заставляйте возвращаться на главную.
9. Проверьте метрики. Время до первого ввода, доля сессий с поиском, нулевые результаты, клики по полю, отказы со страницы результатов. Если люди ищут — помогите им искать.

Гипотезы для роста конверсии

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