Web page design

Web page design

51.1 Purpose

As web use has grown, the web has become a de facto standard, and designing for World Wide Web compatibility has become an important information system criterion. This chapter discusses several basic web page design concepts and principles.

51.2 Strengths, weaknesses, and limitations

The strengths and weaknesses associated with specific tools and techniques will be discussed in context.

51.3 Inputs and related ideas

The basic principles and guidelines discussed in Chapters 46 (form and screen design), 47 (report design), 48 (user interface design), 49 (dialogue design), and 50 (windows design) pertain to web page design. Prototyping (Chapter 31) and rapid application development (Chapter 32) are useful tools for designing web pages. Network concepts are discussed in Chapters 52, 53, and 54.

51.4 Concepts

Over the past several years, the World Wide Web has become a de facto standard, and designing for web compatibility has become an important information system criterion. This chapter discusses several basic web page design concepts and principles.

51.4.1 The World Wide Web

The World Wide Web is a massive, Internet-based, international collection of hyperlinked pages. The basic structure of the web is designed around a client/server concept. Users (clients) request specific pages through their own computers or workstations. Page requests flow through the Internet to the computer on which the requested page is stored (the server). The requested page is then sent to the client (via the Internet) for display.

51.4.1.1 Web addresses and hyperlinks

Each accessible page on the web is assigned a unique URL (uniform resource locator) address (Figure 51.1); for example, the URL that uniquely identifies the official White House home page (or initial starting page) is http://www.whitehouse.gov. The addresses of other pages on the White House web site are defined by suffixing server and file information to the home page address; for example, http://www.whitehouse.gov/WH/Welcome.html is the complete URL address of the site’s welcome page (Figure 51.2).

Figure 51.1 The structure of a URL.

Figure 51.2 The official White House welcome page (after scrolling).

Rather than requiring the user to know the URL for each desired page, the World Wide Web relies on symbolic, logical connections called hyperlinks. For example, the White House welcome page contains a set of icons and menus that identify links to the President and the Vice President, an interactive citizen’s handbook, commonly requested federal services, and so on. Associated (transparently) with each of those links is the URL of the appropriate web page, and clicking on one of the links initiates a request for the page using the hidden URL. Consequently, a person looking for a specific White House press release can reach the proper page by following a series of logically meaningful key words and icons even if he or she does not know the URL.

51.4.1.2 Browsers

The program that converts hyperlinks into the associated URLs, requests pages from the Internet, and displays those pages is called a browser. Netscape and Microsoft’s Internet Explorer are the two best known browsers.

51.4.1.3 Hypertext markup language (html)

A browser relies on hypertext markup language (html) to tell it how to map a page to the screen. When a web page is created, html tags are added to the text, graphics, sounds, and other objects that make up the page. When the browser reads the page, it relies on the html tags to tell it where each object should be placed on the screen, how to format the text, what colors and backgrounds to use, and so on. Table 51.1 summarizes the kinds of tags that can be defined in html.

51.4.1.4 Plug-ins

A plug-in is a program that plays or displays special files that are beyond the capability of a standard browser. Literally hundreds of plug-ins are available, and many can be downloaded free. For example, Adobe Acrobat Reader (Adobe Systems) allows a user to view and print Adobe portable document format (PDF) files. Cosmo Player (Silicon Graphics) is a virtual reality markup language (VRML) viewer popular with game players.

QuickTime Viewer (Apple) is used to display movies. RealPlayer (RealNetworks) supports video, audio, and animation. Shockwave Player (Macromedia) supports interactive games. Many applications allow the user to download a copy of the appropriate plug-in on request.

51.4.2 Web sites

A web site is a collection of related, hyperlinked pages. For example, the White House web site includes numerous pages pertaining to the President, the Vice President, various federal programs, press releases, and so on.

51.4.2.1 Site structure

