Column: Just Behave Clickability & Search Engine Friendly Web Design Nov 22, 2010 at 5:50pm ET 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: 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 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:ColorPlacementGroupingShapeBoldUnderlineLabelingLet’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? 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
Disclaimer Privacy Policy