Principles of Good Interface and Screen Design 289

Step 3: Principles of Good Interface and Screen Design 289

Compatibility. The entire Web page content should be accessible from the browsers of at least 95 percent of all users, presenting content as consistently and pre- dictable as possible. In general, use browser defaults as much as possible, design- ing for what everyone can see. Do not assume, however, that all users will have the same browser features, and will have set the same defaults. Some people may use larger fonts, override fonts, or use fewer colors. So, never assume that the designed page will look exactly the same to users as it does to the designer. Test the design on all browsers and all versions of the each. Specify on the Web site what assumptions were made about the browser settings.

Operating Systems. Provide a design that will work well with the most common operating systems. Test the design on all popular operating systems. Connection speed. Design for the connection speeds used by most users. Currently, the typical Web home user is dialing in at 56 Kbps (or slower) through a regular telephone line. High-speed access is increasing in popularity for home users, however. The typical business user possesses a high-speed connection to the Web. At the other end of the connection speed scale are users with low-cost devices, users wanting low-bandwidth wireless access, users with small personal display devices, and users in developing countries with poor communication infrastructures. All must be supported in Web page design. Failure to consider these modem speed limitations will lead to long download times and can result in user frustration. The biggest influence on download speed is the number and size of graphics on Web pages.

Monitor Size and Resolution. Designed page content should always be restricted to the boundaries of an “image-safe” area horizontally, and perhaps vertically, depending upon whether vertical scrolling is determined as necessary to see the page’s entire content. Exceeding the horizontal safe area will require horizontal scrolling to see the page’s entire width. Because some information will not always be visible, content usability and interpretation will be severely degraded, and the user inconvenienced. Exceeding the safe area length will require vertical scrolling to see the entire page, and could push important information out of the user’s view. A display’s safe area will be dependent upon the monitor’s size and the resolution at which it is set. It must be established based upon the anticipated or known range of monitor sizes and their set resolutions. Current typical moni- tor sizes range from 13 to 21 inches (measured diagonally) with 17 inches being most common.

Today, about 90 percent of users have their screen resolution set to 800×600, 1024×768, or 1280×1024 pixels. Designing for these settings will accommodate the majority of users.

Fonts. Not all browsers provide the same typographic operations. Different default font types and sizes may exist, depending on the type of browser, browser ver- sion, and operating system the browser runs on. If a page is designed using a font the user does not have installed, the browser displays its default fonts. Many older browsers support only two fonts, Times New Roman and Courier. Newer browsers support more fonts but they must be installed on the machine doing the browsing. Default fonts may include Times New Roman, Arial, Helvetica, and

290 Part 2: The User Interface Design Process

It is best to stick with the default fonts installed on the user’s computers. All available options must be known before beginning the design process. Then ensure that the text is readable and legible in all usage environments.

Color. The color palette must be of a variety large enough to permit establishment of a family of discriminable colors. The colors used must be accurately and clearly presented in all situations, but be aware that colors may appear slightly differently on different monitors, and all users may not default their palettes to high color settings. Use colors that will succeed on a variety of platforms and monitors. Design using a browser-safe, cross-platform palette of 216 colors. It is sometimes referred to as a “Web safe” color palette.

Versions. To provide universal access to a Web site, provide multiple versions that support multiple browsers. To limit the site to one browser may deny access to, and alienate, users who do not have the proper one. Make use of browser “snif- fers,” programs on the server that detect the user’s browser type and determine which version should then be downloaded.

Always provide a text-only version of the Web site. This will be necessary as long as users with small displays and low bandwidths exist. Vision-impaired users with readers will also require a text-only version, as will users with text- only browsers, and those who turn off image display.