Clickability & Search Engine Friendly Web Design

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 that label communicate that very assumption. But search engine friendly design is more complex.

I will use the same analogy that I used in Search Behavior: The 4th Building Block Of Search Engine Optimization. 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. Likewise, search engine friendly design is not only designing a website for the commercial web search engines. Search-engine friendly design is actually designing a website for people who use search engines.

When I analyze a website for search engine friendliness, one key item I look at is perceived visual affordance. Now, when I use these terms during training or presentations, I often see attendees’ eyes glaze over. So I’m going to 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 from the perspective of searchers/users.

Notice that I 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 I 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 I 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. And business goals? Well, 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 ranking position in Google will change that perception.

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

Screenshot of clickability removed from a Google search engine results page (SERP).

What looks clickable on this screenshot above, and what doesn’t look clickable? Without the link colors and underlines, hyperlinks do not look clickable. You might think that the bold type makes items in this SERP look clickable. But term highlighting occurs in (X)HTML title tags, listing descriptions and/or snippets, portions of URLs, ad titles, and ad descriptions.

Some people might believe that the images look clickable. However, in the original Google SERP, the images on this page were surrounded by a blue border (see below), which emphasized the images’ clickability. And what if we remove the blue color and the underline from the “Shopping Results for organic green tea”? That text link now looks like a heading instead of a link that leads to shopping search results.

Image of clickability removed from Google shopping search results.

Of course, I am oversimplifying here. Clickability must always be viewed within a larger 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:

Figure 3: Does the text in this bulleted list look clickable? Image of a bulleted list of features from a popular hotel brand's website.

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? I 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 person who usability tests websites for a living, I know that people don’t say, “What a waste of time! How irritating!” Test participants just ignore those 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. I 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. My 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.

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.
  • 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.)
  • Wikipedia’s Affordance Article.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: Content | Search & Usability

Sponsored


About The Author: is the Founder and SEO Director at Omni Marketing Interactive and the author of the books Search Engine Visibility and When Search Meets Web Usability. Shari currently serves on the Board of Directors of the Information Architecture Institute (IAI) and the ASLIB Journal of Information Management. She also served on the board of the User Experience Professionals Association (UXPA).

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.transmutataionsciences.com Transmutator

    Shari, Loved this article … but one thing always bugs me … “below the fold” How can we determine what’s “below the fold”? I have a 27″ Hi-def monitor so my “below the fold” is a lot different than a lot of other people’s. And, let’s face it, we are a long way away from the 800×600 “standard.” So, what do we do?

  • http://www.search-usability.com/ Shari Thurow

    Hi there-

    I understand your frustration.

    I know that “below the fold” is relative since display items are very different (mobile, notebook, desktop, etc.) I use web analytics data as one resource. I look at the most common browsers in which my audience is viewing a website, the most common operating systems, and resolution. I also look at data from outside resources as well such as companies that publish the most common screes resolutions.

    I am careful, though, not to design, write, optimize, etc. for the statistically average user.

    –Shari

  • http://www.phoenixonesales.com/aboutthefounder.html Bill Simmel

    Hi Shari, Good solid info and a wonerful easy read.
    I do have a question: Where do you sacrifice based on display, namely what takes priority “on the fold” – content or use-ability?

    Are you more concerned with adding useful content even if it takes readers well below the fold or creating separate pages even though by doing so you break continuity with a needed click?

    Are readers more willing to scroll down then click through? – Bill

  • http://www.search-usability.com/ Shari Thurow

    Hi Bill-

    Too many myths exist about “3 clicks to content” and whether users/searchers will scroll or not. People scroll if the scent of information is strong. People click if the scent of information is strong. The “break continuity with a needed click” is a misconception in many cases.

    http://searchengineland.com/seo-and-the-scent-of-information-26206

    My emphasis is information scent and validation of that scent. This whole “don’t make people scroll” myth has gotten out of hand, IMHO.

    There is a time and a place for splitting up content into multiple pages. There is a time and a place for keeping content on a single page. Splitting up content purely for ad generation or keyword rankings tends to annoy users…more than people believe.

    Usability and findability is about balancing user goals and expectations with business goals. What I see on over-optimized sites is emphasis on business goals over user goals.

    I admit I had a difficult time answering this question because it seems that people are forced to choose display over quality, or vice versa. I don’t believe in that conflict. Site owners can display great content in an aesthetically pleasing manner. Problem is? What people perceive as “aesthetically pleasing” is subjective.

    There are some guidelines I follow that are very scientific (psychology of color, leading, kerning, line width, column widths, consistency, lighting, etc.) I never come up with a design based on my personal opinion.

    The problem is that if something is visually appealing, people perceive that thing (“website”) as easier to use initially. That perception is a difficult hurdle to overcome.

    It only takes one click (or one lack-of-click) for users/searchers to determine whether or not a site is not user friendly.

  • http://www.search-usability.com/ Shari Thurow

    Hi all-

    High usability does not overcome low visual appeal. Please see:

    http://www.humanfactors.com/downloads/nov10.asp

    Hope that answers your question, Bill.

    -Shari

  • http://www.search-usability.com/ Shari Thurow

    More on visual appeal vs. usability at:

    http://www.surl.org/usabilitynews/112/aesthetic.asp

    and

    http://research.rutgers.edu/~ishanic/papers/sigchi.pdf

    Good research. Visual design is both an art and a science.

    –Shari

  • http://www.webhostinghub.com/ web site host company

    I like how did you approach this topic. Detailed, simple, clear and comprehensive. Many thanks. Very useful for me.

  • Saira Younus

    hey excellent article. It is very informative and helpful. The first step towards effective search engine optimization is designing your pages to be search-engine friendly. Thanks for post.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide