Вышли: 8-й тираж "Тексты, которым верят"
2-й тираж "Копирайтинг: сила убеждения"
Расчетное время чтения: 1 мин.

Как оформить удобный поиск на странице

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

На что нужно обращать внимание при дизайне поисковой панели?

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

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

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

Рекомендуем делать поисковую строку такой длины, чтобы на ней было видно не менее 27 символов. Именно такое количество знаков вводит среднестатистический пользователь. 

Ещё несколько советов по дизайну поисковой панели

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

Вывод

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

Теги:
Предыдущий урок: Зачем писать на карточке товара сколько единиц осталось в наличии?
Следующий урок: Зачем нужно размещать важные категории сайта по бокам?
В мае-июне 2022г. в издательстве "АСТ" выйдет 6-я книга 📕 П. Панды. Подробности чуть позже :)
This is default text for notification bar