USABILITY IS NOT GRAPHIC DESIGN

As usability consultants, we're often asked by potential clients to bring in a portfolio of "screens" that we've designed. But we don't have any, because we don't design "screens"; we design interaction, the intended behavior by which people will use a product or a web site. These requests from clients illustrate a problem with much of the web site development that's being done today: too often, usability is equated with graphic design. If viewers aren't staying with your web site, then the graphics need to be improved. The site has to be more eye-catching -- to "wow" the viewer.

Graphic design is important, and wowing the viewer can be desirable, but graphic design is not the same as usability. This is an important distinction. After you wow the viewer, what are you going to do for a second act? Wow them again? And after that? There are only so many "wows" a person can take. Most web site owners want the viewer to go further into the site to obtain additional information or to perform some activity (such as make a purchase or a stock trade). From a web site owner's perspective, usability means being able to induce the viewer to continue on in the web site and to perform those actions. But usability isn't only about what the site owner wants; it's also about what the viewer wants.

USABILITY VS. GRAPHICS

Many developers believe a web site can be made more usable by simply improving the icons, cleaning up ancillary graphics, or just making it look prettier. Wrong! The bottom line is that usability is the ability of a person to use something. With regard to web pages, this means the ability of viewers to get where they want to go, find what they're looking for, and do what they want to do. If a site has usability problems, changing the graphics is most likely not the solution.

No amount of improvement to graphics can make a screen usable if that screen is not designed for usability. A simple example is a web page I encountered when I tried to cancel a purchase order on my broker's online-trading web site. The directions on the page stated, "If this order is correct, please hit the Submit button." However, the only button on the page was a Cancel button; there was no Submit button. And what would the Cancel button do, anyway? Cancel the current transaction (leaving the purchase order in effect) or cancel the previous purchase order? Improving the graphic design would have done nothing to make this site more usable.

Graphic design can in fact get in the way of usability. I recently decided to explore online casinos, for which (as for casinos in real life) there's value in initially wowing the viewer. All the casino pages I saw achieved that effect to some extent. But one of them didn't know when to stop: after the initial page, there was a page with black text overlaid on a garish background, a swirl of a flaming red with swatches of royal blue. The graphic design interfered with my ability to read the message and gave me the impression that these people didn't know what they were doing -- definitely not an encouragement to place a remote bet. From a usability viewpoint, the graphic design kept the web page from doing what the web owner intended.

Good graphic design can be a big help in directing viewers to where they want to go; inappropriate graphic design can be a hindrance. Web pages that dazzle the viewer can also be distracting and can hide important information. They can make text unreadable and can turn off a viewer who is simply trying to get something done. Regardless of how good the graphic design of a site is, the site needs to be designed and architected for usability. Remember, web site usability has two components: inducing the web site viewers to do what the site owner wants, and enabling the web site viewers to do what they want.

THE MANAGEMENT DEMO FACTOR

If usability is not graphic design, why do so many projects opt to put their resources into graphic design when usability is actually what's needed?

One reason is that most people don't really understand what usability is, though they think they do -- after all, it seems like such a simple concept. This problem is compounded by the fact that a well-designed, eminently usable web site looks and feels so straightforward and easy to use. The mechanisms used to encourage and lead the viewer are so well integrated with the experience that they don't call attention to themselves -- they're transparent. But, like a lot of seemingly simple things, usability is more complex than it looks. A lot of knowledge and learning go into creating a design that will appear simple and straightforward, including:

• A knowledge of cognitive processes: how people perceive and recognize, how they associate concepts and actions, what influences understanding, and what makes decisions and choices complex or straightforward
• An understanding of the techniques for identifying who the web site viewers are, what motivates them, what they're familiar with, and what's likely to mislead or confuse them
• An understanding of when and how to verify design concepts and approaches, through prototypes and testing

Managers, like most people, don't perceive the effort that goes into making things simple. They can't see usability, but they can see graphic design, so they naturally look there first as the means for improving a web site.

Furthermore, most managers see a web site when it's presented to them in the form of a demo. A knowledgeable user -- typically one of the developers of the web site -- navigates through the site. This person already knows how to access given pages and how to conduct interactions at the site. Consequently the demo is smooth, efficient, and successful -- but unfortunately, it's theater, not reality. The user interaction that occurs in a demo may be far removed from what will happen in practice.

