search-ux
owl-listener/designer-skills
Design search experiences that help users find what they need with minimal friction.
What is search-ux?
A skill for designing complete search systems covering query input, results presentation, filtering, and zero-results states. Use this when your product needs users to retrieve content rather than browse through navigation structures.
- Design effective search inputs with descriptive placeholders and appropriate widths
- Implement autocomplete and suggestions that reduce typing and support search-as-navigation
- Create result layouts (list, grid, or grouped) with highlighted matches and relevant metadata
- Build filtering and faceted search for catalog-dense contexts
- Design zero-results states that suggest corrections, alternatives, and next steps
- Analyze search behavior through top queries, abandonment, and click position metrics
How to install search-ux
npx skills add https://github.com/owl-listener/designer-skills --skill search-uxHow to use search-ux
- 1.Audit your current search input—ensure placeholder text describes what can be searched and input width suggests expected query length
- 2.Implement autocomplete after 2–3 characters, showing recent searches first, then trending, then predicted completions
- 3.Choose a results layout (list for most content, grid for visual content, grouped for mixed types) and display result count and matched fields
- 4.Add filters relevant to your result set with counts, and make applied filters individually removable
- 5.Design a zero-results state that confirms the query, suggests corrections, and offers alternatives like browsing or support
- 6.Set up search analytics to track top queries, zero-results queries, refinement rate, and click position to inform ongoing improvements
Use cases
- Designing search for an e-commerce product catalog with filters by type, price, and category
- Creating a help center search that surfaces exact-match documentation pages and suggests related topics
- Building internal search for a knowledge base or file repository used by employees
- Implementing search-as-navigation in a settings or admin panel where users jump to specific pages
- Improving search relevance by analyzing zero-results queries to identify content gaps
- Product designers building search features
- UX researchers analyzing search behavior and user intent
- Content strategists using search data to inform information architecture
- Developers implementing search interfaces who need design guidance
search-ux FAQ
Use search when users retrieve specific items they know exist. Use navigation (the `navigation-patterns` skill) when users browse to discover or explore categories. Many products need both.
Limit to 5–8 suggestions. More creates decision overhead (Hick's Law). Prioritize recent searches, then trending, then predicted completions.
Treat zero-results as a UX failure, not a search failure. Confirm the query, suggest corrections for typos, offer related or broader terms, and provide alternatives like browsing categories or contacting support. Log these queries to identify content gaps.
Prioritize exact-match titles, recency, and popularity. For logged-in users, personalize by recent activity, role, or location. Surface the ranking logic to users ('Sorted by: most recent') so they can change it if needed.
No. Search is often the primary navigation on mobile. Don't remove it to save space; instead, optimize the input and results for small screens.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: search-ux
description: Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use navigation-patterns.
Search UX
You are an expert in designing search systems that are fast, forgiving, and genuinely useful.
What You Do
You design the full search experience — query input, results, filtering, zero-results states, and search-as-navigation patterns — so users find what they need with minimal effort and friction.
Search Entry
The Search Input
- Placeholder text should describe what can be searched: "Search products, brands, or categories" not just "Search…"
- Input width should suggest expected query length — wider inputs invite longer queries
- Auto-focus search input when the search view is opened
- Submit on Enter; provide a clear search icon/button for touch users
- Show a clear/reset button once a query is entered
Autocomplete and Suggestions
- Suggest completions after 2–3 characters to reduce typing
- Show recent searches first, then trending/popular, then predicted completions
- Highlight the query term within suggestions (bold the typed portion)
- Limit to 5–8 suggestions; more creates decision overhead (Hick's Law)
- Allow keyboard navigation through suggestions
Search-as-Navigation
Some users use search to navigate rather than find: "settings", "invoices", "my profile". Design for this:
- Include navigational destinations in suggestions
- Surface exact-match pages at the top of results
- Don't penalize navigational queries with "no results" when the destination exists
Results
Results Layout
- List: works for most content types; scanning-friendly
- Grid: for visual content (images, products, cards) where thumbnail is the primary signal
- Grouped by type: when results span heterogeneous content types (files, people, messages)
- Show result count: "142 results for 'onboarding'"
- Show which fields matched (title, body, tags) for complex content types
Result Items
Each result should show:
- Title (with query term highlighted)
- Snippet of matching context (with query term highlighted)
- Metadata relevant to the decision (date, author, category, price, status)
- Enough to decide whether to click — not so much it replaces clicking
Ranking and Relevance
- Recency, popularity, and exact-match title should score higher
- Personalization (user's recent activity, role, location) improves relevance for logged-in contexts
- Surface the ranking logic to users when it matters: "Sorted by: most recent" with ability to change
Filtering and Refinement
- Show filters that are relevant to the current result set, not all possible filters
- Indicate filter counts: "Type: Article (24), Video (8)"
- Applied filters should be visible and individually removable
- "Clear all filters" when multiple are applied
- Faceted search (filter by multiple attributes simultaneously) suits catalog-dense contexts
Zero-Results State
The most critical and most often neglected state:
- Confirm what was searched: "No results for 'onbording'"
- Suggest corrections for likely typos
- Suggest related or broader terms
- Offer alternatives: browse categories, contact support, see popular items
- Never show a blank page — the zero-results state is a retention moment
Search Analytics
- Top queries: what are users searching for? Gaps signal missing content or navigation
- Zero-results queries: what are users searching for that the system can't find?
- Refinement rate: how often do users modify their query or apply filters?
- Click position: which result position is clicked most? Low positions signal poor ranking
- Search abandonment: users who search and then leave — often a zero-results or poor-relevance problem
Best Practices
- Treat zero-results as a UX failure, not a search failure — every zero-results query is a gap to address
- Don't remove search from mobile to save space — search is often the primary navigation on mobile
- Persist the query in the input field so users can refine without retyping
- Log queries to inform content, IA, and navigation decisions — search is the most honest user feedback you have
- Design search to be tolerant: handle typos, synonyms, plurals, and partial matches
Related skills
More from owl-listener/designer-skills and the wider catalog.
service-blueprint
Map service delivery across frontstage actions, backstage processes, and supporting systems.
spacing-system
Create a systematic spacing scale from a base unit with clear application rules for consistent layouts.
stakeholder-alignment
Build responsibility matrices, decision rights, and communication plans to unblock stakeholder alignment.
state-machine
Model UI behavior as explicit states, events, and transitions to eliminate impossible states.
summarize-interview
Turn interview transcripts into structured themes, quotes, and action items for immediate research insights.
survey-design
Design unbiased surveys to measure attitudes and prevalence at scale with sound methodology.