Presenting Content One Slide at a Time

By John Dimm

Users visit your Web site ready to invest a finite amount of time and effort. In return, they expect to see an article they want to read, find a product they want to buy, or just be entertained. Your job is to make sure something interesting happens before they run out of patience. Once something grabs their interest, you have to make sure the item either holds it, or grabs it again at regular intervals. If you don't, visitors will be gone.

This may seem obvious, but few sites employ solid methods for keeping visitors around. One way to create a satisfying user experience is to present your information in a compelling and entertaining way. If you already do that—congratulations! You've got it made, and you don't need any help. If not, you probably know how hard it is to present great content in an interesting way, and you've come to the right place.

The key to improving user experience is to require less effort for more payoff. In other words, users will spend more time at your site if you reduce the amount of work it takes to see your content.

We Like to Watch

One way to give Web visitors more for their time is with a slide show. In the old days, you sat in a dark living room and watched projections on the wall while your host changed the slides and talked about his family vacation. The difference with the Web is that your visitors can choose which set of slides they want to see and regulate the pace at which the slides appear (without having to listen to the neighbor's droll commentary). The slides can also contain images, text, or even sound.

The ideal slide show circumvents problems that occur, for example, when slides appear too quickly or too slowly and users can't control the pace, or when there's no way to jump between slides and users get frustrated sitting through slides they don't care about. If these problems happen often enough, users will abandon the slide show—and your Web site.

There are four main slide show types, each building on the previous type: the simple show in which users can move back and forth between consecutive images; the animated show that flips through slides automatically; the random access show that lets visitors jump between slides at will; and the timer control show that lets users vary the speed of the slides.

I wrote scripts for each of these types of shows in Perl. Each requires a set of images that come from a database or a directory. For my examples, I used a set of images from the Oliphant exhibit at the Library of Congress (lcWeb.loc.gov/exhibits/oliphant/obj-list.html).

To move through this exhibit, users follow written narration that tells the story behind the different cartoons. Each page contains narration text, plus a thumbnail of the corresponding image. To use the exhibit's images in my examples, I must first create an Object List. The Object List doesn't contain the narration text for each image, but it does include the following:

• a list of the image titles organized into categories,
• links to the images,
• the date of each image,
• the file format for each image.

To generate the Object List, I wrote a parse.pl script ( Listing 1). This script parses the HTML source and extracts the image information. I passed the HTML source as standard input and saved the standard output as images.lst. Each line of the images.lst file corresponds to one of the sample exhibit's images, and each image becomes a slide. I use the same images.lst file for all four slide show examples.

The Simplest Show

Sequences of Web pages, each containing a slide, are the simplest form of a Web-based slide show. A good example is the slide show in the photos section of the New York Times (www.nyt.com).

This type of slide show works with any browser that can display inline images. There are no CGI scripts, JavaScript, or frames required to view the show, although I use a Perl script to build it. In my version, I provide Previous and Next buttons that let users move forward and backward within the sequence of slides. To build this type of slide show, you'll need:

• the HTML image list from the sample exhibit (images.lst);
• a Perl script named create.pl ( Listing 2);
• an HTML template ( Listing 3) that includes the standard HTML links for Previous and Next buttons.

First, you can write the HTML template file, which includes a placeholder for a slide (image), plus the Previous and Next links (on the left side of the slide). Create one instance of that HTML template for each slide. (It's possible to write a script to generate copies of the HTML template, but this example doesn't require any run-time scripts.)

Use the create.pl script to build the slide show using the HTML template and the HTML image list. Specifically, you should run create.pl and pass images.lst as standard input. The create.pl script reads the HTML template and the images.lst file. For each line in the images.lst file (each image), create.pl makes an HTML slide file complete with the image and the Previous and Next links.

To put the slides in order, the script inserts values for the Previous and Next links by replacing the following four custom template tags:

• <%$thisImgsrc%>
• <%$thisText%>
• <%$prevPage%>
• <%$nextPage%>

Users can click once on either the Previous or Next links to move through the slides. In terms of browsing ergonomics, this is a big improvement over many slide shows that often require at least two clicks for each image (a click on the link to display an image, and a click on the browser's Back option to return to the Object List).

While this slide show is better than the plain Object List, it does have limitations that mean it won't work for all situations. For example, users can move forward and backward, but they can't look at slides out of sequence. Also, because this slide show requires direct links to the image files, the original narration text is missing. To include it, I'd have to add text to the image files or use another type of slide show.

Animation

You can animate a simple slide show with a client-pull technique where a tag on each slide automatically makes the browser download the next Web page in the sequence after a certain number of seconds. Instead of Previous and Next buttons like in the previous example, you can give users Stop (stop the animation) and Start (restart the animation) buttons. This way, users can sit back and watch the slide show, but they can also pause and resume it when they choose.

Here's what you need to build a similar slide show:

• the HTML images list from the sample exhibit (images.lst),
• an animation CGI script ( Listing 4),
• and an HTML template ( Listing 8) that includes the Stop and Start buttons.

If you don't want to let users pause the slide show, you could generate the slides a different way. However, because pausing and restarting means the pace of the slide show can vary with each user, you can use a CGI script to generate the slides on the fly. The Perl script generates the slides based on CGI parameters and the HTML template. The script reads the CGI parameters from the browser, and the image list from the image.lst file, then it prepares some variables that are in the HTML template. Because it's in animation mode, the script also prints the HTML REFRESH meta tag. This meta tag causes the next slide in the sequence to load after a certain number of seconds (the client-pull technique).

The end result is an animated version of the slide show in which the slides change automatically, yet users can also use Stop and Start buttons to control the pace. However, this slide show still has some shortcomings: Users can't view slides out of sequence, and the slides use links to the images, so the narration text is still missing.

Random Access

These first two examples work for many situations, but they don't give users an overall sense of the whole exhibit—not even the total number of slides. That, combined with the fact that users can't jump around out of order and can't see the narration text, could make for a frustrating experience. What if slide 43 contains something of interest to a user, but he or she has to sit through slides 1 through 42 to find this out? What if the slides don't make sense without text?

My solution is to keep the animation (so users don't have to "drive" the slide show), to include text in the HTML pages with the images, and a selectable list, or catalog, of the slides (so users can jump around). This time, we'll give users both the Previous and Next buttons, and the Stop and Start buttons. In addition to watching the slides change automatically, users can move forward and backward, plus stop and restart the animation. Additionally, they can use the catalog to jump to another place in the slide show, where all four buttons are also available. To build this slide show, you need:

• the HTML list of images (images.lst),
• an HTML template that creates a two-frame frameset ( Listing 5),
• HTML versions of the slides (which can have both images and text),
• a selectable list of the image names (the catalog),
• a different version of the Perl script named create.pl ( Listing 6),
• a JavaScript file called animate.js ( Listing 7),
• and an HTML template that includes the Previous, Next, Stop, and Start control buttons ( Listing 8).

The first step is to create the HTML files that are the slides. (You can include a call to the images only, or you can also insert narration text.) Next, create a two-frame HTML template ( Listing 6). One frame defines the layout of the control buttons and will also contain the selection list. The HTML slides appear in the other frame. Because I use the image names in the catalog, which tend to be long, the frame for the control buttons and catalog is a strip across the top of the page. The bottom frame is for the HTML slides.

The catalog is a pull-down list that contains links to the slides. To create the catalog, insert the list into the top frame with the control buttons and load the first image. You can use my version of the create.pl script. which you'll find in Listing 7. The create.pl script reads the list of images (image.lst) and creates the catalog. The script creates a static HTML file to house the catalog and inserts it into the top frame. Then, it loads the first HTML slide into the bottom frame. The static HTML file with the catalog loads into its frame once, and then it's always accessible while slides move through the bottom frame.

A run-time JavaScript file (animate.js) is what makes all the activity occur. For example, if users want to sit back and let the slide show run all by itself, functions in animate.js can automatically load each slide in order after a specific number of seconds elapses (the timer expires). For example, the SetTimeout function contains a timer, and it calls a function to load the next slide as soon as that timer expires. Or, if users select an image link from the catalog, the corresponding slide appears and animation stops. To restart animation, users simply click on the Play button, which calls the appropriate function(s) inside animate.js. Then, animate.js restarts the timer and starts loading slides automatically again (using the SetTimeout function).

This type of slide show provides three methods for viewing the slides, which can be used alone or in combination:

• sequential (manual), using the Previous and Next buttons.
• animated (automatic), using the Play and Stop buttons to control the pace.
• random (manual), using the catalog to jump around.

Better Timer Control

In animation mode, the shows use timers to determine when it's time to load the next slide. However, neither of these examples accounts for a slow Internet connection, which could be extremely frustrating for some users. Specifically, both timers begin when the slide starts loading. This means that if a user has a slow dial-up connection, he or she might see only part of a slide before the timer runs out and the next slide starts to appear.

However, you can solve this problem by building a slide show that starts the timer when a slide finishes loading. That way, no matter how long it takes to download, the complete slide stays on the screen for a certain amount of time before the next image starts loading.

In this example, you'll use the same basic plan as with my third example (with all four control buttons and the catalog), except the images are included as inline references instead of being loaded into a frame as part of a Web page. This means you have a single file to download for each slide, and you don't have to use a frameset template to specify the height of the control buttons.

To load each new image, use JavaScript to replace the source of the HTML IMG tag. Then, use the IMG tag's onLoad event to start the timer after the image has loaded. Even if you set the timer to 0 seconds, each image downloads completely before the next one starts.

If all of the slides are the same size, everything works fine. But, if the images aren't all the same size, you can run into problems with different browsers because you're replacing the source of the IMG tag. Internet Explorer handles this process correctly. It renders each image in its respective size, then refreshes the Web page, so you don't have to specify width and height in the IMG tag:

<IMG src=inv.gif name="theImage" onLoad="Loaded()">

When Netscape renders subsequent images, it uses the width and height of the original image, even if it's not the same. Therefore, if all the images in your slide show aren't the same size, you must specify a height and width for each image. To do this, first capture the size for each image. Then, copy both the URL and the dimensions into the catalog's value for that image. Whenever you replace the source for the IMG tag, you should reset the image size, like this:

<IMG src=inv.gif name="theImage" onLoad="Loaded()" width=640 height=410>

Other Applications

We started with a simple, user-driven slide show of images, and ended with an animated version that had a selectable catalog and four user control buttons. This program also lets you include text with the images, suggesting other possibilities for many other applications, such as with product lists. You could populate the HTML template of your random access example with the results of a query and let users browse a list of products. You could also create a site tour that includes the pages of your site as HTML slides, letting users see all the site offers.

Slide shows are an easy way to improve the user experience on your site, and there are many ways to present them. The method you use will depend on your audience, content, and personal taste. But one thing's certain—because slide shows let people flip through your available content with minimal effort, your visitors have a better chance of finding something they value before they lose patience and move on.

(Get the source code for this article here.)

---

John published the first C++ library for Windows and led the "Skunk Works" project to host the full text of Encyclopaedia Britannica on the Web in 1993. He's currently chief scientist for AfterWork.com.