Use browse by category when users explore a known taxonomy before choosing a destination, basic search when they already have a query, filter panel when they narrow a current result set, and tabs when switching sibling panels within one page.
Use browse by category when users explore a known taxonomy before choosing a destination, basic search when they already have a query, filter panel when they narrow a current result set, and tabs when switching sibling panels within one page.
Practice the judgment: Imagine this situation: Categories mirror the organization chart instead of user language, so users must understand internal ownership to browse. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Browse by category | Basic search | Filter panel | Tabs |
|---|---|---|---|---|
| UI or UX | UI + UX - Taxonomy-based category navigation for exploring a collection before choosing a destination | UI + UX - Search input and result list | UI + UX - Grouped filter control panel for narrowing a current result set | UI + UX - Section-switching component |
| UI guidance | Render categories as a scannable list or grid with user-facing names, short descriptions, item counts or example contents, and clear parent-child location cues. | Render a labeled search field, result count, matching rows, and clear action. | Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. |
| UX guidance | Maintain the taxonomy with evidence from content tagging, search terms, analytics, tree testing, support questions, and editorial review so category labels stay distinct and useful. | Help the person reach a clear task outcome. | Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. |
| Good UI | A services page lists Benefits, Housing and local services, Money and tax, and Driving and transport with one-line descriptions and top tasks for each category. | A clearly labeled search field with result count and results placed directly below. | A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. |
| Bad UI | Category names overlap and users bounce between siblings. | Results jump, resize, or use heavy borders that make scanning feel like reading a form. | A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading. | Tabs wrap unpredictably or look like unrelated buttons. |
| Good UX | An editor reviews low-click categories, merges overlapping labels, and retags misplaced content after checking search terms and support questions. | Users can type, revise, clear, and keep context while inspecting results. | A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. |
| Bad UX | Users choose Customers because they need customer support, but the category contains only internal CRM configuration articles. | Search silently changes unrelated filters. | Applying a filter silently resets the query, sort order, current page, and view density. | Using tabs as primary navigation to unrelated pages. |
| Best fit | Users are exploring a broad catalog, service directory, help center, learning library, product collection, or content repository. | Users know a word, name, or identifier. | Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria. | Users switch between sibling panels frequently. |
| Avoid when | The collection is small enough for a simple list. | The task is choosing a command with side effects. | The result set is small enough that scanning is faster than filtering. | The destinations are unrelated pages. |
| Required state | Top-level category state with clear names, descriptions, and enough examples or counts to choose. | Empty query state. | Applied state with active-filter count, result count, and removable applied criteria near the results. | Default active tab and visible panel. |
| Accessibility burden | Use real links for categories that navigate and buttons only for local expansion. | The input has a stable accessible name. | Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values. | Expose the active tab and associated panel. |
| Common misuse | Using the organization chart as the category taxonomy. | Using placeholder text as the only label. | Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set. | Using tabs as a primary site navigation system. |