Bill Taylor is the Reference & Electronic Services Librarian at Georgetown Law Library.

Having recently spent some time considering various ways of designing a web-based tutorial, I am writing to share my ideas and, I hope, to stimulate further exchanges about how this new form of teaching can best be carried out. I will describe the needs that this tutorial is intended to address and the solution, however imperfect, that I have developed. I don’t pretend to have much computer expertise, or any knowledge of programming; my understanding of JavaScript, for example, is limited to borrowing published scripts and fiddling with their parameters to figure out the basics of how they work and how I can use or adapt them. Suggestions for more sophisticated technological solutions would be very welcome.

Purpose of the Tutorial

Like most academic law libraries, the Edward Bennett Williams Library at Georgetown Law Center offers many classes in online research for our students, particularly for first-years in conjunction with their Legal Research and Writing course. The first round of these classes is usually scheduled for the early part of the Fall semester, but online research is integrated into the students’ research assignments right from the beginning of the semester. We needed an efficient way to introduce students to the very basic techniques of finding online information through a short, self-guided tutorial.

At the same time, I hoped that this tutorial might serve as a model that could be adapted for other types of training. There are, for example, a significant number of patrons who are not served by the in-person classes we offer, or who need something more. For introductory Lexis and Westlaw training, for example, our classes don’t reach new LLM students whose online research skills are rusty, visiting scholars and researchers coming from other disciplines or other countries, and, of course, regular JD students who skipped their first-year training, or didn’t learn as much from it as they (or we) might have wished. Teaching these patrons individually, in one-on-one meetings, is a very inefficient use of librarians’ time, and offering special classes at set times is convenient for only some of these patrons. I hope to develop the initial model into an online tutorial that could introduce these patrons to Lexis or Westlaw research at their convenience, after which they could meet with a librarian, if needed, for follow-up questions or more specific or advanced instruction. Finally, there are many other types of training and teaching we do that might lend themselves to this format, from showing new student employees how to check in periodicals to teaching clinic students how to use legislative history sources.

Design Considerations

The design of this tutorial has a deceptively simple goal: to have the computer screen display simultaneously a regular, working web browser where the student will do the actual online research (call this the working area) and a smaller, persistent window with text and possibly illustrative images, created by me (call it the instructional area). The latter window, in other words, shows instructions and commentary to guide the user through the research process in the main browser window.

There are other criteria, not all of which I have currently met. The tutorial design should:

• run as intended on any browser; failing that, it should at least run on Netscape and Internet Explorer versions 4 and later
• consist of pages that download in a reasonable time (less than 5 seconds) over a 56K modem
• not require any special software to author or to use (that is, it can’t be in a proprietary web-based-training format or require special plug-ins, etc.)
• be adaptable for teaching things other than Lexis and Westlaw, meaning that it should be capable of displaying any web resource and letting the student work with it
• be scalable, in that some tutorials might last 10 minutes, with 3 or 4 screens of instructions, and some might be an hour long, with 20 or 30 screens
• be accessible to users with disabilities

Possible Solutions

In exploring how to carry out these goals, I was guided by the excellent work done by June Hsiao Liebert at University of Texas Law Library, and described in an LLRX article. She has created online tutorials for Lexis and Westlaw, following two different models. The Lexis tutorial uses frames, with the instructional area in a side frame and the working area in the main frame. The Westlaw tutorial, for technical reasons alluded to in the LLRX article, uses two separate browser windows, with the instructional material in one and the active Westlaw session in the other. Students can toggle back and forth between them, or resize the windows so that they sit side-by-side on the screen. After considering the pros and cons of each option, I decided on a modification of the two-window approach.

1. Frames

Advantages

• Frames provide a simple, neat display, and give the designer easy control over the size and placement of the two areas on the screen.
• They also make it easy to include more than two elements: there could be, for example, a thin frame along the bottom with navigation and help buttons.

Problems

