An Introduction to World Wide Web Page Design
##AUTHORSPLIT##<--->
The Internet has been in existence for almost two decades, with the World Wide Web (the Web for short) coming into existence in 1991. However, the current interest in the Internet dates from around 1993, when NCSA Mosaic, the first graphical browser, was introduced. The Web has now become the Internet's most widely used information retrieval system in both academic and business domains.[1]
At this point you've decided to join the multitudes and place your own page on the World Wide Web. The first thing to consider is your message design. Web page design is not simply a matter of selecting individual elements and putting them onto a page. Each element interacts and affects the perception of the other elements on the page. In addition, the peculiar aspects of the browser and server that you use affect how the page will be perceived.
Is there an underlying organization to the page? Should there be? The answer is yes. Recent research[2,3] suggests that readers view text as an ordered succession of concepts, and this view is strongly reinforced by the constraints of the standard print medium. Glushko suggests exploiting the user's knowledge of the printed medium for use in a hypertext system.[4] In other words, the designer should make hypermedia as similar to printed text as possible.
General Principles for Web Page Design
These principles have been adapted from Heinich, Molenda, and Russell[5], and Fleming and Levie[6].
Technology
The Web uses a client-server model for document retrieval. The server is a program running on a computer whose purpose is to provide documents to other computers (clients) when asked. A client is a browser, such as Mosaic or Netscape Navigator, and requests documents from the server as the user selects different links. The primary advantage of such a model is that the server maintains the connection with the client only as long as is necessary to transfer the document. In this way, a user d'es not tie up a connection when not requesting information, and many people can use the system simultaneously. However, the primary disadvantage of such a model is the need to re-establish the connection each time a document is requested from the server.
Consider the following example regarding web page size and server speed. You wish to design a web page to handle 100K of mostly alphabetical information, and the server has a transfer speed of 5K per second. Should you put all the information on one page, or should you break it into 6 sections (i.e., a 10K index and five 18K pages of information)? The full page will take at least 20 seconds to load (connect time plus download time), while the index section will take only 3-5 seconds. However, loading the additional sections will likely take longer in total due to the need to connect to and wait for the server to reply each time another document is requested. Yet, the principle advantage of additional, smaller sections is that the reader retrieves only the information requested.
Keep in mind that monitor resolution (72 dpi, or dots per inch) is lower than print; realistic pictures or detailed photos may lose significant detail when viewed on a monitor.
Another common problem is to design the page for one particular browser only, such as Netscape 2.0. Not all features can be seen on each type of browser, and users of older, less-featured browsers may have trouble loading and viewing your page. You may wish to design for the lowest common denominator, say Mosaic 1.0.3, and you should always test your page using different machines (Mac and PC) and different browsers (LYNX, Mosaic, Netscape). Alter the window size of your browser to see if the page reformats correctly (i.e., pictures don't overlap). Finally, document retrieval speed depends on the speed of both the client and server networks. Servers with high traffic loads (very popular sites) tend to be slow or unavailable.
The Designer's Intent
What are you trying to do with your page? Humor is very risky. The idiosyncratic nature of humor means that "funny" pages will likely disappoint or anger as many readers as are amused, thereby alienating a large portion of the available audience for your message. Are you trying to be different? Are you going for shock value, or do you have a genuine desire to remain different? Experimenting with features seems to be a popular activity with many Web page developers (this author included). Since this is still an emerging technology, many page developers enjoy pushing the current technology to its limits, and they are eager to try out each new feature as it becomes available. However, by doing so, they tend to limit compatibility with earlier versions of the available browsers.
The Reader's Intent
The reader's intent is fundamentally different from the designer's intent and motivation. The reader is likely using the Web to locate information to solve a particular problem. Preliminary research by the author indicates that experienced users will rely on traditional information search and retrieval strategies, such as Boolean keyword search with one of many of the search engines available on the Web. The experienced user knows that browsing is not an effective strategy, considering the size of the knowledge base that must be searched. Thus, consider the following:
- Curiosity -- create early interest; an index or overview at the top of your page will give the reader a hint of what is to come. -
- Challenge -- provide a reasonable level of challenge and an appropriate expectation for success. Readers struggle with risk-taking versus cautiousness when selecting links, and slow-to-load pages or pages without substantive information will likely cause cautiousness in the next several link selections.
Text
Attention is drawn to words or passages that stand in contrast to the rest of the body of the text. Black type on a paper white (as opposed to a pure white) background is optimal. Make physical attributes consistent with learner experience; this means formatting, paragraphs, indents, colors, font sizes, etc., should be reasonably similar to print. D'es this mean merely adapting a printed page for use on the Web? No, but don't stray far beyond the expectations of the reader. Avoid jargon; use familiar, concrete, and specific terminology. This will decrease the cognitive load associated with reading the page and will increase the likelihood that the reader perceives your message as designed.
Use the active voice; consider your page a conversation with the reader. Remember that books provide tactile cues to indicate depth and scope of information,[7] which you don't have available. Use other methods to indicate depth and scope (indicating "Page 5 of 9" is a typical method).
Pictures
Realistic pictures should be used sparingly for two reasons. Pictures should be simplified so that only those parts directly pertinent to the intended message are immediately perceivable.
And, more importantly, retrieval speed depends on a document's size. Large, realistic pictures tend to take a long time to download, and anecdotal evidence indicates that faster downloading is better. If you don't think so, try using your browser on an older machine (Mac Classic or a 386) or a 2400-9600 baud modem.
Analogic Pictures
These pictures convey an idea or topic by showing something else and implying a similarity. When selecting analogic pictures, ensure that what is depicted is reasonably within the realm of experience of intended viewers.
Organizational Pictures
When using organizational charts, alter the thickness of lines to indicate the different strength of relationships. Use relative size to indicate power or importance.
Backgrounds
This is an issue of contrast: Do I focus on the field or the ground? Attention is drawn to the parts that stand out in contrast to the others. If you have an extravagant background, or use inappropriate color mixes, then readers are likely to miss your message.
Image Maps
This feature of newer browsers such as Netscape 2.0 allows the use of a single image as the basis for several links. For example, a picture of the United States may have a link embedded within the boundaries of each state, leading to text describing the state to which the link refers.
The problem with image maps is twofold. First, the user may not be aware that the links exist until he or she casually sweeps the cursor over the image and notices the cursor change.
Second, and equally important, once the user comes across an image map, he or she will be likely to treat any subsequent image as a map, and may spend considerable time sweeping images looking for links that do not exist. A final consideration about image maps -- they tend to be large, requiring a long download time.
After the Design is Finished
Once you have finished your pages, pilot-testing is essential before placing them on your server. Pilot-testing should be considered a rehearsal, and since no competent actor or musician would consider performing without rehearsing, neither should you.
As designer, you are not the best judge of your work at this point, so try it out with several representative users (the people you are designing the page for, not your friends and neighbors). Take their suggestions seriously, but keep in mind that a single instance of a problem may not be a problem at all. The user is not always right.
Examples
- http://www.bobandtom.com/
many images, most recognizable only to frequent listeners of the Bob and Tom radio show; however, they are interesting and may stimulate further exploration. - http://www.indiana.edu/iub/
Scroll down to see that this image adds little to the page. In fact, the image prevents the initial viewing of potentially more valuable navigation buttons and contact information.
Web Authoring Tools
Many web applications and utilities for the Mac and PC can be found at the Virtual Shareware Library (http://www.shareware.com/). Among them are the following:
- World Wide Web Weaver -- an all-in-one, basic authoring package for the Mac.
- HTML Colour Tool (note the British spelling) -- use this to generate the hexadecimal code required for specifying different colors.
- WebMap -- this will generate the coordinates for helping to create image maps.
- HTML Table Tool -- this will help generate the HTML code for tables.
Selected Style Guides Available on the Web
David Child is a doctoral candidate in Instructional Systems Technology at Indiana University with a research emphasis on applying emerging technologies to education. He encourages all readers to visit the IST Home Page (http://education.indiana.edu/isthome.html), as many of his fellow students are developing innovative Web sites individually and through courses offered within the IST department and the Indiana University School of Eucation (http://education.indiana.edu/). Dave can be reached by e-mail at: [email protected].
References
- Nielsen, J. (1995), Multimedia and Hypertext, Boston, MA: AP Professional.
- Charney, D. (1987), "Comprehending Non-Linear Text: The Role of Discourse Cues and Reading Strategies," paper presented at Hypertext '87, Chapel Hill, North Carolina.
- Dillon, A. (1990), The Human Factors of Hypertext, International Forum of Information and Documentation, 15, 4.
- Glushko, R. J. (1990), Designing a Hypertext Electronic Encyclopedia, Bulletin of the American Society for Information Science, 16, 3.
- Heinich, R., Molenda, M., & Russell, J. D. (1993), Instructional Media and the New Technologies of Instruction, 4th Ed. New York, NY: Macmillan Publishing.
- Keller, J. & Burkman, E. (1993), In M. Fleming and W. H. Levie (Eds.), Instructional Message Design: Principles from the Behavioral and Cognitive Sciences, 2nd Ed. Englewood Cliffs, NJ: Educational Technology Publications.
- Welsh, T. (1994), "Hypermedia Interface Design: The Effects of Link Filtering and Link Indicator Differentiation on Learner Exploration, Performance and Perceptions of Usability," Unpublished doctoral dissertation, Indiana University, Bloomington, IN.
Winn, W. (1993), In M. Fleming & W. H. Levie (Eds.), Instructional Message Design: Principles from the Behavioral and Cognitive Sciences, 2nd Ed. Englewood Cliffs, NJ: Educational Technology Publications.