What you'll understand by the end of this lesson
- What signifiers are and why they're different from affordances
- The design cues that communicate "click here," "type here," and "scroll here"
- Why ghost buttons and flat design trends can break signifiers
- How to audit your pages for missing or misleading signifiers
The principle in plain English
A signifier is any element of design that communicates what an interface will do — or what a user should do — before they interact with it.
Underlined blue text signals: this is a link, click it. A filled button with text signals: this is an action, press it. A rectangular box with a cursor inside signals: this is a text field, type here. A downward-pointing chevron signals: there is more content below, scroll to see it.
When signifiers are clear and consistent, users move through an interface without friction — they know what to do next without having to figure it out. When signifiers are absent, misleading, or inconsistent, users hesitate. They hover to check if something is clickable. They click something that didn't do what they expected. They miss the action entirely because it doesn't look like one.
The cost of broken signifiers is hesitation. And hesitation is friction. And friction costs conversions.
A simple example
You land on a product page. There's a large blue rectangle with white text that says "Start your free trial."
No one needs to tell you that's a button. The combination of colour, shape, text, and learned convention communicates "click here" so clearly that it functions as a signifier before you've consciously processed it.
Now imagine the same page, but the "button" is just text — same blue colour, same copy, but no background, no border, no visual container. Is it a button? A link? Decorative text? You'd hover to check. That hover is the friction. The half-second of uncertainty is the cost of a missing signifier.
Where signifiers matter in conversion design
Button styling and ghost buttons
The most important signifier on any page is the primary CTA button. It needs to clearly communicate "click me" before the visitor consciously evaluates the label.
Filled buttons — colour background, clear border, legible text — are the strongest button signifiers. They communicate clickability through shape (a rectangle with visible boundaries), colour (different from the surrounding page), and convention (this is what buttons look like on the web).
Ghost buttons — outlined only, no fill — weaken the signifier. The outline creates less visual weight, the clickable area is less clearly defined, and the button looks more like a styled piece of text than a pressable element. For secondary actions, this trade-off is acceptable. For the primary CTA, it risks hesitation at the most important decision point on the page.
Test your primary CTA by looking at it at reduced visual resolution — small screen, quick glance. Does it read immediately as a button? Or does it read as a styled text element that might or might not be interactive? The faster it communicates "press this," the stronger the signifier.
Form fields
A well-signified form field has a visible rectangle, a label above or inside it, and — when focused — a clear indication that it's active (usually a border colour change). These cues communicate: "this is where you type."
Forms that use unusual styles — no borders, minimal visible boundaries, light grey on white backgrounds — create ambiguity. Is this a field or a heading? Is it editable? Users who can't immediately identify what to do with an element are less likely to interact with it.
Links in body text
The convention for inline links is underline + blue colour (or a distinguishable link colour). When body text uses blue-coloured text for non-link purposes — design accents, brand emphasis — it creates misleading signifiers. Visitors hover on decorative blue text expecting a link and find nothing. The convention has been broken, and trust in the page's visual language drops slightly each time.
Interactive elements that don't look interactive
Accordions, expandable sections, and collapsible FAQs need clear signifiers. A section with a down-facing chevron clearly signals "press to expand." A section heading with no interactive indicator signals nothing — users may not realise there's content below it.
When conversion-critical information is hidden behind an interaction that's not clearly signified — a pricing detail in an FAQ accordion without a visible toggle indicator — visitors who don't know it's there won't look for it.
Flat design trends reduced visual cues on buttons and controls — removing shadows, borders, and colour fills in favour of minimal aesthetics. The trade-off is that flat design often weakens signifiers. An element that is clickable doesn't always look clickable in flat design. For aesthetic pages with exploration as the goal, this may be acceptable. For conversion pages where every hesitation costs, signifiers should be explicit even at the cost of a flatter aesthetic.
Consistency as a signifier
Signifiers work partly through convention — learned associations that build up over time. Blue underlined text means link because nearly every website has used it that way for two decades.
When a site uses consistent signifiers throughout, users build a local mental model: "on this site, orange text means important, filled green buttons are primary actions, outlined grey buttons are secondary." Consistency trains the visitor's expectations.
When a site's signifiers are inconsistent — sometimes links are blue, sometimes they're black and underlined, sometimes they're neither but still link — visitors can't build that model. Every interaction requires fresh evaluation. The cognitive load increases and the conversion flow slows.
The CRO audit
Look at your key pages and ask:
1. Is your primary CTA immediately identifiable as a button on first glance?
Look at the CTA at a small size or from a distance. Without reading the label, does it read as a pressable button? If you need to read the text to determine whether it's interactive, the signifier is insufficient.
2. Do your form fields clearly communicate that they're editable?
View your forms in a browser without focusing any fields. Does each field look like somewhere you'd type? Check border visibility, background contrast from the page, and label clarity. Fields that blend into the page background are under-signified.
3. Are your in-text links visually distinct from non-link text?
Check whether underline or colour is used consistently for links, and that those same visual styles aren't used for non-links. If your body text uses coloured text for non-link purposes, you have a misleading signifier that creates hesitation.
A SaaS landing page CTA says 'Start free trial' and is displayed in large bold text — but with no background fill, no border, and no visual container. It's just styled text. What signifier problem does this create?
You've seen how individual elements communicate their function through signifiers. But elements don't exist in isolation — they exist next to other elements. And the distance between them is sending messages too. How does the spacing between things communicate what belongs together?