Finding Needles In A WWW Haystack: A Design Challenge

Michael V. Mahoney
E. I. du Pont de Nemours and Company
External Affairs
Information Design and Development
Michael.V.Mahoney@usa.dupont.com

[ Speaker's Notes ]

The advantages of global accessibility and ease of use of the World Wide Web as a publication medium is counterbalanced by the severe constraints that the Web imposes on the designer. The browser interface is more like a stack of postcards than a book. The challenge is greatest when you need to provide your readers with selective access to a large volume of information. The DuPont Online Product Listing at www.dupont.com/corp/products/proddb.html is an example of one approach to the challenge. The DuPont Construction Enterprise Library of Construction Materials at www.dupont.com/corp/markets/construction/searchform.html is another.

Give Readers Multiple Paths to Product Information

For any commercial web site, product information is a key content element. There is likely to be a lot of it, and it may be highly technical in nature. Product literature may include features and benefits lists, physical properties tables, application and troubleshooting instructions, and safety and handling directions.

Although some readers may know the name of the product for which they are searching, many may not. Some readers will know the generic name (e.g., "glycolic acid"), but not your company's product name ("Glypure®"). Others may thinking about the application for which they intend to use the product (dairy equipment cleaning), while others may be thinking in terms of the market or industry in which they work (personal care products). You must anticipate these different readers' needs and design multiple ways to find your company's product literature.

The DuPont web site offers several major paths to product information.

Direct Addressing
First, readers may go directly to a business/brand home page if they know the URL or if they make a cogent guess. The DuPont product home pages are mostly organized by top-level directory after the domain name, for example: www.dupont.com/coolmax, www.dupont.com/teflon, www.dupont.com/glycolicacid. Individual businesses list their web addresses on their printed literature and product packaging, too.

Markets Menu and Product or Business Menus
For readers who start at the www.dupont.com corporate home page, there is a prominent link in the top navigation menu to a "Products and Services" page at www.dupont.com/corp/products. This page is laid out in two columns, with a series of short links on the left to "Product News" stories on specific products and with a series of pull-down selection menus on the right identified as "Products by Market Segment" and "Product and Business segment web sites". The products featured on the left change every two weeks; the menu lists on the right are static.

The reader may select major market segments from "Products by Market Segment" menu. Major markets like Aerospace, Agriculture, Apparel, Automotive, Construction, and Lubricants then link to pages for businesses that offer products in those markets.

Below the markets menu are the "Product and Business segment web sites" chunked into categories like Chemicals, Diversified Businesses, Fibers, Life Sciences, and Polymers. Although the list of businesses is helpful, it is broken down largely by the DuPont business hierarchy. This organization scheme is not always lucid for outsiders. If you are not a customer with a current business relationship, you may not be able to distinguish between DuPont Advanced Fibers Systems and DuPont Performance Fabrics when looking for information on a particular fiber product.

Online Product Listing
The navigation alternative that seems to be most popular with our readers is an online product database that is linked to the products page as "Search our Product database containing over 1000 of our most common products." This database does not expect the reader to know anything about DuPont product trade names or DuPont business organizations; only the product or generic name, description, uses, or industries in which the product may be used.

This database is the navigational tool most helpful for locating product information needles in the WWW haystack.

Design Tips for an Online Database

Your company may already have a product database that you can grab onto and repurpose for WWW publication.

In our case, the Product Information Guide (Electronic), also known by its acronym, PIG-E, is maintained by our Corporate Telecontact Center and used as the primary source of product information by the operators who answer the 800 number for public access to DuPont. It is based on information provided by product stewards in each business. The extract from PIG-E used for our online product database contains product names, generic names, descriptions, uses, and industry cross-references for approximately 1000 of our most popular products.

The extract is imported into MS Access as a DBF file. A report defined in Access wraps HTML tags around fields and prints to an RTF file. This file, after some minor tweaks in MS Word, is saved as an ASCII data file and uploaded to our web server. The search form calls a simple Perl script which extracts matching records from the data file and displays them in the reader's browser. You may try it yourself; the address is www.dupont.com/corp/products/proddb.html.

An Effective Search Form:
Use HTML Form Elements to Build a Database Query
The first design objective is to make it easy for your reader to ask the right question. Your playing field is the design of the form that allows your reader to search the database.

Choose the right fields for search criteria. Databases are structured and contain information organized in specific fields. Not all fields are of equal value for searching. The DuPont Online Product Listing includes a field that identifies the strategic business unit that manufactures each product. It is not available as a search criteria on the form because most readers do not know or care what internal organization makes the product for which they are searching. Once they have found the product information, however, they may need to know who to contact to place orders or request samples.

When there are a limited number of values for a particular field, use something other than a simple form input field. Radio buttons, check boxes, and scrolling <SELECT> fields eliminate ambiguity and "near misses". With almost 1000 products in our database, that was not possible for the product name field. However, our industry cross-reference field makes a nice scrolling list with only forty-some possible choices.

Provide instructions and an example. In our case, we use the example of a search by product for information on one of our most well-known products, Teflon®. An additional example explains how to use the "logical AND" functionality of the database to narrow a search to items which match multiple criteria. Be concise, however, because the length of your instructions is inversely related to readers' willingness to read them. Fortunately, most World Wide Web readers with more than one day's experience in surfing have used search forms before and are familiar with how they work.

Consider using separate "question" and "answer" frames. If your web design standards permit the use of frames, you may want to design a frameset that poses the query in the top frame and presents the response in the bottom frame on the same screen. This is very helpful if you expect the reader to search repeatedly, refining his/her search strings with each iteration. It allows the reader to see both the question and the answer simultaneously. The DuPont Construction Enterprise Library of Construction Materials at www.dupont.com/corp/markets/construction/searchform.html is an example of this technique.

Consider offering alternatives to selection from the database. There may be readers who actually want the whole shooting match. If that is the case, you may want to offer a hotlink to a web page report listing all the records in the database. It might make sense to also offer an Adobe Acrobat version, or an MS Excel spreadsheet version. Sometimes a reader might want to make their own extracts and sorts of your data in ways you did not anticipate. Put a link in the footer of your form to solicit reader feedback and suggestions on your form design by e-mail. Readers on the Web are a vocal lot; they'll tell you what they like and don't like about your design.

Usable Output:
Display the Output in a Summary Form
Asking the right question is only half the battle. From the reader's point of view, if the output is poorly designed they'll never know if they asked the right question or not. Make it easy to interpret the output. The reader should be able to quickly scan or scroll through the output to decide whether the question is answered or whether he/she must go back to the form and try rephrasing the query.

Make output records visually distinct and highlight key information. Use heading tags for the most important fields. You might want to organize the output in HTML tables, possibly with different background colors in cells. Use horizontal rules (<HR> tags) to separate one record from the next. The DuPont Online Product Listing encloses product names in heading tags, italicizes generic names, and formats descriptions, uses, and industry cross-references as definition lists. Unordered (bullet) lists are used liberally. Records are separated by horizontal rule lines and additional vertical white space.

Guide the reader to detailed information elsewhere. One of the most important fields in our database is the URL address of the page with detailed product datasheets or Material Safety Data Sheets. The product description says just enough to whet the reader's appetite for more details. Hey, it's only a mouse click away!

Keep in mind that many readers will print your responses to look at later. Don't forget to list the URL explicitly so a printout is still a useful navigational tool. Avoid using phrases like "click here" at all costs. On a printout, those are just underlined words. A hotlinked web address is still a web address whether it's on screen or on paper.

Maintenance Is Crucial
Keeping a web database up to date is a considerable task, especially when manual processing of the data is required. Security provisions may prevent automated batch updates of information on the web server. Try to automate the maintenance as much as possible and keep to a regular schedule. Train a few other people on how to do it so you have some backup to fill in during vacation or other absences.

You are obligated to your readers to give them the most current, accurate information about your products. You are also obligated to your information providers to make sure they have the best chance of reaching readers who may be making purchasing decisions.

Measuring Your Success

Your web server administrator or webmaster can help you identify your search form in the web server logs and statistics reports. These reports may require some serious analysis, but they can tell you several things quite easily.

If the number of hits on the search page are significantly higher than the number of hits on the lookup script, then your search form may be intimidating readers from searching. If they see the form but don't hit the "Submit" button, then your form is not inviting their experimentation.

Conversely, if there are many more hits on the script than on the form, then it is likely that readers are searching the database repeatedly for each visit to the form. They may be searching in vain: not getting any answers to their queries, or getting so many answers that they continue trying to rephrase their queries to narrow down the number of matching records. In that case, try adding more search fields or offering more detailed examples or instructions.

Because the impact of browser caching makes raw hit counts difficult to interpret, your study of server stats is most helpful over multiple time periods. If the traffic on your online database increases month-to-month in a growing trend, then chances are that you're on the right track. Fine tune your design and see what differences are reflected in the statistics.

The DuPont Online Product Listing has perennially been among the top ten most-visited pages on the DuPont web site since it went live in July, 1995. I wish you as much luck with yours!

[ Speaker's Notes ]