Signifiers

Affordances and signifiers work together, but they serve different purposes. Affordances are visual cues about actions you can perform on an object based on its design and the user’s capabilities. For example, a door handle affords pulling if it sticks out, while a flat plate on a door affords pushing.

Watch our video to learn more about affordances:

Meanwhile, signifiers communicate what an action achieves. They provide cues that guide user behavior so users can use the item as intended. A “PULL” sign on a door, an arrow on a touchscreen button, or an icon on a software interface are all signifiers.

Watch our video to learn more about signifiers:

Users must perceive signifiers if they’re to be useful (i.e. useful signifiers). Good design ensures that signifiers effectively highlight the right affordances. For example, a recessed handle on a sliding door suggests pulling, but without a signifier like an arrow, users might not realize in which direction to pull. A good example of an affordance in a UI is a toggle switch, with visible on and off positions and a slider. It matters a lot whether users notice them since if they don't they will not interact with it. The signifier here is the text or icon that tells users what is being switched on or off. Effective UX design balances both for clarity and usability.

Signifiers are crucial in UI design because they guide users by clearly showing what actions mean in an interface. Without them, users may struggle to understand how to interact with it—and then get confused, frustrated, and maybe even leave.

Good signifiers help users navigate a design effortlessly. For example, a play button shaped like a triangle immediately signals its function, while a grayed-out button suggests it’s disabled. Buttons that look clickable use affordances. What the buttons do are signifiers.

Signifiers reduce cognitive load by making interactions intuitive. Users shouldn’t have to guess or rely on trial and error—which works against the seamless experience they should enjoy. Instead, the interface should naturally communicate what’s possible.

When signifiers are clear and consistent, users feel more confident and in control, which gives them a better overall experience. Designers who create effective signifiers bridge the gap between user expectations and how their interfaces work.

Take our course covering aspects of signifiers, affordances and more.

Watch our video to learn more about signifiers:

Examples of signifiers—which help users understand what actions they can take on digital interfaces—include buttons with clear labels, icons indicating functionality, and visual cues like color changes or shadows.

Clickable buttons often use contrasting colors and hover effects to show interactivity. Hyperlinks appear in blue and underline when hovered over, signaling they’re clickable. Icons—such as a magnifying glass for searching or a trash bin for deleting—provide intuitive guidance.

Form fields use placeholder text or floating labels to indicate where users should type. Disabled buttons appear grayed out to show they’re inactive. Loading spinners or progress bars show users that an action is in progress.

When designers create effective UI designs with clear visual cues like this, they improve usability and reduce confusion. This results in intuitive digital experiences that enhance user engagement and satisfaction.

Watch our video to learn more about signifiers:

Take our course covering aspects of signifiers, affordances and more.

Color and contrast play a key role in UX design as they act as signifiers that guide user behavior. Bright, high-contrast buttons stand out and signal interactivity, while muted or gray buttons suggest inactivity.

For example, a red button often signals urgency or a destructive action. For example, if you’re about to delete an item, you’d want this button to “jump” out and warn you—which red tends to do. Meanwhile, a green button suggests confirmation or success—and green is a more “positive” color that reassures users. By convention, links are blue and underlined to indicate they’re clickable.

Contrast also improves readability and accessibility—vital considerations in design and often a legal requirement in the case of accessibility. High contrast between text and background ensures legibility, while low contrast can indicate secondary information.

Good UX and UI design involves leveraging color and contrast to create intuitive, visually clear interactions. When effective, these elements reduce confusion, improve usability, and safeguard users from making errors. They also make digital experiences more engaging and accessible for all users, whoever they are and whatever they’re doing.

Take our Master Class How to Use Color Theory to Enhance Your Designs with Arielle Eckstut, Author and Co-Founder of The Book Doctors and LittleMissMatched, and Joann Eckstut, Joann Eckstut, Color Consultant and Founder - The Roomworks.

Animations act as powerful signifiers in UX design since they provide visual feedback and guide user interactions. They help users understand what’s happening on the screen and what actions they can take.

For example, a button that slightly expands when hovered over signals that it’s clickable. A loading spinner reassures users that the system is processing their request and that they should wait (within reason) for the system response to complete. Slide-in notifications grab attention, while subtle fade effects indicate transitions between states.

Animations also enhance usability by directing focus. For example, a shaking input field signals an error and prompts users to correct their input. Meanwhile, a smooth page transition prevents users from feeling lost when navigating.

When designers use them thoughtfully, animations improve user experience by making interactions more natural and responsive. However, excessive or distracting animations can work against usability and irritate users. The best UX designs use animations to create clarity, reinforce affordances, and make digital experiences feel intuitive and engaging.

