Site Search Heatmap: What the Search Box and Results Page Tell You

People who use your site search are telling you, in their own words, exactly what they want. That makes them some of the most valuable visitors you have, and some of the easiest to lose. If the search box is hard to find, they browse instead or leave. If the results look wrong, they often decide you don't have what they're after, even when you do.

Most teams only see the end of that story: a search term in analytics and a session that ended. A site search heatmap shows the middle. It shows whether people found the search box, what they clicked on the results page, whether they reached for filters or suggestions, and what they did when a search came back empty.

This guide covers how to set the map up for a page that changes with every query, how to read the clicks and the scroll, the mistakes that send teams after the wrong fix, and how to turn what you see into one change you can measure. If you're new to heatmaps, how to read a website heatmap covers the basics first.

Why site search deserves its own heatmap

Search is not a side feature for the people who use it. Baymard Institute's large-scale ecommerce testing found that roughly half of participants turn to search as their preferred way of finding products, with the other half using the main navigation (Baymard Institute, Ecommerce Search UX: 8 Query Types). In the same 2026 benchmark of 170+ sites and apps, Baymard rated 56% of sites as failing to adequately support users' search needs, and found 46% of desktop sites, 58% of mobile sites and 64% of apps "mediocre or worse" for search overall.

The cost of a weak first search is high. In a 2001 article, Jakob Nielsen of Nielsen Norman Group reported a study of people shopping on ecommerce sites where search success fell from 51% on the first query to 32% on the second and 18% on the third, and almost half of the users whose first search failed gave up immediately (NN/g, Search: Visible and Simple). The numbers are old, but the lesson still holds up in Baymard's recent work: people judge your search, and often your whole catalog, on the first page of results.

That's why the results page needs its own map. Grouped into a sitewide heatmap, search is a few clicks on a box in the header. Read on its own, it shows you whether that box is doing its job.

What a site search heatmap shows

A heatmap adds up behavior from many visits onto one screenshot of the page. Microsoft Clarity, a free analytics product from Microsoft, offers click maps, scroll maps, area maps, attention maps and conversion maps, states there's no minimum traffic needed to generate one, and can build a heatmap for a single page or a group of pages (Microsoft Clarity, Heatmaps overview). For site search you'll look at two places, and two map types do most of the work:

• Click maps show where people click on a desktop and tap on a phone or tablet, including on things that aren't links. Clarity ranks clicked elements by number of clicks, and can switch the view to dead clicks (a click with no response), rage clicks (fast repeated clicks in one small area), error clicks, first clicks and last clicks (Microsoft Clarity, Click maps).
• Scroll maps show what share of visitors reached each 5% of the page, the drop-off at each point, and the average fold: how much of the page people see before they start scrolling (Microsoft Clarity, Scroll maps).

The first place is the search box itself, which lives in your header on every page, so you read it on your busiest templates: the homepage, collection or category pages, and article pages. The second is the search results page.

One caveat comes from Clarity's own documentation: the page impression in a heatmap might not show the element the user clicked. On search, that's common. An autocomplete dropdown opens only while someone types, and a results page looks different for every query, so the screenshot under the heat is just one version of the page. Use the ranked element list and session recordings, not only the colors.

Conversion maps are only available on projects where Clarity detects purchase events (Microsoft Clarity, Conversion maps). If you run a store, they can show which results-page elements are linked to purchases. Otherwise, pair the heatmap with events in your analytics.

Set it up so the map means something

1. Group every results page into one map. Most search results pages share a path and change only a query parameter, such as /search?q=boots. If you build the heatmap for one exact URL, you'll get one person's search. Build it for the path as a group of pages so every query lands in the same map, then add separate maps for your most common queries if they get enough traffic.
2. Split by device. On a phone, the search box is often hidden behind an icon, the keyboard covers half the screen while people type, and results stack into one or two columns. Read desktop and mobile separately; mobile vs desktop heatmaps explains why the maps differ.
3. Track searches as events. GA4's enhanced measurement sends a view_search_results event each time a visitor is shown a search results page, as indicated by a query parameter in the URL. By default it looks for q, s, search, query or keyword, you can configure others, and the search term fills the Search term dimension (Google Analytics, Enhanced measurement events). If your search doesn't change the URL, Google's recommended search event with a search_term parameter does the same job (Google Analytics, Recommended events reference).
4. Add a results-click event. Neither event tells you whether the visitor clicked a result. Track clicks on results (and on "no results" suggestions) so you can compare searches with searches that led somewhere.
5. Use a fixed, long enough window. Aim for a few hundred results page views per device, and keep the window the same length when you compare before and after a change. If search is quiet, heatmaps on a low-traffic website covers what you can still learn. If you're redesigning the header and want to know whether a new search box will be seen at all, our free page leak scan predicts where attention will land. It's a prediction, not your visitors' behavior, but it shows where to look first.