Traditionally, the pages that make up a web site are organized in a hierarchy (Figure 51.3), with a high-level home page providing hyperlinks to several secondary pages, each secondary page providing hyperlinks to lower-level pages, and so on. Many modern web sites (sometimes called third-generation sites) add an entry page and (perhaps) an exit page to the core structure (Figure 51.4). Typically, the entry page serves as a hook to catch the visitor’s attention, and the site’s real content starts with the core page. Some designers add one or more pages to form an entry (and/or exit) tunnel or chimney between the entry page and the core page (or the core page and the exit page). For example, the entry tunnel might invite the visitor to complete a registration form while allowing an already registered repeat visitor to go directly to the core page.

Figure 51.3 A web site’s pages are typically organized as a hierarchy.

Figure 51.4 Entry page, core page, and exit page structure.

51.4.2.2 Navigation

Navigation through a site is controlled by hyperlinks. The standard browsers provide such default navigational links as Back (return to the previous screen), Home (return to the user’s home page, usually on a different web site), vertical and horizontal scroll bars (for on-page navigation), and so on. Additionally, a well-designed site contains its own default internal navigational links designed to move the user quickly to significant pages within the site and/or to specific topics on a page. For example, many web sites display in the same place on every page a navigational bar with links to the site’s home page and the most important secondary pages.

51.4.2.3 Themes and metaphors

The appearance and ease of navigating a web site can be improved by applying a theme or metaphor. A theme features a consistent use of color, fonts, icons, logos, and sound, a consistent page layout and appearance, and consistent navigational rules. A metaphor relies on a familiar object or a familiar pattern of behavior to suggest how the user might interact with the site. For example, Microsoft Windows and the Apple Macintosh interface use a point-and-click desktop metaphor, and adopting the same metaphor for a web site means that anyone experienced with Windows or a Macintosh already knows the basic operations needed to navigate the site. Many newspaper sites are designed to resemble an electronic version of a newspaper. A library site might present the user with an electronic card catalogue. An on-line shopping service might display a virtual bookshelf to browse, and so on. A well designed, well-implemented metaphor makes navigating a site seem natural, almost intuitive.

51.4.3 Web pages

51.4.3.1 Html editors

To achieve maximum control over appearance, many web page designers work directly with the html tags to code (or fine tune) their pages. However, such easy to learn html editors as America OnLine’s AOLPress (freeware), Trellix Corporation’s Trellix, and Microsoft’s Front Page do a good job of converting the contents of a WYSIWYG (what you see is what you get) screen into an html document. Additionally, many full-feature word processors (Microsoft Word, WordPerfect, Word Pro), spreadsheets, and other popular programs allow a user to save a document in html format and subsequently display that document as a web page.

51.4.3.2 Objects

On a web page, each physical entity (a block of text, a graphic image, a photograph, an animation, a sound clip, a video clip, a Java applet, etc.) is treated as an object. For example, a designer might use a word processor to create a block of text, a graphics program to create a logo, a scanner to capture a photographic image, and a spreadsheet to create a chart. Each object is physically stored as a separate file. The web page designer surrounds a file reference to each object with the appropriate html tags to control the object’s placement on the screen, its size, and so on. Note that the process of downloading a page from the server to the browser involves transferring the contents of a separate file for each object.

51.4.3.3 Frames

Some pages are subdivided into frames (like windows), with each frame holding a separate html document. When frames are used, a frameset document that defines the relative and/or absolute sizes and positions of each of the windows is sent to the client computer first, followed by the individual html documents and the object files. The client computer’s browser then displays each html document in the appropriate window (or frame). For example, one common application is displaying a standard navigation bar in the same relative position (the same frame) on every screen by simply referencing the same navigational html document on each frameset.

Using frames gives the designer considerable control over exactly what is displayed on the client’s screen and saves the time needed to redundantly code the html for a common object that appears on several pages. However, because each frame is, in effect, an independent page, frames (unless carefully used) can break the metaphor, leading to user confusion. For example, a print command will print only the contents of the active frame (the one most recently clicked), and not the entire screen as most users (reasonably) assume.

51.4.3.4 Interactivity