• When frames were first introduced, they were widely criticized in the web design literature. Since then, browsers have evolved several generations and adapted to users’ expectations of frames. At this point, even Jacob Nielsen, perhaps their best-known detractor, acknowledges that frames are no longer a “disaster,” but he points out they do still have disadvantages (see http://www.useit.com/alertbox/990502.html).
• Even leaving those drawbacks aside, though, frames have a specific problem in this application: some webpages “break out” of a frame when they load, filling the entire browser window. If the student is asked to view such a page in the main working window, the side frame with the instructional material will disappear. This behavior seems to vary with the type and version of browser, and sometimes is deliberately programmed by page authors, but in any case I think it’s a significant drawback.
• Furthermore, the tutorial is may ask the student to link to websites that use frames themselves. Viewing them within a frame of the tutorial results in a confusing array of frames within frames.

2. Dual Windows

Advantage

• This solution solves the frame-related problems raised above. Because the instructional material and the active workspace are in two separate windows, they are always both present, and a display of frames within frames would not happen.

Problems

• The designer loses control over the display of the windows — their size and their arrangement on the screen. It may be mere vanity on my part, but I also think there are legitimate educational reasons why I might want to have this control, at least when the tutorial begins, always recognizing that the user may have good reasons for deciding to display it differently.
• Rather than the designer controlling the display, it is controlled by the browser’s treatment of multiple windows. They will most likely open maximized or overlapping, in which case one window will be partially or fully obscured and the user will have to toggle back and forth or resize them manually.

3. Frame-like Dual Windows

I recognized a solution to this latter problem when I realized that JavaScript, which I use to open new browser windows, can specify their size and, even better, their location on the page. This makes it possible to have the user, by clicking on links, open one narrow vertical window at the side of the screen for the instructional area, and then open a larger window next to it, filling the rest of the screen, for the working area. To see an example of this, visit our orientation tutorial for first-year students at http://www.ll.georgetown.edu/firstyear/introonline1.htm.

Advantages

• This solves the persistence problem — both windows are always visible, at least when the tutorial starts, with the two windows side by side in the layout I intended. If the students choose to resize them or otherwise change the display, that’s fine, but at least they have seen what it’s “supposed” to look like.

Disadvantages

• JavaScript specifies the absolute size and location of the windows in pixels, therefore the relative size and location varies, depending on the resolution of the user’s monitor. The most common resolution seems to be 800 X 600 (see http://www.thecounter.com/stats/2001/January/res.html and http://www.gvu.gatech.edu/user_surveys/survey-1998-10/graphs/technology/q128.htm), so that’s what the tutorial is designed for, but if the user’s monitor is set for some other resolution, the windows will be too small or too big for the screen. This is why the resizing capability is provided, and instructions to that effect are in the first-opened window. A much better solution, of course, would be to specify size and location in percent of the screen, as one can do with tables in HTML, for example. As far as I know, there is no simple means for doing this for two separate windows.
• There is a second significant drawback, in both this approach and the frames design: numerous websites, including many pages in Lexis and Westlaw, are designed so that they only display correctly in a full 800 x 600 window. Thus, when they appear in my working window, which is 500 pixels wide, the user cannot see the entire page and has to scroll right and left in addition to the usual up and down.

A General Question

This last observation leads me to a general philosophical question: is this type of online tutorial better than a printed handout? Assuming that the handout would contain the same text and graphics as appear in my instructional area, and assuming the student with the handout would sit at a computer and actually experience all the same steps in online research, what are the advantages of having the instructional area on the screen? And do these advantages outweigh the disadvantage of having to shrink the working area to the point where it may not show the online research sources as they were designed to be seen?

Provisionally, I would say there are two advantages that make this approach worth developing further:

• convenience: the student doesn’t have to physically get a copy of the printed tutorial
• information structure: the tutorial can be organized as a “web” with more than one route through its various pages, including optional paths and side excursions, rather than just a single linear path as in a printed document.

The template pages for adaptation

Anyone who is interested in using, or further developing, this model for a tutorial is very welcome to download the “template” pages that can be found at http://www.ll.georgetown.edu/webpages/taylorw/gentut/generictutorial.htm. I would welcome feedback and suggestions for improvement.