Website heatmap examples: ten common patterns and what they mean

Page type: ecommerce product page. Map type: click map.

The product photo is the hottest spot on the page. Clicks pile up on the main image and the thumbnails beside it, and nothing happens when they are clicked. The "Add to cart" button below is a lukewarm orange.

This is the most common dead click on the web. Baymard Institute's 2020 product-page research found that for more than half of shoppers, the first thing they do on a product page is start exploring the images. Zoom is so common that shoppers assume every product image will do something when clicked or pinched. When it doesn't, the shopper is a little less sure about the product. What is a click map explains how dead clicks are counted.

What to change: make the image do what people expect. Add zoom, let thumbnails switch the main photo, and support pinch and double-tap on phones.

Page type: ecommerce category page. Map type: click map.

A category page exists so shoppers can browse. On this one the search box in the header is one of the most-clicked elements, hotter than the filters. The filter panel itself is almost cold.

Jakob Nielsen wrote in 2001 that search is people's escape hatch when they are stuck in navigation, and the observation has aged well. A shopper who lands on "Women's shoes" and types "waterproof boots" into search is telling you the categories and filters don't match how they think about the product.

What to change: read your site-search logs for the terms people type from category pages, then turn the common ones into visible filters or sub-categories. A hot search bar on the homepage is normal. A hot search bar on a category page is a navigation problem wearing a search costume.

Page type: ecommerce cart page. Map type: click map, paired with the exit rate.

The cart page has a hot spot that isn't the checkout button. It's the "Promo code" field. Clicks land in the field and on its Apply button, and the page has a high exit rate.

Baymard's checkout studies describe exactly this. Shoppers treat an empty form field as a task to complete, and an empty coupon field makes people without a code feel they are overpaying. In Baymard's tests a handful of participants left the site to hunt for a code, and the odds of them finishing the purchase fell sharply.

What to change: collapse the field behind a plain "Have a promo code?" link, and apply promotions automatically where you can. Re-check the click map and the exit rate in a couple of weeks. How to reduce checkout abandonment covers the rest of the checkout.

Page type: B2B SaaS homepage. Map type: click map, then scroll map.

The big "Start free trial" button in the hero is barely warm. The hottest element on the page is the word "Pricing" in the navigation.

Two things are usually going on. A hero that looks like a billboard gets treated like one. Nielsen Norman Group's 2018 banner blindness study found that people skip page elements they take to be ads, including real content that shares an ad's placement or styling. And software buyers often arrive with one question, the price, and the hero is asking them to commit before it has answered it.

What to change: check the scroll map before touching the button. If the hero fills the first screen and the map goes cold right under it, the hero is acting as a false bottom (example 6) and the fix is layout. If people scroll and still skip it, put the price or a one-sentence description of the product in the hero. Bigdelta's attention map, for example, is built around one check here: whether the hero earns the space it takes.

Page type: B2B SaaS pricing page. Map type: move (hover) map and click map.

The mouse-movement map shows a dense cluster on one region of the plan comparison table. Often it's a single row, a feature name with a small "i" icon beside it. Clicks gather on the tooltip icon and on "Contact sales" rather than the "Choose plan" buttons.

Nielsen Norman Group's 2020 eyetracking of comparison tables found that people work through them row by row in a back-and-forth "lawn mower" motion and stall on cells that don't explain themselves. A hover cluster on one row is that stall made visible. Hover maps are the least precise of the four types, so treat the cluster as a strong hint rather than proof.

What to change: rewrite the cell the cluster sits on so it answers the question without a tooltip. "Up to 10,000 visits a month" beats "Traffic limits apply". If the cluster sits on a limit, say what happens when a customer crosses it.

Page type: blog, long article. Map type: scroll map.

The scroll map fades from red to blue far earlier than the article's length would suggest, and the fade is abrupt. It happens right below a full-width image, a big pull quote with white space around it, or a horizontal rule with a newsletter box. The half of the article below that line was seen by a small minority.

Nielsen Norman Group calls this the illusion of completeness. In their 2016 write-up, a page with a large autoplaying video at the top looked finished to six of eight test users, who never realised there was more below. Anything that looks like an ending gives people permission to stop, and people were ready to stop anyway. NNG's 2018 eyetracking found a bit over half of viewing time still goes to the part of the page visible before scrolling, with a sharp fall right after it. A gradual fade on a scroll map is that natural decline. A cliff is a false bottom.

What to change: let the next section visibly start before the current one ends, so the top of the next heading peeks above the break. Narrow the full-width elements and move the newsletter box to the end. Scroll depth tracking explains how to turn the before-and-after into a number.

