By: Jon Meads (Usability Architects, Inc)
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.
No question 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 shop for a house). 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.
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.
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:
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 demonstrated to them by a knowledgeable user -- typically one of the developers of the web site. This person already knows how to access given pages and how to conduct interactions at the site. Consequently the demonstration is smooth, efficient, and successful -- but unfortunately, it's theater, not reality. The user interaction that occurs in a demonstration 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.
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
With the Internet being used more and more for transactions between the viewer and the web site owner, good task guidance is becoming a more critical issue. Whether a viewer wants to purchase a stock, buy software, look for a home, or simply learn the feeding habits of Mesopotamian desert reptiles, the path to performing the task should be clear. The site developer should always assume that the viewer is visiting the site for the first time.
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
Readability continues to be a common web site problem in spite of the number of critics who have raised this issue. Simply stated, there's no sense putting text on a web page unless it can be read. Good graphics ensure that the text presented is legible and easy to scan. Here are some tips to keep in mind:
Comprehension
Comprehension isn't the same as readability; you can read something without comprehending it. To understand the web page content, viewers need to assimilate it into their own context. Good graphics help the viewer interpret the content and move on to the next page. Poor graphics force viewers to work for comprehension and to struggle to find the relationship between the content and their goals.
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
Long waits are death to usability. Having a lot of downloaded graphics may result in a great web page but often means poor usability. I'm not aware of any studies on the length of time a person will spend waiting for a web page download to complete, but studies on response time show that people hate wait periods that take an indefinite amount of time.
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.
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:
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.