Website Design: Design

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 Jakob Nielsen suggests going through all of your design elements and removing them one at a time. If a design works without a certain design element, kill it (Designing Web Usability, 2000). 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.