Building Educational sites

Article reprinted from the June 1998 NJAET Newsletter:

I. Outlining
II. Diagramming
III. Storyboarding

Gerald D. Baily and Marie Blyth

Presenting information on the Internet often seems straightforward —and probably is for the simplest sites. But great sites that
both educate and inspire require considerable planning.

Creating an effective educational Web site is an exciting process, but teaching teachers and students how to do it is not as easy as many people believe. To create a good Web site, three basic conditions must be satisfied. The designer must (1) thoroughly understand the information that will be conveyed, 2) be skilled in organizing that information, and (3) adhere to the principles of good design. Quite frequently, these three elements—message, organization, and packaging —are not well balanced. As one novice said, “Too many Web sites look good without being good.”

For out purpose here, “looking good” means the Web site offers a dazzling array of text, sound, graphics, and video.
Unfortunately, too many sites stop at this point and focus on “bells and whistles” rather than message. “Being good while looking good” means that a site has substance, organization, and integrity in its information as well. It balances content and delivery. Two Assumptions We make two critical assumptions about the creation of an educational Web site: (1) Its purpose is to present information, and (2) it will serve a specific audience.
Assumption 1. For teaching and learning, an educational Web site results
from the process of “information literacy.” In other words, such a Web site is created with something more than a
self-purpose—that is, it must present new information. We’ll define information literacy here as a process of assembling information that did not exist before by

1.identifying the right question,
2.organizing a search,
3.selecting the appropriate search tool,
4.questioning information sources,
5.analyzing and synthesizing information,
6.creating new information (i.e., the Web site or multimedia products), and
7.testing the information and identifying new questions. (For more information on information literacy and examples of the Web-site structures described here, check out the online supplement at: http://www.iste.org).

Serious, arduous, and painstaking thought is required. Educational Web sites are the product of learning, not an activity that substitutes for learning. They are the vehicle by which information-literate people convey knowledge to others.
Assumption 2. There are many types of Web sites, including those dedicated to advocacy, business and marketing, news, reference, and personal interest. These are important and valuable, but they do not necessarily result from the process of information literacy identified previously. Depending on its purpose, each will differ in the type, organization and packaging of information it presents.

Educational Web sites also must serve their own purpose, audience, and outcome—and the best and most effective of these are tied closely to the process of information literacy.

The process of creating an effective educational Web site has three separate but related steps: outlining, diagramming, and storyboarding.

Outlining

Organizing information for publication on a Web sitje is essential. Beginning, Web-site creators, however, frequently forget about Step 1 in the entire process: making a basic content outline of their information.

An effective outline will summarize the information they have found by using headings and subheadings (see figure 1), and it should answer five basic questions:

1.What main concepts will be found at the Web site?
2.What is a logical order of the information?
3.What are the main and secondary ideas and themes?
4.What does the user or reader need to know?
5.What would be good but not critical for the reader to know.

As Web site designers assemble their information, they can correlate various Web elements such as sounds, video, text, and graphics with content. Some designers find the traditional content outline too sequential or linear and instead want to promote a freer flow of ideas. Inspiration Software by Engaging Minds may be more useful to these designers; the program is designed to simulate the mindmapping process and thus generate major concepts and related ideas.

Diagramming

As the content outline of the Web site unfolds, one main question arises: What kind of organization best suits this information?

This is Step 2 in the process: diagramming the Web site to develop the larger “picture.” Five subordinate questions need to be
answered:

1.What is the main question that Web site will answer—and where should this information be placed?
2.What is the purpose of the Web site—and where should this information be placed?
3.Who is the intended audience (teachers, administrators, parents, students, community leaders, etc.) and what are its needs—and where should this information be placed?
4.What is the nature of the content (i.e., technical or conversational, complex or simple) and how will this influence the Web site’s organization?
5.What are the natural connections between he among the concepts.

Three Major Designs. Web sites can be diagrammed as linear, hierarchical, or nonlinear.

1. Linear Web sites are sequential and designed like books. The are excellent for presenting a series of steps or tracking a process from start to finish. This simple design keeps users moving in a predetermined sequence, usually with clickable buttons that allow them to select their direction of travel: for example, “Next Page,” “Previous Page,” and “Back to Home Page.”

2. Hierarchical (or tree design) Web site design uses a single home page as a table of contents for other pages at the site. In other words, it offers users more than one path and allows them to jump or branch from one point to other points in a site with the click of a mouse. A hierarchical structure also can link one home page to different Web pages with related information, thus allowing people to connect many different ideas quickly. The structure can be confusing, however, to people who do not keep track of where they have been, are now, or may be going.

3. Nonlinear or branch-design Web site design allows users to jump—that is, branch—from a central home page and along a series of linked pages; sometimes they can jump to another branch. Most designers have trouble designing branched Web sites.
The trick is making sure the users do not get lost.

Here are two ways to learn more about diagramming Web sites: (1) Conduct a search on a topic of interest and diagram several of the Web sites that are found. Determine whether they have linear, tree or branch designs, and whether their developers followed the rules of effective Web-site design described in this article. (2) Identify both well-designed and poorly diagrammed Web sites. Which design promote easy navigation?

Storyboarding

Storyboarding is step 3 in Web-site design process. In essence, it is the detailed planning of information that will be placed on each Web page, including type (text, audio, video, and graphics) and style (typeface, color, spatial arrangement, and so on. The story-board is designed to present a clear and detailed page-by-page image of the information that will be delivered.

The storyboarding process should bring specific ansers to these eight questions:

1.What links should be on each Web page?
2.What kind of clip art or graphic items should be on each page? How do these images relate to the message being
conveyed?
3.What text should be on each page? How much will be needed to convey the message? Will other media such as audio, video, or graphics buttress the text message or add information? How can other media convey the information without text?
4.What typefaces, type sizes, and colors should be used? How will these decisions affect most users?
5.Is the text scrollable, transparent, or hidden? Why is the text field important to consider?
6.What kinds of buttons (icons, names, etc.) will be on each Web page and why?
7.What sounds should be added? What is their purpose and value?
8.Should video be included? if so, what is its purpose and value?

Here are several tips to follow:

User “stickies” or note cards to position each page in the Web site.
Place the text for each page on each stickie or card.
Place graphics on the stickies or cards.
Draw the navigation tools that will be placed on each Web page. Rearrange the stickies or cards to determine their most logical placement.
Have other people review the story board.

Storyboarding presents interesting changes to educators. Organizing the written word is what teachers have best learned to do during their education. Assembling and organizing text with graphics, audio, and video in a cohesive and holistic fashion, however, is a higher level skill that few people have been trained to do, thought about, or experienced.

As equally complex and formidable challenge to the novice is creating information through graphics, audio, and video without text. This is an emerging skill in Web-site design and information literacy that will evolve and be widely discussed in the next few years. Essentially, the challenge is to convey something meaningful in any technology-related medium and to create and present information that does not depend on text Is another medium ore powerful than the common text-based format?

Conclusion

When they work with novices, technology leaders must be able to show that the complexities involved are more than just creating a Web site. They should help beginners gauge the balance of information with its presentation so that one does not overpower the other. outlining, diagramming, and storyboarding can help. We need a new breed of bold explores who can blaze the trail for learners who want not only to “look good” but also to be good on the Internet in the 21st century.

Gerald D. Baily
jbailey@ksu.edu

Marie Blyth
mblythe@oz.oznet.ksu.edu