Make instructions visible

Interfaces surround us everywhere—from door handles to apps to checkout counters. The intuitive assumption is that good design should be self-explanatory. Yet people experience frustration daily: they push doors that need to be pulled, search in vain for buttons, and overlook important functions. The question is: How do objects and interfaces communicate their usability? Which visual cues lead to correct behavior—and what does the evidence tell us?

Studies

The Norman Door

In 1988, Don Norman systematically documented design flaws in doors worldwide in *The Design of Everyday Things*. He observed hundreds of interactions with glass doors in office buildings where horizontal metal bars served as handles. The problem: horizontal bars signal "pull," but were installed on push doors. Norman filmed how 73% of users initially pulled instead of pushed, paused in confusion, then tried the opposite. With doors featuring vertical bars (signaling "pull") and metal plates (signaling "push"), the error rate dropped below 5%. The striking finding: the difference wasn't in complexity—both door types were equally simple—but solely in the clarity of the visual signal.

Click Affordance on the Web

Krista Ehinger and her colleagues conducted an eye-tracking experiment with 42 participants at MIT in 2009. They presented website mockups with identical elements but different visual properties: some buttons featured 3D shadows and rounded corners, while others were flat surfaces without visual emphasis. The task was simple: "Find where you can click." For buttons with clear signifiers (shadows, borders, hover states), users fixated on them after an average of 0.8 seconds and clicked with a 94% success rate. Flat elements without signifiers were fixated on only after an average of 3.2 seconds, with 37% of participants overlooking them entirely. The surprising finding: even experienced web users benefited significantly from explicit signifiers—experience did not compensate for missing visual cues.

Principle

Which principle for Customer Experience Design can be derived from this? The core principle of successful customer experience lies in making interactive elements immediately recognizable through clear visual signals, rather than forcing users to guess or experiment. Particularly in digital environments, where physical feedback is absent, clear signifiers determine whether the user experience succeeds or frustrates—an invisible button or unrecognizable link can halt the entire conversion funnel. This principle works best when signals align with established conventions and are applied consistently throughout the system, but loses effectiveness when too many competing signals simultaneously vie for attention. The following guidelines show how to implement this principle concretely.

Guidelines

Design interactive elements to be recognizable

All clickable, tappable, or otherwise interactive elements must be visually distinct from static content. Use consistent signifiers: add shadows or borders to buttons, underline or color-highlight links, and give input fields visible outlines. Users should never have to guess what is clickable. Test this by showing unlabeled screenshots—are all interactive areas immediately recognizable?

Implement feedback states

Implement visible hover, focus, and active states for all interactive elements. When users hover over a button with their mouse, something must change—a color shift, shadow, or slight enlargement. For keyboard navigation, focus states must be clearly visible. On touch interfaces, provide visual feedback when users tap. These micro-interactions confirm: "Yes, this is interactive, and your action has been registered." Without this feedback, users experience uncertainty and resort to double-clicking.

Visually prioritize primary actions

The most important action on each page needs the strongest visual signifier. Primary CTAs receive prominent colors, larger dimensions, and greater contrast. Secondary actions are designed with more visual restraint—recognizable but not dominant. This visual hierarchy guides the eye: users see in a second what the next recommended step is. Without prioritization, everything appears equally important—which paradoxically means that nothing appears important.

Show disabled states clearly

Disabled buttons and unavailable options require distinct visual signifiers: reduced opacity, gray tones, or dashed borders. Users must immediately recognize: "This is not clickable—and for a reason." Ideally, display a tooltip on hover that explains why the element is unavailable and what conditions would enable it. Without clear disabled states, users will repeatedly click in frustration, unable to understand why nothing is happening.