Read the search box first

Before you look at results, check whether people find the box. Open the click map for your busiest templates and find the search field or icon in the ranked list.

A search icon with very few clicks on a large catalog is a warning. Nielsen recommended that search be a type-in box, not a link, placed at the top of the page, usually in the right-hand corner, and wide enough for a typical query. When he swapped a search link for a box on his own homepage, search use went up 91% (NN/g, Search: Visible and Simple). If your desktop header shows only a magnifying glass, a low click count may mean people don't see it, not that they don't want it.

Compare first clicks on search with first clicks on the menu. If you have a large catalog and first clicks go mostly to search, your shoppers know what they want; make sure search works well. If first clicks go to the menu and then later to search, people may be falling back to search after the navigation failed them. NN/g calls search users' escape hatch when they are stuck in navigation. The website navigation heatmap guide shows how to check the menu side.

Watch recordings of people typing. Autocomplete suggestions rarely show up well in a heatmap screenshot, so watch a handful of sessions where people click the box. Do they pick a suggestion, keep typing, or clear the box and leave? Suggestions that people ignore, or that send them to the wrong place, are worth fixing before anything on the results page.

Read the results page click map as a ranked list

Results pages are busy, so the colors can be misleading. The ranking tells you more. Sort the top clicked elements into five groups:

• Results: product cards, article links, images, titles, prices
• Ways to narrow: filters, filter chips, the sort menu, category suggestions
• Ways to try again: the search box with the query in it, spelling suggestions, related searches
• Non-result content: banners, promoted tiles, "you might also like" blocks
• Ways out: the menu, the logo, footer links

Then ask what each group is telling you.

Most clicks on the first few results is healthy. Position matters on every list. The question is whether the top results match the query. Open your most common search terms one at a time and check what sits in the first row. If people skip the first row and click the third or fourth result, relevance is the problem, not the layout.

Heavy clicks on the search box from the results page mean the first try failed. People who click back into the box are rewriting their query. Combine that with the GA4 Search term report: if the same term is followed by a second, slightly different term, your search doesn't understand the first one. Baymard's research breaks search queries into eight types, and gives the share of benchmarked sites with issues for each: exact searches (12%), product type (20%), feature (39%), use case (43%), abbreviation and symbol (54%), compatibility (44%), symptom (37%) and non-product searches (66%) (Baymard Institute, Ecommerce Search UX: 8 Query Types). If people search "13in laptop sleeve" and then "13 inch laptop sleeve", that's an abbreviation problem, and it's a fix in your search settings, not your design.

Clicks on filters straight after searching can be good or bad. On a broad query such as "jeans", filters are the right next step, and Baymard's example of a "women's jeans" search returning 822 results with no category suggestions shows why. On a specific query, heavy filter use means the results were too loose. Check dead clicks on filter chips and the sort menu too: on mobile they're often small, and a tap that doesn't respond shows up as a dead click. Our collection page heatmap guide covers filter and sort patterns in more detail, because results pages often share that template.

Clicks on banners and promoted tiles are worth a second look. If a promotion sits above the results and takes a large share of clicks, check where those visitors went next. Sometimes it's a good offer. Often it's people who mistook it for a result.

Rage clicks usually mean something slow or broken. On results pages that's often a "load more" button that waits on a slow request, a filter that reloads the page and loses the query, or a result image that isn't linked. Use Clarity's "View recordings" option on that element to watch those sessions (Microsoft Clarity, Click maps).

Last clicks on the menu or logo are exits from search. If many searches end with a click on the logo, people gave up on search and went back to browsing, or left. Look at which terms those sessions searched for.

Then read the scroll map

On a results page, the scroll map tells you how far people are willing to look. Nielsen Norman Group's 2018 eyetracking study found that people spent about 57% of their page-viewing time above the fold, 74% in the first two screenfuls, and 81% in the first three (NN/g, Scrolling and Attention). On search, the first screen is where the best matches need to be.

Check three things:

• Where the average fold sits on mobile, and how many results are above it. If a large banner, a search summary and a filter bar fill the first screen, a phone visitor may see one result, or none, before they scroll.
• Where the steep drop happens. A drop after the first row or two is normal when results are good: people found what they wanted. A long, slow scroll through many rows followed by an exit usually means they were hunting and didn't find it.
• Whether anyone reaches pagination or "load more". If very few people do, deep results don't matter much, and your effort belongs in the first rows. If many people do on a common query, the ranking for that query needs work.

