Web Usability came of age in the late 1990s to counter the excesses of first and second generation sites that were, well, frustrating to say the least. At the helm of the Web Usability movement was Jakob Nielsen, AKA king of usability, an interface designer/computer scientist who extended the rigorous principles of software usability testing to the new medium of Web design.

Today in 2003, an Internet-savvy, exponentially growing number of Web users can only make usability more relevant. So we asked our favorite Nilsson (Sessions instructor Piper Nilsson that is) to talk about Web usability today. In her four-year career for a leading Web design agency, Piper blueprinted sites for such global clients as MetLife, Pepsi, ETS, and Citibank. Her course Information Design II focuses on a systematic process for information design.

Q. In usability testing, the end user (site visitor) is number 1. What are some of the usability issues that new Web designers typically overlook?

Piper: Let's face it, it's easy to be distracted by the graphics, coding, and other technical aspects of the site design process. In the all excitement of creating a site, the end user's needs can quickly fly out the window. But the result can be a site with poor navigation, slow loading, oversized page dimensions, or inappropriate technology.

We have all seen sites that the designer obviously spent a lot of time on, but the graphics are so overwhelming that you can't make it past the first page.

You can combat this by staying focused on the purpose of the site. Force your client to provide demographics on the end user. Do a task analysis that indicates what features and functions are important to him or her. Figure out the site's functional requirements by doing this brainwork before any designs take place.

Q. Can you give me an example?

Piper: If you are creating a Web site for your local soccer club, for example, one user group is parents. Parents need quick, easy access to information ñ game schedules, carpools, fees, and uniform requirements. This user group has a range of skill levels, from computer novices to professionals. Parents may be viewing the site from dial-up connections at home or a high-speed line at work.

To reach this audience, the technology should be kept simple. Parents don't need to see a huge photograph of a soccer ball that will take forever to load. Just give them quick access to the information they need. You can always add a "fun" section with interactive games, sport tips, and photos for users with more time to browse.

Q. No oversized football, huh? Jakob Nielsen famously declared "lose the graphic, add traffic." And yet graphic content is clearly key to communicating on the Web. What's your advice for fledging designers?

Piper: It's tricky, but one must stay objective about whether a graphic is really necessary. Does it contribute to the site branding? Does it offer information that is most effective explained visually?

There's obviously a camp that argues that minimal graphic content is "Web-friendly." But we must also consider the increasingly high sophistication of Web users, who expect some kind of visual entertainment or communication as part of the package.

Advances in image optimization make graphic content easier to deliver, without sacrificing usability. However, file and page size are still key issues for any Web designer. Try to keep the total page size below 40k. That takes about 15 seconds to load at a 28.8 kbps connection speed (or under 10 seconds at 56k).

Q. One big concern for usability engineers is clear communication in navigation, labeling, and site structure. How is this achieved?

Piper: Navigational links should be textual (not just graphics) and descriptive, so that users know what to expect before they jump.

It's important to use labels that people will recognize. Internet users expect popular terms like Home, What's New, and Help. It's tempting to be more creative, but when it comes to labels, you're better off with conventional stuff. Consistency in terminology is everything.

Calling your front page "home" in one place and "main" in another will confuse and disorient users. Your language usage should be consistent, too. Use only verbs (browse, contact us) or only nouns (table of contents, feedback form); don't mix the two. Decide which words should be capitalized and what pronouns should be used, for examples, About us vs. About Ford Motors.

Q. When can a designer get more creative with information design?

Piper: It depends on the purpose of the Web site. Generic sites require generic solutions. If you are designing a news or reference site, you should follow the foundations. Users just want to find information, fast. They don't have time to learn special conventions just for your site.

If you are designing an entertainment site, on the other hand, there's more room for creativity. The user might be there to play a game, chat, or explore. Users will invest some time to figure out an unusual site structure (as long as it is fun, not frustrating).

Q. Another big usability concern is the use of appropriate technology for a site audience. "New" technologies" such as Flash, CSS, and DHTML were verboten three years ago, but are now increasingly adopted by most Web browsers. What are the rules of thumb?

Piper. Again, there are two camps here. Many would argue that because Flash, CSS, and DHTML are recognized by the majority of browsers, we should just regard them as universal technologies. Conversely, others believe that you don't want to alienate users with older browsers. Anybrowser.org is a great guide to preparing your code to meet browser foundations.

http://www.anybrowser.org/campaign/index.shtml

The site's founder adopts a philosophy espoused by Tim Berners-Lee, the original architect of the Internet:

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."

-Tim Berners-Lee in Technology Review, July 1996

From a purist's standpoint, a truly usable site must be easily accessed by the widest possible audience. A Flash designer, for example, should always provide an alternative source of content, and make sure a page works if plug-ins are not enabled. Of course, this is where usability crosses over into accessibility...

Q. Accessibility is the discipline of ensuring that a site is accessible by the widest possible audience, including the disabled. How important is it today?

Piper: It's more and more important. 8% of the U.S. population (approximately 24 million people) have some kind of visual, learning, cognitive, auditory or physical dexterity disability severe enough to affect their ability to access the Web. Special interest groups lobby to make sure these constituents are represented. In 1999, for example, AOL was actually sued by the National Federation of the Blind for not following accessibility guidelines.

The good news is that accessible Web sites don't need to be designed very differently. Many accessibility guidelines actually improve Web sites for non-disabled users as well. Here's a sample of the guidelines from the Web Accessibility Initiative Web site (http://www.w3.org/WAI/):

Images & animations: Use the alt HTML attribute to describe the function of each visual.

Multimedia: Provide captioning and transcripts of audio, and descriptions of video.

Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."

Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.

Graphs & charts: Summarize or use the longdesc HTML attribute. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.

Frames: Use the noframes element and meaningful titles. Tables. Make line-by-line reading sensible. Summarize.

Image maps: Use the client-side map and text for hotspots.

Check your work:. Validate by using tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

 

Q. Maybe we should have mentioned this earlier, but planning (as opposed to winging it) makes for good usability. In an ideal world, how should usability fit into the site design process?

Piper: Usability is a critical factor right at the beginning of the development process. Define the purpose of the site and how it will meet user needs. After you plan the site structure, build a rough prototype to test it. Then you're ready to add graphics and functionality.

It's also key at the end of the process. Not everyone has a budget for extensive user testing, but it is a good idea to hire someone or find a friend who is not familiar with a site to test it. At this point, you have invested so much in the project (blood, sweat, and maybe tears too) that it is hard to be objective. It can be horrifying to watch end users struggle with your carefully designed menu bar, but you will learn a lot from their reactions.