Bleeding-edge designers and simplicity gurus don't often see eye-to-eye when it comes to website design. A website may make perfect sense to the developer, but a design that is focused on bells and whistles can turn users away. How often have you stopped loading a page that requires plug-ins or were disappointed after waiting several minutes for an unnecessary image to finally appear? When people were more committed to learning software due to expense and limited choices, they were forced to adapt to poorly designed user-interfaces. But on the internet, choice is the users' ballot, and their votes can be costly.

While beautiful, impressive, and compelling design is important for a variety of reasons (including creating brand identity, entertaining and drawing people in, and establishing credibility) design choices need to be weighed against meeting the user's needs in order for a site to achieve its goal.

For a quick reference, see our Dos and don'ts for achieving usability in design.

Simplicity rules

Designers may be somewhat disheartened to learn that if a design works without a certain design element, remove it. While not everyone may want to follow such a drastic rule in all their designs, it is useful to remember that graphics can often be only supplementary to a website and should never get in the way of users. And remember, at least a million people out there are browsing without any graphics at all.

Follow established web conventions

The web is becoming a genre with its own established conventions. From a usability standpoint, it can be helpful to follow some of the design conventions that are being established by dominant websites as users are accustomed to seeing certain layouts and features on commerce sites, marketing sites, or informational sites.

For example, studies have shown that blue-underlined text is the most reliable indicator of links and provide the most click-throughs. Using another color drastically reduces click-throughs and using graphics reduces the number even further. Another advantage to text links is that browsers support differentiating visited and unvisited links, which cannot be supported with graphics.

Don't disable user preferences

In website design, there is a constant tension between wanting to control the way a page looks and allowing users to set their own preferences. Designers will want to shape the overall look of a page. However, users should not be prevented from customizing certain elements for themselves. You should keep in mind that users can set their own preferences for:

• Text link colors (visited and unvisited)
• Background color
• Displaying graphics or not

With this in mind, background and text link colors should be chosen with user preferences and browser defaults in mind. Make sure that there is enough contrast between background and text.

Use semantic tags whenever possible

Another practice that can increase usability is the use of semantic tags rather than format tags. Although format tags offer designers more control over the appearance of text, semantic tags can be more usable across platforms. People with different browsers will more likely get the proper interpretation of text regardless of how it is displayed. For example, users with screen readers may be able to hear ‹STRONG› words emphasized in the speech synthesis as opposed to words in bold or italics. And automated tools can interpret an ‹H1› tag versus a header displayed as ‹FONT SIZE=5›.

Dos and don'ts for achieving usability in design

• Do:
  • Use ALT tags for all graphics, especially navigation graphics.
  • Use black text on white background whenever possible for optimal legibility.
  • Use either plain-color backgrounds or extremely subtle background patterns.
  • Make sure text is in a printable color (not white).
  • Place navigation in a consistent location on each page of your website.
  • Use a familiar location for navigation bars.
  • Keep the design from scrolling horizontally.
  • Use one axis of symmetry for centered text on a page.
  • Encourage scrolling by splitting an image at the fold.

• Don't:
  • Allow ALT tags to get clipped (especially an issue for small, fixed width images).
  • Display static text in blue or underlined.
  • Use boldface or ALL CAPS for long pieces of text. These slow down reading.
  • Leave too much white space--reduces scannability.
  • Make the user scroll to find critical information, especially transaction buttons and navigation links.
  • Use horizontal rules to separate chunks of content.
  • Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned.
  • Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally.

Journalists have long written in a style that tells the reader the most important kernel of information followed by supporting information, and concluding with more general background. On the Web, this style is even more important since we cannot always rely on users to scroll to the bottom of the page. It is possible that they will only read what appears "above the fold".

It is important, therefore, that text be kept to short, scannable segments. Reading from a computer screen is 25% slower than reading on paper. Another study found that 79% of test users always scanned any new page they came across while only 16% read word-by-word.

Some ways to break up content into shorter segments are to:

• State conclusions first and create links to get more detailed information
• Have only one idea per paragraph (with the topic sentence first)
• Use frequent headings and sub-headings that are meaningful rather than merely clever

Some ways to make text scannable are to:

