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?
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
When 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:
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:
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 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.
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:
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:
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,
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.
Be 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.
For those of you who wish to study affordance on a more advanced level, here are some great starting points:
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.
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.