Omni Marketing Interactive - Designing for People who Search Home    
  Site map  
  Contact us  
Services Clients About Omni FAQs Design tips Links and resources Request a quote
     Home > Design & UX tips > UX Website Design > Clickability/Tappability & Search-Engine Friendly Web Design   
Tips overview
Search engine optimization
Website usability
Information architecture
UX website design
Omni photo - top
Photo - tips
Omni photo - bottom

Clickability/Tappability & Search-Engine Friendly Web Design

Perceived click (and tap) signifiers are critical to a successful user experience (UX). How does your site measure up?

Click - tap image

In This Article

Designing for people who use search engines

On the surface, it might seem as if search-engine friendly website design is only about designing for top positions on the commercial web search engines. And it is a logical assumption, isn't it, because the words in "search engine optimization" communicate that very assumption.

Search-engine friendly design is more complex.

Search engine optimization (SEO) is not only optimizing a website for the commercial web search engines. SEO is actually optimizing a site for people who use search engines, and this includes both web search engines and site search engines.

Therefore, website owners should accommodate both users as well as technology. Usability and user experience (UX) should be major considerations when designing and promoting web content.

Click (and tap) signifiers

When we analyze a website for search-engine friendliness, one key item we look at is perceived visual signifiers.

When we use this phrase during training or presentations, we often see attendees' eyes glaze over. So we will use a different word to communicate this idea on a website and/or an individual web page: clickability.

All links on a website and individual web pages should look clickable (and tappable) from the perspective of searchers/users.

Notice that we said from the perspective of searchers/users. Reason? Clickable items look clickable from designers' and developers' perspectives because they are the ones who created the color scheme and the interface in the first place.

So to them, of course clickable items look clickable! And (according to them) it is ludicrous that people might think otherwise.

REMEMBER: All clickable items on a web page should look clickable. All unclickable items on a web page should NOT look clickable. But here's the thing: whenever you design a website, you are designing and developing it for people other than designers and developers. When I give performance tests for search usability, test participants are not among the people who created the website. Test participants are among the people who fit the website's target audience.

Here are some general principles that we use that apply to search engine friendly websites:

  • All clickable/tappable items on a web page should LOOK clickable/tappable.
  • All unclickable/untappable items on a web page should NOT LOOK clickable/tappable.
  • All clickable- and tappable-looking items on a web page should be clickable and provide feedback.
  • Don't put a link on a page that you do not intend for searchers/users to click.

In other words, when you format text links on a web page, the text links must look clickable/tappable and be easily distinguished from unclickable/tappable items on the page.

If you do not format web pages in this manner, you make the site more difficult to use. Result? Searchers/users will have a more difficult time completing their desired tasks.

Regarding business goals, if users have a more difficult time completing their desired tasks (add to cart, enroll, subscribe, etc.), then achieving business goals is more difficult. Brand perception is compromised.

Who wants their websites to be remembered as unreliable, confusing and defective? A top ranked position in Google, or any web search engine, will change that perception temporarily.

Click signifiers and search results

As an example, look what happens when we remove some of the click signifiers from this portion Google search results page:

When Click Signifiers Are Removed

Google SERP with click affordance removed

Figure 1: Screenshot of clickability & tappability removed from a section of a Google search engine results page (SERP).

What looks clickable on this screenshot above, and what doesn't look clickable? Without the link colors, hyperlinks do not look clickable or tappable

You might think that the bold type makes items in this search engine results page (SERP) look clickable. The emphasis would be on the price and not on the anchor text. Two items in this set of search listings cost $8.99. What is better for communicating the "aboutness" and uniqueness of the text link: the price or the product name?

Let's see what happens when the anchor-text effect is bold, black text.

When Click Signifiers Are Confusing

Google SERP with click affordance removed

Figure 2: Screenshot of a modified clickability format from a section of a Google search engine results page (SERP).

When we removed the blue color from the "Shop for organic green tea," that text link now looks like a heading or a sentence fragment instead of a link that leads to shopping search results.

In Figure 2, both the price and the product name look clickable...maybe...only if people assume that bold text is clickable text.

Term highlighting often occurs in (X)HTML title tags, listing descriptions and/or snippets, portions of URLs, ad titles, and ad descriptions. Not all of this bold-faced text might be clickable/tappable text.

Some people might believe that the images look clickable. However, in an older Google SERP, the images on this page were surrounded by a blue border (see below), which emphasized the images' clickability.

Clickability: Before and After

Before and after: shopping search results with and without click affordance

Figure 3: Image of clickability removed from an older verstion Google shopping search results.

Of course, we are oversimplifying here. Clickability & tappability must always be viewed within context. A number of formatting elements affect clickability on a web page, including but not limited to:

  • Color
  • Placement
  • Grouping
  • Shape
  • Bold
  • Underline
  • Labeling

Let's look at another example on a landing page: a city travel guide for Honolulu, Hawaii on a hotel site (of a very famous brand). Let's look at the features portion of this page:

List of features from a hotel brand's website

Image of a bulleted list of features from a popular hotel brand's website.

Figure 3: Does the text in this bulleted list look clickable/tappable?