Watch our video to learn more about signifiers:

Take our course covering aspects of signifiers, affordances and more.

Yes, text labels are essential signifiers in UX and UI design, as they provide clear instructions and help users understand an interface. Well-written labels remove ambiguity, help make interactions intuitive and reduce the risk of user errors.

For example, a button labeled “Submit” tells users exactly what will happen when they click it, while a vague label like “OK” can cause confusion. Form field labels—such as “Email Address”—clarify what information users need to enter. Navigation menus with clear text—like “Home,” “Shop,” or “Contact Us”—are tried-and-tested ways to guide users effectively.

Well-designed text labels are concise, specific, and put near interactive elements. However, poorly designed ones—such as jargon-filled or missing ones—force users to guess, leading to frustration or even anger if users feel misled into taking destructive actions like deleting information when they didn’t mean to do so.

Using descriptive, well-placed labels is vital because they improve usability, accessibility, and user confidence. Clear text signifiers create a seamless digital experience and help users navigate and interact effortlessly.

Learn more about how to design buttons:

Take our course covering aspects of signifiers, affordances and more.

It’s particularly important to use clear signifiers in mobile design—to improve usability and ensure a smooth user experience—as mobile screens are smaller. Therefore, every visual cue must be intentional and intuitive on that reduced screen real estate, and here are some best practices:

Use familiar icons—a hamburger menu for navigation, a magnifying glass for search, and a trash bin for deleting. These universally recognized symbols help users understand functionality quickly.

Ensure buttons look tapable by using contrasting colors, shadows, or borders. A flat design without clear signifiers can leave users guessing—and frustrate them.

Provide visual feedback—buttons should change color or animate when tapped to confirm interaction. Loading spinners and progress bars reassure users that the app is responding.

Use clear labels when they’re needed, to complement an icon. Not all icons are obvious, so pairing them with text (e.g., “Save” under a floppy disk icon) prevents user confusion.

Keep gestures intuitive—swiping, pinching, and long-pressing should feel natural and have subtle visual cues to support them.

Effective signifiers make mobile navigation effortless and engaging—helping keep the experience seamless between user and brand.

Take our course covering aspects of signifiers, affordances and more.

Watch our video to learn more about signifiers:

Designers often make critical mistakes with signifiers that confuse users and hurt usability. One common mistake is using unclear or even missing signifiers. If buttons don’t look tappable or links don’t stand out, users may struggle to navigate—and even abandon the interface and have nothing to do with the brand again.

Another issue is relying too much on icons without labels. Not all icons are universally understood. A floppy disk means "save" to some, but there’s a chance that others may not recognize it. Pairing icons with text improves clarity—and reduces the risk of confusion.

Inconsistent design is another problem. For instance, if one button has a shadow and another doesn’t, users may not know which is clickable. Consistency in colors, shapes, and interactions reinforces usability—and trust in the UI (and the brand behind it).

Some designers overuse animations or flashy effects, too, making interfaces feel cluttered instead of helpful or even irritating—or worse (think of what might happen if users with light-triggered epilepsy see flashing lights). Signifiers should be subtle yet clear.

The best UX designs use intuitive, consistent, and well-placed signifiers to guide users effortlessly around an interface—reducing confusion and improving overall experience for them.

Take our course covering aspects of signifiers, affordances and more.

Watch our video to learn more about signifiers:

Cultural differences have a significant impact on how users interpret signifiers in UX design. Colors, icons, and gestures can have different meanings across cultures, and so they can affect usability and user experience.

For example, color symbolism varies—red signifies danger or warning in Western cultures but represents luck and prosperity in China. A thumbs-up icon means approval in many countries, but—beware—it is offensive in parts of the Middle East.

Text-based signifiers also differ. Certain words or abbreviations may be unclear or misinterpreted by non-native speakers. Using simple, universally understood language is wise—it improves accessibility.

Gestures and icons can also create confusion and work against a design’s user-friendliness. For example, a mail icon might clearly represent email in Western cultures, but it might be less intuitive elsewhere. Designers should research target audiences and test designs with diverse users to ensure they can “get” the meaning of each signifier and enjoy intuitive and seamless experiences.

Watch as Author and Human-Computer Interaction Expert, Professor Alan Dix explains important points about how to design with culture in mind:

Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.

In this update to his seminal work, UX Pioneer Don Norman introduces the concept of signifiers, referring to perceivable cues that indicate how users can interact with a design. The book emphasizes the importance of intuitive design and has been instrumental in shaping user-centered design principles.