search-ux

Design search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use `navigation-patterns`.

By owl-listener · 1,189 installs

npx skills add owl-listener/designer-skills --skill search-ux

Source repository · Upstream listing

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