Enterprise Development - Front End DevX Home

Join

Premier Club

Page 1 sur 5 Search

eLearning

Code Library

Help

Locator+

Shop DevX

April 2000

April 2000

Seven Steps To Easier Web Navigation Even with great content, a hard-to-navigate website won't get used. Here's how to fix that. By Constance Petersen

It's all about the navigation. You'd think this would be obvious—until you try to get somewhere in the average website. For example, last fall I found myself shopping for tulip bulbs on the Web. I'd procrastinated planting until the first snows were falling, and the local stores were out. So I went to Garden.com and found the bulbs I wanted. I clicked the order now button, then browsed the site a few minutes longer.

In The Enterprise Zone • Product Review of the Week GDPro 4.0 • Site of the Week TechRepublic • Book Review of the Week Hack Attacks Denied: Complete Guide to Network LockDown • Tip of the Day Designing Tiers and Placing Business Rules in Them • Download of the Week Mahogany 0.62

When I was ready to check out, I looked expectantly at the top of the page for a shopping cart or basket icon. No such luck. I hunted the page for a link to something familiar: check out, your account, or complete your order. No go. I had no clue how to navigate to the page that would let me place my order. If I hadn't been desperate to buy Figure 1: No guessing games. those tulip bulbs, I would have left the Click here site (and never returned). After combing the site for another 10 minutes, I finally learned that Garden.com's term for shopping cart is wheelbarrow and that there is in fact a wheelbarrow text link on each page (see Figure 1, "No guessing games"). Obvious? Not. Some suggestions Here are seven suggestions for making navigation easier: 1. Use standard icons, conventions. I was a motivated buyer and a veteran Web shopper to boot, so I hung in there and figured it out. But how many sales has Garden.com lost to this nonstandard, less -thanobvious design? Creative Good Inc. recently published a research paper reviewing 10 leading Web shopping sites. In the study, 39

http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp 24/09/2001

Enterprise Development - Front End

Page 2 sur 5

percent of test shoppers failed in their buying attempts because sites were too difficult to navigate. The potential benefit to be reaped by improving a website's usability is staggering. This same research report indicated that $1 spent on advertising during the 1998 holiday season produced $5 in total revenue, while $1 spent on customer experience improvements yielded more than $60. On the Garden.com site I'd noticed the wheelbarrow link, all right. But it meant nothing to me. Nor should I have had to click on this link —or any other—in order to find out its purpose. One- or two -word links will seldom be clear on their own. Try not to make your users read an entire surrounding sentence or paragraph in order to decipher a link. Make the link text itself explicit if you can. But don't over explain either. If your link wraps to two lines, it will look like two links, which will confuse some people. Instead, clarify such a link's meaning with a description on the line or lines immediately following the link. Figure 2: Too much of a good thing. Click here 2. Avoid irrelevant links. Screen real estate is precious. Yet conventional wisdom has you stuffing every Web page with links to every section of your site. Why? If I'm shopping in the Books section of Amazon.com for a book about Web navigation (see Figure 2, "Too much of a good thing"), why would I want a link to Amazon's Toys & Video Games section? And in the rare times I do want this, I can use the search tool provided on every page. Or I can click once for the home page and navigate to another section from there. If Amazon were to recognize this, its designers could recover a solid half-inchhigh swath of prime screen real estate at the top of each page. On the other hand, Amazon also provides a vast array of relevant links for each book, including table of contents, an author Figure 3: Tiers for clear navigation. interview, editorial reviews, and customer reviews. It also smartly Click here cross-sells by including links to other books by the author, similar books by subject, and associated customer purchases.

http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp ... 24/09/2001

Enterprise Development - Front End

Page 3 sur 5

