User-Centered Design Tips

Easy-to-use Web sites don't create themselves over-night. To create a great Web site, you must focus on its potential users from the very beginning, and checking at each step of the development with its intended users to be sure they will like and be comfortable with the final design.

A successful Web site begins with the site's designers finding out:

  • who will be using the site
  • what they will be using it for
  • how they will be using it

The User-Centered Design (UCD) process involves the site's designers working closely with the site's intended users throughout the design process.

Make Every Aspect of Your Web Site Self-Evident

Make sure every aspect of your Web site is self-evident, so that users don't have to waste time and effort in trying to understand what something is.

A successful Web site should provide answers to the following questions without much effort required on the users' part:

  • Where do I start?;
  • Is that a link?;
  • Is that a button?;
  • Is that the navigation?;
  • Where am I on the site?;
  • Why did they call it that?; and
  • Where did they put the...?

Five Essential Elements of Designing a User-Friendly Web Site

Previously, it was stated that there are no right or wrong ways to designing a great Web site. However, there are some essential design elements that should be applied to a Web site to make it as user-friendly as possible.

Create a Clear Visual Hierarchy

Organize and prioritize the contents of a page by using size, prominence and content relationships.

Let's look at these relationships more closely:

  • Size: The more important a headline is, the larger its font size should be. Big bold headlines help to grab the user's attention as they scan the Web page;
  • Prominence: The more important the headline or content, the higher up the page it should be placed. The most important or popular content should always be positioned prominently near the top of the page, so users can view it without having to scroll too far; and
  • Content Relationships: Group similar content types by displaying the content in a similar visual style, or in a clearly defined area.

Break Up Pages into Clearly Defined Areas

Studies have shown that Internet users decide which part of a page are likely to be of interest to them and ignore the rest.

Experience tells us where advertising banners and buttons are positioned in a Web page and we have learned to ignore those parts of the page as though they don't exist.

I do not recommend including hidden advertisements with content. This may seem like a clever marketing ploy, and it does improve clickthough rates. But ultimately users will get frustrated if they constantly end up on an advertiser's Web site, when they thought a link leads to more free information.

If you want to mix advertisements and content, make sure the ads are clearly marked, as in the new large-banner systems used by numerous top Web sites.

Use Standard Conventions

Always try to follow standard conventions. One standard convention that has been developed on the Internet is having the navigation bar at the top or left side of the page.

If you think about it, it actually makes more sense to have the main navigational hyperlinks on the right side of the page next to the scroll bar. This way, we wouldn't have to play tennis with our mouse cursor!

But somebody had the bright idea of adding the main navigation links to the left side of the page. Other Web site designers had an even brighter idea of copying it! Now enough Internet users have seen it in enough Web pages that it needs no explanation.

If you tried to buck this convention by placing the main navigational links anywhere else, it could easily confuse most users.

Other standard Internet conventions include:

  • Blue underlined hyperlinks;
  • Breadcrumb trails; and
  • Bottom of page navigation text links.

Make Clickable Links Obvious

Always make text and graphic hyperlinks self-evident.

Text Links

It is a standard convention that blue underlined text represents a hyperlink that can be clicked. So why do Web site designers insist on making text links not underlined and/or in some other color?

Avoid this temptation whenever possible! Stick with blue underlined text for hyperlinks, because it works, and everyone understands it. You should also use a different color when a text link is activated.

Visited Link Colors

Don't forget to use a different color for visited text links. The alternative visited link color informs users which pages they have already visited. Don't confuse users by using the same color for unvisited and visited links.

Image Links

Make clickable graphics, such as "Search" buttons, obvious. Design clickable buttons with depth, so it looks like a button that can be pushed. Also add alternative text to graphics to help clarify the meaning the hyperlinks function.

Retaining the standard blue outline (by not using border=0) around a graphic is another option. This is the more traditional method.

Minimize Page Noise

Your Web site should be effortless to use and not be too taxing on the mind. You will tire your users out, if your pages require a lot of information processing.

To create a Web site that is effortless to use, minimize the:

  1. Number of words;
  2. Number of font typefaces, sizes and colors;
  3. Number of link options;
  4. Number of text link styles;
  5. Use of background colors; and
  6. Use of background wallpaper images.

1. Number of words.

Minimize the number of words in your text. If you can get a message across in ten words, instead of thirty, do so. Users want information, with minimum wasted effort and time.

2. Number of font typefaces, sizes and colors.

Minimize the number of font typefaces, sizes and colors. The more font typefaces, sizes and colors you use, the more effort the mind has use to process everything it sees.

3. Number of link options.

Minimize the number of link options. Too often, a page presents us with too much content and too many links. A site that tends to overwhelm me is the ICQ.com home page. In Sept 2001, the home page offered over 300 clickable links, buttons and forms! The content was also divided into 4 columns, which all adds up to a incredibly busy page.

A better layout design would be to display a dozen or so main category link options and a few of the most popular sub-category link options. Then on subsequent pages, offer all the options for a particular category.

4. Number of text link styles.

Minimize the number of text link styles. The old ICQ.com home page used an incredible eight different styles of text links!

Here are all eight styles:

  • dark blue text links without underlines
  • dark blue text bold links without underlines
  • light blue bold text links without underlines
  • dark red bold text links without underlines
  • dark red text links with underlines
  • dark red bold text links with underlines
  • light red text links without underlines
  • green bold text links without underlines

How confusing is that?!

5. Use of background colors.

Minimize the use of background colors. If you are going to use background colors, use them to define content areas. The eBay home page is a good example of how to use background color to clearly define content areas.

6. Use of background wallpaper images.

Minimize the use of background wallpaper. Most background wallpaper images are so faint that they don't distract us. But we do still see them, which adds more work to the mind.