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.
]: Shari, why did you come up with these guidelines?
]: 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.
]: #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?
]: 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.
]: #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?
]: 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.
]: Thanks Shari! We'll talk about the other 3 guidelines in Part II of this article
November 3, 2003