3. Reveal structure. I trade stocks and mutual funds on Dljdirect.com, whose three-tiered navigation toolbar structures the website's pages effectively (see Figure 3, "Tiers for clear navigation"). When I click Trading, my choices are immediately clear: I can trade stocks, options, mutual funds, and bonds. I can also deal with existing orders or get information on commissions. The site reflects the way its users think, rather than the way it's organized internally. Navigation toolbars can reveal structure. It's fine to design the toolbar to reveal the contents of an entire site when the site has focused content. But for diverse sites like Amazon's you should design unique toolbars for each section. Since navigation toolbars let users choose the task or viewing order, they're especially good for Web apps serving diverse user needs and preferences. Use them when you can organize the information or tasks into a Figure 4: Crumby breadcrumbs. hierarchy with two or three Click here levels. Offering an analysis on navigation toolbars, David Anderson, a specialist in interaction design, discusses a UI design pattern he calls the Chessboard Layout Pattern. This full -screen presentation of a single view lets users navigate quickly to other related data, using no more than two mouse clicks, navigation choices, or selections. Named for an 8-square by 8-square chessboard, this pattern gives users 7+/ -2 first level choices, subdivided into 7+/-2 second-level choices. Navigation toolbars based on this pattern provide simple, fast, organized navigation through numerous screens. You can support even more screens by subdividing the second-level choices into a third tier. 4. Leave breadcrumbs. If navigation toolbars don't work for your site, you can still help users find their way back up to any higher level with breadcrumb links. These are a horizontal series of text links connecting to all parent levels of the hierarchy above the current location. These links also add to users' understanding of your website by placing each page in context within the hierarchy. Say I'm shopping at Garden.com. I go to shopping and click on seeds & seed starting. From the 10 options in that category, I choose wildflower seeds. There I find three subcategories—natives, non-natives, and blends. At blends the breadcrumb trail should show me: shopping | seeds & seed starting | wildflower seeds | blends. If I want to see other types of wildflower seeds, I click on the wildflower seeds breadcrumb link. If I want to see other types of flower seeds (such as perennial flower seeds), I click on the seeds & seed starting breadcrumb link to see the other choices. Figure 5: More stupid guessing games. Click here

Actually, Garden.com's breadcrumb links fall short (see Figure 4, "Crumby breadcrumbs"). In this instance they show shopping | wildflower seeds | blends. The link to seeds & seed starting is missing and blends should

http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp ... 24/09/2001

Enterprise Development - Front End

Page 4 sur 5

not be a hypertext link. 5. Don't bury information. No page on your site should be farther than three clicks away from any other page. For example, from a detail page on Amazon.com (see Figure 2 again), the shortcuts include: ? ? ? ? ?

Buy the item, Jump to related items, Search for another item, Purchase items in your shopping cart, and Manage your account.

You can also provide shortcuts using site maps, tables of contents, and pulldown menus. 6. Don't be mysterious. A section of the WebPagesThatSuck.com website is devoted to "mystery meat" navigation. This is where you don't even know that a graphic is navigational until or unless you pass the mouse over Figure 6:eBay shows the way. Click here it, then hidden navigational information suddenly appears. The Gravis .com website (see Figure 5, "More stupid guessing games") provides one example out of dozens identified on WebPagesThatSuck.com. Here, if you happen to pass the mouse over the upper joints of the fingers in the bottom right corner of the home page, descriptive text will appear in a small, unlabeled, previously empty text box in the top right corner of the page. Even a game products page shouldn't make a game out of its navigation—especially one as dumb as this. 7. Provide help. Many websites offer a search tool to help users navigate. This becomes mandatory at large sites like eBay.com. A well-designed search tool will offer navigation assistance through various useful features. It will link to a help page that explains search options. It will provide an example -based hint next to the search box to minimize trips to the search options help page. Where applicable it will include a dropdown list for searching based on common keywords. And it will let users narrow search results and find related search results. I get all this and more on eBay. The find items search provides six custom forms covering a wide variety of ways to search for current and completed auction items. Likewise, the find members search provides four handy custom search forms for getting information on bidders and sellers. The eBay search results page lets me adjust my search criteria, narrow or expand the results, and sort my search results (see Figure 6, "eBay shows the way"). You also get a search hint and link to more search tips.

Constance Petersen is co-founder of SoftMedia Artisans Inc., which advises clients on website creation. Her address is [email protected].

Sponsored Links Best by test! See how IBM's DB2 and eSeries hardware aced the TPC-W benchmarks!

http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp ... 24/09/2001

Enterprise Development - Front End

Page 5 sur 5

Think Oracle9i: the complete e-business infrastructure. Learn more. Downloads, articles, tips, and training at Forte for Java Resources. Java Developers: Are you making enough? Find out NOW. Gain control of your projects without getting bogged down in paperwork

DevX Home | VB Zone | Java Zone | C++ Zone | Enterprise Zone | Get Help .NET Guide | XML Zone | WebBuilder | Database Dev Zone | Wireless Zone Visual Studio Magazine | Java Pro | XML Magazine | Exchange & Outlook | VBITS MarketPlace | Knowledge Xchange | Newsletters | Tech Tips Advertise | Help | Copyright | Privacy Statement

http://www.enterprisedev.com/upload/free/features/entdev/2000/04apr00/fe0400/fe0400.asp ... 24/09/2001