Розробка дизайну сторінки пошуку сайту
Сторінка пошуку — індикатор того, що користувач не знайшов потрібне через навігацію. Це не невдача, це нормально: пошуком користуються навіть на добре структурованих сайтах. Завдання дизайну — зробити результати читаними та допомогти уточнити запит.
Два стани сторінки
Сторінка пошуку існує в кількох станах, кожен потребує окремого макета:
Стан 1: порожній пошук — користувач відкрив /search без запиту. Показуємо рядок пошуку крупно, опціонально — популярні запити або категорії для швидкого старту.
Стан 2: результати знайдені — основний вид. Рядок з запитом вгорі, кількість результатів, фільтри/фасети, список результатів, пагінація.
Стан 3: результати не знайдені — окремий дизайн (див. empty states). Пропонуємо подібні запити, перевірку опечаток, популярні розділи.
Компонування результатів
Для більшості сайтів підходить двохколонковий layout:
- Ліва колонка (~280px): фільтри та фасети
- Права колонка: список результатів
На мобілі фільтри убираються в drawer або аккордеон над результатами.
Кожен результат — карточка з передбачуваною структурою:
- Тип контенту (badge): стаття, послуга, товар, сторінка
- Заголовок (посилання, з підсвіткою збігу)
- URL або breadcrumb — де живе сторінка
- Сніпет — 2–3 рядки тексту з підсвіткою ключових слів
- Мета (опціонально): дата, автор, категорія
Підсвітка збігів — <mark> тег з фоновим кольором з палітри (зазвичай жовтий або primary-light). Критично важлива для сприйняття релевантності.
Фільтри та сортування
Набір фільтрів залежить від типу контенту на сайті:
- За типом сторінки (стаття, кейс, послуга)
- За датою (за місяць, за рік, діапазон)
- За категорією/тегом
- За мовою — для багатомовних сайтів
Сортування: «За релевантністю» (за замовчуванням), «За датою», «За популярністю». Активні фільтри показуємо chips/тегами над результатами — з кнопкою видалення кожного та «Скинути все».
Пошукова рядок
Рядок на сторінці результатів — не та ж, що в хедері. Вона крупніша, містить поточний запит, кнопку очищення та іноді автодоповнення. Шаблонне рішення: Input з іконкою пошуку ліворуч, кнопкою × справа, submit по Enter та по кліку кнопки.
Якщо на сайті є Algolia, Elasticsearch або TypeSense — рядок пошуку підтримує instant search: результати оновлюються по мірі набору з debounce ~300ms.
Пагінація та нескінченна прокрутка
Для пошуку пагінація (numbered pages) краще, ніж infinite scroll: користувач бачить, скільки результатів всього, і може перейти на конкретну сторінку. Нескінченна прокрутка складніша для повернення до результату.
Мінімальний дизайн пагінації: «Назад», номери сторінок (3–5 навколо поточної), «Вперед», інформація «Показано 1–20 з 348».
Строки
Дизайн сторінки пошуку зі всіма станами та адаптивом — 3–5 днів: проектування всіх станів та компонентів, фінальні макети desktop + mobile, підготовка до передачі розробникам.