Warren A. Beatty, Ph.D.
Steve M. Zimmerman, Ph.D.
Mohan Menon, Ph.D.
University of South Alabama
College of Business and Management Studies
Abstract
The tremendous growth of the Internet and World Wide Web (WWW) is well documented. There are now an estimated 60,000,000 destinations, or home pages, worldwide. Establishing a home page is becoming easier and less expensive, making it possible for anyone wanting a home page to have one. Current indications are that this growth rate will continue. A consequence is that the number of home pages with which users must interact will increase significantly, placing a premium on time and efforts. Well-designed home pages that convey information in a concise and easily assimilated manner will enhance users' utilization as well as make maintenance easier. This paper addresses some of the basic concepts of home page design. A design paradigm is developed to provide a framework for home page development.
INTRODUCTION
"Users of multimedia computer documents don't just look at information, they interact with it in novel
ways that have no precedents in paper document design. Excellence in interface design -- designing how
the user is able to access the information in your document -- is crucial to the successful design of World
Wide Web (WWW) pages and systems." [6]
The advent of the WWW has created a new and unique situation for home page users and designers alike. How do home page designers create and maintain documents that utilize the capabilities of the multimedia, yet maximize the utility for users? This paper attempts to answer these questions by developing a home page design paradigm. The focus is upon several key concepts that, if followed, will maximize user utility and designer efficiency. This paper does not address the Hypertext Markup Language (HTML). There are many excellent sources, such as "A Beginner's Guide to HTML," [1] to guide developers in the use of the HTML.
FOCUS ON CONTENT AND STRUCTURE, NOT ON STYLE
The key to effective home page development is to focus initially upon content, then use the capabilities of HTML to
develop the style of the presentation. You must start with good content and logical structure, then add images and
links as required to enhance the content of the page. Always choose content and structure over physical markup and
appearance. A good rule is to focus document development on "what it is" rather than "how it looks." "The trust
you must have (when developing a home page) can be summarized by the following rule: if you mark up a
document so that your information is labeled as what it is instead of how it should be displayed, then browsers will
render it in a way that is appropriate and professional looking. [11] Developers must remember that, "HTML is a
content markup language, not a desktop publishing or page presentation environment. If you start out with good
content, you can use tables, images, and other elements to enhance the appearance dramatically. If you start with a
look and feel' concept, it may be too late to pour in coherent content." [10]
CONCEPTS FOR DEVELOPING HOME PAGES USING HTML
There are two concepts associated with using HTML to develop home pages. They address problems associated
with HTML and home page development that are derived directly from the characteristics and capabilities of HTML
and the WWW itself. These concepts, suggested by Lynch [6], are:
Because of the nature of HTML and its capabilities regarding linking to and from other pages, possibilities of numerous fonts as well as styles and sizes, colors, inclusion of in-line graphics, and document length and width specifications, specific home pages can be developed in an infinite variety of formats. Any one, two, or more of these capabilities can be utilized to create home pages that can range from a simple, single page listing of a document, to a highly sophisticated and multi-linked, image filled page that encompasses a large number of subjects and formats. Because HTML is not a page dependent medium, the variations are endless.
The first problem with home pages is that users can quickly become confused, particularly if there are varieties of styles of pages within one site. Home pages that utilize a consistent and clearly defined and formatted framework are easier for developers to design and maintain, and are easier for users to read, comprehend, and navigate through in search of specific information.
The second problem with home pages is a direct result of the very power of the Internet and the WWW. Being able to link pages from other developers from anywhere in the world can cause problems. Unlike books, home page designers cannot rely upon users to enter pages from any specific place. Any page can link directly to any other page. This capability demands that every page must have enough information to allow users to understand the purpose and content of the page. This "stand alone" requirement dictates that every page have a minimum set of elements to facilitate user utilization. The contents of the page should not depend upon user arriving from another specific page. [8] Failure to provide these elements can cause user confusion and frustration, resulting in the user abandoning the entire home page completely.
Recognizing these problems permits us to identify specific concepts to address and alleviate, if not eliminate them. The balance of this paper is devoted to developing these concepts and methods to implement them. Experience has shown that developers, when using these concepts to guide the development of home pages, will enhance the design, functionality, and usability of their home pages.
METHODS TO ADDRESS PROBLEMS ASSOCIATED WITH DEVELOPING HOME PAGES
Design Paradigm: Focusing on Formatting Issues
The best way to maximize ease of access to information is to apply basic page design principles which provide
consistency and predictability for the user. Developers must remember that HTML is a content markup language,
not a desktop publishing tool. Zimmerman and Conrad [12] provide some specific guidelines for desktop
publishing that are applicable to home pages. These principles, modified for HTML where necessary, are discussed
in detail in subsequent sections of the paper.
This screen design concept is what Lynch [6] refers to as a "design grid." The purpose of the grid is, as with MIS design, to provide a consistent and predictable format to the user. This format enhances user identification of information and increases the user's confidence that he or she is using a logically organized collection of information.
Elements of a Home Page
In order to facilitate Lynch's design grid, he has identified a minimum set of elements for each page, or document,
in a home page: a heading, a body, and a footer.
Heading: A uniform heading provides consistency from page to page. It consists of a (graphic) banner if desired, a (relatively large) title, and any subtitles necessary to indicate the page's content. The goals of the heading are to provide users with consistent appearance and to facilitate users' use of the pages as a source of information.
Body: The primary contents of the page constitute the body of the page. This is the information the designer wishes to provide to users. The focus should be on content rather than appearance. Using the screen guidelines developed by Davis and Olson and Lynch's design grid concepts will ensure a well formatted and presented body. Users will be able to quickly identify the desired information and be able to seek further information if desired.
Footer: The footer typically consists of the author's name, affiliation, E-mail address, and the date of the last update. It can include a "Mailto" facility to provide access to the developer. Lynch also suggests that the Universal Resource Locator (URL) be included for identification. It also identifies printed pages if the browser does not print the URL.
Individual Page Design Considerations
As with the printed media and desktop publishing, visual contrasts can enhance the appearance of home pages.
Contrasts between different font sizes and contrasts between fonts and white space can call a user's attention to
specific elements of a page. Headings should be (relatively) large, subheadings somewhat smaller, and the content
of the page should be an easily read font size. Consistency of text color is an issue in desktop publishing to which
HTML cannot strictly adhere. When text is utilized to form a link to another page it is displayed by the browser in a
different color (usually one of two shades of blue). This violates the color consistency concept, but it is unavoidable
if the developer uses text as a link. A page should never consist of ALL CAPITAL LETTERS which defeats the
purpose of using size for emphasis. It looks like YOU ARE SHOUTING! This is irritating and will cause users to
avoid the pages. A more effective way to achieve contrast is to use bold and/or italic text for emphasis to create
visual contrast without changing font size or mixing fonts.
Page Length Issues
Like the "Below the Fold" portion of the front page of a newspaper, users will usually stop reading at the end of the
screen, even though they can easily scroll down to view the rest of the page. [5] This suggests that developers
should include all important information in one screen that does not require scrolling. This will ensure, or at least
increase the probability, that users will read the important elements of information on the page. When a page
exceeds the size of a screen a scroll bar appears and provides access to the remainder of a page. The problem with
scrolling is that it requires users to remember information that is no longer on the screen. This is critical if
instructions, such as referring to a printable document or how to communicate with the developer, are not on the
screen. As a "rule of thumb," a page should not exceed two to three full screens. This size facilitates scrolling up
and down, but does not overwhelm the user with too much information. Pages that exceed three screens full should
be broken into smaller pages with an index page that provides access to each page. [6][5] Two exceptions may
occur. First, in situations where the users are actively seeking information and no or few alternatives exist, users
will usually tolerate any page length in order to get what he or she needs. [5] Second, home pages often consist of
numerous related pages that users may wish to print. Rather than have the users go to each individual page and
print it, a separate page with the entire document included for printing purposes is desirable.
Page Width Issues
There is no printed page equivalent to horizontal scrolling. People do not have to slide pieces of paper to the left or
right in order to read a document. Care should be exercised when designing a page since horizontal scrolling is so
difficult for users. The default width of most browsers is 480 pixels. Any graphics or combination of graphics and
aligned text that exceed this width will cause the horizontal scroll bar to appear at the bottom of the screen and force
the user to scroll horizontally to see the entire page. Developers should therefore limit in line graphics to 470 (or
so) pixels in width. This width will accommodate most browsers without forcing horizontal scrolling. Developers
should use the "height" and "width" specifications to ensure that the 470 pixel width is not exceeded.
Navigation Paradigm: Linking Documents and Navigation Issues
The linking capability of the WWW is one of its most powerful attributes. Being able to directly access pages
provides flexibility and ease of use found in no other medium. This capability does require some thought and
management if it is to be effective and provide ease of navigation within your site. Every page should be able to
exist on its own. Understanding the contents of a page should not depend upon how the user arrived at the
document. [5] Every page should communicate information clearly and succinctly, without any requirement for any
external reference. You should always try to present the information in a manner that doesn't require links. Write
about the subject as if no links are present in the page. [7] Don't insert links "just because you can." [5] Too many
links make pages difficult to read and to use. Always create a context for links. Links should exist for a specific
purpose, and that purpose should be clearly explained by the text of the page.
When links are required, they should follow these guidelines. The size, color, and context of links should be consistent within all of your pages. Always provide a large enough target for the user to reference, particularly when a mouse is being used. One letter or word may not be large enough for users to point to with a mouse. Phrases or entire sentences provide sufficiently large targets. Consistent color also facilitates user identification of links. This also suggests that the use of colored fonts for non-link text be minimized in order to reduce or eliminate confusion about what is and what is not a link. Don't use the phrase "Click On" to refer to links. This assumes that the user is using a mouse. Many text browsers, such as Lynx, don't require a mouse. Users can't "click on" a graphic or text link. Rather, integrate the links and their references into the text of the document. It is a good policy to develop the text as if no link were present, then develop the link from the pertinent text. Graphic images are also good links. However, you should indicate with text that the graphic is the link. Explain what link is accomplished by the graphic. A picture may be worth a thousand words, but unless the picture conveys exactly what the link accomplishes, it should be accompanied by an explanation.
The freedom to link from any page to any other page often causes unexpected results. This is particularly true when menus have links to pages that contain links to other menus. A type of "circular" structure results, and users quickly get confused when they can exit a logical structure by linking to another menu which sends them into another logical structure. It is best to "force" structure discipline. First, have only one "main menu" page that is the source of links to the rest of the pages. The main menu page should link only to major submenus. The submenu pages can then link to the various pages that logically belong to it. Second, do not include links that permit direct linking to another sub-menu structure. "Force" users to "walk back up the chain" of pages, either by using the "Back" button, or by using a link in each page that directly returns to the site's main menu or to the menu from which the page was originally reached.
Forcing structure sometimes can cause problems for users who don't "enter" the site from the main menu. Remember that users may link to pages other than your main menu. This situation creates a problem since the browser's "Back" button will not take users through your logical structure. To make navigation easier and make a visit to your entire site possible, each page should have links to go back one page and forward one page, as well as a link directly to your submenu or main menu. Never have a "dead end" document - always have a "forward," "backward," and "top" navigation option in each document to facilitate specific navigation.
Forcing structure leads to another design consideration. How "deep" or "broad" should your site be? Main menu pages that are allowed to grow without any thought to organization often end up as a "hodgepodge" of unorganized and unrelated topics that are difficult to use. Main menu options should link to submenus that identify groups of related pages. The main menu link should clearly explain the contents of the link so the user can decide if he or she wants to pursue it without having to actually link to it. Having too few main menu options can be just as bad as having too many. A main menu that has all (or most) of its references to stand alone documents that are themselves related is probably too shallow. Menus can have as many as twelve links and still be effective. [6] The key to menu design is one of organization. The menu options should direct the user to a specific, related subset of information.
Performance
Graphics are great, but they take time to load. Home page designers should consider the tradeoff between the
enhancements to the information in the page provided by graphics and the time it takes to load the graphics.
Remember, not everyone has a T1 line. Below are some guidelines for using graphics within home pages. [5]
Avoid using large graphic images for your opening menu page. The time to load an initial full page graphic is going to cause most users to abandon the document. A good example of this is the White House home page (www.whitehouse.gov). Recent visits to this site using a 28.8 modem required an average of 94 seconds to load. A good rule of thumb is to try to limit all graphics on a page to no more than 30K. [5] Be certain that the graphic contributes to your information presentation. A graphic should help explain or demonstrate the point you are trying to make. A good way to increase graphic performance is to include a very small version of the graphic, then provide text that explains the graphic and its relevance to your information. Users can then decide if they want to load the graphic. Also tell the users the size of the graphic so they have some idea of the time required to load the graphic. Use the HEIGHT and WIDTH parameters when loading a graphic. Many browsers can maximize the loading of text because the document can be formatted and text displayed immediately.
Don't use graphics that you reference from other sites. There are two problems associated with doing this. First, you cause an unwelcome (and probably unauthorized) load on the server where the graphic is located. Second, if the server is unavailable, the graphic won't load and your page will be delayed also. Further, if this happens the default graphic that the browser displays may or may not be compatible with the space your document had reserved for the graphic image. The results will be unpredictable and probably undesirable. [5]
When possible, utilize interlaced GIF images. This permits some browsers to immediately display a low resolution graphic and the text of the page. Users can then begin to read the text while the browser completes the loading of the image, usually in four more passes. The net effect is a faster loading of the page from the user's perspective. There are several programs available that will convert images into interlaced GIFs. One is Paintshop Pro, available from JASC, Inc. (http://www.jasc.com/).
Visual capabilities such as animated GIFs, blinking, and use of the status bar as a marque are possible. We strongly suggest that you view some home pages with these capabilities before including them. They are, for the most part, irritating and actually detract from the presentation of the information. Use these features only if their effects are essential to the presentation of your home page. Including them simply "because you can" is not a valid reason. [5]
Quality Issues
Test every link that you have included in your page. Nothing causes user frustration faster than invalid links to
promised information. Periodically test the links. Don't assume that a link will work tomorrow if it is working
today. You should test your links at least once each month and either correct or eliminate the ones that don't work.
Verify HTML syntax and construction. [9] Use an HTML verifier or one of the many editors that will let you test
your pages by invoking a browser. This method permits immediate verification of your syntax, as well as
permitting evaluation of the overall effects of your efforts. Edit your pages. It is preferable to get someone else
(like your spouse, who will have absolutely no regard for your feelings!) to proofread and edit your pages. Just
because you understand what you are trying to say doesn't mean everyone else does. Write for ALL Browsers. Try
to avoid browser specific HTML, such as the extensions provided by Netscape or Explorer. Try to utilize only the
HTML 2.0 or the proposed HTML 3.2. By doing so you ensure (or at least maximize the probability) that all
browsers can read and successfully display your home page. [10] Similarly, try to avoid including a
recommendation that your home page is "best viewed" using a specific browser. Everyone who doesn't have the
specified browser is probably going to avoid your page. [7] Test your home page, including all sub-pages and links,
on at least two browsers. For example, try your page on Netscape and Explorer. If results are consistent then you
can assume that your home page will be successfully utilized world wide. [11] Watch your language. Besides the
obvious exclusion of profanity and unfavorable ethnic or racial references, try to avoid words and phrases that are
redundant, imprecise, incorrect, or irritating. Jutta Degener's "What is Good Hypertext Writing" has a list of
"Dangerous Words" that should be avoided. Each word or phrase is examined and the reasons for excluding it are
provided. [4]
Further Considerations
"Authoritativeness has always been a fallacy, except when read as author-itativeness; whatever claims to authority
you or your organization have ultimately boil down to status and reputation within the community. One becomes a
reputable source not by being non-refutable, but by putting a stamp on what you write; by claiming authorship, and,
thereby, author-ity. This means that readers must take greater responsibility for critically analyzing what documents
they come across. But it also means that you must be responsible in establishing credentials for what you claim,
providing source material and raw data to justify your conclusions." [11] This statement has always been true, and
it is particularly appropriate for home page developers. The ability to cite any other home page in the world places
a burden of responsibility on you to validate all referenced information.
SUMMARY
The World Wide Web provides a unique and rich environment for publishing of home pages. However, the
capabilities of this environment require management if it is to be utilized effectively. It is the responsibility of every
home page author to consider his or her audience and the way his or her information is presented. The user should
be able to quickly, conveniently, and efficiently navigate the home pages within a site and locate information with a
minimum of effort and without having to have knowledge of the physical structure of the entire site. Following the
design paradigm will contribute toward the goal of effective home pages. Effective home page design will
compliment the author and encourage users to return again and again to search for information.
References:
[1]"A Beginner's Guide to HTML," http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
[2] Brown, Luanne, "On the Road to Good Web Design," http://www.microsoft.com/workshop/demo/nc/girvin.htm
[3] Davis, Gordon, and Margerethe Olson, Management Information Systems, New York: McGraw-Hill Book Company, 1985.
[4] Degener, Jutta, "What is Good Hypertext Writing," http://kbs.cs.tu-berlin.de/~jutta/ht/writing/words.html
[5] Levin, Rick, "Guide to Web Style," http://www.sun.com/styleguide/tables/Printing_Version.html
[6] Lynch, Patrick J., "Web Style Manual," http://info.med.yale.edu/ciam/stylemanual/Manual-1.html
[7] Oskoboiny, Gerald, "Advice for HTML Authors," http://ugweb.cs.ualberta.ca/~gerald/guide/style.html
[8] "Placing a Site on the Web," http://www.webcom.com/html/tutor/html_site.html
[9] Sanders, Tony, "Why Validate Your HTML," http://www.earth.com/bad-style/why-validate.html
[10] Steel, Warren, "Hints for Web Authors," http://mcsr.olemiss.edu/~mudws/webhints.html
[11] Tilton, Eric, "Composing Good HTML," http://www.cs.cmu.edu/~tilt/cgh/
[12] Zimmerman, Steve, and Leo Conrad, Understanding and Using Microcomputers, St. Paul: West Publishing Co. , 1991.
Note: A more extensive version of this paper as well as a home page of the IEMS 97 conference presentation can be found at: http://www.usouthal.edu/usa/business/warren.htm