What is the search pattern in UX design?
The search pattern refers to the complete interaction flow that allows users to find content within a product or website. It encompasses the search input field and its affordances, real-time suggestions and autocomplete, results display and layout, filtering and sorting of results, and the empty state when no results are found. Search is often the fastest path to specific content for users who know what they are looking for, and its quality directly affects whether users can accomplish goals without resorting to browsing navigation.
How to design an effective search input?
The search input should be easy to find, sized large enough to display a typical query without truncation, and include a clear affordance indicating its purpose, typically a magnifying glass icon. Placeholder text should suggest what users can search for rather than simply saying "Search." The input should be accessible via keyboard shortcut in applications where frequent searching is expected. On mobile, tapping the search field should expand it to full width and focus the keyboard immediately. Submit should trigger on pressing Enter as well as clicking any search button.
How to design effective search results?
Results should appear quickly, with skeleton screens or progress indicators for slower queries. Each result should show enough context for users to evaluate relevance without clicking through: a title, a brief description or excerpt, and any key metadata. Highlight the query terms within results to help users verify relevance. When results are numerous, provide filtering and sorting to help users narrow them. Design the empty state carefully to explain why no results were found and suggest alternatives such as checking spelling, trying broader terms, or browsing categories.