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 & 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 & Search-Engine Friendly Web Design

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

Click - tap image

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) affordance

Perceived click affordanceWhen we analyze a website for search-engine friendliness, one key item we look at is perceived visual affordance. When we use these terms 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. So to them, of course clickable items look clickable, and (according to them) it is ludicrous that people might think otherwise.

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 items on a web page should look clickable.
  • All unclickable items on a web page should not look clickable.
  • All clickable-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 and be easily distinguished from unclickable 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 affordance and search results

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

When Click Affordance is Removed

Google SERP with click affordance removed

Figure 1: Screenshot of clickability 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.

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 Affordance is 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 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 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?


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 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 usability tests 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 and minesweeping

According to usability.gov, 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 slows them down. So unless your target audience is 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 use affordance 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, 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 affordance) 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.

Test your prototypes for effective clickability. 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.

So remember: All clickable items on a web page should look clickable. All unclickable items on a web page should NOT look clickable.

References

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

  • 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.

  • Nielsen, J. (2010). Top 10 Information Architecture (IA) Mistakes. Available at: http://www.nngroup.com/articles/top-10-ia-mistakes/

  • 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.

  • Rivers, D. (2010). Visual Designs for Web Applications. Virtual seminar (webinar) available at: http://www.uie.com/events/virtual_seminars/wa_visual/.

  • Thurow, S. and Musica, N. (2009). When Search Meets Web Usability. Berkeley, CA: New Riders. (Chapter 9 teaches how to do a click affordance test.)

  • Usability.gov's definition of minesweeping. Available at: http://www.usability.gov/what-and-why/glossary/minesweeping.html

  • Wikipedia's Affordance Article

Related articles

If you liked this website design tip, here are more links to related design tips and articles from Omni Marketing Interactive:

You can also read our articles from other online publications.


IA

Information Architecture Services

Usability

Website Usability Services

UX design

Web
Design
Services


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.

top