Navigating the web is a means to an end and every click counts. Users need to know which areas of the page are plain static content, and which areas are clickable (or tappable).

Make clickable elements obvious to users so they don’t need to ponder the meaning of design elements or encounter nasty surprises when something doesn’t work as expected. As Jakob Nielsen puts it, “Life is too short to click on things you don’t understand.”

It’s a simple matter of interaction cost: People treat clicks like currency and they don’t spend it frivolously. They guard clicks with care and resent sites that force them to hunt for clickable items, or, even worse, waste their clicks.

Tom's of Maine screenshot showing words in fancy fonts and nested rectangles
Tom’s of Maine: Let’s take a quick quiz. Guess which areas on this screen are clickable. Then scroll down to find the answer.

A major factor in attracting clicks is the quality of the link text. However, this article focuses on the visual aspect of clickability: can you tell what’s actionable, simply by looking at the page? How an object looks tells us how to use it. Don Norman, co-founder of Nielsen Norman Group, has described these physically perceptible cues that hint at the use of an object as perceived affordances, or, more recently, signifiers. In the online world, people judge what is clickable based on prior knowledge about the world in general and the web in particular. They attach meaning to visual properties such as shapes, colors, and context based on familiar patterns. Visual cues that align with people’s expectations help them quickly determine which items to click.

The traditional cue for hyperlinks is blue text, like we’re using here. And buttons, like their real-world counterparts, are rectangular, and have a 3-D appearance. These conventions provide the strongest perceived affordance of clickabilty and in early years we recommended that buttons and links follow these patterns.

But today’s users have seen hyperlinks and buttons that look widely different. Signifiers can evolve over time as web users gain more exposure to different interaction cues and get to learn these new cues.

With that said, the flat-design trend (a style of interface design that emphasizes 2-D flat illustrations and is well exemplified by iOS 7 and Windows 8) has some website designers taking the minimalist approach to the extreme. The idea behind flat design is to simplify the interface. However, stripping away too much undermines this objective by making the interaction more complex. A major issue with many flat designs is that one of the strongest clickability signifiers — the 3-D effect — is removed from the equation. Textures that users long relied upon for cues are stripped away, making it difficult for users to determine what is clickable and what is not.

Tom's of Maine screenshot with linked areas highlighted
Tom’s of Maine: Only the areas shaded in green are clickable on this page. Users who click any areas outside of these click zones face major disappointment.

In This Article:

Reduce Click Uncertainty

Never make users rely on scrubbing the screen with the mouse to determine if a text is clickable. Hunting for links takes effort and people won’t do it for long. (If there’s one usability guideline that will remain eternally true, it’s to limit user effort. More hassle equals less use.) Below are some basic design considerations for reducing guesswork:

Text Links

  • While blue is still the safest link color, other colors work just as well as long as the links stand out clearly from the body text. If you don’t have a particular reason to prefer another color, we still recommend blue as the safest choice.
  • The position of links can help you determine whether or not underlining is necessary. The navigation menu and lists, especially along the peripheral areas of the page, don’t require underlining. Their locations identify them as links.
  • Test your color choice for hyperlinks to make sure that people who have colorblindness can spot them easily.
  • Static items should not have the same color as hyperlinks.
  • Don’t use blue text (or underline text) for nonclickable items.
  • Whatever appearance you choose for hyperlinks, make sure to apply the same treatment consistently throughout your site.
Screenshot of two text boxes with report thumbnail images and blue headlines
Patient Safety and Quality Healthcare: The miscues on this page create confusion. The blue headings are not clickable. The images are clickable, but they look like static images. The instructions at the top of the page tell you what to click — a sure sign of design fail.
Starbucks screenshot showing consistently used, dedicated link color of green. Non-green links are signaled by their location and layout.
Starbucks: Links no longer have to be blue. Here it’s obvious that hyperlinks on this page are green. The lists of items on the right side of the page suggests clickability because of their location (in a narrow column to the side) and formatting (box and bulleted list with no other text than the links).

Buttons

  • Make buttons at least remotely resemble physical buttons. In order for an object to be recognizable, it must retain the right visual cues to trigger the right associations quickly and accurately. Retain the rectangular shape (preferably with rounded corners) if you renounce the 3-D effect. Interactive components in flat design should look clickable even without heavier effects such as shadows and gradients. (In one early study, clicks increased by 416% after changing from flat to 3-D buttons. While the effect is smaller now, it's still big.)
  • Conversely, don’t make nonclickable items look like buttons. For example, giving headings a background color will make them resemble buttons when they’re not.
  • Focus on content hierarchy within the page. Avoid having many colorful boxes of different sizes on a page. People have difficulty picking out the clickable elements when similar-looking items compete with each other.
screenshot showing a navigation panel grid with 4 buttons, each having a flat icon and word label. A hairline border around each indicates clickability.
TaskRabbit: Buttons on the web don’t need to be skeuomorphic — that is, they don’t need to look exactly like physical buttons. These four buttons work because of the clear borders, the consistent treatment, and the fact that no other elements compete with them.
Screenshot showing what looks like a flat-design rectangular button with a label in the middle
Menagerie Climb: Is the orange box a button? The answer is: No. The shape and label make the element look like a button when it’s not.
Screenshot showing buttons and headings that look a lot alike, but the headings are unfortunately not clickable
GNC: Shop by Department and Tools & Resources look like buttons instead of category headings.

Images and Graphics

  • Ensure smaller images enlarge when clicked.
  • Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click.
  • Avoid multiple calls to action for a given image unless the options within that image are plainly presented, such as a bulleted list of hyperlinks or clearly labeled buttons.

Symbols and Icons

  • When using icons for links, make sure icons are instantly recognizable. Unless you have a really strong resemblance icon or an icon that has become standard, it should be combined with another visual cue, such as a text label, to indicate clickability.

An arrow icon may help suggest clickabilty when no other clickability cues are present. However, this is the least favorable approach because the arrow is not a standard cue and it is too subtle for some people to recognize. If you decide to go this route, make sure you use arrows sparingly, as they can defeat the purpose of keeping your interface simple.

CNN: The arrow icons on this page signal clickability in an otherwise flat design. Without the arrows, users may not know to click the black boxes.
Trader Joe's screenshot showing ambiguous treatment for links and text
Trader Joe’s: As expected, the list under Announcements is clickable. The blue text is a strong cue. But what about the list underneath the image? The same fancy icons used in the previous list are also used here. Such inconsistency causes confusion.

Conclusion

Encourage site engagement by designing clickable items so that users recognize them easily. Although it’s fine to veer away from traditional link design to denote clickability, straying too far from familiar patterns can be problematic.