Page type: blog article with a right-hand sidebar. Map type: click map and attention map.

The article column is warm the whole way down. The sidebar to its right, holding related posts and a signup box, is grey. Almost nobody clicks anything in it, and on the attention map it registers as if it were empty.

This is learned behaviour. Nielsen Norman Group described "right-rail blindness" in 2013: after years of the right column carrying ads, people trained themselves to skip it. The typical comment in their usability tests was "I saw that, but it looked like an ad, so I ignored it." NNG's 2018 banner blindness study put a number on it, with a right column next to ads drawing about 33 times less attention than its share of the page would predict.

What to change: put the links you care about in the article, where the clicks already are. Related posts belong at the end of the piece or inline after a relevant paragraph. If the sidebar has to stay, make it look like the content rather than a boxed advert: same typography, no borders, and different suggestions on different pages.

Page type: lead-gen contact or quote form. The same pattern shows up on SaaS signup forms. Map type: click map on the form, or a form-analytics view if your tool has one.

Reading the form from the top, the fields are warm one after another. Name, email, company. Then one field, and everything below it, goes cold. The submit button is the coldest element on the page.

The field where it dies is usually the one asking for something the visitor doesn't want to give. The required phone number is the standout offender. One form-analytics vendor's 2025 benchmarks put it at roughly a third of abandoners quitting on that field, and making it optional roughly doubles the number who fill it in. Form abandonment covers the reasons in detail.

What to change: delete the question if you can, make it optional if you can't, and say why you are asking in a line under the label if you must keep it.

Page type: lead-gen service page. Map type: click map and scroll map together.

The header has a "Get a quote" button. The footer has a plain "Contact us" link, a phone number and an address. The footer link gets more clicks than the header button, and the scroll map shows a large share of visitors reaching the bottom of the page.

Nielsen Norman Group's 2019 footer research describes two reasons people end up there. Some read the whole page, didn't find what they wanted, and use the footer as a second chance or a last resort. Others go there on purpose, because they expect contact details and company information to live at the bottom. Either way, the visitor read to the end and then went looking for a human.

What to change: work out which of the two it is. If the scroll map shows people reading the whole page first, the page is missing something they needed before committing, often a price range, a service area or a photo of the actual people. If they head straight for the footer, they came to call you, so put the phone number in the header as well and make it tappable. Leave the footer alone. It's working.

Page type: lead-gen booking page, on phones. Map type: mobile click map, read separately from desktop.

On the mobile map, taps gather in the lower and middle part of the first screen: the service list, the first available time slot, and a "Book now" bar fixed to the bottom of the screen if the page has one. The small icons in the top corners of the header are pale. There may also be a smear of taps on plain text that corresponds to nothing clickable.

The grip explains most of it. Steven Hoober's 2013 field study observed 1,300 people using phones and found about half of those touching the screen held the phone in one hand and did everything with one thumb. The top corners need a stretch or a change of grip, and phones have only grown since. The stray taps on text are usually noise: heatmap vendors warn that people on phones sometimes tap just to stop the page scrolling, so a cluster on plain text that is cold on the desktop map can be ignored.

What to change: put the booking action where the thumb already is. A bar fixed to the bottom of the screen with one clear button does more than a corner icon ever will. Keep tap targets big and make the phone number a one-tap call. And always read the mobile map on its own. Mixing desktop and mobile taps into one picture paints them onto the wrong layout.

You won't find all ten on one site, and you don't need to.

If you run a shop, open the click map on your best-selling product page and look for the dead-click image (example 1), then open the cart page and look for the coupon field (example 3). The search bar (example 2) points at your whole navigation.

If you sell software, start with the homepage scroll map to rule out a false bottom under the hero (examples 4 and 6 together), then open the pricing page hover map and find the row where people stall (example 5).

If you write for a living, check your three most-read articles for a false bottom (example 6), then check whether your related posts live in a sidebar nobody sees (example 7).

If you take enquiries or bookings, the form (example 8) comes first, because that is where leads leak. Then compare the header button with the footer link on your main service page (example 9), and read the mobile map of the booking page on its own (example 10).

Whichever you start with, treat what the map shows as a hypothesis. How to analyze a heatmap covers the discipline: enough visits before you trust a pattern, mobile and desktop read separately, and a second source before you redesign. The quickest second source is a few recordings of the visits behind the hot spot. In Bigdelta, for example, you can click a hotspot on the map and watch the sessions behind it. Heatmaps vs. session replay explains when each is the right tool.