Heat Map & Heatmap Style

Historical Context

Heat maps predate digital interfaces by over a century. Tobler's choropleth work in the 1960s formalized what cartographers had been doing intuitively — encoding magnitude through color. The core idea is dead simple: darker means more. Lighter means less. Your brain processes it before you consciously read anything. That's the power. Then Hotjar happened. Around 2014-2015, click heatmaps exploded in UX research. Suddenly every product manager could see where users actually tapped versus where the team assumed they would. FullStory, Crazy Egg, Microsoft Clarity — they all rode the same wave. Heatmaps went from geographic tool to behavioral microscope overnight. The science underneath matters more than most designers realize. Sequential color scales (yellow-to-red, white-to-blue) work because human color perception is non-linear. We're terrible at comparing areas but excellent at reading gradients. Rainbow palettes look fun but distort data — they create false boundaries where none exist. Perceptually uniform scales like viridis exist for a reason. Use them.

When to Use

Reach for heatmaps when density and distribution matter more than individual data points. They shine in analytics dashboards showing user engagement patterns, server load across time, geographic concentration of events, or A/B test click distributions. Don't use them for small datasets — below ~50 data points, a simple table communicates better. They're also wrong for precise value comparison; if stakeholders need exact numbers, pair the heatmap with a tooltip or adjacent table. Best deployed when the question is 'where is the intensity?' not 'what is the value?'

Design Principles

• Use perceptually uniform color scales (viridis, magma, inferno) — never rainbow. Human vision creates false clusters in non-uniform gradients.
• Always include a legend with min/max values. A heatmap without scale context is decoration, not data visualization.
• Limit your matrix to what fits without scrolling. If users can't see the full pattern at once, the gestalt advantage disappears entirely.
• Provide progressive disclosure: overview first through color, then exact values on hover or focus. Two layers of information, one surface.
• Ensure accessibility beyond color alone — offer numeric overlays, pattern fills, or high-contrast mode. Roughly 8% of men have color vision deficiency.

Technical Specs

Related

Dados & Infografico

Data-Dense Dashboard

Dados & Infografico

Executive Dashboard

Dados & Infografico

Real-Time Monitoring

Dados & Infografico

Drill-Down Analytics

Dados & Infografico

Comparative Analysis Dashboard