Строка поиска для сайта: форма, кнопка и поле, которыми удобно пользоваться
Где разместить строку поиска, какой ширины сделать поле, нужна ли кнопка «Найти», как показывать подсказки, как устроить поиск на телефоне и что показать, когда ничего не нашлось.
Строка поиска для сайта — маленький элемент, от которого зависит, найдёт ли посетитель товар. Если её не видно, если поле узкое или на телефоне она прячется за тремя нажатиями, поиском не пользуются, даже когда он хорошо ищет.
Ниже — как разместить и оформить строку поиска, чтобы ею было удобно пользоваться на компьютере и телефоне.
Где разместить строку поиска
- В шапке сайта, на каждой странице. Посетитель ищет не только с главной.
- На виду, а не за иконкой, если сайт — магазин или каталог. Открытое поле используют чаще, чем лупу, которую надо найти и нажать.
- По центру или справа от логотипа. Там её ищут по привычке.
- В том же месте на всех страницах. Если строка прыгает, её теряют.
На сайте-визитке или в блоге, где поиск нужен редко, можно оставить иконку с лупой, которая раскрывает поле.
Поле поиска: ширина, подсказка, фокус
- Ширина. Поле должно вмещать типичный запрос целиком. Если текст уезжает за край, человек не видит, что написал.
- Подсказка внутри поля. Коротко о том, что можно искать: товары, разделы, статьи. Подсказка исчезает при вводе и не заменяет подпись для экранных дикторов.
- Видимый фокус. Когда поле активно, это должно быть заметно: рамка или тень.
- Крестик очистки. Чтобы стереть запрос одним нажатием.
- Тип поля.
type="search"даёт на телефоне клавиатуру с кнопкой поиска.
Кнопка и иконка: нужна ли кнопка «Найти»
Кнопка «Найти» или иконка лупы справа от поля нужна: не все знают, что можно нажать Enter. Кнопка должна быть достаточно крупной, чтобы попасть в неё пальцем.
Иконку лупы понимают все, текст «Найти» — ещё нагляднее. Хороший вариант — лупа слева в поле как знак поиска и кнопка справа для отправки.
Подсказки при вводе
Подсказки появляются после первых букв и сокращают путь к товару.
- Товары с фото и ценой. Человек видит нужный товар и переходит к нему, не открывая выдачу.
- Разделы каталога. Если запрос общий, полезнее отправить в раздел.
- Статьи и справка. Если человек ищет ответ на вопрос, а не товар.
- Исправление опечаток. Подсказки должны находить товар, даже если запрос набран с ошибкой.
Подсказки должны появляться быстро. Что влияет на скорость — в статье Быстрый поиск по сайту.
Строка поиска на телефоне
На телефоне ищут чаще, а места меньше. Поэтому:
- Поле на виду в шапке или иконка, которая раскрывает поле на всю ширину.
- Поиск на весь экран после нажатия. Подсказки и результаты не перекрываются клавиатурой.
- Крупные элементы. Подсказки и кнопки — под палец, а не под курсор.
- Последние запросы. Не надо набирать повторно.
Почему мобильный поиск устроен иначе — в статье Поиск по сайту с телефона.
Поиск в меню и в шапке
Если в меню много пунктов, поиск в нём помогает быстро перейти в нужный раздел. Но он не заменяет строку поиска по каталогу: в меню ищут разделы, в строке — товары. Если места мало, лучше оставить строку в шапке и убрать в меню второстепенные пункты.
Пустая выдача: что показать, когда ничего не нашлось
Страница «Ничего не найдено» — место, где сайт теряет покупателя. Вместо пустоты покажите:
- похожие товары или товары из близкого раздела;
- исправленный запрос, если в исходном была ошибка;
- популярные разделы;
- способ связаться, если человек ищет то, чего нет на сайте.
Что ещё можно сделать — в статье Что делать, когда поиск по сайту выдаёт ноль результатов.
Вывод и следующий шаг
Удобная строка поиска для сайта — на виду, широкая, с понятной кнопкой, подсказками и запасным вариантом на случай пустой выдачи. На телефоне она раскрывается на весь экран.
Поиск AISSE встаёт в существующую строку поиска сайта: запрос из неё уходит в поиск без переделки шаблона. Он понимает опечатки и вместо пустой выдачи предлагает близкие варианты или уточняющий вопрос. Как выглядит на вашем каталоге — в демо за пять минут.
Частые вопросы
Строка поиска или иконка с лупой?
Для магазина — открытая строка: ею пользуются чаще. Для блога или сайта-визитки достаточно иконки.
Нужна ли строка поиска на каждой странице?
Да. Посетитель решает искать там, где он сейчас, а не на главной.
Как оформить расширенный поиск?
Отдельной ссылкой под строкой или фильтрами на странице результатов. Основная строка должна оставаться простой: одно поле и кнопка.