Interaction slop and clusters

A page can look carefully designed while loading, error, empty, disabled, partial-success, and offline states fall back to generic components.

Check every consequential component for:

• default;
• hover;
• focus-visible;
• active;
• loading;
• disabled;
• error;
• success;
• empty;
• partial success;
• long-running state where relevant.

A product's visual quality should survive real system behavior.

Generated interfaces are strong in the default state and weak everywhere else, because the default state is what a prompt describes and what a screenshot shows. The other states stay invisible until something goes wrong, so they inherit whatever the component library does, which is usually a raw browser message or nothing at all.

The empty state deserves the most attention in that list. It is the first thing a new account sees, it is where a product explains what a screen is for, and it is the state a template has the least reason to design. A table that renders column headers over nothing tells a new user the product is broken.

Error states carry the second cost. A message that names what failed, says whether the action can be retried, and states what to do next turns a dead end into a task. Something went wrong does none of that, and it appears in generated interfaces more than any other error string.

Generated marketing surfaces often contain controls that look interactive because the visual pattern expects them.

Examples include:

• segmented controls that do not change content;
• search inputs that are screenshots;
• fake command bars;
• buttons that scroll to generic sections without clear purpose;
• links labeled Canonical URL that open the page the reader is already on;
• breadcrumbs on an index that repeat the active navigation item without adding a parent destination;
• dashboard filters that do nothing in prototypes promoted to production.

A control should either act or be presented clearly as an illustration. A breadcrumb to a real parent page still helps orientation; a copy-URL action can help when the reader needs the current address.

Dead controls cost more than decoration, because they consume a decision rather than attention. Someone who clicks a segmented control and sees nothing change does not conclude that the control is fake. They conclude they misunderstood the product, then either try again or stop trusting the rest of the interface.

Keyboard and assistive-technology users pay the larger share. A focusable element with a button role joins the tab order and is announced as an action, so a decorative control adds a stop on a path that leads nowhere. Anything that does not act should not be focusable and should not carry an interactive role.

Illustrations of an interface are legitimate and common on marketing pages. Make the framing honest: place the mock inside a figure, remove the focusable elements, and let it read as a picture of the product rather than the product itself.

Agents sometimes add confirmation dialogs to every mutation because confirmation seems safe.

Repeated low-risk confirmations create interaction slop. They interrupt common work and make high-risk confirmations less distinctive.

Use confirmation according to consequence. Prefer undo or reversible actions for routine operations when the system can support them.

Confirmation is a tax on the frequent case, paid to protect the rare one. A dialog in front of an action someone performs forty times a day stops being read after the third time, and that is the failure: the habit of dismissing dialogs transfers to the one dialog that mattered.

Match the friction to the damage. Cheap and reversible actions need no interruption and an undo affordance. Expensive or irreversible actions need a dialog that states scope in numbers. Destructive and unrecoverable actions justify typed confirmation, and that device only works while it stays rare.

A confirmation that cannot name what it protects is usually unnecessary. When the dialog body would say are you sure? and nothing more, the product has not identified a consequence worth the interruption.

A green dot, amber border, colored badge, or pulse animation implies state.

Verify that the state is real and consistently mapped. Remove status decoration that does not correspond to system state.

Status color is the strongest promise an interface can make with the least text, which makes a false one expensive. A green dot beside a service name reads as checked recently and healthy. If the dot is hard-coded, the interface is reporting a fact it never measured, and the first reader who trusts it during an outage will not trust it again.

Consistency matters as much as truth. Amber has to mean the same thing on the dashboard, in the table, and in the notification, or readers build no mapping at all. Write the mapping down beside the tokens, keep the set small, and pair every status color with a word or an icon so the meaning survives color-vision differences and forced-color modes.

Pulse animation deserves its own check. A pulse says something is happening now. On a value that refreshes once an hour it reports activity that does not exist.

A progress bar should represent real progress or clearly communicate indeterminate activity.

Decorative percentages, arbitrary jumps, and progress bars that stall at predetermined values are examples of interaction slop because they create false precision.

A determinate bar is a prediction, and readers use it to decide whether to wait, switch tabs, or leave. A bar that reaches 90% in a second and holds there for a minute teaches them the number means nothing, which removes the only reason to show it.

Choose the indicator from what the system actually knows. Use a determinate bar when the total is known and progress is measured against it. Use an indeterminate indicator when work is running but unquantified. Use a step list when the phases are known and their durations are not, which covers most imports, builds, and deploys and tells a reader more than any percentage would.

Anything that can run past a few seconds also needs the honest extras: elapsed time, what is happening now, and a way to leave without losing the work.

A list row that slides sideways on hover draws attention to movement rather than the destination. If the displacement communicates no selection, drag affordance, or spatial relationship, it adds motion without information and can make a stable list feel jumpy.

Keep clear hover and keyboard-focus feedback. Color, underline, border, or a focus outline may be enough. Movement remains useful when it explains a real transition or interaction.

Pointer users lose the least here. The cost lands on everyone else, because a translation on hover cannot be perceived by keyboard users at all, so an interface whose only affordance is movement offers them no affordance. The fix is to give focus-visible the same weight as hover rather than to add more motion.

Displacement inside a scrolling list has a second failure. Rows that shift as the pointer crosses them make the list feel unstable during ordinary scrolling, and for readers sensitive to motion the effect compounds down a long page.

Individual signals have low diagnostic value. Clusters are stronger.

The reason is arithmetic. Every signal in this document appears in a large number of deliberately designed products, so acting on one alone produces mostly false positives. Signals become informative when they co-occur, because a deliberate design converges on one or two popular choices and rarely on eight at once.

The dataset behind these patterns shows the same shape from the other direction. No single tell it measured exceeded 2.5% of on-topic comments, and yet sameness dominates the corpus as an umbrella complaint. People are not reacting to purple. They are reacting to purple arriving with everything that usually accompanies it.

Read the lists below as evidence bundles rather than checklists. Three items from one bundle justify a closer look. Six justify a finding. One justifies nothing.

The combination deserves review even though each piece can be legitimate by itself.

Again, the combination is only a finding when the project has no design rationale for it.

Clusters help Layr avoid aesthetic policing, because a bundle can be described back to the team that built the surface. A finding that names eight converging choices opens a conversation about which of them were decisions. A finding that names one color opens an argument about taste.