User-Centered Design & Web Designers

User-centered design seems to be all the rage these days. And frankly, I’m glad.

For years, web designers have been forcing their users’ browsers to conform to very specific table layouts, use specific fonts, and even override the user’s browser specifications. Instead of a page of HTML being rendered the way a user wanted it, the web designer would use a combination of HTML tags to make the page render as close to the way they wanted as possible. What’s wrong with this method is that it completely breaks the concept user-centered design.

Hypertext was designed with the idea that it would be a simple markup language for linking text-based documents. Simple styles like bold, italic and underline would work exactly the same way across all browsers and HTML-compatible readers. However, taking this a step further, browser engineers realized that they should allow for controls in the browser so that the end user could define some of the default browser configurations. Examples of this are the default background color, default text size, and the default text color. If Joe User has a vision disability and he can only read 24-point black text on white on a white background, then Joe User should be able to change his default browser settings to render pages with these settings. In essence, to make the pages he’s reading “usable” for his specific needs.

The problem is that web designers did not pay attention to the original hypertext guidelines that allowed people like Joe User to read web sites. Instead, they took advantage of Netscape’s FONT tag and started forcing their web designs to use very specific font faces, styles, colors, and sizes. For people like Joe User, this was a bad thing, because as soon as he visited a site that used the FONT tag, he could no longer read it. This happens because the FONT tag over-rides the settings that Joe User has given his browser (24 point black text on a white background).

Most web designers come from a print design background, where they’ve been designing with a tight control over font settings, colors and styles for years. When they first make the foray into web design, they mistakenly think they can have those same kinds of controls by using the FONT tag extensively.

Another big problem with usability of web sites are what some people call text-GIFs. Text-GIFs are words (or even paragraphs of text) that have ben rendered with an image-editing program like Adobe Photoshop and then placed into a web design as primary content. While a page full of text-GIFs certainly allows the web designer the same controls he had in print design, it completely blows the usability test. What happens when Joe User with the vision disability tries to visit this page with his browser? Right, he can’t read a single word, because they’ve all been set into graphics.

Another problem is fixed-width tables. Lots of web designers have very fast and cool computers with monster 21-inch monitors to do their work on. When they are doing their web design, they often forget that many end users have much smaller monitors, and mistakenly give their tables a fixed width. What happens when a web site that uses a fixed table layout of 800 pixels wide is visited by a user whose monitor can only display 640 pixels wide? Yep, the user has to scroll sideways. This is very unusable. A solution is to use a table layout that expands or grows with the user’s browser. This type of design is called “liquid HTML” or “stretchy pages” because the web site will appear to stretch and grow as wide as the user’s browser and monitor will allow. This accommodates users with small and large monitors, but makes the design process much harder as the web designer has less control over page layout.

As the Internet becomes more and more popular web designers will need to start thinking about their end users even more. One of the fastest growing online populations are people over the age of 60. Yep, all those old folks with poor eyesight who are going to increase the default font size in their browser. You are not doing them any favors by over-riding this user-centric browser feature by using the FONT tag to specify a font size.

User-centered web design is all about giving the control back to the user. By letting the user decide how big they want the fonts, what font face they want your page text displayed in, and how big they want the browser window, web designers can solve the long-standing problem of providing universal access to their web sites.

Posted by Cameron Barrett at July 1, 1999 11:59 PM