STG Technical Report 97.2
(http://www.stg.brown.edu/pub/NetTechWeb.tr97.2.html)
The NetTech web site (http://www.nettech.org/) presents a tremendous challenge, within the Consortium, to both content providers and web designers. The site must accommodate the contributions of diverse partners, working on different aspects of educational technology and technical assistance, and must construct an image from, and for, these contributions that is simultaneously compelling and friendly, principled and useful. That this would be a difficult task for a large team of full-time workers, merely emphasizes the difficulties we should expect when the team assigned the task is small.
In this report, we discuss principles and issues of design and content creation that we believe are particularly relevant to NetTech's decisions about its web site. Although we do not propose, or expect, that all the partners in NetTech agree on the answers to philosophical, aesthetic, or even technical questions, we do believe that this report will help to focus the NetTech Web discussions and make possible a working consensus about the organization, purpose and design of the NetTech Web.
The report begins with discussion of design principles and content issues associated with the production of Web-based hypertexts and hypermedia. We then discuss the NetTech Web as it might be experienced by someone who arrives at the site knowing little or nothing about the Consortium's mandate or work. The report concludes with a discussion of responses to a survey about the NetTech Web from members of the Advisory and Planning Boards, and a set of questions that we think critical to NetTech's discussion of its web site.
I. Display important information on the default page
The first time visitor to the site ought to be able to discern the primary purpose of the site, its publisher and affiliation(s), a way to contact representatives of those organizations electronically and otherwise, the geographical location of the organization, and an indication of the primary navigational system. All of these should be available on the introductory (home) page, which should occupy a default position in a file hierarchy. Without this sort of assistance, many visitors inevitably waste time and effort exploring sites that have no useful information for them, or give up on sites that could be valuable but fail to capture an appropriate group of users. One can think of the primary page of an educational/scholarly site as a combination of cover and contents page. It reveals both bibliographic and contextual data to help people make informed choices about whether to continue.
II. Flatten hierarchies
The hierarchical structure of a web site is practically unavoidable, but should be as easily navigable as possible. The site's navigational structure, whether a header or footer bar, or a small column to the left or right of the text, must be consistent from page to page and section to section. In general, one should be able to navigate from the body of one section to the top of another. Corollaries to this principle are: (1) have intelligible categories; (2) mirror the categories in the directory system; and (3) install default pages in every directory. These default pages should reflect principle I (above).
III. Design for repeated visits
The returning user is the ideal user, and should be accommodated from the beginning. This tenet applies primarily to the structure of the site, and to the location of the most important/useful documents. The usage logs of the site are an important resource in this regard. Examining the logs can help publishers identify both frequently used and frequently overlooked areas of the site. Eventually, it should be easiest for users to get to the documents and data requested most often, and the site can be constructed in a way that trains novices about the structure as they explore the content.
IV. Use text as a navigational tool
Icons alone are frequently an ineffective navigational tool.[2] People rely on text to indicate the destination of linking buttons, and unless it is very easy to tell what an icon represents, it is more effective to use text alone to do the job. Additionally, because screen real-estate is still at a premium (and will be in the foreseeable future), text is often more economical than picto-graphics. Of course, text-based navigation is also preferable because it is the only kind accessible for some browsers, as well as visually disabled users who rely on speech synthesizers that translate text.
V. Be visual when it helps
If it is possible to train users easily to use visual clues for navigation, do so. One common strategy is to change the background color attribute (e.g. the "bgcolor" tag) of pages depending on which category "owns" them. Again, these visual clues can help certain users, but will be completely ineffective for others. They should only be used in addition to primary indications of relative location in the hierarchy, etc., and these should be delivered textually.
It should be mentioned here that photographs and diagrams can sometimes communicate complicated concepts more effectively and with greater economy than text passages can. The World Wide Web hypertext transfer protocol (HTTP) differentiates itself from other Internet protocols because it allows the transmission of visual material in-line with text. In this report, when we speak negatively of images, we are primarily referring to icons and titles displayed as images, where HTML text would do as good a job or better. Not every in-line image is bad, nor are they to be generally avoided. Every image must have an "alt" attribute, however, to be maximally effective.
2. Hypertexts that are meant to convey a particular body of information, as well as facilitate, encourage, or coerce movements through the hypertext. Such movements may or may not be uniquely pre-determined by the linking structure of the hypertext. A conference hypertext, like STG/NetTech's Hypermedia, Teaching and Technology, a scholarly hypertext like George Landow's Victorian Web, and an annotated "primary" hypertext, like the annotated version of Mendel's paper at MendelWeb, are hypertexts of this sort.[5]
3. Hypertexts that are modified over time by authors either: known when the hypertext is begun; not explicitly identified when the hypertext is begun; or completely unknown throughout the construction of the hypertext. Web-based conferences, like the HyperNews discussion at NetTech's Hypermedia, Teaching and Technology site, and collaborative hypertexts, like the Reader's Mendel at MendelWeb, are mild examples of hypertexts of this sort.
4. Hypertexts the significance of which is partially or entirely composed by the act of reading, choosing, watching, listening, as well as moving through the hypertext. The interactive simulation of a genetics experiment, like that presented at the Virtual Fly Lab, is an elementary example of this sort of hypertext.[6]
5. Hypertexts with components distributed among multiple computers, in a variety of linked locations. The components of "distributed" hypertexts may be produced by different authors, working in strict or loose collaboration.[7]
Although one can identify best or promising practices for the creation and use of each kind of hypertext, the possibility of creating multi-authored "distributed" hypertexts on a grand scale is one of the great achievements of the World Wide Web, and one which holds great promise for educational purposes. Distributed hypertext, for example, allows large-scale curricula to be composed in a way that takes unique advantage of geographically disparate expertise, and minimizes redundant efforts; the co-authors of a distributed hypertext are freed from the concerns of coverage inherent in the composition of a printed curriculum, and can focus on the composition of exemplary modules of content.[8]
Attempts to demonstrate the promise of distributed hypertexts, and particularly distributed curricula, however, have revealed two pressing problems with hypermedia content on the World Wide Web, and they are problems that should inform the construction of every sort of hypertext on the Web. The first problem is the stability of Web-based content, and the second is the quality of that content. If one imagines an ideal example of a distributed curriculum, consisting of a large set of distributed hypertexts fully integrated (linked) with one another, one recognizes that the entire curriculum would be only as reliable and accurate as its least reliable and accurate component.
The current problems concerning the stability of Web content derive both from the poverty of the URL (Uniform Resource Locator), and unfortunate practices on the part of some Web maintainers. For linking purposes, the location of any piece of a hypertext on the Web is usually known to its user solely by its URL, and as Web browsers are not tolerant with respect to incorrectly formed URLS, the practice of changing file names, directory structures, and/or domain names without contacting those who maintain hypertexts with links to those specific addresses, will "break" the distributed hypertext.[9] This vulnerability argues in favor of: 1) designing web sites with file structures, and file- and directory- naming protocols that will remain constant and intelligible to collaborators over time; 2) developing a method for including information about the previous location(s) of a particular document in the document header, in preparation for a day when Web browsers will reject a request for a URL only after searching file contents and directories for that address.
The current problems concerning the quality of Web content can be traced not only to the appearance of great numbers of content providers, but to the lack of university and government initiatives to generate high quality content to support the nation's networked educational activities. It is perhaps surprising to learn that the largest repository of primary documents for the study of American history on the Web is located in the Netherlands; it is perhaps less surprising to find that a variety of extreme political and religious groups use seemingly unbiased academic content to attract users and steer them to the decidedly biased content at their sites.[10] The problem of content quality argues in favor of using educational sites like NetTech's Web as a guide to accurate K-12 curricular material, if not as a repository for excellent curricular content generated by the NetTech partners, their affiliates, and the Department of Education.
A user arriving at the NetTech web site for the first time, without knowledge of the Consortium's mandate or work, is immediately struck by the color, the movement, and the variety of images. The black background, animated icons, the image of the Mona Lisa, and Javascript text, while perhaps engaging, do combine to suggest a small-scale commercial site, or even a student project, rather than a Technical Assistance consortium funded by the Department of Education.[11] If the site eventually houses important content for K-12 teachers and administrators, these elements may not effectively communicate the site's nature or value to first time users, and they may be distracting to regular users.
Some of the features of the NetTech homepage genuinely interfere with the use of the Web browser. The Javascript text, for instance, obscures the target URL of a particular link; yet, users will often pass the mouse over a hyperlink in an attempt to get more information about a target document (e.g. whether the document is internal or external to the site, and in what directory it is located). Additionally, the default set-up for the site uses frames, and there are numerous reasons for avoiding the use of frames at sites where content is important.[12] Where the secondary frame is used only to house navigational text, frames may be completely unnecessary. The noFrames version of the page, on the other hand, is a nice example of a site developed with horizontal navigation implemented without frames.[13] Finally, the 12 icons which take up most of the area of the main frame are too ambiguous to succeed as navigational devices;. an annotated list would be easier to use, and could give users more detailed guidance as they make their way through the site.
We conclude this section with comments about the categories of information represented by the icons:
The first section "About NetTech" is nicely done. It is informative, well designed, and easily navigable. The internal links at the top of the page, and the "Other Partners" link to the main list are useful (although the latter should target the header "NetTech Partners" rather than the Brown University list item).
There is a good deal of interesting information in each of the state sections. If a section is empty, however, it should not have a live link. For instance, the "District Projects and Contacts," "NetTech--D.C. School Web Sites", and the "NetTech--Connecticut School Web Sites" links point to empty pages. A good idea might be for each state to have one page, designed in parallel with the "About NetTech" page, with a list of contents at the top, and internal links back and forth between the sections. This would eliminate an entire level in the directory structure and permit more direct access to resources. Currently, however, none of these pages contain enough information to warrant a seperate page.
The Web Resources section of the site is clearly useful. It is focused and compact, compared to the many bloated educational hot lists on the Web. The NeatTech feature, and the links to state resources are also valuable.
Until there is more content to differentiate them, it would seem that the Projects, Publications, and Professional Development sections should be combined in a single category. All of the material referred to under any of these categories is included in the "...Projects" section of the heirarchy, and it is not clear that a NetTech product that belongs in either "Publications" or "Professional Development" would not be equally at home as a "Project."
The Technical Assistance button is perhaps the most ambiguous of the navigational tools on the NetTech home page. It is unclear to what specific activities Technical Assistance refers (as opposed to a characterization of all NetTech activities as Technical Assistance); that the link leads to a directory of NetTech advisors and Staff is puzzling. This information would seem to belong in the "About NetTech" section, or perhaps in a "People" section, but not in Technical Assistance.
NetTech Interactive is linked to a large "Under Construction" sign. In general, it is bad practice to call attention to, and raise expectations about, material at a web site that isn't in fact available.
The Events section is potentially very useful. The use of an on-line calender, whether represented using an HTML table or an image, might be justified by a significant number of events occuring each month; but, if the number of events listed in the three month period covered currently is any indication, there is no need for a graphical calendar. A list of events and their dates would load much faster, and might be a part of the main events page, eleminating a needless layer in the hierarchy.
The digital workshop would appear to be a Project rather than a separate category of information or of activities at the site. The workshop seems an interesting educational experiment, and might better be listed with the other things NetTech is doing in the Projects section. This in turn may argue in favor of breaking the Project section up into sub-sections (e.g. by grade level).
The "What's New" section is important at any site, and NetTech's is an effective example. The entries are dated, and the section is kept up to date. Furthermore, there is significant context to help the user decide whether or not to follow any given link.
Although a rich feedback form would be useful evaluation tool for a content-rich site, until there is such a form (and significant content), the feedback link might as effectively be an electronic mail link (the "Webmaster" link on the left-hand frame is probably sufficient at this time).
2. What categories of information should be most easily found at the NetTech web site (e.g. partner info, publications, conferences, events, classroom projects, district-level projects, state-level projects, etc.)?
3. Please give us the URL of the web site you find most useful in your work, and briefly describe why it is so useful to you.
4. What is the most important thing for a user of the NetTech web to learn about NetTech?
5. Should the NetTech web be the site of collaborative work (e.g. on-line conferences, collaborative document preparation, etc.)? If so, what kind of work would be most useful to you, and should this work be kept in a restricted section of the NetTech web?
2. How important is the web site in the scope of NetTech's activities? If the web site is of major importance , it requires a significant investment of resources, both intellectual and financial.[14]
3. What is the specific process by which discussions, revisions and decisions concerning the NetTech web site are to be undertaken, and implemented by the Consortium? Similarly, if the Eisenhower National Clearinghouse takes the lead in articulating such a process, what specific commitments are the other partners willing to make about the production of materials for the site?
The creation and maintenance of the NetTech web site is, and will remain, a very difficult task; but, if partners can achieve a working consensus about the audience for the site, the resources that should be devoted to the development of the site, and the process by which questions about the site's organization and content are to be resolved, we think NetTech will have set an important example for the growing number of partnerships and consortia in similar circumstances, facing similar difficulties in the production of their web sites.
[2] See especially the study by Nielsen and Sano (1996), about the redesign of the Sun Microsystems Internal Web. The study included extensive "usability" research.
[3] For the purposes of this discussion, we define a hypertext simply as a set or web of linked materials, representable as a planar graph, where the vertices of the graph are texts and the edges of the graph are links. When the texts are in a variety of media (e.g. text, audio, video, data base entries, etc.) the term "hypermedia" is sometimes used rather than "hypertext". In certain contexts it is reasonable to stipulate that, only when the size of the graph (i.e. the number of edges) is (significantly) greater than the order of the graph (i.e. the number of vertices), is the result a true hypertext. For an elementary introduction to the theory of graphs, see Graham, et. al (1995), vol. 1, pp. 3-110.
[4] See Hahn et al (1992), Landow (1994), pp. 6-31 Joyce (1995), pp. 39-59, and Eco (1996), pp. 295-306. See also Nielson (1995)for further distinctions.
[5] The HT&T conference site can be reached at http://www.stg.brown.edu/edu/HTT96/. The Victorian Web and MendelWeb can both be reached from the STG home page at http://www.stg.brown.edu/.
[6] The Virtual Fly Lab project, at California State University, can be reached at http://vflylab.calstatela.edu/edesktop/VirtApps/VflyLab/IntroVflyLab.html.
[7] For an extreme example of such a distributed hypertext, see the MendelWeb Timeline at MendelWeb (http://www.stg.brown.edu/MendelWeb/MWtime.html).
[8] For an example of a distributed curriculum in the making, see the Virtual Department of Geography, based at the University of Texas at Austin (http://www.utexas.edu/depts/grg/virtdept/contents.html). For an example of a content module for a distributed curriculum in genetics, see MendelWeb (http://www.stg.brown.edu/MendelWeb/), which discusses the idea of a distributed curriculum in some detail. For more on the difference between distributed electronic curriculum and traditional printed textbooks, see Blumberg (1995).
[9] In preparation for the latest edition of MendelWeb (97.1), several hundred links in the MendelWeb Timeline were checked and revised. Between August, 1996 and February 1997, more than half of the links in the previous edition of the Timeline had broken.
[10] The Netherlands site, From Revolution to Reconstruction, can be reached at http://www.let.rug.nl/~welling/usa/revolution.html. Recently, one of the authors conducted a search for on-line documents on the freedman Denmark Vesey, as part of a revision of the MendelWeb Timeline. The most authoratative source for biographical information of Vesey was found at the web site of the "Southern Defense Initiative" (http://www.counterattack.com). The author decided not to make a link to that document.
[11] It may be useful to contrast, for example, the impression made by the NetTech homepage with that made by the homepage of the Eisenhower National Clearinghouse (http://www.enc.org/).
[12] For a useful, authoritative criticism of frames, see Nielson (1996).
[13] For another example, see the Brown University Graphics Group site (http://www.cs.brown.edu/research/graphics/). While this site implements some HTML 3.0 tags, (e.g. "bgcolor" tags in tables) it is completely compatible with text-based browsers.
[14] See the web site of the NSF-sponsored Graphics and Visualization Center, housed at Brown University, (http://www.cs.brown.edu/stc/home.html) for an example of a consortium that regards and uses its web site as a fundamental resource for dissemination, collaboration, and administration.
Bringhurst, Robert. 1992. Elements of Typographic Style, (Vancouver: Hartley and Marks).
Eco, Umberto. 1996. "Afterword," in Geoffrey Nunberg (ed.), The Future of the Book, (Berkely: Universtiy of California Press), pp. 295-306.
Gill, Eric. 1988. An Essay on Typography, (London: Lund Humphries Publishers Ltd).
Graham, R. L., Grötschel, M., and Lovász. L. 1995. Handbook of Combinatorics, volume 1 (MIT Press and North Holland).
Hahn, B. J., Kahn, P., Riley, V. A., Coombs, J. H., and Meyrowitz, N. K. 1992. "IRIS hypermedia services." Communications of the ACM, 35, 1:36-51.
Joyce, Michael. 1995 Of Two Minds, (Ann Arbor: University of Michigan Press).
Landow, George P. (ed.) 1994. HYPER/TEXT/THEORY, (Baltimore: Johns Hopkins University Press).
Morison, Stanley. 1991. First Principles of Typography, (Leiden: Academic Press Leiden).
Nielsen, Jakob. 1995-97. Alertbox. (http://www.useit.com/alertbox/). Alertbox is Jacob Nielsen's monthly column on Web Usability. Neilsen is Distinguished Engineer at Sun Microsystems. Many of the ideas in this document have been elucidated here.
Neilsen, Jakob. 1996. "Why Frames Suck (most of the time)." Alertbox, December (http://www.useit.com/alertbox/9612.html).
Nielson, Jakob. 1995. Multimedia and Hypertext: The Internet and Beyond, (Boston: Academic Press Professional).
Nielson, Jakob, and Sano, Darrell. 1996. "SunWeb: User Interface Design for Sun Microsystem's Internal Web." (http://www.sun.com/sun-on-net/uidesign/sunweb/).
Tschichold, Jan. 1995. The New Typography. (Berkeley: University of California Press).
Tschichold, Jan. 1991. The Form of the Book: essays on the morality of good design. (Point Roberts: Hartley and Marks).
Waters, Crystal. 1997. Typo.com. (http://www.typo.com/welcome.html).