A Mini Case Study: Glossaries

I had a client who wanted an elegant way of providing definitions for medical terms on their site. This mini case study will not only introduce you to the design process but also give you fresh ideas that you can apply to your own site.

Link to a glossary page:
A popular way of providing definitions is with a glossary. By using the name tag on the definition list and a target attribute in the word's link, the click takes the user right to the word's definition on a separate page.

In text: <A HREF="glossary.html#hardword">hard word</A>
In glossary: <A NAME="hardword">hard word</A>: blah blah blah

The pros: This is easy to maintain - you just need one glossary, and changes are easy. The glossary can be used for multiple definitions, multiple pages and even multiple sites. The name-target code is unadorned HTML and will work in every browser. The cons: Going to another page breaks the reading flow. Some inexperienced Web surfers may not understand how to get back to their original place in the text.

Frames: Using frames, or multiple HTML files displayed on the same screen, a glossary could be included on the same page as the article. I'm not usually a fan of frames, but this seems to be a sensible implementation of the technique. The same name-target convention described above would be used to include the entire glossary in the frame (although a huge glossary might need to be broken down into smaller files to load more quckly.) You can see an example of a framed article and glossary here.

The pros: The definition shows up on the same screen as the defined word, not breaking the reading flow. You are working with one dictionary document - easy to create and maintain. You can use full HTML in the frame, including a graphics and links. The same format can be re-used for multiple pages. The cons: Some people get confused by frames, although this is a fairly straightforward implementation. The dictionary takes up quite a bit of screen real estate.

Tool tip:
This is a little-known piece of HTML code. You can use the <TITLE> tag in a link, like this: <A HREF="#" TITLE="this is a tool tip">hard word</A> When the mouse hovers over the word a yellow tool tip box will pop up containing the definition. The # in the link is a null anchor - it won't take you anywhere, since the purpose of linking here is to activate the tooltip and not to take you to another page.

The pros: The definition is contextual - it shows up right where the word does and the reading flow isn't interrupted. It is moderately easy to maintain. It is straight HTML and will work in all browsers. The cons: Each tip needs to be coded for each instance of the word. The tooltip box only stay open for about five seconds -not long enough to read a long definition. Many people will be confused by an underlined word that looks like a link, smells like a link but is really a definition. You can't use HTML within the tip - no line breaks, bold, etc. - which makes the text dense to read.

The pros: The definition is contextual - it shows up right where the word does and the reading flow isn't interrupted. The tooltip can contain custom colors and graphics. The cons: The coding is a nightmare, although using a page template would ease the burden. DHTML will not work will older browsers, or for those who turn their scripting off. Some of the DHTML tooltips require exact sizing, which means the box must be as big as the longest definition.

The pros: The definition shows up on the same screen as the defined word, not breaking the reading flow. Once a definition popup is created it can be used for multiple instances of the hard word. You can use full HTML in the popup, including a graphic. It is moderately easy to create and maintain. The cons: Popups use JavaScript, and some people might disable Java in their browsers. Many people get confused by popup windows. Each definition has to be coded in a separate HTML document.

Enter a word or phrase

Link to an outside dictionary: Finally, we looked at linking to an outside dictionary, Merriam-Webster. They permit Webmasters to use their search box. You can download the code at www.m-w.com/tools/search/searchboxes.htm. The pros: Coding is simple, maintenance is nonexistent. The definitions are outstanding and even include sound files to help with pronunciation. The cons: It requires more action by the user - he or she has to type the word needing definition. The search box takes you away from your site and onto the Merriam-Webster site. The red, white and blue search box may clash with your site. (I changed the bg color of the table to green.)

There are, I am sure, other solutions. A programmer could link a glossary from your own database. And these solutions could also have other uses: tooltips could be used for footnotes. The key is in finding the best possible solution for your challenge, one that balances ease of use and cross-browser compatibility with your design and maintenance considerations.