HTML 4_01 Weekend Crash Course - G. Perry

Note

Of course, you can turn such competition around to your advantage. Many popular Web sites, just like Microsoft itself, began in someone’s home. Other examples include The Drudge Report and eBay, both of which were considered home-brew until they made international fame by providing simple and fast services of one kind or another.

cable modem access, he or she is considered to be “always on” and may not return to the computers until the next day — only to find that your site still happens to be on the screen.

In spite of the inaccuracy of these values, their general nature and especially their trends are vital for you to track. Keep accurate records of your site’s visits and use. Determine which secondary pages are looked at the most and the least.

For example, you’ll want to eliminate some pages on your site that do not interest your users as much as you first thought.

The Barkley family noticed after several months that their Family Web site’s home page received many hits (and “many” for a personal Web site may be ten a month, depending on the number of people who know about your site, whether you’ve registered the site, and how many others link to your site). The family also noticed that their Favorite Movies page also enjoyed a high hit rate. Far down on the list were the Family Travels and Kid’s Playground pages.

Does that mean people have much less interest in those pages than in the other pages on the site? Perhaps, but perhaps not. The usability issue comes into play when you consider site hits. Never forget that your site may look and work great for you and your immediate family but that to the outside world, something may be keeping users from doing what you expect them to do. Perhaps you don’t have technical problems but have designed a section that users don’t want to revisit. The following things can cause users to stay away from individual pages after the first time:

The page loads too slowly.

The page’s color contrast makes the text difficult to read.

A multimedia element requires a plug-in.

The page looks bad on common resolutions that you didn’t test.

The page fails to load properly on some versions of some browsers still in popular use.

Never require a plug-in that’s been out on the market less than 18 months. If your users want to see a video clip you’ve provided but the clip requires a new plug-in format that’s just been

Never released, you may link to the download site for that plug-in, but your users will virtually never wait for the download. Too many other sites await them, and those sites don’t require new technology to visit.

Do they click on pictures that don’t have hyperlinks?

Do they read your text carefully or just scan it rapidly?

The way you format text makes a dramatic difference in what the user reads. The next session offers tips that you can use to get visitors reading your text instead of scanning for headlines.

Note

As the Barkleys watched the kids, they learned quickly why the Kid’s Playground page was getting very few hits. The home page bored the kids! When the children visited the home page, they looked at the pictures, clicked on a thumbnail, and saw the larger image. At this point, they either looked away for something else to do, looked bored, or clicked other areas of the site. These children were old enough to read, and some would click on Kid’s Playground and seem interested if they ever went there.

The answer for the Barkleys’ Kid’s Playground page seems to be that children simply don’t want to mess with the home page before getting there. They are willing to give the site a chance, but they won’t stay long if nothing quickly interests them. Even with Rachel’s encouragement, few of her friends visited the Kid’s Playground page on their own.

The Barkleys solved the solution in two ways. First, they added an icon next to the Kid’s Playground button that would attract the interest of the children’s friends but was small enough not to detract from the page. Figure 28-1 shows the figure. Without exception, the kids who then went to the page saw the fireworks graphic and clicked it. At first, the image was not a hyperlink to the Kid’s Playground page but only a non-linked image next to the link. Just a few seconds with the new image, during a usability study, taught the Barkleys that both the image and the page title needed the same hyperlink in the navigation bar.

Second, they had Rachel give out the address of the actual Kid’s Playground page to her friends. They could then surf directly to the Kid’s Playground page. Although they had to type more characters (the /kid.htm/ at the end of the site address), they seemed more likely to do that with Rachel’s encouragement. Sure enough, the Kid’s Playground page, within a month, was getting more hits than the other secondary pages.

Image Map Problems and Solutions

In the previous session, you saw that the Barkleys’ Family Travels page contained an image map that linked the user to the places the Barkleys had visited. Many Web sites use image maps. Their very names indicate one of the best uses for them: mapping situations when you want your users to be able to surf to a variety of places depending on where they click on the map. Unfortunately, image maps come with a set of problems that HTML programmers do not always easily overcome. With this in mind, make sure your site benefits more from an image map,

in spite of the drawbacks that you’re about to learn, than from a more traditional selection, such as a menu.

Image map problems

One problem is that text menus load dramatically faster than image maps. Your users will be selecting from a text menu and reading the subsequent page long before the users’ image maps finishe loading. Even worse, browsers cannot scale an image map due to the map’s fixed pixel coordinate system. A small resolutionbased browser will not be able to display all of a large image map at one time. The user must resort to scrolling just to be able to click all parts of the map.

Another drawback is that image maps are invisible to text-only browsers. When a user turns off the display of graphics, he or she will not be able to understand the purpose of an image map and will be unable to benefit from anything about the map. If the user uses a modem-based connection, even today in the new millennium, he or she is likely to turn off graphics instead of waiting for every site’s graphic images to download.

Image maps also bring a fixed aspect to Web pages. For example, users with accessibility problems cannot change the colors on an image map to suit themselves as they can other colors on the screen. In addition, users cannot change the text that appears, if any, on an image map, because the text is part of the image and is not rendered from a browser font.

Another problem is that the user cannot always see the image map’s clickable areas. Figure 28-2 once again shows the Barkleys’ Family Travels page with the image map. Where on the map are the hot spots? Your users will not know until they point to the map, and many areas won’t be hot spots. With an unused hotspot area, such as this map provides in the central portion of the United States where the Barkleys have never visited, a user might actually click a few places inside the map and not happen to hit a hot spot, then leave the page thinking something’s wrong. But the only wrong thing was the image’s design.

Figure 28-3

The circular beacons represent the image map’s four hot spots.

Not only are the hot spots now indicated, but the user’s mouse pointer will change to the hyperlink shape when the user points to any of the hot spots, giving the user a kind of rollover effect that goes even further toward pinpointing the hot spots.

Note

To help further, recent browsers display the URL address of the hot spot in the user’s status bar. Earlier browsers did support image maps, but the connecting URL didn’t appear in the status bar at the bottom of the browser’s screen. Therefore, the users had no idea what was going to happen when they clicked an image map’s hot spot. Although the site address doesn’t always tell users much more than they already know, at least they have a better clue to where they are heading, especially since image maps don’t provide a universal method for displaying a pop-up text message when the user hovers the mouse pointer over a hot spot.