What makes good website design?

Ensuring that viewers get around a website site easily is referred to as usability, an important concern when web building. The goal of usability is to allow visitors to find what they want as quickly and easily as possible. Many studies have been done to learn how people find things on websites, what they see and don’t see, and what they like best. Jakob Neilson is one expert on usability. His website is at: www.useit.com. Here is a partial list of design elements that work and don’t work:

1) Clear, consistent font styles

Make sure that you choose a font that is readable, then use it consistently throughout your site. Some popular fonts are Arial, Courier, and Times New Roman. Some people feel that Arial is easier to read because the edges of the letters are rounded. Use no more than 2 to 3 fonts in your site.

2) Proper font size

A common mistake for beginning web builders is to use a font size that is too big. There is a general rule when it comes to the size of headings and regular text (body text). I call it the “40-20 rule”. This rule explains the percentage that your headings should be compared to your body text. Your main heading should be 40% larger than your body text. Any headings under your main headings should be 20% larger than the body text. This chart gives examples:

You can see in the example above that the main heading is also always centered and has a blank line below it. The sub heading has a blank line below it as well.

If you can't get the exact 40-20 ratio then you can make the sub headings the same font size as the body text and bold them.

The same 40-20 rule should be used for documents you create with a word processor. For example, if your body text is Arial 10 pt., the heading of a section (called heading 3 or H3) should be 11 pt. The next size of heading should be 12 pt. and the largest heading on your site (perhaps the title of each page) should be no greater than 14 pt.

Because you are building pages for the web, you don’t have control over the absolute value of the size of the fonts on your website—only the relative values. This means that you can’t control the exact size of words in a paragraph on your website—only what size they will be in relation to the headings. This is because a visitor could simply use their browser settings to choose a different size of text.

3) Readable text

Studies show that people don’t look at websites the same way they read books. Instead, they scan very quickly for the exact information they want. Breaking up your text into small chunks of one to four sentences can help them read more easily. Leaving a blank line between paragraphs will also make a page more readable. Using bullet points and lists whenever possible helps too.

4) Light page backgrounds

If you choose a color or image for the background for your page, make sure it is not too dark; this makes the text too difficult to read. Also, visitors to your site may have poor eyesight or bad computer monitors; remember that, even if you can read the text on your computer, others may not be able to on theirs. Studies have shown that websites with a plain white background are the easiest to read.

5) Consistent link colors

There is another rule regarding the color of links: it's easier for visitors if link colors are the same on every website. This is so that when people visit your site they know what to expect. Here is a chart that lists what colors should be used:

As you can see, this rule is very simple. And yet, many websites confuse their visitors because they don’t follow this rule. You may have been to a site where the links are not underlined, and you can only tell what is linked by moving your mouse around and seeing if the pointer changes. Some people call this scrubbing the screen with the mouse. Also, you have probably been to a website where the text was a different color or underlined, and when you tried to click on it you realized it wasn’t a link at all. A well designed website doesn’t confuse its visitors. If you really want to change the color of your links, at least make sure that all your links are underlined. For websites that are intended for people who are more familiar with the Internet, such as this one, links may not be underlined at first, but show a line under them when you hover over them.

6) Page lengths

If your webpages are too long, a visitor may not want to scroll down to the bottom. If possible, keep your front page to one monitor screen length so that a visitor doesn’t have to scroll when viewing the introduction to your site. Keep the other pages to a maximum of three screen lengths. If they are longer, it would be better to break them into multiple shorter pages.

7) Good navigation

There is an idea in navigation called the “Three Click Rule”. This rule says that a visitor to a website should be able to get to the information they want within three clicks. Think about some of your favorite sites—do they follow this rule? Have you ever been to a website where not only does it take more than three clicks to find what you want, but you can’t find the information at all even though you know it's there somewhere? Did you find this frustrating? Good; remember this feeling when you carefully plan the navigation of your site so that your visitors won’t go through the same unpleasant experience.

How can you design your site to follow the three-click rule? Here are some tips:

1. Make sure that your website is shallow and wide instead of narrow and deep. That means that a visitor has a large selection of links to choose from on your front page, and can reach other pages on your site quickly.
2. Plan your categories carefully. For example, if you have a three sections, one containing favorite links, one for poems, and one for your resume, have different links to each of these sections.
3. Use descriptive linking words to identify each section. Don’t use meaningless words like “Stuff” or “things to look at” or “more”. If someone doesn’t know what is in a section, they probably won’t click on it.
4. Breadcrumbs. These tell a visitor where they are and where they came from. Breadcrumbs look like this:

You are here: Home > About Me > My Cat

This tells a visitor that they are looking at a picture of your cat that is in the About Me section of your website.

8) Site map

Many people also like to go to a site map to get an overview of the site: what pages the site has and how they are connected.

9) Search feature to find things on your site

Studies show that, if a search box is present, forty percent of users go straight to the search box to find what they want on a site.

10) Fast Download times

It is important that visitors don’t have to wait a long time to see a website. If a website has too many pictures, or they have been designed wrong, this will make you wait before the pages appear on the screen. We will talk more about this later.

Further reading:

• To learn more about how long visitors to your site will wait, read “Response Times: The Three Important Limits” by Jakob Nielsen.
• For more information on designing for the web, try the Yale Style Guide.
• visit my section on usability.

Planning and design review

1. What is Storyboarding and why is it important?
2. What is the 40-20 rule of heading sizes?
3. What colors are standard for links?
4. Should text be underlined?
5. What is a good background color? What is a good text color?
6. What is a good maximum number of screen lengths for a single webpage?
7. Why do people read webpages differently than text? How can you make text more readable?
8. What is usability?
9. What are breadcrumbs and what are they for?

Practice

1. Find three websites you like and three you don’t like. Write down the addresses of the websites so you can share them with other students. Explain what parts of each of the websites you like or don’t like.
2. Look at the examples of bad websites on this website. (Do a search for “bad websites” if you can’t find them easily.)
3. Find three examples of site maps. Bookmark the sites or write down the addresses. Do you find them easy to use? Why or why not?

Planning your site

Usability and design resources