Layer information to help web users

Layering is a way of dividing web information. When done well, it's a great way to

• keep web users from being overwhelmed by too much at once

• help different web users each get the amount of information that they want on a topic

To close this chapter, let's look at three typical examples of layering on web sites and then at two case studies that might give you new ideas for using layering in your web site.

Layering from a brief description to the full article

Many web sites entice site visitors with a little bit about an article, a topic, or a product on the home page or on a pathway page and then provide a link that goes to a web page with more information. That's layering. Figure 6-10 shows a well-done example of this typical web layering from the BBC's web site.

Layering from an information page to more on other web pages

Information pages can also be pathways to more information - details, tangential information, or related topics.

Layering from an information page to other information pages

ru*utay'* top five fe*tum

©From the Lifestyle home page (links and short descriptions)

ru*utay'* top five fe*tum iiim llllb»!« Mvnw MHS OnJw» A

©To a pathway page (links and short descriptions)

B>. 0f}O » tfUO of bfll vou f auk) » Hi Oium. * (BUD** «r fl

Figure 6-10 This is an example of the typical layered architecture of web sites: home page ^ pathway page ^ information page. www.bbc.com

One of the great advantages of the web over paper is the way that you can make connections for people to information beyond what you want to put on your main page. The links can go to more details on the same topic, related topics, other sites, calculators, lists of providers, message boards, specific contact forms, other online activities, and so on. Figure 6-11 shows just the top few sections of a page from the U. K. government's site, Directgov. Several other sections further down the page also have related links after the brief paragraphs.

Cymraeg Accessibility Help : Sit« Index Contacts Search thts site !

Health and well-being

Smoking causes numerous diseases and health problems, some fatal, among both smokers and non-smokers- For this reason, smoking is prohibited in a growing number of public places and a wide range of support services has been developed to help individuals quit smoking.

— » More reasons to give up smoking (opens new window)

/¡■^S A link further down the f ^J page lets you calculate how much you'll save if you stop smoking.

Avoiding a smoking habit

Reasons to quit smoking

Cymraeg Accessibility Help : Sit« Index Contacts Search thts site !

— » More reasons to give up smoking (opens new window)

/¡■^S A link further down the f ^J page lets you calculate how much you'll save if you stop smoking.

Improving your health

In tha UK one person dies from 4 smoking-related disease every four minutes, Smoking causes:

• lung cancer (smoking causes over SO per cent of all lung cancer deaths)

• heart disease

• bronchitis

Wednesday, 12 July 2006

Health and well-being

Smoking causes numerous diseases and health problems, some fatal, among both smokers and non-smokers- For this reason, smoking is prohibited in a growing number of public places and a wide range of support services has been developed to help individuals quit smoking.

Avoiding a smoking habit

Many smokers say they started smoking before the age of 16, even though the law prevents anyone selling tobacco, cigarettes or cigarette papers to those under this age. Avoiding the temptation to smoke at an early age n therefore important to prevent you developing a habit.

Reasons to quit smoking

People give up smoking for many reasons, from a desire to improve the* health and to save money, to wanting to appeal to the opposite sex or reduce any potential harm on someone else's health.

File your tax online (opens new window) Find schools, childcar» and nurseries Find a course ust of services «valable onlme,,,

Health and wei-being _l contacts

Disabled people contacts Parents contacts

Do people realize that \ * J "(young people)" is the name of another section of this same site and that "(opens new window)" means you are going to a different site?

Figure 6-11 Directgov has articles on many topics, and most include links to other relevant pages within the site and to relevant external sites. The links may go to more information, online activities, forms, checklists, and so on. www.direct.gov.uk

Layering from part of the page to a short explanation

A third type of layering is to provide definitions, technical details, or other "extra" information on top of the main page so that people don't lose the page they are reading. You can do this with a small second window that overlays part of the main window or with a rollover.

Figure 6-12 shows how the San Diego Zoo links words some readers may not know to definitions that come up in a small second window.

(A word about definition windows: Make each word and definition its own file. Don't just jump people to the right definition in a very long file that contains the entire glossary. People may not realize what has happened. They may start to scroll in the long file and get lost. Putting all the definitions together is satisfying only the unlikely scenario that

The links in Figure 6-11 all come after the text - not embedded in the paragraph.

The link I'm featuring in Figure 6-12 is embedded in the paragraph, but it opens only a small definition window. An important issue for information pages is whether and when it's okay to embed links to other topics on other web pages. I cover that issue in Chapter 12 on links.

Figure 6-12 Glossary items are a good use of small secondary windows that allow people to look at the main page and the small window at the same time. Here we are looking at the definition of "prey" from a link in the first paragraph of the San Diego Zoo's article on the cheetah. www.sandiegozoo.org

Figure 6-12 Glossary items are a good use of small secondary windows that allow people to look at the main page and the small window at the same time. Here we are looking at the definition of "prey" from a link in the first paragraph of the San Diego Zoo's article on the cheetah. www.sandiegozoo.org

someone wants to read your glossary. It is not satisfying the much more Be wary of putting information into likely scenario that the reader wants to quickly understand what a pop-ups. Many web users have particular word means and then to go on in the original article. If you pop-ups turned off. think that people may want more definitions, include a link to an A-Z index in each definition window.)

Figure 6-13 shows how Traffic.com provides more information on each problem it has marked on the map that the site visitor is looking at.

Bringing up extra information in a rollover or a small second window that does not completely overlay the original window has two major advantages:

• The original information and the related extra information are visible together. People can work with both at the same time.

• The small second window is less likely to cause the problems that full-size second windows create for many people. Many people do not realize what has happened when the browser launches a new window and they cannot see their original screen.

When you use small second windows for this type of layering, include a Close Window link, as the San Diego Zoo site does. For many web users, a text link or button reminding them to close the window is faster and easier than having to remember the little x in the corner.

www.traffic.com"/>
Figure 6-13 On the maps at traffic.com, you can click on any of the warning triangles and get details of the problem. The new layer opens on the map, so you don't lose the overall information or your sense of place. www.traffic.com

Layering in innovative ways

Let's turn now to two particularly interesting and useful examples of layering.

• Summarizing archived paper documents into "index card" web pages (the "fresh fish" example, Case Study 6-3)

• Opening layers on the same web page (the "injured workers" example, Case Study 6-4)

Even when you know that a paper document is not going to work well on the web, you may not have the time or resources to change it. Or you may want to keep the old document as it was on paper for historical, archival reasons. And, yet, you may also want to make the key messages in that document more accessible to your web users.

What can you do? One way is to create a new, shorter first layer with the key messages higher in the web hierarchy and link that layer to the old document.

That's what Laurence Dusold at the U. S. Food and Drug Administration (FDA) did when he developed the web site for the FDA's Center for Food Safety and Applied Nutrition (CFSAN). Dusold's team extracted the key messages from old journal articles into short web pages. Here's an example from an article about knowing when fish is fresh:

How can you figure out if the fish is fresh?

M The fish's eyes should be clear arid bulge a little. Only a few fish, such as

\ x* walleye, have naturally cloudy eyes.

Whole fish and fillets should have firm and shiny flesh. Dull flesh may mean the fish is old. Fresh whole fish also should have bright red gills free from slime.

if the flesh doesnt spring back when pressed, the fish isn't fresh.

<2*3^ There should be no darkening around the edges of the fish or brown or yellowish discoloration.

The fish should smell fresh and mild, not fishy or ammonia-iike.

Source: Excerpted from FDA Consumer. February 1999: Critical Steps Toward Safer Seafood

Email this Page , To a Friend

Email this Page , To a Friend

The key messages from a longer article

www.cfsan.fda.gov/~dms/qa-sea5.html

This "key messages" page may be all that most site visitors want. Anyone who wants the full article can get to it from the link at the bottom of the key messages web page.

Over time, Dusold's team has revised the longer articles that the key message pages link to. The original journal article on fish had a title but no internal headings, no lists, no graphics. It was simply long paragraphs of prose. In the years since it first went up, the writers have gone back to the article and put in subheadings, broken the paragraphs up more, turned some sections into bulleted lists (with traditional black circle bullets), and made some parts into lists like the key message summary, with fish as bullets.

U. S. Food mid Duly Administration FDA Consiimei

Noveinl>eiDeceiiil>ei 1997: Revised Felmuity 1998 <ind Felmmty 1999

Critical Steps Toward Safer Seafood by Paula Ku/tzweil

A tender tuna steak lightly seasoned with lemon pepper and grilled over a charcoal Tire is one way to please a seafood lover's palate, Stuffed flounder, lobster thermidor, and shrimp scampi are others.

But blue marlin served up wilh a dose of scombroid poisoning or steamed oysters with a touch of Norwalk-like virus are more likely to turn the stomach, instead of treating the palate.

How to Spot a Safe Seafood Seller

Anyone who's ever smelled rotting seafood at the fish counter has a pretty good idea of what a poorly run seafood market smells like. But the absence of any strong odor doesnt necessarily mean that the seller is practicing safe food handling techniques.

Based on FDAs Food Code, here are some other points to consider

Employees should be in clean clothing but no outerwear and wearing hair coverings

They shouldn't be smoking, eating, or playing with their hair. They shouldn't he sick or have any open wounds.

«l&lf1 Employees should be wearing disposable gloves when handling food and change gloves after doing nonfood tasks and after handling any raw seafood.

f^ri1- Fish should be displayed on a thick bed of fresh, not melting ice, preferably in a case or under some type of cover Fish should be arranged with the bailies down so that the melting ice drains away from the fish, thus reducing the chances of spoilage

The beginning and a piece from the middle of the updated version of the longer, original article - reachable from a link on the "key messages" page. www.cfsan.fda.gov/~dms/fdsafe3.html

The linked article is now much more usable online than the original journal article was. It has become detailed web information rather than just a paper document archived on the web site.

Dusold tells me that half the pages they work on in a year are new pages and half are updates and reworking of old pages. That way, they continually strive to bring useful layers of information to their site visitors.

Case Study 6-4

Opening layers on the same web page

Layering does not have to take web users from one web page to another. You can keep all of the information on one page, layering it by opening and closing overlays on the same page.

For a user group like injured workers checking on their claims for workers' compensation, this type of layering solves many potential problems.

Was this article helpful?

0 0

Post a comment