Layouts · Page types
Search Results Page
Also called: SERP, Search page, Results page, Search results
The page users see after entering a keyword. The search box stays at the top, filters sit at the side or above, and the main area lists results by relevance with the keyword highlighted.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild a search results page. At the top, a search box that keeps the keyword. Below it on the left, a 220px filter panel (category checkboxes, price range, publish date). At the top of the results area on the right, show "N results" and a sort dropdown, and show applied filters as removable tags. Each result has a title (with the keyword highlighted), a two-line snippet, the source and the date. Paginate at the bottom. When there are no results, show spelling suggestions and popular searches.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Search Results Page is what you need.
Use Search Results Page when
- Users look for content by keyword, and there are many results that need sorting by relevance
- Results need further filtering by several conditions like category, time and price
- Users need to quickly judge whether each result fits before clicking in to see it
Pick something else when
There's very little data, and listing all of it is enough to find things
Users are browsing recommended content with no specific query in mind
Admin users query records by fixed fields and need bulk actions (use a Data Table with a filter bar)
Use insteadData Table
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
The results page doesn't keep the keyword the user typed, so changing the search means typing it all again
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
No result count, and matching keywords aren't highlighted
- 03
When there are no results, there's just one line of "No data" with no suggestions at all
- 04
After changing filters, you can't tell what's currently selected, and there's no way to clear them in one click
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A search box at the top, filters at the side (or on top) below it, and a main area with, in order, a result count and sort bar, the results list and pagination.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The structure of a search results page is pretty fixed. At the top is the search box, which keeps the keyword. The next line shows "128 results" and the sort options (Relevance, Newest, Price). On the left or above are filters like category, price range and publish date. The main area is the results list, and each result shows the title, a snippet, the source and the time, with matching keywords bolded or highlighted. At the bottom is pagination or "Load more".
What form the results take depends on the content: articles and web pages use a List View, products use a Card Grid, and images use a Gallery. The search results page is responsible for the outer frame: the search box, filters, sorting, the result count, pagination, and what happens when there are no results.
When there are no results, don't just say "No results". Offer spelling suggestions ("Did you mean..."), popular searches or a button to clear the filters. Applied filters should show up as tags and be clearable in one click.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-search-results- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026