Dead Clicks in Microsoft Clarity: What They Mean and How to Fix Them

Dead clicks happen when users click on something and nothing happens — no navigation, no state change, no visual feedback. They're quieter than rage clicks but often more damaging because users don't always retry. They just leave.

Dead clicks vs. rage clicks: What's the difference?

Both are frustration signals, but they represent different user behaviors:

Rage clicks indicate active frustration — the user is fighting your interface. Dead clicks indicate passive confusion — the user tried something, it didn't work, and they adapted. Both hurt your UX, but dead clicks are sneakier because users often don't complain. They just silently miss the interaction you intended (or interact with something you didn't intend).

Where to find dead clicks in the Clarity dashboard

Dashboard overview

The main dashboard shows a "Dead clicks" metric alongside other frustration signals. Click the number to see affected sessions.

Recordings filter

Go to Recordings and filter by Dead clicks under frustration signals. This shows all sessions where at least one dead click occurred. Watch a few recordings to see exactly which elements users click on.

Heatmaps

Open the heatmap for any page. Look for click clusters on non-interactive elements — text paragraphs, images, decorative elements. These are likely dead click sources.

Clarity Copilot

Ask Copilot: "Which pages have the most dead clicks?" or "Show me elements with the highest dead click rate." The AI can quickly surface problematic areas.

The 7 most common causes of dead clicks

1. Images that look like buttons or links

This is the most common cause. A product image, a banner, or an icon that users expect to be clickable — but has no link wrapper.

Example: A product listing page shows product images. Users click the image expecting to see the product detail page, but only the product name below is linked.

Fix: Wrap images in links. If an image represents something users can interact with, make the entire image clickable.

<!-- Before: dead click on image -->
<div class="product-card">
  <img src="product.jpg" alt="Widget Pro">
  <a href="/products/widget-pro">Widget Pro</a>
</div>

<!-- After: entire card is clickable -->
<a href="/products/widget-pro" class="product-card">
  <img src="product.jpg" alt="Widget Pro">
  <span>Widget Pro</span>
</a>

2. Disabled form elements without visual cues

A submit button that's disabled but looks exactly like an active button. Users click it, nothing happens, and they don't understand why.

Fix: Make disabled states visually obvious — use reduced opacity, change cursor to not-allowed, and consider showing a tooltip explaining why the element is disabled.

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
}

3. Text styled like links

Any text that's blue, underlined, or otherwise styled like a link — but isn't actually a link. Users have been trained for 30 years that blue underlined text means "click me."

Fix: Audit your CSS for accidental link-like styling on non-interactive text. If text communicates important information, style it differently from links (use bold, a different color, or a background highlight instead).

4. Cards without click handlers

Card-based layouts where the card has a shadow, border, and hover effect — but clicking the card body does nothing. Only a small "Read more" link at the bottom is actually interactive.

Fix: Make the entire card clickable. Use a stretched link pattern:

.card {
  position: relative;
}

.card a::after {
  content: '';
  position: absolute;
  inset: 0;
}

This makes the link's click area cover the entire card without duplicating the <a> tag.

5. Icons without tooltips or click handlers

Social media icons, info icons, or action icons that are purely decorative. Users see an icon and assume it does something.

Fix: If an icon is decorative, make it smaller and less prominent. If it should be interactive, wrap it in a button or link. For informational icons, add a tooltip with title or a proper tooltip component.

6. Overlapping elements stealing clicks

An invisible or transparent element positioned on top of the interactive element, intercepting the click. This often happens with:

• Overlay divs left from closed modals
• Absolutely positioned elements with high z-index
• Cookie consent banners that don't fully close
• Fixed position headers overlapping content below

Fix: Use your browser dev tools and check what element actually receives the click. Look for unexpected z-index stacking. Remove or hide overlay elements when they're not active.

7. Unresponsive JavaScript widgets

Interactive widgets (tabs, accordions, toggles) that depend on JavaScript which hasn't loaded yet, threw an error, or was blocked by an ad blocker.

Fix: Use progressive enhancement. Make your base HTML functional without JavaScript where possible. For elements that absolutely require JS, show a loading state until the JavaScript is ready. Test with JavaScript disabled to see what breaks.

A systematic approach to reducing dead clicks

Don't try to fix every dead click. Focus on the ones that impact user goals. Here's a priority framework:

Step 1: Identify the top 5 pages by dead click volume

Use the Clarity dashboard or API to find which pages generate the most dead clicks. These are your targets.

Step 2: Watch 10 recordings per page

For each high-dead-click page, watch at least 10 session recordings filtered by dead clicks. Note:

• Which exact element did users click?
• What did they do after the dead click? (Leave? Try something else? Scroll?)
• Is there a pattern in device type? (Mobile vs. desktop?)

Step 3: Classify each dead click

For each dead-click element, decide:

1. Should it be clickable? If yes, add the link/handler. If no, change the styling so it doesn't look clickable.
2. Is it blocking a user goal? A dead click on a product image that prevents users from reaching the product page is high priority. A dead click on a decorative heading is low priority.

Step 4: Fix and measure

Deploy your fixes and check the dead click rate on those pages after 5-7 days. You should see a clear decrease. If not, watch more recordings — you might have fixed the symptom but not the root cause.

Dead clicks as a design feedback tool

Dead clicks aren't always bugs. Sometimes they're design feedback. If hundreds of users click on a product image expecting to see a larger version, that's not a bug — it's users telling you they want image zoom functionality. If users click on pricing numbers expecting a breakdown, they're asking for more detail.

Use dead click data as a source of feature ideas. What do users expect your page to do that it currently doesn't?

Monitoring dead clicks over time

Dead click rates should trend downward as you fix issues. But they can also spike when you deploy new designs or features. Make dead click monitoring part of your post-deployment checklist.

If you use the Clarity Data Export API, you can automate this. Pull dead click counts daily, store them in a database, and alert when the count exceeds a threshold. ClarityInsights does this automatically — tracking dead click trends per page across weeks and flagging regressions in your weekly report.

When dead clicks are acceptable

Not every dead click is a problem worth fixing:

• Text selection clicks — users clicking to start selecting text. These register as dead clicks but are normal behavior.
• Accidental clicks — especially on mobile, users tap accidentally while scrolling. These are noise.
• Copy-paste clicks — clicking on code snippets or email addresses to select and copy them.

When analyzing dead click data, look for patterns, not individual clicks. A single dead click on a random paragraph is noise. Fifty dead clicks on the same image across different sessions is a signal.

Bottom line

Dead clicks reveal a gap between what your design communicates and what it actually does. Every dead click is a moment where a user's mental model of your page didn't match reality. Fix the high-impact ones first — elements on conversion paths, navigation items, and product interactions. Let the low-impact ones inform your backlog of design improvements.