If you are designing a web, your overall goal is to create a look and feel for your web that has the "right stuff:" information at the right level of detail and an arrangement of pages that efficiently guides users to needed information. Although a user's positive experience of a web depends on many subjective factors, you can use certain techniques to increase the probability of user satisfaction with a web. Good web design is not easy, though; all webs must balance user needs with trade-offs in performance, aesthetics, and usability. And users differ in their abilities, tastes, and even the Web browser and Internet connection they use, so it is impossible to design a web that perfectly meets all needs for all users. Based on an understanding of the Web's media characteristics and qualities, and using design techniques and an awareness of common design problems, though, you can create a plan for a web to meet a specific audience's needs for a particular purpose.
This chapter first reviews principles of web design based on media characteristics and qualities, and on the experience of a web user, as described in Chapter 4, "Web Development Principles and Methodology Overview." This review highlights how this design process is essentially user centered-it draws on audience information and the designer's understanding of how people navigate in webs. After the review of design principles, some basic design methodologies are described: top down, bottom up, and incremental/in-time. These terms should be familiar to people who develop software, because they take their inspiration from software engineering. Web design does not necessarily follow one methodology throughout, particularly because the design process, like all the other processes of web development, can continue even after the web is deployed and used. Instead, the designer should be aware of the different design methodologies and be prepared to flexibly use any one of them at various times during the process of web design.
A web's design is essentially its look and feel. A good design should take into account all the web elements-audience information, purpose and objective statements, domain information, and web specifications-and combine them to produce a plan for implementing the web. Web implementers then use this design and the web specifications to create a working web.
Web designers make many choices about how to best achieve the effects called for by the web-planning process, the purpose and objective statements, and audience information. Web designers also draw on a repertoire of techniques for packaging, linking, and cueing information using one or more design methodologies. Throughout this process, they should be sensitive to users' experiences of the web's information space, texture, and cues. Very practical issues are involved in design, such as considerations for inline images and graphics, how much to put on a single page, and which text or images should be made a link as opposed to which should not. Over time, web designers gain a sense of judgment and experience on which they draw, ultimately making web designing an art in itself.
The design process, however, is just one process in the interlocking web-development processes. A successful web requires that all processes and all elements work together. Thus, this chapter shows how designing a web draws on the elements from the other web-weaving processes. Figure 7.1 illustrates how the web-design process takes information from all elements of web weaving and combines them to produce a look-and-feel design that then is used by the implementation process to create a working web. By separating the design from the implementation process, information about the web's structure and operation can be cast in a hypertext, language-independent form. Whereas the design process is influenced by knowledge of what is possible in the target design language, its product can be implemented in any language that can capture the features used in the design. In this way, this design process can be used with successors or alternatives to the widely used HyperText Markup Language (HTML).
Figure 7.1 : An overview of the webdesign process.
| An Important Hypertext Design Article |
Vannevar Bush's article, "As We May Think," which appeared in the July 1945 issue of The Atlantic Monthly, has inspired generations of hypertext designers and implementers. Denys Duchier has created a hypertext version of this article, reproduced with the permission of The Atlantic Monthly, which is available at http://www.isg.sfu.ca/~duchier/misc/vbush/. |
Aside from having a set of design methodologies to flexibly draw upon, the designer also should have a set of techniques for packaging, linking, and cueing information. The nature of hypermedia demands a strong attention to the user's experience of information space, texture, and cues. The best way to manipulate the user's experience is by judiciously packaging the information in the right amounts on pages and in sections of pages, linking these pages to support the user's needs, and cueing the user to information and navigation aids.
Based on the discussion of media and user-experience principles in Chapter 4, a web designer can keep these general principles in mind when creating a design:
Build associative meaning. Take advantage of the power of hypertext to link related information. Designs can contain links to further context information as well as chunk information.
Maintain competitiveness. Because the Web is so competitive, web designers must make sure that their designs include the lowest possible costs to their users. User costs include download time, information-retrieval time, and the effort required to use and understand information.
Efficiently use resources. When designing and implementing a web, select features that meet the users' needs with the least amount of space, access time, graphics, and long-term maintenance requirements. Aim for web features that are efficient to operate, elegant to use, and easy to maintain.
Focus on user needs. A web should not be built for the personal taste of the designers, the convenience of the implementers, or the whims of the planners. Instead, the web serves the audience for which it is designed. Meeting the needs of the users is the first priority of the web. The web designer focuses on user needs by using the purpose statement and audience information to make decisions about page organization and layout. Working with the web analyst, the web designer can evaluate how effectively the design meets the audience's needs for the web's purpose (see Chapter 6, "Web Analysis").
Recognize porousness. Recognize that a user may enter a web from any other point on the Web. After entering a web, a user might not be able to interpret cues that depend on a web's linking structure; for example, Up, Down, or Next labels would mean very little.
Create a consistent, pleasing, and efficient look and feel. The design of the web should aim to give users an impression on all its pages of a common, coherent organization and consistent visual cues. Each page of the web should cue users to the web's identity and page purpose. The web's overall appearance should help users accomplish their objectives through interfaces that strike a balance between simplicity and completeness and aim for an aesthetically pleasing appearance. In fact, a consistent page design is one of the best design principles to alleviate the fractured experience of users due to porousness.
Support interactivity. At the minimum level, users should have a way to contact the web developers for questions or problems with a web. Based on the purpose of the web, there might be greater levels of interactivity, ranging from forms interfaces to computation and gateway programs. A web designer should meet these user needs by providing cues (such as an e-mail contact address) about interactive features (for example, identifying the security of forms transactions).
Support user navigation. The discussion of user browser experience in Chapter 4 highlights how users might employ a hotlist, session history, built-in directories, annotations, file management, and visual aids when navigating a web. Although some of these navigation aids relate to browser functions, a web designer can support these in a web by supplying navigation and information links. These links cue users about how to use the information on a page (information cues) and how to get further or contextual information (navigation cues).
Although there is no one way to weave a web, a web designer can choose from a variety of approaches. No one way necessarily works best all the time; therefore, a web designer even might consider varying approaches while developing the same web.
If web designers have a good idea about what a whole web should contain in advance, a top-down method of design might be best. In the top-down methodology, designers start with a front or top page (often called the home page) for a web and then branch off from there. They even might create prototype holder pages that contain only minimal information but hold a place for later development in the web. The benefit of the top-down approach is that designers can develop pages according to one central theme or idea. This provides a good opportunity to affect the look and feel of the whole web very powerfully because all pages are designed according to the top page look and feel. A good way to do this is to design a set of templates for types of pages in a web and use these during the implementation process.
If web designers don't have a good idea of what the final web will look like (or even exactly what it will do), but they know how specific pages will look and work, working from these specific pages to the top page might be the way to proceed. This is particularly true if they already have existing pages as a result of the development of some other web or service.
If web designers have no pages from which to start, they can begin by designing leaves or pages that accomplish specific objectives and then link them through intermediate pages to the top page. The benefit of this design is that the designers aren't constrained by the style of a top page in the leaf pages. Instead, they design the leaf pages in exactly the right style based on their functions. Later, they adjust the pages to create a common look and feel for the whole web.
Similar to both the top-down and bottom-up approaches, the incremental/in-time approach develops pages "just in time" when they are needed. An initial home page might be needed as well as specific leaf pages that implement particular objectives. These are created and linked with the understanding that later, intermediate pages might be added. This works well if web developers want to very quickly have a working web that grows incrementally rather than deploying all at once.
To design a web and deal with the issues raised previously about user experiences and design methodologies, a designer must use a variety of techniques to achieve particular effects. These techniques relate to information-shaping skills to meet users' needs. Like many aspects of web weaving, design techniques are an art in themselves, and having a good repertoire of these increases the value of a web designer.
Humans can process only so much information at a time. Helping web users process information is a web designer's overall challenge. A specific task in web design is to package or "chunk" information in pieces that don't overwhelm users. As a general guideline, the number of pieces of information to engage a user's attention at any one time is five, plus or minus two. Although a web designer must judge what constitutes an information "piece" and decide exactly what constitutes the field of a user's attention, the key idea is to chunk information so that
How can a designer do this chunking? There are several techniques. As a first step for all these techniques, the designer must gather the documents that represent the information to be presented in the web. This information should be listed in detail in the web specifications (created by the planning process) and reflected in the objective statement. Information to be served to users and that is useful to designers should be in the store of domain information. Here is a clustering technique to arrive at packages of information for a web:
Figure 7.4 : The CMC Studies Center cluster diagram.
This diagram shows a possible organization for a web: information related to people (students, teachers, practitioners, contacts, and researchers), resources (communication, computers, and information), activities (developments and events), and information about the CMC Studies Center itself (metainformation). Note that the resources and activities clusters are related because they are both information-oriented clusters. This reflects, at the level of clustering shown, a separation of what the web offers by a breakdown by people and resources. A different clustering could have been done: The list of people could have been grouped with the resources, and the activities could have been grouped with the resource information. This would reflect a research/activities and resources slant to this information (with people viewed as resources-possibly in supporting or informational roles).
A clustering diagram can serve as a map to breaking down a web into packages. A package is a web page or group of web pages that are closely related, as defined by the clustering process. Eventually, each package must be defined as a web page or a set of web pages. One simple transformation from a cluster diagram to packages is to make each loop a package. In other words, in Figure 7.4, you would have the following packages:
You can see how this cluster method works even with this simple example to give you a quick way to create a preliminary set of packages of information. The next step is to transform packages to pages of hypertext.
A simple transformation is to make each package a page, paying close attention not to overload any given page. Based on the clustering, a web designer would obtain six pages.
To ensure that no page is overloaded with information, for each page, you can estimate the total number of kinds of links and how many of each link the page would contain. The List of People page might contain just one kind of link (to a personal home page), for example. If there are 50 people on the list, this page would contain 50 links to personal pages plus other navigation or information links (there might be five of these, for example). This yields 50 instances of one kind of link and five instances of navigation links. This is not necessarily an unmanageable combination for a single web page. If there were 500 people in the directory, however, it might be a problem to put the whole directory on one page. The main issue is scalability. The directory could grow so large that it would cause performance problems. The design decision at this point might be to include the preliminary listing, but then to investigate using a database or other lookup scheme for the lists of people.
A better transformation might be to create a page for every noun in the cluster diagram, and then link these pages by activity. Using this method for Figure 7.4, 13 pages would be created for each noun phrase:
After a web designer has a set of pages, the next step is to specify how they will link together. The cluster diagram showing the packages of a web is a good start toward seeing how these links might be made. The following methods yield an initial linking of pages that you can augment with some other linking techniques (see the index, title bar, and foot bar methods). To get an initial link diagram, you can use two possible methods:
Other methods of linking pages follow:
By need In a test situation, give representative users a problem (a set of questions or an "information hunt" type of exercise) they can solve by using the information given in the web pages. Observe the order in which the users access the pages in search of information to solve the problem. Based on these observations of user access, link the pages together based on minimizing the number of links users typically must traverse to solve the problem.
By association Have representative users rank how closely each of the pages relate to each other (for example, on a scale of 1 to 5, with 5 being a strong association). Provide double links between pages with association scores over the average for all links (or use some other criterion that generates something short of a complete, double linking of all pages).
Besides the package, page, and link diagrams, the web designer can use several other products to help express the look and feel of the web. One of these diagrams is a universal grid for the entire web-a diagram that sets out the function and arrangement for text, cues, and links on any given page.
Figure 7.7 shows a universal grid. This universal grid creates a template to give all pages of the web a uniform look. This uniform look helps the user of the web know what cues to expect where on each page. Notice how the grid shown in Figure 7.7 doesn't specify exactly what has to go into the footer and header for each page; this can vary according to the purpose for each page or type of page.
Figure 7.7 : A sample universal grid diagram.
Another technique for creating a unified look and feel for the web is to use repeated icons to represent classes of information, or an icon representing the web itself. These repeated icons can be specified in the universal grid. Figure 7.8 shows the universal grid from Figure 7.7 with a repeated web icon (an icon that represents the whole web) and a repeated topic icon (an icon that represents the particular topic this page addresses) in the header information.
Figure 7.8 : A universal grid with repeated icons.
These repeated icons help the user perceive a sense of consistency in all the pages of this web. The topic icon helps cue the user to the purpose of the page. Because these icons are repeated, the user benefits because the browser loads a given icon only once, and then it can use it (without reloading) on any other page in the web. In this way, repeated icons can give the web a strong sense of identity for each page. This is particularly important when a pincushion access pattern is expected for the web-the repeated icons help users know where they are (see Chapter 32, "A Campus-Wide Information System").
Just as repeated icons provide users with information cues on each page, navigation cues and links can help users move through an entire web.
One technique for creating a web-wide navigation link is to make an index page that links to every page of the entire web. For webs with a large number of pages, this clearly can create problems, but the concept is to provide a central point for users to locate a page that they know is in the web somewhere but can't remember how to get to it. An index page is particularly important for webs linked using a hierarchical technique (see Fig. 7.5). Figure 7.9 shows the index page for the web in Figure 7.5, for example.
Figure 7.9 : An index page for a web.
Given that an index page is created, the index itself then can become part of the universal grid-either in the title bar or in a foot bar. Local or specialized indexes of pages within the same package also can be created and placed on pages within the same package. Another web-wide navigation link might be to the top or home page for the entire web. Often, the web icon itself can serve as this link. By placing this link on the universal grid, the home page for the web can be just one link away from any page in the web. Just like the other elements of the universal grid, these repeated navigation links can help a user make sense of an arbitrary web page, particularly in pincushion access patterns.
Within each page of a web, a designer can look for opportunities to use the audience information or purpose and objective statements for explanatory or information cues. Web developers carefully planned the audience for a web. Why hide this information from the user? An explicit statement of the target audience, written with the appropriate wording for a particular web page, can help the user immediately see whether the information on that page is of interest.
The purpose statement is perhaps the web element on which a web designer draws the most in providing information cues to a user. Purpose statements can serve as a powerful mission statement for communicating the web's intent to users. Because every page of the web reflects its purpose, a web designer might find that every page can contain a variation of the purpose statement that is specific to the function the given page serves.
Similarly, the objective statement can be put to use on pages worded for the right level of detail and can serve as an important information cue for the user. One objective statement might be, "To list on-line bibliographies in the field of geology." This can translate directly to introductory text at the top of the page that meets this objective: "This page lists on-line bibliographies in the field of geology." Although not all translations between web elements and information cues used in the web design are as easy or mechanical, the web designer should take full advantage of the wording and language in these elements.
Finally, information cues about a web page should be placed in its design. Generally, as part of the footer in a page's grid (see the universal grid technique discussed previously), the following information should be included:
Contact e-mail address Where the user can send problems, questions, or give feedback.
Date modified Shows the date the document was last modified. Alternatively, this can include the date created and the last modification date.
Any copyright notices To alert users to restrictions on the text in the web or restrictions on its use.
Organizational information A clear identification of the information provider's organization.
Based on the discussion of information texture in Chapter 4, the designer can consider how media texture influences user experience. The information texture often sets up user expectations about what has been found and how to deal with it. As a designer, the following specific strategies might help shape a user's perception of media texture:
Media type What matters to the user most: the media type of the information or the content conveyed? Some users might want to locate all sound files on a web. Other users want only relevant information presented as it relates to meaning, with media type flagged (a symbol shown to alert the user of the media type for a link in the web). The user's needs will dictate how to arrange resources according to media type.
Information structure What degree of guidance do users require to use the information? A list of items conveys less context information than a narrative paragraph but is more to the point, particularly if the user knows exactly what the list is for and what each item on the list means. When creating web pages, a web designer and implementer constantly must balance expressiveness with terseness.
Connections When does the user need the information? In the case of introductory or help information, how can it easily be made available at the major web-entry points as well as at other appropriate places? How can a web page be linked at exactly the right spots in a web so that its meaning is enhanced by connections to other pages? These are the main issues dealing with connections facing a web designer. The answer, of course, lies in the user's needs:
How often would the user need to see this information?
When would the user need to see this information?
Why would the user need to see this information?
When planning a web, the developers might have specified what information spaces should be presented to the users. If the web specifications call for integrating other spaces into the web, such as information from an FTP site or Gopher server, web designers can consider the user's experience with these spaces. Specifically, they can consider the following techniques to integrate information spaces in a web:
Difference in space interface The appearance of the information spaces in a Web browser differ (as shown in Chapter 2, "A Developer's Tour of the Web"). The user who encounters an FTP site through a graphical Web browser has a different experience than seeing that same information through a Gopher server. As such, this difference can have a big impact on the look and feel of a web.
A developer should examine the web specification and enumerate the different information spaces that a web might require. There may be no requirements for any other information space; in that case, designers can choose to serve all information through the web. They also should consider the needs of the users: Will someone need to access this same information through an FTP session? The answer to this question requires input from the planning and analysis processes.
Space overload If web developers decide to include different types of information spaces in the web, such as several FTP sites and several Gophers, designers need to consider how this variety might best be integrated to create a consistent look and feel. They might object if such a variety would lead to space overload or to too many information systems with disparate styles of interfaces in the web. The benefit of a graphical Web browser is that, although the different information spaces look different through a line-mode client, a Web browser provides consistent functionality in each space (a point-and-click mechanism or similar graphical representation, for example). By also looking at the uniformity the browser brings (it displays all spaces in the same typeface and uses the same symbols where possible), designers might judge that a number of different spaces in the web still will meet the users' needs. In other words, the final decision comes down to the characteristics of the users: Are they concerned with a uniform appearance? Do they have experience using an existing information space for the same purpose? Do they already use a Gopher or FTP space, for example, or will a variety of information spaces detract from users' experiences of the web?
Space transitions If multiple information spaces are to be used in the web, consider how transitions between them are designed. A transition to an FTP space might be a bit daunting if the users are not familiar with using one. In an FTP space observed through a Web browser, the textual cues might be reduced dramatically. Different levels of transition might be right for different users, ranging from no help instructions on space transitions to a page that explains the use of the FTP, Gopher, or other information space.
Web layers over spaces Web designers might decide to put a web layer over an information space by preparing a web page that contains links into the information space. This allows greater flexibility for describing the information. The drawback is that the implementation and maintenance of these web layers can be expensive. If there are only a few links, this might be a good way to link to the information space while retaining the expressive possibilities of the web. Figure 7.10 illustrates how a web layer can be designed on top of an FTP space.
Figure 7.10 : A web layer over an FTP space.
The figure shows how the links from the web page's hotspots can be made into the directories or specific files at the FTP site. The benefit of this layering is that it can include explanatory text, placing the meaning of the files at the FTP site within the context of the meaning of the information presented on the web page. Notice, though, how this linking requires a coordination of the web page with the structure of the FTP site, requiring more links than if just one link were made to the FTP site. This requires an increase in implementation time as well as maintenance.
Although the preceding techniques can help web designers create a consistent look and feel, specific problems can detract from a web's design. These include problems with a lack of navigation and information cues (see "The Page from Outer Space"), a page with large access time required or with an overly complex information texture and structure (see "The Monster Page" and "Multimedia Overkill"), a page with an uneven information structure (see "The Uneven Page") and problems with linking (see "Meaningless Links") in pages. These problems sometimes can actually play an integral role in effectively accomplishing a purpose, however. The key is that web designers should be aware of these issues without taking my discussion of them as iron-clad rules or formulas.
One of the most frustrating things a web designer can find as a web navigator is a page like the one in Figure 7.11.
Figure 7.11 : A web page from outer space.
The page is well written: It has a descriptive heading and it includes a narrative that guides a web designer through its main points about using Kermit. A navigator who enters this page, however, would have many questions: Who wrote this page? Why? What web is it a part of? What does "IT" stand for? The page shown in Figure 7.11 has no information cues-not even a <TITLE> to cue the user to the purpose of the page. Because there are no links on the page, you can't easily locate the home page for this web (a navigator would have to use the technique of opening a URL consisting of just the beginning part of the URL for this page). The information on this page-apparently instructions about what Kermit can do-is contextless, and therefore of little use. Moreover, a navigator coming into this page has no easy way to find out the answers to the questions mentioned here; the page has no links, no context, and no cues. Hence the phrase the page from outer space.
Avoid creating pages that have no cues. Designers generally can't assume that users will encounter a web according to the wine-bottle model of access. Moreover, web designers are not taking advantage of the power of the Web itself if they treat the information on each page as just a slab of text with no links to other context, information, or navigation cues. Most important, they are closing off user interaction and feedback. Users encountering the page in Figure 7.11 would have no contact point for even asking the previous questions. On the other hand, there's no need to provide links to every conceivable scrap of information related to the topic of the page. The key is to balance the number of cues with completeness of information. As a rule of thumb, ask what a user would do to get more information from a given page. There should be at least one cue or link on that page to help users at some level, even if it's a link to the home page. Variations on the page from outer space include home pages that give information that has little meaning in a global context. For example, web designers might see the following as a title for a page:
Department of Physics home page
What university? What country? What continent? Although the skilled navigator (usually) can obtain the answers to the questions by looking for clues in the URL, the designers of this page apparently did not realize that their page reaches a global audience.
Although it's usually not necessary to qualify a geographic location as "Department of Physics, Delta University, Delta, Mississippi, USA, North America, Earth," a web designer should have some sense of how many cues to give in order to help a user place web information in the global context of the Web. Don't assume that a web user knows a particular organization, city, or state name. Often, qualification to the country level is enough.
Just as the page from outer space had too few cues to help the user effectively place the information in context, a page can get too cluttered with links, graphics, lists, and other effects. Cluttered pages have two major problems:
Access time If there are many inline images or there is a great deal of text on the page, the access time for that page can be enormous.
Information overload If a web designer puts too much information on a single page, the user simply won't be able to cope with it. The physical limits of the browser display by default will chunk the information on the page into screenfuls of information accessible by the scrollbar or another system in the browser. Instead of having the browser chunk the information, the designer should determine these chunks. In some situations, though, a long list of similar items is best browsed in one long list, and any breakup of the information would be arbitrary.
The strength of hypertext is that information can be chunked into pages so that these pages then can be encountered by users according to their needs. The monster page, with its overabundance of links and cues, creates too much noise for the user to pick out the essential information.
For long pages of information, a web designer should consider creating a front table of contents and linking sections and subsections of the document to that. Figure 7.12 shows a scheme in which there are three levels of tables of contents, and each links to an entire document broken up by sections, subsections, and sub-subsections.
Figure 7.12 : Three levels of content tables for a web.
New designers using the facilities of a browser such as Mosaic often include many inline images as well as links to graphics, sounds, movies, or other multimedia files. When not needed, this multimedia overkill can lead to the same problems associated with the monster page. The multimedia used in a web must play a key role in accomplishing an objective that directly meets a user's need. Chunking links to these resources, just like chunking links among pages, can be done using the cluster diagram and packaging techniques outlined previously. Another issue related to multimedia overkill is using the same graphics in several places in a web without using a link to the same graphics file, which requires that the Web browser reload the image every time it's used. If web designers use a repeated image in a web, they should link to the same file (the same URL) every time instead of creating duplicate image files in different files. By doing this, the Web browser can load the file just once and display it on many other pages in the web.
An uneven page contains information at vastly different or incongruous levels of detail. Figure 7.13 shows the home page of the ABC University's Information Technology Department. The design and context information are adequate; a link to the university's home page is given, a link to an index is shown, and the page is signed by the Web master.
The items in the list given on the page, however, are very incongruous. Faculty Directory seems to be on the same level of importance as Research Programs and IT Department's Mission. But the next two links-How to Use Kermit and urier">CS 101 Final Grades-seem to be at some other level of detail. A page often becomes uneven through a process of iterative accumulation of links. In the case of the ABC IT Department, the Web master probably added links as they were developed. This unevenness, however, weakens the coherence of the page; the user begins to wonder what this page is supposed to accomplish. Naturally, a page reflecting a deliberate grab bag or collection of links would display this unevenness. Usually, unevenness can be a problem on major home pages or pages that have a specific, often high-visibility purpose in the web. Every time a web designer adds a link to a page, ask whether it fulfills the purpose of that page or in some other way helps the user with that information.
One manifestation of a meaningless link is a link that takes the user to a resource or document with no apparent connection to the meaning conveyed on the original page. Every link should somehow extend the meaning of a page. Look at this sentence, for example:
Welcome to <Aa href="abc.html">ABC</A> University's Home Page</A>
The link from the term ABC to the file abc.html should contain some background or historic information about the university's name (because the link was made to ABC as opposed to ABC University's Home Page). If this link goes to a special project by the page designer or some other unrelated or unpredictable subject, the link is vacuous.
Another form of a vacuous link is a sentence such as this:
For more information, click <a href="info.html">here</A>.
The hotspot here has no meaning within the sentence. A better choice might be
A user can get <a href="info.html">more information</A>.
Another kind of meaningless link is the trivial link, in which a link is made to some resource or document that relates to the original page, but only trivially in the given context. A web designer, for example, might find this sentence on the home page of ABC University:
Welcome to ABC University's Home <a href="page.html">Page</A>.
If the link from the word Page to the file page.html is to a dictionary definition of the word page, it is a trivial link because the information isn't essential in the context of a university's home page. In the context of a narrative about Web vocabulary and terms, however, this same link (from the word Page to a definition of the term) might be essential.
Another kind of meaningless linking occurs when a designer creates a web with very small chunks and excessively links these chunks together. This creates a mesh of pages, and each page carries very little context and content. This requires the user to traverse a great number of pages in order to accumulate meaning or context. This is the opposite of the monster page effect and represents hypertext taken to an extreme. In some cases, however, this effect is highly desirable, such as in hyperart, hyperfiction, or hyperpoetry, in which the medium of hypertext may be stretched to its limit. As a general rule, though, each page should accomplish a specific, self-contained purpose so that the user has a feeling of attaining a goal instead of being left with a need to follow still more links.
Writing in the Yale Center for Advanced Instructional Media's style manual for web page design (http://info.med.yale.edu/caim/StyleManual_Top.HTML), Patrick J. Lynch borrows the term clown pants to refer to pages with a haphazard organization. The term originated from gardeners who used it to describe a plot with a hodgepodge organization-types of plants and vegetables thrown together in patches without a central focus. Figure 7.14 illustrates the general layout of a clown pants web page. Units of meaning are scattered across the page haphazardly. There is no grid system to systemize access to information or to focus user attention.
Figure 7.14 : A general clown pants web page schematic layout.
Figure 7.15 shows a web page implemented according to a clown pants design. Notice how Company Z's products and offerings get lost in a haphazard layout. For web users working quickly through information, the cost to extract information from the page might lead them to seek an alternative.
Figure 7.15 : A clown pants web page example.
Figure 7.16 shows one possible solution to the clown pants page of Figure 7.15. Instead of an inconsistent alignment of text and graphics, the three major product lines, with the three pictures that accompany them and the three metaphors for user involvement with these products, are aligned in a grid (using the <TABLE> tag, which is discussed in detail in Part II).
Figure 7.16 : A solution to the clown pants design problem.
The major cause of clown pants design is the over-reliance on page-layout features available with HTML (using Align fields as well as lists and other features to try to affect how a document appears). In general, paying close attention to the semantic nature of HTML helps a designer avoid a clown pants design. These issues are discussed in more detail in Part III, "Web Implementation and Tools."
Another overindulgence that web page designers sometimes take part in is defined here as K00L design. The term K00L is a parody of adolescent speech sometimes found on Bulletin Board Systems (BBSs), as in "Hey K00L DUUDZ." The idea behind this design problem is that the designer uses many features of HTML, and particularly Netscape extensions to HTML, such as centering, font changes, and blinking. Combined with a clown pants design, the overall appearance of a page can reach irritating levels. For examples of K00L design as well as other excesses using Netscape extensions, see The Enhanced for Netscape Hall of Shame (http://www.meat.com/netscape_hos.html).
You can get a good idea of the kind of information a web designer
works with and produces by looking at the sample web design documentation
I've prepared for the Web Development web (http://www.december.com/web/develop.html).
You can take a look at the design information I have there at
http://www.december.com/web/develop/wddesign.html.
| The Study of Design |
Designing web pages involves more than just thinking about graphics and HTML; it relates to a whole range of issues dealing with how people use objects. You can find out more about the issue of design at the WWW Virtual Library Entry for Design (http://www.dh.umu.se/vlib.html). This page, produced at the Institute of Design at Umeå University in Umeå, Sweden, includes links to information about design in applications such as graphics, human-computer interaction, industrial uses, and fashion and environmental design. |