TGViewer
UX Notes UX Notes @uxnotes · 23.7K subscribers
Post #966 6.32K
Станислав Хрусталёв написал о лучших практиках в работе поисковой строки в интернет-магазинах. Вот некоторые из них:

— На всех страницах, где есть поисковая строка, располагайте её в одном и том же месте и оформляйте одинаково;
— Поисковая строка и кнопка перехода в каталог — ключевые методы работы с интернет-магазином, размещайте их рядом;
— При прокрутке страницы закрепляйте шапку сайта с поиском. На мобильных сайтах размещайте кнопку поиска на нижней панели;
— Поле поиска должно быть одно, даже если способов поиска несколько;
— И достаточно широким — не менее трети от ширины шапки. Узкое поле можно расширить при фокусе;
— Если поиск вторичен, поле можно отображать по нажатию на иконку;
— В поле поиска размещайте лупу и плейсхолдер;
— Плейсхолдер может быть призывом к действию («Найти в каталоге»), вопросом пользователю («Что вы ищете?»), примером запроса (часто покупаемые товары или товары к событию), рассказывать о способах поиска («Введите название товара, заболевания или симптома»), отражать широту ассортимента («Поиск по 110 000 дизайнов»);
— Подсказки отображайте сразу после фокуса на поле. Пока пользователь ничего не ввёл, там могут быть популярные товары и бренды, тренды, новые товары, а также история поиска;
— Возможность одним кликом очистить историю поиска;
— Список подсказок должен полностью умещаться на экране без прокрутки;
— В поле поиска дополняйте текст, введённый пользователем, текстом самой подходящей подсказки, чтобы не надо было вводить запрос целиком. Текст дополнения должен отличаться от введённого текста визуально;
— Распознавайте текст, введённый с неправильной раскладкой клавиатуры, опечатки, сленг, аббревиатуры и синонимы;
— Возможность перейти из поиска в категорию;
— Учитывайте, что человек может искать не продукт, а что-то иное: условия доставки, возврата, адреса магазинов;
— Для товара в списке подсказок отображайте фото, цену (валюту лучше показать символом), за что эта цена (упаковка, килограмм), скидку, баллы программы лояльности, рейтинг;
— Возможность добавить знакомый товар в корзину прямо из списка подсказок.
Hardclient Работа с поисковой строкой в интернет-магазинах: 179 гайдлайнов Лучшие практики UX/UI в E-Commerce
  • 👍 15
More from @uxnotes
  1. Oct 2, 2026Сархан Громов написал о проблеме связи брендинга и интерфейса. Фирменные приёмы могут отли…
  2. Oct 1, 2026Post #1813
  3. Sep 30, 2026Александр Краснобаев написал об а/б-тестах на малом трафике. • Нельзя выбирать один из вар…
  4. Sep 27, 2026Елена Плинер написала о юзерфлоу. — User flow — это блок-схема пользовательского пути в ра…
  5. Sep 23, 2026Ночной UX — цифровая вечеринка от Сбера Необычные решения, творчество и ошибки делают нас…
  6. Sep 17, 2026Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →