The Creative Toolbox: Usability by Design
The words "usability" and "Web" have been joined at the hip for some time. You can't get too far into the discussion of a successful Web site without covering the merits of its usability. Good design should result in a highly usable product, but usability may not be foremost on your mind when designing for the Web. Whether you're new to the concept of Web usability or an old pro, you may find yourself buildling better, more-frequented Web sites if you spend some time learning or reviewing usability basics.
Web usability is a big topic, to be sure, but the usability of a Web site's navigation is especially crucial to its success. If users have a hard time navigating through a site then its design has failed before it has even had a chance to present itself. How long would you put up with a car with the gearshift in the back seat, or with a steering wheel that behaved differently when turned left than when turned right?
For this discussion we'll focus on a few fundamental elements of navigation. Designing interactive elements to appear clickable, building feedback into interfaces, and giving users a sense of where they are can be effective ways to enhance a site's usability.
It may sound like common sense to design buttons to look like buttons, but many sites overlook this obvious rule. In fact, it's one of the biggest problems plaguing the Web to this day.
An element on a page meant to be interacted with, whether it's a button or hyperlink, should communicate this visually. Buttons should provide what usability experts call a "virtual affordance." Just as a well-designed doorknob presents itself as something you place your hand on and turn -- a natural affordance -- a button should lend (or afford) itself to being clicked or interacted with in some fashion. This usually can be accomplished simply by adding some dimensionality to the button such as a bevel or an emboss effect, or by simply enclosing it within a color field or box outline. Formulate an interaction scheme and adhere closely to it. If all interactive (or hot) elements are colored red, carry this theme over to your buttons as well.
Visual clues such as the shadow effect above help indicate which elements are meant to be clicked.
Hyperlinks are the essence of the Web. Standard text hyperlinks have been around since the first browsers, and hence many surfers get the idea presented by a simple hyperlink faster than even the best-designed button.
Since the introduction of Cascading Style Sheets, omitting the underline emphasis of hyperlinks is becoming increasingly common. Many sites opt to color or bold a hyperlink instead of using the standard underline. If you want a highly usable hyperlink system, though, stick to the underlines. If you're willing to take a marginal hit in usability for the sake of aesthetics, be sure to at least bold or color your links so they appear different enough from static text, and perhaps even reintroduce the underline in the mouse-over state.
Whatever the interaction scheme you devise, avoid using underlines as a form of text emphasis. Users have been trained to think of underlines as links. Using them in a different manner will only frustrate or confuse them.
Although the designer decided to omit the underlines in this site's links, they did create a strong interaction scheme. Interactive elements are in red.
I Felt That
Telephones are a good example of built-in feedback. The distinct tones provided when different buttons are pressed are a cue to their identity, and the dial tone offers reassurance that this thing is actually on. A highly usable Web site includes many forms of interactive feedback with the user in mind. A click or down state assigned to buttons allows visitors to know that the button has indeed been clicked.
Button rollover states provide additional feedback and can pull double-duty to further inform the user of where the button will take them. Once a navigational button is clicked, it's a good idea to have that button change to an off state that appears inactive or grayed-out. This serves many functions: It gives feedback to the user, letting them know that they clicked that particular button and are now in the selected area. And with a quick scan, they can see where they are in relation to the rest of the site, provided the rest of the navigation makes this obvious. If you are making a navigation system using hyperlinks (such as the types mentioned below), it's good practice to remove the underline or gray-out the link they are presently on.
The navigation provides no feedback that I'm actually in the Resources section of this site, though the Resources headline makes the location fairly obvious.
This site includes excellent navigation feedback. Glancing at the navigation, I see I'm in Products & Services.
You Are Here
Smart fire escape plans, mall directories, and well-conceived subway maps share one thing in common: a "You Are Here" mark. This helps you to quickly orient yourself in relation to your immediate surroundings, and gives you perspective on what's possible from your current setting. Although browsing an unfamiliar Web site is rarely a life-or-death situation, a "You Are Here" mechanism can really boost a site's navigation. I separate these methods into two types of applications: a "Browsing Aide" and a "Process Aide."
The Process Aide significantly assists in filling out a multi-field online application or a consumer checkout process. I usually refer to this as "landmarking." Amazon.com's current checkout process is a prime example of landmarking. It explains not only where you are, but what you've done and how much is left to do before you're finished. I believe it is important to show a user how many steps are required, especially if you're asking them to fill out several pages of information. This system is typically represented as some sort of graphic timeline or roadmap. The added ability to click on previous steps could be included, in case the user wishes to back up and change options or information.
Amazon.com's checkout process is helped along by this "landmarking" graphic that indicates where you are in the scheme of things.
The Browsing Aide offers to the user the path to the page they arrived on with easy access to go back to any point along the path. This navigational aid is often referred to as "breadcrumbing" or "traceable paths." Although there are different ways to employ this type of mechanism, the most common one is to have a simple horizontal path line that resembles a file directory path using basic titles of visited pages.
Something like this: "Home > About Us > Investor Relations" is an example of a Browsing Aide. Past pages become clickable, while the currently browsed page has no link and should appear in its selected state. And if a user jumps into a specific page in the site, a traceable path should show as if they arrived there by clicking on the appropriate links.
MySimon.com makes good uses of "breadcrumbing." Check out the highly-clickable Track Search button as well.
A Balanced Approach
Providing users the controls they're accustomed to and including additional navigational aides whenever possible should keep your sites from falling prey to poor usability. Granted, talk of usability brings out strong opinions in many who design for the Web. Some people contend that being immediately usable and aethetically pleasing are mutually exclusive, that one design simply can't achieve both. To my way of thinking, great Web design is born when you succeed in the delicate task of balancing the two. It helps simply to use common sense and to keep the uninitiated user in mind.
Read more by George Penston.