Clickability in Interfaces: Signs and Design Principles

What Is Clickability

Clickability is the degree to which an interface element visually communicates to the user that interaction is possible. In UX design terms, this is part of the concept of affordance, introduced by psychologist James Gibson.

Designer Don Norman popularized the concept of affordance in relation to interfaces. In the book “The Design of Everyday Things” (2013), he described how the shape and appearance of an object should suggest how to use it. A button should look like a button — that is the affordance of clickability.

According to UX Collective (2025), 34% of users do not click on an element if it does not look clickable, even if the click is technically handled. This highlights the importance of visual feedback in the interface.

Anti-pattern: Non-clickable Buttons

Text without underlining, flat icons without highlights, gray elements without a pointer cursor — these are classic anti-patterns where an element is interactive but does not look it. Users waste time searching for clickable areas, which degrades UX.

Visual Affordances of Clickability

Visual affordances are external cues that signal interactivity. They fall into several categories: shape, color, shadow, texture, and animation.

Humans have evolved to understand that objects with certain visual properties can be touched or moved. Designers use these innate perception patterns to create intuitive interfaces.

The strongest affordance is shadow (the raised effect). Google's Material Design is built on the metaphor of physical layers, where each interactive element has its own elevation. Users intuitively understand that a card with a shadow can be clicked.

Interactive Element States

Every clickable element must have at least four states: normal, hover, active, disabled. Visual differences between states help the user understand the current situation.

/* Interactive element states */
.btn {
    background: #4A90D9;
    transition: all 0.2s ease;
}

.btn:hover {
    background: #357ABD;  /* Darker on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:active {
    transform: scale(0.97);  /* Press effect */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Normal state — the basic appearance of the element at rest. Hover state — the reaction when the cursor hovers, confirming the element is ready for interaction. Active state — the moment of clicking, providing tactile feedback. Disabled state — the element is inactive and visually dimmed.

According to Google Material Design Guide (2024), the minimum touch target size for touch devices is 48x48 dp, and the optimal size is 56x56 dp. Smaller sizes reduce clickability on mobile devices.

Cursor as a Clickability Indicator

Cursor change is one of the oldest and most effective ways to indicate clickability. The CSS property cursor: pointer turns the arrow into a pointing hand, signaling that the element is interactive.

/* Standard cursor values */
.clickable {
    cursor: pointer;   /* Pointer for buttons and links */
}

.moveable {
    cursor: grab;      /* Grab cursor for drag */
}

.resizable {
    cursor: ew-resize; /* Resize cursor for width */
}

The pointer finger rule: cursor: pointer should be used on all clickable elements — buttons, links, toggles, icons. On elements that are not interactive, the cursor should remain the standard arrow (cursor: default).

Usage mistakes: cursor: pointer on regular text misleads users. Do not use the pointer cursor on elements that do not handle a click — this destroys trust in the interface.

Fitts's Law in Button Design

Fitts's Law is an ergonomic law describing the time needed to reach a target. In the context of interfaces: the larger and closer the target (button), the faster the user will hit it.

Fitts's Law formula: T = a + b * log2(D / W + 1), where T is the time to reach, D is the distance to the target, and W is the target size. Doubling the button size reduces click time by 15–20%.

According to Apple Human Interface Guidelines (2024), the minimum touch target size is 44x44 points. Google Material Design recommends 48x48 dp. In practice, CTA buttons should be at least 56x56 dp for comfortable interaction.

Screen Corners — Infinite Targets

Screen corners and edges are infinite targets according to Fitts's Law — the cursor cannot miss beyond the screen boundary. That is why important buttons (menu, close) are often placed in corners. In mobile interfaces, thumbs naturally reach toward the bottom of the screen.

Clickable Element Patterns

Established clickability patterns have formed over decades of web design. Using them makes interfaces intuitive without user training.

Shadow button pattern — the Material Design standard. The button is raised above the surface, the shadow increases on hover and disappears on click. This pattern is used in millions of apps and websites.

Flat button pattern — after the iOS 7 update, flat design without shadows became popular. In such buttons, clickability is conveyed through color, border, or icon. Flat buttons require more vibrant color accents.

Ghost button pattern — a transparent button with a border that fills with color on hover. Used for secondary actions next to the primary CTA.

• Follow platform conventions — iOS, Android, and the web have their own clickability standards
• Consistency — the same elements look the same everywhere
• Feedback — every click should have an instant reaction
• Accessibility — clickability must be understandable even when using a screen reader