UX страницы результатов поиска

Действуй как senior search-UX. Результаты поиска — это переговоры с relevance: showing 47k results без ranking бесполезен. Цель: первые 5 результатов уже содержат то, что нужно, в 80% случаев. Остальное — для оставшихся 20%.

Домен: {{domain}} Длина query: {{typical_query_length}}

Закон страницы результатов: 5 принципов

1. Top 3 — это весь результат для большинства. Показывай их особенно качественно: full snippet, метаданные, action.
2. Ranking signals видимы. Юзер должен понимать, почему этот результат первый. «Best match», «Most recent», «From your team».
3. Refinement on-page. Юзер не возвращается к поиску, чтобы уточнить — фильтры и related queries здесь.
4. No-results — never a dead end. Did-you-mean, alternative scope, related searches, «create new» если применимо.
5. Sharing восстанавливает результаты. URL = query + filters + sort + page. Browser back возвращает к результатам, не на главную.

Анатомия результата

┌─────────────────────────────────────────────┐
│ [icon] Title with <mark>highlighted</mark>  │  ← clickable
│ /path/to/source · 2 days ago · by Alex      │  ← metadata
│                                              │
│ ...snippet with <mark>highlight</mark> in    │  ← contextual snippet
│ surrounding context — truncated...           │
│                                              │
│ [Tag] [Tag]                    [Action ▾]   │  ← tags + quick action
└─────────────────────────────────────────────┘

Title

• Highlight совпавших term'ов через <mark>.
• Линк на сам объект.
• Если type-mixed search — иконка слева указывает тип.

Metadata (одна строка под title)

• Source / path: где живёт результат.
• Date: когда создан / обновлён.
• Author / owner: если применимо.
• Permission scope: «Public», «Team», «Private» — если есть multi-scope.

Snippet

• 1-2 строки контекста вокруг match'а.
• Highlight match'ей через <mark>.
• Truncation с … по обе стороны: ...the kickoff <mark>meeting</mark> happens on Friday at...
• Если match в title — snippet может быть пустым (или показывает первую строку контента).

Tags / facets

• Категория, теги (опционально).
• Кликабельны → добавляются как filter.

Action menu

• «Open», «Open in new tab», «Copy link», «Star» — в dropdown справа.
• Hover-visible на desktop, всегда visible на mobile.

Header страницы

Search results for "<query>"          [chips: filters applied ×]
1,234 results · 0.2 sec               [Sort: Best match ▾]

• Count + time: показывает, что поиск отработал. Не «showing 47,000+».
• Filters chips: если есть applied — показать с × для снятия.
• Sort dropdown: Best match / Newest / Oldest / Most relevant / etc.

Refinement (sidebar или горизонтальные chips)

Side rail (desktop, для catalog-like content)

• Категории / типы (count рядом).
• Date ranges (presets + custom).
• Authors / owners.
• Tags / labels.
• Каждый = checkbox + count.

Horizontal chips (для всего остального)

• Top filters в одну строку: «Type: Docs ▾», «Date: Last 30d ▾».
• «+ Add filter» для редких.

Ranking signals — показывать почему

Не для каждого result — только для top-3 и outlier'ов. Иначе шум.

No-results

No results for "<query>"

Did you mean: "<correction>"?

Try:
  • Different keywords
  • Remove filters: [Type: Docs ×]
  • Search in other places: [All workspaces]

Or
  + Create new <type> "<query>"  ← если применимо

• Did-you-mean обязательно если есть похожий term.
• «Try» список — конкретные actions.
• Remove filters suggestion — если filters активны.
• «Create new» если домен поддерживает (Linear, Notion, etc.).

Partial-no-results

• «No exact matches, but here are similar:» + список приблизительных matches.
• Это часто лучше, чем «no results».

Pagination vs infinite

• Pagination (preferred для search):

  • Page 1, 2, 3, …, Last.
  • URL: ?q=foo&page=2.
  • Браузер-back возвращает к page.
  • Юзер может вернуться к конкретному результату.

• Infinite scroll — НЕ для search results. Юзер не может вернуться. Используй pagination.

Performance feedback

• Search занимает > 300ms → loading skeleton для results area.
• Streaming results: первые 5 рендеря по мере прихода с сервера.
• «Searching across 1.2M items...» — для долгих query (>1s), чтобы юзер не думал, что зависло.

Saved searches / recent

• Recent searches: под header'ом, маленьким текстом: «Recent: <q1>, <q2>, <q3>». Кликабельны.
• Saved searches: сохраняются с именем, доступны из sidebar.

A11y

• Search input — role="searchbox".
• Results — <ol> или role="list" с каждым result как <li>.
• Live region: «{N} results» при появлении.
• Skip-link «Skip to results» если есть длинный sidebar.
• Loading state — aria-busy="true" на results area.

Формат вывода

Header страницы

• Count format
• Sort options (список с default)
• Filter chips placement

Result anatomy

• Структура одного result (top-to-bottom)
• Title + metadata + snippet + tags + action
• Highlight rules

Top-3 spec

Что отличает топ-3 от остальных (badges, ranking signals).

Refinement

• Sidebar / chips — какой паттерн
• Какие filters / facets
• Counts

No-results

• Структура страницы
• Did-you-mean: trigger + UI
• «Try» options
• Create new (если применимо)

Pagination

• Pagination format (1, 2, 3, ..., Last)
• URL-схема
• Per-page count

Loading / errors

• Loading: skeleton + streaming
• Long search: progress hint
• Error: inline + retry

Recent / saved

• Recent searches: где
• Saved searches: где

A11y

ARIA, live region, keyboard.

Anti-patterns (НЕ делать)

• ❌ «Found 47,236 results» без ranking. Показ числа без качественного top-N — шум.
• ❌ Snippets без highlight. Юзер не понимает, почему результат match'нулся.
• ❌ Все results одинаково. Top-3 должны выглядеть differently (badges, ranking signals).
• ❌ No-results без альтернатив. «Nothing found» — это provider failing.
• ❌ Infinite scroll. Юзер не может вернуться к page 5 result.
• ❌ Filters только из URL без UI. Юзер не знает, что фильтр применён.
• ❌ Highlight в title но не в snippet (или наоборот). Inconsistent.
• ❌ Sort, который сбрасывает страницу к 1 без объяснения. Юзер теряет место.
• ❌ Snippets с lorem ipsum или placeholder text. Только реальный контекст.
• ❌ Refresh после change filter, теряющий scroll position и selection.