People identify what is clickable from a small set of learned conventions: underlined coloured text is a link, a filled rectangle with a label is a button. Breaking those conventions means visitors miss things they could have clicked and try to click things they cannot, and both cost enquiries on a small business site.
The conventions and why they matter
Nobody consciously decides whether something is clickable. It is recognised in a fraction of a second from appearance, based on patterns learned across thousands of other sites.
Those patterns are narrow. Coloured, usually underlined text within a paragraph reads as a link. A filled shape with a short label reads as a button. Almost everything else is ambiguous, and ambiguity means a proportion of people do not try.
This is why originality here is expensive. A distinctive link style that nobody recognises is a link that does not get clicked, and you will never see that in any report.
When to use which
| Use a link | Use a button |
|---|---|
| Navigating to another page | The primary action on the page |
| A reference within a sentence | Submitting a form |
| Secondary options | Anything you want people to do rather than read |
| Anything in body text | Actions that stand alone from the text |
The practical rule for a small business site: one button per page for the thing you want, and links for everything else. A page with nine buttons has no primary action, which is the problem covered in reducing the number of decisions on a page.
The two failures
Things that look clickable and are not
Underlined text that is not a link is the worst offender, because underlining means one thing on the web and using it for emphasis breaks that. Coloured text that matches your link colour has the same effect.
Bordered boxes, badges, and icons also invite taps. Click maps regularly show repeated taps on elements that do nothing, which is a design fault the business would never otherwise discover.
Things that are clickable and do not look it
More costly, because the visitor never tries. Links styled in the same colour as the surrounding text with no underline are effectively invisible while reading, and a large image that is a link with no visual cue is missed entirely.
This happens most often when someone decided underlines looked untidy. They are untidy and they are also the only universally understood signal.
What a button needs
- Enough size to tap. Roughly forty-four pixels square as a minimum on a phone, which is bigger than most designs default to.
- Space around it, so a nearby element is not hit by mistake.
- A visible pressed and hover state, confirming the tap registered.
- A visible focus state for anyone navigating by keyboard, which is frequently removed for aesthetic reasons and should not be.
- Adequate contrast between the label and the fill, which is where light grey text on a pale button fails.
The phone-specific problem
There is no hover on a touch screen, so any cue that only appears on hover does not exist for most of your visitors.
That includes underlines that appear on hover, colour changes on hover, and menus that open on hover. Each of those is a desktop convention that translates to nothing on a phone, where the majority of small business traffic is.
The safe approach is that everything clickable is identifiable without any interaction, and hover effects are a bonus for desktop rather than the mechanism.
Consistency across the site
Whatever you choose, use it everywhere. Links one colour on the homepage and another on service pages means visitors relearn the site on every page.
Two styles is enough: one for links in text, one for buttons, plus a secondary button style if you genuinely need it. Beyond that the vocabulary is too large to be learned in a single visit.
The check
Take a screenshot of a page, or squint at it, so the words become illegible.
Ask which elements read as clickable from shape and colour alone. Then compare that against what actually is. The gaps in both directions are where visitors are being misled, and on most small business sites there are several.
Then do the same on a phone, where the tap targets can be checked against a thumb rather than a cursor, which is a different and stricter test.
Frequently asked questions
What is the difference between a button and a link?
A link navigates to another page and belongs in body text. A button is for the action you want taken, such as submitting a form or the primary step on the page.
Should links be underlined?
Underlining is the only universally understood signal that text is clickable. Removing it for tidiness makes links effectively invisible while reading, which is a real cost.
Why should I never underline text for emphasis?
Because underlining means clickable on the web. Underlined text that does nothing produces repeated failed taps, which click maps show regularly and businesses otherwise never discover.
How large should a button be on a phone?
Roughly forty-four pixels square as a minimum, with space around it so neighbouring elements are not hit by mistake. Most designs default to smaller than this.
Why are hover effects a problem?
There is no hover on a touch screen, so any cue that only appears on hover does not exist for most visitors. Everything clickable should be identifiable without interaction.
How many button styles should a site have?
Two, plus a secondary style if genuinely needed. Beyond that the visual vocabulary is too large for a visitor to learn during a single visit.
West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.
Not sure whether people can tell what to click?
We audit the clickable elements across your site and make the primary action unmistakable on a phone as well as a desktop.
Start a Conversation