rial. Often the outline becomes apparent once the site architecture is determined. Site architecture is the design of the site, not in terms of artistic design elements, such as color or graphics, but in terms of the organization, navigation, and functional systems of the site. Figure 3.3 shows an example of a typical outline for a library instruction Web project. The script will include all aspects of the content: the wording for the text you want to include, media that illustrate the content (images, sound files, movie clips), activities to reinforce a concept, and skill checks to provide an assessment of retention of what has been taught.
FIGURE 3.2
Potential Comparison Criteria for Evaluation of Web-Based Instruction
EVALUATION CATEGORY QUESTIONS TO ASK
Instructional design Are the objectives clear?
Is there provision for interactive practice?
Is there a feedback mechanism in place?
Are illustrations and examples incorporated into the instruction?
Subject content Does it contain the right amount and quality of information?
Is the material delivered in an appropriate manner for the targeted audience?
Is the language jargon-free?
Is the content presented in concise chunks, to facilitate easy recall by students?
Audience considerations Will the material engage the students’ attention?
Is the material covered pertinent to students’ needs?
Does the site permit student control of movement through the tutorial?
Use of media Do the graphics, sound, and other multimedia contribute to further the instruction?
Do multimedia components download quickly?
Do they require use of a plug-in; if so, are instructions provided?
Visual design Is the screen design layout clearly organized and easy to understand?
Is the layout consistent between screens?
Is the interface aesthetically pleasing?
Is the site easily identifiable as a cohesive unit?
Does the color scheme used contribute to the tone of the site?
Ease of use Is it intuitive to use?
Is it easy to navigate?
Do pages load quickly?
Are frames used appropriately?
Evaluation Are there evaluation mechanisms built into the tutorial?
Accessibility Is the tutorial accessible to disabled users?
FIGURE 3.3
The Script Outline for Research Tutorial Z. Smith Reynolds Library: Putting the Pieces Together
1. Introduction 2. Selecting Your Topic
i. Select a Topic?
ii. Background Reading iii. State the Topic 3. Finding Library Materials
i. Online Catalog ii. Searching the Catalog
iii. Interpreting Catalog Search Results a. Call Numbers
4. Finding Journal Articles
i. Periodical Databases and Indexes a. General vs. Subject Specific
b. Electronic Databases vs. Print Indexes c. Citation Indexes vs. Full Text
ii. Selecting a Database iii. Database Searching
a. Building a Search Strategy b. Basic Search
c. Advanced Search iv. Interpreting Results
v. Locating the Article
5. Getting Materials from Other Libraries 6. Using the Internet
i. Searching the Internet a. Search Indexes b. Search Engines c. Meta Search Engines 7. Citing Research
8. Getting Help 9. Glossary
Flowchart/Storyboard
Both a flowchart and a storyboard are tools to illustrate the step-by-step progression through the tutorial. A flowchart is a visual representation of the sequence of the con- tent of the tutorial. It will show what comes first, second, third, and so on, as well as what pages link to each other, what actions your audience will take, and what will occur when each action is taken. It is a road map of your project. Figure 3.4 illustrates a simple flowchart created from the first several screens of the interactive tutorial
“Falcon: An Interactive Web Tutorial,” from Bowling Green State University Libraries.
The storyboard goes a step farther. It contains a sketch for each screen that includes text, information about the graphics (including placement, color, and size), design layout, color, font size and type, sound (including narration), and audience inter- action. It should be detailed enough that team members know what happens on each screen, what will happen throughout the tutorial, and what each screen will look like.
FIGURE 3.4
Sample Flowchart Modeled from Falcon An Interactive Web Tutorial
From Bowling Green State University Libraries, Bowling Green, Ohio. Available: http://www.bgsu.edu/colleges/library/infosrv/
tutorial/tutor1.html.
Start
Right
Right
Right
Wrong
Wrong
Wrong
Go Back
Go Back
Go Back
Continue On Find BGSU Book?
Find Book by
Title?
Select Newest Edition?
Both the flowchart and storyboard are important tools of communication between the team and the client. It is the first visualization of what the project will become.
Mock-ups and Prototypes
The next step in the design process is to transform the design ideas contained in the storyboard to actual models of the site. A mock-up of the screen design illustrates how the interface will look to users. (Chapter 5 discusses the user interface design; we will look more closely at testing usability in chapter 8.)
Creating a prototype of the site design is a useful tool in the early stages to deter- mine if the design is going to work before investing a great deal of time in producing the entire site. A prototype is typically a functional rendition of the site that is not nec- essarily fully developed but can be used for testing. One methodology for prototyping is called rapid prototyping, in which the instructional designers actively work with users to quickly build a series of prototypes rather than just one. In such a model, the evaluation and development activities are parallel processes where the two groups work together to decide which features will be kept and which will be discarded. It is an iterative process that has some advantages over the more traditional prototype model:2 It encourages and requires the active participation of end users in the activities of
design.
It makes allowance for the natural reaction of users to change their minds during the design process.
It facilitates users’ understanding of their requirements for instruction products by engaging them in the implementation of the various prototypes.
Errors can be detected early.
It can increase creativity through quick user feedback.
It accelerates the instructional development process.
P R O D U C T I O N
The production phase of the cycle is the one most people think of when they decide to do a Web project. It is the part of the cycle where the actual site construction is done. Code is written, interactivity components are programmed, multimedia is pro- duced, and your tutorial is brought to life. By waiting to start this stage until you have put in place detailed site architecture, thoroughly organized content, and a set page and site design, you will streamline the actual production of the site. Chapters 5 through 7 focus on different aspects of the production cycle in detail: user interface design, multimedia, and interactivity.
P U B L I C AT I O N
Once your tutorial has been produced, you will want to make it available to users.
Publication of a Web product is a much simpler process than with other types of mul- timedia products. The HTML and image and sound files are transferred from the com- puter on which they were created onto a Web server where they become published.
Your tutorial is now ready to be accessed simply by pointing a Web browser to its URL (uniform resource locator, or Web address). Arrangements must be made with the Web site’s system administrator to provide you with sufficient access privileges to maintain and update the files as needed.
P O S T P R O D U C T I O N
The postproduction phase of the cycle is as important as the planning phase. It includes such tasks as developing a marketing strategy, site indexing, site maintenance, and planning for the next version of the tutorial.