• Create bulleted lists
• Highlight keywords (using hypertext links, typeface variations, color)
• Use large, easy to read fonts
• Make sure that there is enough contrast between text and background colors
• Avoid using strong shadows or italics (except for large font sizes)

Task Oriented Writing

Information on a website needs to support the user's tasks. The audience and goals should be determined by a requirements analysis conducted prior to building the site. The text can then be written with the goals of the user in mind.

It is also important to help users navigate the website. Whenever possible, guide the user's actions by aiding the decision-making process. One way to do this is to organize information in the order that the user is likely to need it. It is important to be clear about the choices offered by labeling buttons appropriately.

Consistency

It is important that the writing on a website appears uniform and consistent in order to achieve clarity and establish a brand identity. The only way to ensure that writing does not appear idiosyncratic is to use an agreed upon style guide that establishes the writing standards for the project. The style guide should encompass issues such as:

• Tone
• Voice
• Terminology
• Spelling self-consistency (e.g. web site/website)
• Structure
• Layout
• File Formats

Clearing up Ambiguities

Websites can confuse users with ambiguous language and instructions. Not only can these ambiguities be annoying, but they can also mean serious losses for businesses. For example, an "Order Now" button that takes users to a page where they check a shopping cart first should say instead, "Verify My Order." This language change can make the difference between hesitancy to complete a transaction and assurance that the process is safe.

Users can feel lost even in a relatively small information space that is not well organized. The problem becomes even greater when you consider the possibility that people can arrive at any given web page from any other page on the web. They may not always enter your site from your home page.

Information architecture focuses on designing effective navigation, organization, labeling, and search systems. It is an interdisciplinary field that draws upon the research and practices of information and library science, computer science, graphic design, and psychology. The role of the information architect is crucial to the planning and conceptual design/redesign stages of web development, as good information architecture lays the foundation upon which a website is built.

For a quick reference, see our Tips for creating usable navigational systems.

The steps to take in coming up with an architecture for your website include:

1. Finding out what the mission or purpose of the website is--why will people come to your site?
2. Determining the immediate and long range goals of the site--are they different?
3. Pinpointing the intended audiences and conducting a requirements analysis for each group.
4. Collecting content and doing inventory.
5. Determining the organizational structure of the website, which can include:
   • hierarchical
   • narrow and deep
   • broad and shallow
   • sequential
6. Creating an outline of the site, which can include:
   • site maps: maps that reflect navigation and main content areas. They are usually constructed to look like flowcharts and show how users will navigate from one section to another.
   • content maps: detailed maps that show what exists on each page and how content on the pages is related.
7. Creating a visual blueprint of the site, which can include:
   • page schematics: black and white line drawings or block diagrams. These may or may not reflect layout and are used mostly to inform the designer and the client exactly what information, links, content, promotional space, and navigation will be on every page of the site. Schematics help illustrate priority.
8. Defining the navigation systems
   • global
   • local

Tips for creating usable navigational systems:

Navigation should:

• Be easy to learn.
• Be consistent throughout the website.
• Provide feedback.
• Use the minimum number of clicks to arrive at the next destination.
• Use clear and intuitive labels.
• Support user tasks.
• Have each link be distinct from other links.
• Group navigation into logical units.
• Avoid making the user scroll to get to important navigation or submit buttons.
• Not disable the browser's back button.

From our perspective, quality assurance is a subset of the overall usability goal—after all, a website isn't usable if it isn't working.

Quality Assurance is an important step in the website development process. A broken link or a misspelled word may seem like trivial mistakes, but they can greatly undermine the credibility of your website. You want people who visit your site to feel assured of the quality of the information they find.

The guidelines to follow should address editorial, graphics, and coding conventions. After the site has been built, it should be put through a rigorous post-production process. Finally, there should be a provision for user feedback which can influence the ongoing maintenance of the site.

Some areas to cover in your own quality assurance checklist include:

1. Content
   • spelling, grammar, mechanics
   • all critical information is present
   • titles, headers, and navigation labeled correctly
2. Documentation
3. Graphics and layout
   • image quality
   • download time
   • text layout
   • alignment of elements
   • color accuracy
4. Browser compatibility
   • check on different platforms
   • check on different browsers
5. User preference compatibility
   • font size
   • link colors and underlining
   • plug-ins
   • window size