Styling Interactive Elements (Part2: Links and Like)
Make links consistent with each other and visually different from non-clickable text (while using color-blind-friendly styling), so that people can tell what’s actionable simply by looking at the interface and not have to sweep it with their mouse (or other pointing device) to find out.
There are various best practices:
- A user-friendly way to style links is to:
- Underline links that have surrounding text.
- Bold links that are standalone. (This is if you’re not using an underline.) Or use some other color independent styling — meaning, styling that you could see even if you were completely color-blind.
- Make them some shade of blue. We don’t forget color, which helps non-color-blind users. Blue is the safest choice for a link color, but studies have shown that other colors work almost as well when done with consistency.
- Don’t want to use underlining for your links? 3 alternatives to indicate a link without using underlining:
- Strategy #1:Use other text styling, like bold (or italics, font size, typeface, border).
- Strategy #2:Use a luminous link color PLUS some non-color styling (such as an underline) for “on hover”, and another (such as a border) for “on focus”.
- Strategy #3:Use solitary placement (often with bolding or smaller all caps). Place the link away from other text so it’s standalone (not part of a sentence or paragraph). Its placement, coupled with its other styling like bolding, will indicate that it’s a link.
- Pick your link styling and stick to it:Whichever appearance you choose for links, apply that same treatment consistently throughout the digital product.
- Reserve three things for links only, whether you choose to use them for your links or not:
- underlining
- blue text, and
- underlining + blue text.
- Strategy #1: Reserve a chosen color for all clickable/tappable elements, and avoid using that color for any non-clickable elements.