Web Interface Design ‘Rules of Thumb’ – Basic Conventions

Web Interface Design

Web Interface Design

In this section I lightly cover several site design issues that are commonly adopted as a set of best practices, or ‘Rules of Thumb’. These issues include the following:

World Wide Web Consortium (w3c) Compliance
Cross-Browser, Cross-Platform Compatibility
ADA Issues
Download Time Requirements
Navigation Design
Consistent Fonts
Screen Size Requirements

World Wide Web Consortium (w3c) Compliance
Both the Cascading Style Sheets and the hard-coded and dynamically-generated HTML code should fit within the confines of the W3C HTML 4.0 spec. To ensure solid, error-free code that works on different platforms across different browsers, a good web designer should adhere to this. Details of the w3c’s HTML 4.0 specification can be found at linux-mirror.org

Cross-Browser, Cross-Platform Compatibility
It’s important to note that statistically-speaking, 90 percent of all web page hits come from Netscape Navigator version 4+ and Microsoft Internet Explorer version 4+ browsers. Of that 90 percent, 80 percent of the hits originate from PC’s, 15 percent originate from Apple Macintosh computers, and the rest from other platforms. Even so, every developer should design their interface from the ground up with the aim of making their interfaces cross-browser and cross-platform compatible. This means that every mission-critical aspect of the site should be able to be viewed on a machine running Internet Explorer 4, Internet Explorer 5 and 6, Netscape Navigator 4, Netscape 6, and Mozilla 6, with the interface degrading gracefully as you use earlier browser versions.

ADA Issues
In accordance with the Americans with Disabilities Act, site designers should aim to provide for the needs of the visually impaired. To help facilitate this, it is important to provide ALT and SIZE attributes for all non-text elements of a site. The benefit of this practice is that it will not only help maintain page layout as it downloads, but that it will also provide feedback to users who are unable to see the graphics. A typical software package used to determine for ADA Compliance is the JAWS 3.3 screen reader for the blind.

Download Time Requirements
An essential ingredient to well-designed sites is efficiency: wherever you can ‘trim the fat’, go for it. Over a 28.8 KBPS modem, the pages hosted by a site should take no longer than eight seconds to load. This is a guiding principle, though the specifics will change as technology evolves. The goal is to allow the average user to access and navigate the site quickly and easily, and this is the “quickly” aspect. To meet these requirements, pages should be no more than 65K in total page weight – including graphics, source files, and applets. The total weight of a page is harder to gauge when dynamic content is used, because only the relevant components of a file are downloaded by the user. Animation tends to be rather large, and can increase the page weight a great deal, so be aware that while a Flash animation may only be 8K, the corresponding GIF may be 50K. Optimizing the graphics used on the page can help a great deal in providing for page efficiency, and tools like Macromedia Fireworks and Adobe Photoshop include built-in utilities that facilitate such tasks.

Navigation Design
A site should have consistency within the same level navigation, and sub-areas must have a look and feel that is consistent with the site as a whole. The user should not have to guess where they are. While look and feel are implicit within web site design, it is crucial that the implementation has the best possible navigation. Fonts, colors, location of logos, and so on should be consistent from area to area within each navigational depth. In addition, to avoid user confusion and disorientation within a site, the site designer should limit the design to a maximum of three navigational depths. This allows a user to become familiar with the unique aspects of the site’s design, which is important because the typical user wants to access a site and retrieve information as quickly and easily as possible. The user doesn’t want to have to guess where within the site he or she is at any given time. The site should allow the user to easily navigate to the area he or she wants to go, and obtain information.

Consistent Fonts
The site must be consistent in its use of fonts. For example, the font used for the body should always be the same, and so should the font that is used for the headings; however the body should not be the same as the headings. The Fonts section in the Page Layout article offers a more complete description of how to achieve this. Remember that tables will ignore the surrounding font information. This challenge is resolved by defining table fonts in the cascading style sheet (CSS), defined in the header and every page, as opposed to defining font tags in every table cell. Using a CSS provides better page efficiency, and allows the site designer to write modular code.

Screen Size Requirements
Every site should fit into a screen 800 pixels wide by 600 pixels high. Realistically this only applies to width, as vertical scrolling is a fact of life for any web user. However an unfavorable site design characteristic is evident if the user has to scroll horizontally to view content. The site designer or webmaster should make sure that all the content within a page can fit into an 800 pixel wide screen without forcing horizontal scrolling. Even though the trend for bigger and better monitor resolution is becoming more evident every day, it is considered a best practice to always design for the lowest common denominator. Take into account when designing your interfaces that the maximum allotted pixels for a fully-expanded browser window on a system running a screen resolution of 800 pixels wide by 600 pixels high, is 744. Sometimes on a small screen with fixed width inside other tables (even percentage widths count here), a table will slide under a graphic and look very odd – so make sure that you account for the presence of graphics. And as much as possible, the site created should also expand to 1600 pixels wide without losing the design. Remember, the browser is your friend – take advantage of its ability to adapt to the user’s environment.