Lukehle UI anti-patterns
A page can be technically correct and still fail, because it reads as unconsidered. This is the catalogue of tells — each one is a decision that was defaulted rather than made.
Use it as a pre-ship pass. Most items are a one-line fix; the value is knowing to look.
The generated-page signature
These co-occur so reliably that any three of them together read as "nobody chose this":
| Tell | What it signals | Instead |
|---|---|---|
| Purple-to-blue gradient hero | The default of a thousand templates | A flat surface, or a gradient derived from your actual palette |
| Everything in cards | Card as the answer to all grouping | Cards for genuinely separate objects; plain sections otherwise |
| Uniform 8px-radius rounded corners everywhere | One radius applied without thought | A radius scale — tight for dense controls, larger for containers |
| Drop shadows on every surface | Elevation used as decoration | Elevation only where something genuinely floats |
| Emoji as section icons | Filling a visual gap with the nearest object | Typography and spacing do the work, or a consistent icon set |
| Three equal columns of equal-weight content | The grid chose the content | Hierarchy: one thing is most important — show it |
| Centred text in wide containers | No considered measure | Left-aligned, 60-75 characters |
| A glow or neon accent on a business tool | Aesthetic borrowed from an unrelated genre | Restraint; let the data carry it |
| Icons that repeat the label | Decoration mistaken for wayfinding | Drop the icon or drop the word |
| Every number the same size and weight | No hierarchy in the data itself | The headline figure is larger; supporting figures are not |
The underlying pattern: defaults chosen by the tool rather than by a person. The cure is to make each of those a deliberate decision — including deliberately keeping one.
Dashboard clichés
The wall of KPI tiles. Twelve boxes, each with a number and a percentage, none ranked. If everything is a headline, nothing is. Pick the three that drive a decision; the rest belong in a table.
The sparkline with no scale. A tiny line with no axis and no baseline. It reads as "trend" but cannot be measured, and a flat line at high volatility looks identical to a flat line at low volatility. Either give it a reference point or drop it.
The gauge / speedometer. Enormous pixel cost for one number against one threshold. A bullet
chart does the same job in a tenth of the space and adds the comparison (variance-charts).
Percentage-change tiles with no base. "+340%" from 5 to 22 is noise. Show the absolute alongside the percentage, always.
The donut with a number in the middle. The reader looks at the number; the ring is decoration. Just show the number.
Filters that reset the view to empty. A filter combination with no results should say what it filtered out and offer a way back — not present a blank panel that reads as a broken page.
Chart-specific misleads
These are not aesthetic problems. They cause wrong conclusions.
| Anti-pattern | Why it misleads |
|---|---|
| Truncated y-axis on an additive measure | Doubles the apparent size of a small change. Revenue, cash, headcount, ARR all start at zero |
| Dual axes | The crossover point is an artifact of two arbitrary scales. Readers infer causation from a coincidence you created. Use indexed series or two stacked panels |
| 3D anything | Perspective distorts area and hides the back of the chart |
| Pie with more than ~3 slices | Angle comparison is unreliable; ordering is invisible |
| Stacked bars for comparing middle series | Only the bottom series shares a baseline. The middle bands are uncomparable |
| Colour as the only encoding | Fails in greyscale, in print, and for ~8% of male viewers |
| Unlabelled "other" that is the biggest slice | Hides the actual story in a residual |
| Smoothed / interpolated lines through discrete periods | Invents intermediate values that never existed. Monthly data is monthly |
| Connecting across missing periods | Draws a straight line through data you do not have |
| Inconsistent series colours between charts | The same segment being blue here and orange there forces re-learning on every chart |
| A dot plot where the dot area encodes value | Area is judged as roughly the square root of what it is; use position |
False precision
A pervasive failure in finance UIs specifically.
- Do not display more digits than the number has. An ARR figure derived from a rounded extract shown to the cent claims accuracy that does not exist.
- Do not show a computed ratio to two decimals when its inputs are estimates. "LTV:CAC 3.42:1" from an 11-customer sample is theatre.
- Percentage points versus percent. "NRR fell 4%" and "NRR fell 4 points" are different claims. Say which.
- A benchmark without its vintage and stage is not a benchmark. See
chart-annotation.
Density failures in both directions
Too sparse: one number per screen, enormous whitespace, endless scrolling to compare two figures that belong side by side. A finance audience reads dense information for a living; treating them like a consumer landing page wastes their time.
Too dense: every number at the same weight with no grouping, so nothing can be scanned. Density
is fine; undifferentiated density is not. See visual-hierarchy.
The test: can a reader answer the page's main question in under five seconds, and find a specific supporting figure in under fifteen?
Interaction failures
- Hover as the only way to see a value. Dead on touch, invisible in print, inaccessible by keyboard. Hover reveals detail; the primary value must be visible.
- A tooltip that repeats the label. If the tooltip says "Revenue: $4.8M" over a bar already labelled Revenue, it adds nothing.
- No loading state, so the page looks broken for two seconds.
- No empty state, so a legitimate zero-result looks like a failure.
- Disabled controls with no explanation. Say why, or remove them.
- Losing filter state on refresh with no way back to a shared view.
The pre-ship pass
- Would a designer be able to name why each visual decision was made?
- Is there exactly one clear most-important element?
- Does every chart start at zero, or is the truncation defensible and labelled?
- Does every colour encoding survive greyscale?
- Does any number claim more precision than it has?
- Is any value available only on hover?
- Does it look deliberate in both themes, and printed?
- Remove every element that does not change a reader's understanding — what is left?
Related skills
visual-hierarchy— the positive version of the density and ranking itemschart-annotation— labelling, provenance, and the takeaway-title ruledesign-tokens— how to stop defaulting radii, spacing, and colourartifact-accessibility— greyscale, contrast, non-colour encodingartifact-testing— the pass that catches these before publish