Search Results
The bridge between user intent and content. Design search experiences that surface the right results quickly and help users refine when they don't.
What is it?
A search results screen displays the results of a user's query, allowing them to scan, filter, sort, and navigate to relevant content. Search is one of the most critical flows in any content-heavy product — it represents a user who knows what they want and is asking the system to find it. Failing this user is a significant product failure.
Why it matters
When users search, they have explicit intent — they're at peak motivation. A search result page that surfaces the right content converts that intent into action. A poor results page sends users to Google instead. For e-commerce, search converts at 3–5× the rate of browse — it's the highest-intent path in the product.
Best Practices
- Show the user's query in the results page header and in the search input — confirm what was searched.
- Show the result count: "1,243 results for 'running shoes'"
- Sort by relevance by default. Provide sort options (newest, price, rating) as secondary controls.
- Faceted filtering: let users refine by category, price range, color, size, rating etc. — these should be on the left sidebar on desktop, a filter drawer on mobile.
- Highlight the query terms in result titles/descriptions.
- Handle the zero-results state with alternatives: spelling suggestions, related searches, popular items.
- Instant search / predictive results while typing significantly improve search experience.
- Save recent searches and show them when the search input is focused.
- Pagination for large result sets — or load more, not infinite scroll (which breaks navigation).
- Filters should be applied immediately (without "Apply" button) when possible.
Common Mistakes
- No zero-results state design — blank page with no guidance.
- No result count — users don't know if they found everything or just 10 of 10,000.
- No filtering — users must scroll through hundreds of irrelevant results.
- Filters that require "Apply" click instead of instant filtering.
- Query not reflected back to the user on the results page.
- Pagination that loses scroll position on back-navigation.
- No mobile filter pattern — desktop sidebar doesn't work on mobile.
Checklist
Research & Theory
Search Converts at 3–5× Browse (Forrester)
Forrester research consistently shows that search users have higher purchase intent and convert at dramatically higher rates than browse users.
Why it's relevant
Search is the highest-ROI experience to optimize in e-commerce. A 1% improvement in search result quality has outsized revenue impact.
Real-World Examples
Airbnb
Map + list split view for location-based results. Instant filter updates with no Apply button. Clear filter chips showing active filters. Mobile has a filter drawer.
Amazon
Faceted filtering on left sidebar. Department filter. Price range slider. Rating filter. Customer reviews filter. The most comprehensive filtering implementation in consumer e-commerce.
Figma Community
Instant search as you type. Filter by file type, editor, category. Result cards with preview images. Pagination with clear count.