Because the web page is displayed on the client computer, interactivity implies executing code on the client computer. Downloading executable code is potentially dangerous, so tight security controls are essential. Java (Sun Microsystems), a platform independent, object-oriented programming language that incorporates excellent security features, has become a de facto standard for such applications. JavaScript is a relatively easy to learn, Java-based scripting language that can be used to perform such basic interactive tasks as requesting a choice (yes or no) from a user or supporting the completion and return of a simple form. Each Java or JavaScript applet is viewed as an object in the html stream.

51.4.3.5 Page design constraints and tradeoffs

A page designer faces two, often conflicting objectives. The first objective is to catch the user’s attention. The second is to provide enough content to satisfy the user’s needs.

51.4.3.5.1 Real estate

The user actually sees only one screen at a time, and the available viewing space is further constrained by the browser’s button bars, scroll bars, and so on. Technically, a page (or frameset) can be almost any length because the user can scroll through the contents if the page exceeds a single screen, but many potential users are reluctant or unwilling to scroll until after they are hooked. Consequently, particularly on entry or core pages that are designed to quickly capture the viewer’s attention, the effective real estate is limited to a single (roughly) fifteen-line window.

51.4.3.5.2 Flash and content

Flash can be defined as everything but content. Examples include animations, sounds, graphic images, photographs, colors, backgrounds, lines, patterns, and other elements intended make the page look neat rather than to deliver real content. A visitor’s interest is peaked by flash. Without some flash, a visitor is not likely to bother looking at a site in sufficient detail to assess its content. Return visitors (users) are interested in content, however, so flash without content is useless in the long run. Typically, the designer tries to catch the user’s attention on the entry page and the core page. Detailed content is delivered further down the page hierarchy, with the amount of flash diminishing by level.

51.4.3.5.3 Depth and breadth

Breadth is a measure of the number of items (for example, menu choices) on a single page. Depth is a measure of the number of levels (the number of mouse clicks) a user must navigate to reach the desired content. Excessive breadth leads to pages that are difficult to understand. Excessive depth implies time lost navigating through multiple intermediate screens. Depth and breadth are tradeoffs. More choices per page (more breadth) mean fewer hierarchical levels (less depth), and more levels (more depth) mean fewer choices per page (less breadth). A common rule of thumb is to include between five and nine choices on a page.

51.4.3.5.4 Page load time

Page load time is an important variable because potential users who become frustrated and exit a slow-to-load page are not likely to become repeat visitors. Load time is a function of the number of bits that must be transmitted from the server to the client and the transmission speed of the intermediate lines.

Simple text pages load quickly but contain little to catch the user’s attention. Pages that contain sophisticated graphics, sounds, animations, and Java applets are interesting but load slowly because such objects tend to be rather large and each object is stored in a separate file that must be transferred from the server to the client. Somewhere between those two extremes is a mix of flash and content that loads quickly, catches the viewer’s attention, and convinces the visitor to investigate the site in more depth.

Compression techniques can help to reduce the number of bits actually transmitted. For example, a bitmap takes up a great deal of memory because it consists of every dot or pixel that makes up an image. The amount of memory space and, hence, transmission time can be substantially reduced if graphic images (lines and shapes) are converted to gif (graphic interchange format) and photographs are converted to jpeg (Joint Photographic Experts Group) format.

51.5 Key terms