A scroll map is also a useful check on GA4, because enhanced measurement fires its scroll event only the first time a visitor reaches 90% of the page (Google Analytics, Enhanced measurement events). That says little about whether people looked past the first row of results.

Check the no-results page on its own

A no-results page is the most important page in your search flow and the one teams see least. Nielsen Norman Group points out that there's a high risk of site abandonment when a search returns nothing, and that in their research people often hit a no-results page even when the content exists but doesn't match their query (NN/g, Search No Results Page). Their guidelines for that page are simple: say clearly that there are no matching results, offer a way forward, and don't mock the user.

If your no-results page has its own template or URL pattern, give it its own heatmap. Then check:

• Do people see the message? NN/g's eyetracking found a user who looked straight past a small "no matches" line to the content below it. If clicks on a no-results page land on unrelated tiles, people may not have realized their search failed.
• Do people use the way forward? The search box should still hold the query so it's easy to edit, with spelling corrections and suggested searches that return results. Dead clicks on plain-text suggestions mean they look like links and aren't.
• What did people search for? Pull the terms that led to no results from your analytics. Baymard found that non-product searches, such as a return policy or shipping information, were poorly supported on 66% of sites, and that not finding that information led some test participants to leave. If people search for "returns" and get nothing, add a result that points to your returns page.

Common mistakes reading site search heatmaps

• Building the map for one URL. A heatmap of /search?q=red-shoes shows the people who searched for red shoes. Group the results pages, or you'll draw conclusions from a handful of sessions.
• Treating low search use as low demand. If the search box is an icon that's easy to miss, few clicks may mean people don't see it. Check its placement on mobile and desktop before you decide nobody needs search.
• Fixing the layout when the problem is relevance. If people skip the top results or rewrite their query, a new card design won't help. Look at the search terms and what your engine returns for them.
• Reading desktop and mobile together. On a phone, the search box is often behind an icon and results stack into fewer columns. Mixed together, the map hides both patterns.
• Ignoring searches for information. Searches for shipping, returns, sizing or pricing are buyers checking terms before they commit. If they get products or nothing, some of them leave.
• Counting searches as success. A high number of view_search_results events can mean search is popular or that people are searching again and again because the first try failed. Compare searches with result clicks.

Turn one pattern into one change

Pick the single pattern that affects the most searchers and write it down as a hypothesis with a number you can re-check. For example (illustrative): "On mobile, a third of results-page clicks go back into the search box, and the top terms that get rewritten are abbreviations like 'in' and 'tv'. Add those synonyms to search, and compare result clicks per view_search_results over two equal weeks."

Our CRO hypothesis template gives you a format for writing these down. If you don't get enough traffic for a proper A/B test, CRO without A/B testing shows how to compare a before-and-after honestly. If you'd rather not run that re-measurement by hand, every Cortality plan re-measures each fix you ship; compare the plans.

Search is also one of the places visitors go when other pages don't answer their questions. If a large share of searches are for policies or common questions, read our FAQ page heatmap guide next, because the answer may belong on a page people already visit.

Site search heatmap checklist (copy this)

• Search results pages grouped into one heatmap, not one exact URL
• Desktop and mobile read separately
• Search box clicks checked on the homepage, category and article templates
• Search is a visible box on desktop, not only an icon
• view_search_results (or the search event) arriving with search terms
• Result clicks tracked as their own event
• Click ranking sorted: results, ways to narrow, ways to try again, non-results, ways out
• Rewritten queries checked against the Search term report
• Scroll map checked: how many results sit above the average fold on mobile
• No-results page read on its own: clear message, query kept, a way forward
• Non-product searches (returns, shipping, sizing) return a useful result
• One change shipped, re-measured over the same window length

Where Cortality fits

Most of this comes down to one question: what do visitors actually see, skip and tap in your search box and on your results page, and where do they give up? Cortality measures how real visitors use every part of your page, including the search box, each result, the filters and the no-results message, on each device. You get a ranked list of fixes, each with the evidence and the exact change to make, and after you ship a fix Cortality re-measures it and tells you whether it worked. It works alongside Google Analytics and Microsoft Clarity rather than replacing them. See how it works or what a finding looks like. For online stores, see Cortality for Shopify stores.

For a quick first look, our free page leak scan takes about a minute and needs no install. It's a prediction from our attention model, not data from your real visitors, so use it to decide where to look first.

Plans are $99, $249 or $499 a month (Starter, Growth and Scale). Start your free week, and you see your first report before you pay. You save a card at signup, and nothing is charged until 3 days after your first report. Cancel before then and you pay nothing, and any charge can be refunded within 14 days. How the free week works.