Here are Shari’s 5 Basic Rules of Web Design:
1. Your Web site should be easy to read
2. Your Web site should be easy to navigate
3. Your Web site should be easy to find
4. Your Web page layout and design should be consistent throughout the site
5. Your Web site should be quick to download.
Scottie: Shari, why did you come up with these guidelines?
Shari: One of the funniest things about my 5 Basic Rules of Web Design is that people think that they are so obvious, that it’s quite silly of me to point them out. However, if these 5 rules are so obvious, then why aren’t designers and search engine marketers following them?
The majority of sites I encounter do NOT follow these rules. And when we get a new client that requests a site analysis or usability testing, the first things we analyze are the 5 rules, especially legibility.
Scottie: #1 is “easy to read.” How do I know if my pages are legible? It seems like a very subjective thing. Do you have any techniques or suggestions for measuring this?
Shari: Actually, knowing whether or not copy is easy to read is part objective and part subjective, part art and part science. We can figure out the subjective part through focus groups, usability testing and Web analytics tools.
We use science to determine which color palettes to use. For example, for optimal legibility usability experts recommend a color contrast of 90% or more, especially for sites that target an older age demographic.
We also know that yellow is the first color the eye registers. So we know to use yellow as a highlight color, (a) because it is the first color the eye sees, and (b) because of the color contrast against navy blue, dark gray, and black.
A great site for color information is Lighthouse International.
Since Verdana is a font specifically created for a computer screen, we use that one a lot. For the font tag ( <font size=”2″> ), Verdana at a pixel size of 12 to 13 is a good match. For breadcrumb trails and text links at the bottom of the page, a smaller pixel size of 9 to 11 is good.
Another legibility issue involves XHTML strict and CSS (cascading style sheets) compliance. We have designed and viewed many sites that adhere to these standards; however, when we view these sites on multiple browsers and platforms, all too often we (and usability testers) cannot read the page. This is because the CSS layers overlap each other so badly that words often appear on top of each other.
All design firms should view a site on all of the major browsers and platforms. Personally, I have 3 computers in my office: two PCs and one Mac. For one of my PCs (which we purchased from a major brand), I took it out of the box and did not reset the default settings. The other PC is a notebook computer because that’s what a lot of business people use instead of a desktop computer. And Macs are not that expensive. When our Web analytics tools show that over 20,000 visitors a month are using Macs, we will not ignore those people in the site design.
Legibility is so important. If people click on a link from a search engine to your site and they cannot read your content, they will leave your site with a very poor impression. That poor impression will not help with a link development campaign, either.
So don’t assume your site is legible because of personal experience; always test and analyze.
Scottie: #2 is “easy to navigate.” Beyond the basics of making sure that the navigation is easy for crawlers to follow, what makes a site easy to navigate?
Shari: We always recommend having at least two forms of navigation: one that is designed and written specifically for site visitors and one that the search engine spiders can follow. Nine times out of ten, that means having a text-link navigation scheme somewhere on the site. Usually, text-link navigation is the most search-friendly of all navigation schemes. It’s not foolproof, though.
To determine whether a site is easy to navigate, we ask usability testers the following 6 questions:
1. Where are you?
2. Are you in the right place?
3. Where do you want to go?
4. Where have you been?
5. How do you return to pages you have previously visited?
6. What do you want to do?
If site visitors cannot easily answer these questions, then we know the site design is not as intuitive as we would like it to be, and the sales conversions will be low.
A descriptive Title tag and headline will let users know what page they are visiting and will help with search engine visibility. A logo on a page helps with branding and lets visitors know the name of the company Web site they are viewing. Breadcrumb, or contextual, links let people know where they are and give visual cues for visited and unvisited pages. Plus, they help with search engine visibility as well.
When we usability-test, we constantly ask our testers: Where are you? Whose Web site is this? Are you in a section of XYZ’s Web site? If so, what section are you in? How do you know you are in this section? What is XYZ trying to sell? What do you want to do next?
The easier it is for visitors to form a mental model of your site, the more likely the site will have good sales conversions and link popularity.
Scottie: #3 is “easy to find.” A lot of Web professionals insist that every site should have a search function. Do you think that’s necessary?
Shari: Absolutely not. Smaller Web sites with good site architecture do not need a site search. Larger Web sites with a lot of products to sell probably do need a site search function.
I don’t think the issue is whether or not a site should have a search function. I think the issue is having a GOOD search function. People use these free search engines without thinking through the whole search process.
First, you have to determine how your search engine results pages (SERPs) will look. Are you going to use the Title tag for the hyperlink? If so, how many characters will you display? Are you going to use the Meta-tag description underneath the Title tag? If so, how many characters are you going to display? Will you use Meta-tag content to determine relevancy?
Second, you have to think about how a “keyword not found” page is going to look. A lot of developers forget about that.
Third, and most importantly, when you have a site search you have some great data. Usability experts consistently say that with most sites, using the site search is a strong indication that people are unable to find what they’re searching for based on the site architecture.
What you do with the site search data is very important. If people come to your site and consistently search for specific keyword phrases, then you know you are not making those keyword phrases obvious to visitors. So you might have to rewrite and redesign sections of your site to make them more obvious.
Additionally, if people are performing a search and not clicking on the most relevant result, the Title tag and Meta-tag description (if you use them for the SERP) might not be effective.
Scottie: #4 is “consistent in layout and design.” What are the most common problems you see with lack of consistency?
Shari: One of the biggest problems we see is lack of consistency between Title-tag content, headlines, and navigation buttons. If you call a navigation button “Shopping Bag,” use that same term throughout the site. Don’t change it from page to page, or from section to section.
Most of the sites we do follow 4 specific design templates. All product pages will have the same layout. Headlines, product photos, product descriptions, calls-to-action (i.e. Add to Cart) will all be in the same place. One product description might be longer than another product description, but they will be in the same place on every product page.
Consistency in layout and design communicates credibility and trust, and every site needs to communicate that in order to make a sale. If you make it easy for visitors to form a mental model of your site by making your page design templates consistent, you will have higher conversions.
Scottie: #5 is “quick to download.” Do you have a favorite resource for testing download times? Or do you just maintain a dial-up line and an older computer for checking?
Shari: For usability-testing purposes, we do maintain a dial-up line. But there are also some great online tools. Andy King has a great tool available. We have also used NetMechanic.
I know I’m beating this usability thing to a pulp, but it’s so important. A top search engine position is not the be-all-that-ends-all in search marketing. You have to get people to your site and convince them to take an action (subscribe, buy, enroll, register, etc.). Usability is a huge part of that equation.
Ideally, if a page downloads between 5 and 12 seconds, that is great. However, usability expert Jared Spool found that perceived download time is more important than actual download time. If people feel that they are getting what they want, they will perceive the download time to be shorter than it actually is.
Our rule of thumb is to keep most pages less than 60K, including scripts, style sheets, and graphic images. For sites where download time is expected to be longer (such as an entertainment site), we will go up to 100K. If a page must be larger than that, we make sure that there is plenty of search-engine-friendly text in the first 100K of the document.
Scottie: Great information, Shari! Thanks for taking the time to go into so much detail.
*This article originally appeared in the High Rankings newsletter.
Click here to sign up for FREE B2B newsletters from Murdok!
Scottie Claiborne is the owner of Right Click Web Consulting. She is a speaker at the Search Engine Strategies conferences and the High Rankings Seminars as well as the Administrator of the High Rankings Forum and a moderator at the Cre8asite Forums.