The clickable text in this list is actually formatted in the same way that the main (unclickable) body text is formatted. Furthermore, this bulleted list of features is placed in the lower right corner of the web page. On some desktop/laptop computer screens, the bottom of this list appears below the fold.

Now, let's be honest, do you believe that users know that this text is clickable and leads to some useful information?

We can almost hear a designer's or a developer's voice in my head saying, "If they move their mouse over these links…."

Guess what? People don't go to a web page and move their mouse all over the place on each screen to determine whether or not items are clickable. Can you imagine users doing this on each screen of a long web page? What a waste of time! How annoying!

As a company that conducts usability tests on websites for a living, we know that people don't say, "What a waste of time! How irritating!" Test participants usually ignore those links.

Clickability, tappability, and minesweeping

According to, minesweeping involves the user rapidly moving a cursor, pointer, or finger over a web page, watching to see where the it changes to indicate the presence of a link. In other words, minesweeping is an action designed to identify where on a page links are located.

If users must minesweep to determine what is and is not clickable, it slows task completion. Minesweeping tells us that users have to constantly learn and re-learn a website's navigation system. Therefore, minesweeping can be a strong indicator of poor memorability.

Contrary to popular opinion, adult users do not enjoy minesweeping. According to Nielsen Norman Group in the article Top 10 Information Architecture (IA) Mistakes,

"Small children like minesweeping (passing the mouse around the screen to see what's hidden), but teenagers don't like it, and adults hate it."

Ultimately, requiring users to minesweep to determine what is clickable or tappable slows them down. So unless your target audience consists of children, create content links with unvisited, visited, active, and hover states. And use this format consistently throughout your site.

Search engine spam and hidden links

Many black-hat SEO practitioners misuse CSS to provide links to search engines (that often lead to doorway pages) that humans cannot see. Search engines can see the "a href" in a link; therefore, the search engines know it is a link.

No spamBe aware that hidden text, hidden links, and partially hidden text and links are a form of search engine spam. We personally have seen individual web pages and even entire websites removed from search engine indexes for using this type of spam.

Clickability on a web page (or perceived visual signifiers) is extremely important for both search engines and searchers/users. Our advice to designers, developers, website usability professionals, and website owners? Be pro-active about clickability and tappability.

Test your prototypes for effective clickability. On mobile devices, observe if test participants hesitate to tap on a link. Test your current website for clickable and unclickable elements. Modify and evolve your content and design accordingly.

You will find that your site is more search engine friendly. You will find that your site is more user friendly. You will also find that your brand is perceived as more reliable, dependable, and trustworthy.

And the final result? Your site will meet business goals as well as meet user expectations.


For those of you who wish to study signifiers on a more advanced level, here are some great starting points:

  • "Affordances and Design."
  • Gaver, W. (1991). Technology Affordances. Proceedings of CHI 1991, 79-84.
  • Gibson, J.J. (1977). The Theory of Affordances. In Perceiving, Acting, and Knowing. Eds. Robert Shaw and John Bransford. Hillsdale, NJ: Erlbaum Associates.
  • Gibson, J.J. (1979). The Ecological Approach to Visual Perception. Boston: Houghton Mifflin.
  • Hartson, H.R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information Technology 22(5): 315–338.
  • Hill, W., Hollan, J. D., Wroblewski, D., & McCandless, T. (1992). Edit Wear and Read Wear: Text and Hypertext. Proceedings of the 1992 ACM Conference on Human Factors in Computing Systems (CHI '92), New York: ACM Press.
  • Hollan, J. D., Hutchins, E., & Kirsh, D. (2000). Distributed Cognition: A New Foundation for Human-Computer Interaction Research. ACM Transactions on Human-Computer Interaction: Special Issue on Human-Computer Interaction in the New Millennium, 7(2), 174-196.
  • Nielsen, J. (2010). Top 10 Information Architecture (IA) Mistakes. Available at:
  • Norman, D. (1999). Affordances, Conventions and Design. Interactions 6(3): 38-42.
  • Norman, D. (1988). The Design of Everyday Things. New York: Basic Books.
  • Norman, D. (1977). The Psychology of Everyday Things, New York: Basic Books.
  • Norman, Donald A. "THE WAY I SEE IT Signifiers, not affordances." interactions 15.6 (2008): 18-19. Available at:
  • Rivers, D. (2010). Visual Designs for Web Applications. Virtual seminar (webinar) available at:
  • Thurow, S. and Musica, N. (2009). When Search Meets Web Usability. Berkeley, CA: New Riders. (Chapter 9 teaches how to do a click signifier test.)
  •'s definition of minesweeping. Available at:
  • Weinschenk, S. (2015). 100 more things every designer needs to know about people. New Riders.
  • Weinschenk, S. (2011). 100 things every designer needs to know about people. Pearson Education.
  • Wikipedia's Affordance Article

This article originally appeared in Search Engine Land. It has been updated since its original publication.

Related articles

If you liked this website design and user experience (UX) tip, here are more links to other user-centered design tips and articles from Omni Marketing Interactive:

You can also read our articles from other online publications.


Information Architecture Services


Website Usability Services

UX design


If you have any questions about Omni Marketing Interactive's search engine optimization (SEO), website usability, information architecture (IA), or web design services, please call us at 847-426-4256.