Recently I searched for real estate web pages to help a friend who was looking to buy a house. Most were a disappointment: they required specifying and respecifying a lot of criteria to identify different areas of town. They seemed designed for realtors who knew the neighborhoods, where the bus lines ran, and where the shopping centers and schools were. In a demo to a group of real estate VPs, a web site like this would look perfect -- but they aren't the viewers the site is trying to attract. If the VPs later hear complaints about the usability of their sites, they'll most likely conclude that the graphics need improvement -- after all, the interaction is just what they would want.

The attendees at a demo don't normally pay attention to the specific input and interaction. Instead it's the web site output -- what's displayed, the layout and graphics -- that catches their attention and shapes their opinions. If a subtle usability problem arises, where things don't quite seem right but it's hard to pin down what's wrong, managers are naturally inclined to assume the problem is in the graphics, since their perception of the demo was 90% screen presentation. But again, changing the graphic design for an inherently unusable web site is only a screen-deep solution.

GOOD GRAPHICS, BAD GRAPHICS

Graphics can enhance or impair the critical aspects of web site usability: navigation and task guidance; readability; comprehension; and presentation speed.

Navigation and Task Guidance

Good graphics direct the viewer's attention to the content and links that are the natural steps toward achieving the desired goal. Bad graphics direct attention to decoration or artifact or, worse yet, to links that take the viewer out of the desired navigation path. Having competing areas of high color contrast, prominently positioning nonessential information, and performing inappropriate animation are some of the graphic techniques that can lead viewers away from their goals.

Readability

• Select font colors that are readable on the background color. (Black on white is optimal for legibility.)
• Avoid making the font size too small.
• Don't make frames and tables so wide that the viewer will have to scroll horizontally.
• Be selective about the number and types of fonts used. (Remember, the font you choose may not be the one the browser presents.)
• Avoid extensive use of all caps. Except when you really want to shout, DON'T USE ALL CAPS!

Comprehension

Good graphic design organizes the presentation with "white space," while also taking into consideration the limited real estate of 15-inch or smaller screens. Poor design attempts to fit too much onto one web page, applying innovation and creativity to squeezing in and contouring content. Comprehension should follow from the first quick glance at a web page; it's not something that should require intense study and analysis.

Presentation Speed

Web sites that download a lot of graphics or Java code before anything substantial is presented may work well with mega-bandwidth lines but will lose a number of viewers when being sent through a busy ISP server and received by 28.8 modems. You not only need to know your viewers, you also need to know what they have for equipment and service.

THE GROWING IMPORTANCE OF USABILITY

As the web becomes more interactive, with viewers performing transactions and tasks on a regular basis, usability will become much more important than good graphics. That doesn't mean that good graphics won't be necessary, but it does mean that the successful web sites will be those that put usability first. Graphic design will continue to play a critical role in enhancing and highlighting usability.

So how do you achieve the right blend of usability and good graphic design? You need to start with usability in mind:

• Clearly define the specific objectives of the web site.
• Identify the intended viewers (who they are, their experience and background).
• Understand what range of equipment, browsers, and network connections viewers will be using to access your site.
• Reconcile your objectives with viewers' needs and goals.

The next step is to design the organization of the web site, including the task processes and the overall navigation. There are a number of different techniques that can be used to help with this, ranging from ordinary task analysis to card sorting (a usability technique to predict how users would organize and categorize elements of your web site). Once the interaction processes have been designed and the site content has been organized, you'll want to test a prototype design of the site to verify usability. This can be done using low-cost techniques that are often referred to as "cheap usability testing."

Having done this, you're ready to bring on the graphic designers. Many people will consider this to be late in the process, but it's really the optimum point, and it can save time and money. Once the constraints imposed by the navigation and process requirements are known, the graphic designer can proceed with these in mind, and the resulting design approaches are more likely to be acceptable and usable. The graphic design requires appropriate constraints, or it can undo all the work accomplished so far. The keys are simplicity and clarity, with an occasional strategic "wow!" Fill in the content and you have a web page your viewers will appreciate.

The author wishes to express his appreciation to Caroline Rose for editing improvements to this article, to Paul Dreyfus for the opportunity to write it, and to all the usability engineers and consultants who are busy educating clients on why they don't have "portfolios."

Jon Meads is president and principal consultant for Usability Architects, Inc., a firm specializing in user-centered design, in the engineering of usability into products, and in providing strategic consulting and advice on integrating usability engineering into the development process. He has been an active member of the Special Interest Group on Computer-Human Interaction (SIGCHI) for a number of years, and was a cochair of the CHI '90 Conference, a former ACM lecturer, and a former chair of the Special Interest Group on Computer Graphics (SIGGRAPH).

(3.98)