Applet —: A small application program that performs a single task.
Breadth —: A measure of the number of items (for example, menu choices) on a single page.
Browser —: A program that converts hyperlinks into the associated URLs, requests pages from the Internet, and displays those pages.
Client/server computing —: A form of networked computing in which a computer that needs a service (the client) requests help from a computer that has the ability to provide the service (the server).
Compression —: Conserving memory, secondary storage space, and data transmission time by removing repetitive or unnecessary bits from data.
Core page —: The highest-level page in a web site’s content hierarchy.
Depth —: A measure of the number of levels a user must navigate to reach the desired content.
Entry page —: The first page a visitor encounters when accessing a web site.
Entry tunnel (entry chimney) —: One or more pages between the entry page and the core page.
Exit page —: The last page a visitor encounters just before exiting a web site.
Exit tunnel (exit chimney) —: One or more pages between the core page and the exit page.
Frame —: A window-like unit that holds and displays the contents of a single html document.
Frameset —: A document that defines the relative and/or absolute sizes and positions of several related frames. Using the frameset as a guide or framework, the client computer’s browser displays each html document in the appropriate frame.
Gif (graphic interchange format) —: A popular compression algorithm for graphic images.
Home page —: An initial starting page.
Html (hypertext markup language) —: A hypertext language used to tell a browser how to map a page to the screen. When a web page is created, html tags are added to the text, graphics, sounds, and other objects that make up the page. When the browser reads the page, it relies on the html tags to tell it where each object should be placed on the screen, how to format the text, what colors and backgrounds to use, and so on.
Hyperlink —: On the World Wide Web, a symbolic, logical connection that represents a URL.
Internet —: A well-known, widely accessed, international network of computers; the set of continuously connected computers that use Transmission Control Protocol/Internet Protocol (TCP/IP).
Java —: A platform independent, object-oriented programming language developed by Sun Microsystems that incorporates excellent security features and has gained wide acceptance on the World Wide Web.
JavaScript —: A relatively easy to learn, Java-based scripting language that can be used to perform basic interactive tasks.
Jpeg (Joint Photographic Experts Group) —: A popular compression algorithm for photographic images.
Metaphor —: A design element that relies on a familiar object or a familiar pattern of behavior to suggest how the user might interact with a web site.
Navigation —: The act of moving from page to page through a web site.
Object —: A thing about which data are stored.
Page —: The basic unit of information transferred between a server and a client on the World Wide Web.
Page load time —: A measure of the elapsed time between a request for a page and the display of the complete page on the client computer’s screen.
Plug-in —: A program that plays or displays special files that are beyond the capability of a standard browser.
Theme —: A recurrent idea; on a web page or web site, the consistent use of color, fonts, icons, logos, and sound, a consistent page layout and appearance, and consistent navigational rules.
URL (uniform resource locator) —: The address of a page on the World Wide Web.
Web site —: A collection of related, hyperlinked pages.
World Wide Web —: A massive, Internet-based, international collection of hyperlinked pages.

51.6 Software

Netscape and Microsoft’s Internet Explorer are the two best known browsers. America OnLine’s AOLPress (freeware), Trellix Corporation’s Trellix, and Microsoft’s Front Page are examples of html editors. Many full-feature word processors (Microsoft Word, WordPerfect, Word Pro) and other common software tools allow a user to save a document in html format and subsequently display that document as a web page.

Numerous plug-ins are available to supplement the standard browsers. Adobe Acrobat Reader (Adobe Systems) allows a user to view and print Adobe portable document format (PDF) files. Cosmo Player (Silicon Graphics) is a virtual reality markup language (VRML) viewer. QuickTime Viewer (Apple) is used to display movies. RealPlayer (RealNetworks) supports video, audio, and animation. Shockwave Player (Macromedia) supports interactive games.

51.7 Reference

51.7.1 Web sites

1. The Bare Bones Guide to html, http://www.werbach.com/barebones.

2. The WWW Help Page, http://www.werbach.com/web/wwwhelp.html.

51.7.2 Suggestions for additional reading

1. Evans, T., 10 Minute Guide to Html 4.0, Que Education and Training, Indianapolis, IN, 1997.

2.Kidder, G. and Harris, S., Official Html Publishing for Netscape: Your Complete Guide to Web Page Design & Production, Ventura Communications Group, Research Triangle Park, NC, 1997.

3.Morris, M. E. S. and Hinrichs, R. J., Web Page Design: A Different Multimedia, Prentice-Hall, Englewood Cliffs, NJ, 1996.

4.Siegel, D., Creating Killer Web Sites, 2nd ed., Hayden Books, Indianapolis, IN, 1997.

5.Tittel, E. and James, S., HTML for Dummies, IDG Books Worldwide, Foster City, CA, 1997.

Search This Blog

information systems course