Design and implementation are crucial aspects of developing a web because, during these processes, developers shape the web's information structure to meet the needs of the audience. During implementation and design, developers make many decisions about style, information organization, and aesthetics.
This chapter describes style issues and techniques that can be used in the design and implementation processes. This discussion complements the discussion of principles and process issues involved in web design and implementation in Chapter 7, "Web Design," and Chapter 8, "Web Implementation."
Fundamental themes of web design and implementation are coherence and consistency. A coherent design conveys the right information at the right time. A web designer can use a look-and-feel diagram to create a consistent template for pages in a web. A designer also can create a package, page, and link diagram to guide the implementer in connecting the pages of a web. During implementation, consistency in file organization and naming helps create a stable, extensible environment to grow a web.
Because creating a good web design depends so strongly on the
purpose and audience of a web, no single design style is right
for all situations. Personal taste and aesthetics also play a
large role in design. As a result, schools of web design have
emerged that illustrate typical traits and characteristics of
web design.
| Design Is Not Just Layout and Syntax |
Many books and on-line sites purport to talk about web page design. Many of these talk only about the visual layout of individual pages of hypertext. Others discuss only HTML syntax. Web design involves a great deal more: hypertext usability, the structure of a set of hypertext pages working together, language techniques, document organization, visual layout, and an integration of the design process with the other processes of web development-all with an unflinching focus on serving the users' needs. |
As discussed in Chapters 7 and 8, strategies of design and implementation meant to address the media characteristics and qualities of the web can use a process-oriented, user-centered development approach. During the processes of design and implementation, developers can use specific techniques to do the following:
Reveal context. Context is the setting or background for the information in a web. Context includes the field of study, which can include specialized language, jargon, and shared meaning and significance among the members of the community who are concerned with the information presented by a web. Context therefore is a function of both the audience and the purpose of a web. Revealing context plays a big role in helping any user make sense of a web within larger systems of meaning. Revealing context also is a key part of both taking advantage of and dealing with a porous system of associatively linked information.
The purpose of revealing context to users is to help them understand a web's relationships to other areas of knowledge.
Reveal content. Content is the original information presented by the web or services offered through interactivity. Content consists of the prose explanations in a web as well as hypermedia information. Content therefore is intimately tied with language (written or auditory) and visual symbols (graphics, pictures, and icons). What constitutes content varies widely according to the purpose of the web. A web index or directory such as Yahoo! (http://www.yahoo.com/), for example, consists of links to other webs on particular topics. Yahoo!'s content consists of lists of links. In contrast, a web with a purpose to teach about a particular subject (for example, the Virtual Frog Dissection Kit at http://www-itg.lbl.gov/vfrog/) contains a great deal of original information. Thus, either a wall of blue (a list of links) or a wall of black (longer, prose explanations with original material) might be the right content for a web.
The purpose of revealing content to users is to help them achieve the web's purpose.
Reveal choices. A web is essentially a user interface to information. Because people often have limits to the amount of information they like to encounter at one time, the content of a well-designed web often is chunked into appropriately sized pieces. These pieces then are linked to each other in a structure that layers the information according to a model (or models) of user thought or interaction.
A common method to reveal choices is to use analogies for setting up expectations about interaction and information organization. Sometimes, making a web look like a familiar paper report or magazine can help users. The benefit of these analogies for a web is that they immediately can give users an idea of what to expect as far as the organization of material. Another metaphor is the tree, in which a hierarchical organization of a web can help the user navigate the web's information.
Analogies, however, can fail when they restrict the creator of the information in expressiveness or when they confuse the user. A web organized like a book might be successful for some audiences and for some purposes; a book analogy doesn't always take advantage of the range of expressive possibilities of hypertext to convey associative information relationships.
The purpose of revealing choices to users is to help them navigate a web.
The revelation of these three Cs-context, content, and choices-can occur at a spectrum of granularity levels for web development:
The systems level A collection of webs that are related by authorship or use. In systems-level web development, the focus is on organizing information around broad topic areas and multiple purposes. A web system might be defined as all webs created by one organization, for example. Each of these webs might serve a different purpose and even reach a different audience, but the organization's authorship is an important characteristic. An example is all the webs created by the World Wide Web Consortium (http://www.w3.org/). Another example is the WWW Virtual Library (http://www.w3.org/vl), which includes many webs created by many authors for different topics. Each web, however, shares the common characteristic of being a description of information on a subject or topic.
The web level A collection of related HTML pages that is considered a single work, typically addressing a particular audience for a specific purpose and typically created by a single author or individual. In web-level development, the focus is on organizing information around a single topic area and a single purpose. The entry for aviation (http://macwww.db.erau.edu/www_virtual_lib/aviation.html) in the WWW Virtual Library, for example, can be considered a single web because it addresses a particular topic area and is maintained by a single organization.
The package level A collection of HTML-related pages that are part of a single work. In package-level development, the focus is on organizing information into related units that can be used to create a web.
The page level A single page (a single file of HTML). In page-level development, the focus is on information layout and expression.
Chapter 5, "Web Planning," covered aspects of planning web development at the level of web systems. The design and implementation processes also can be approached at the systems level. Because the systems level is such a high level of granularity, revealing content is usually not a major focus; instead, systems-level development usually focuses on revealing context and choices.
Approaching the context of a web at the systems level involves helping the user become aware of or get more information about the web system's range of audience(s) and purpose(s). Techniques to do this include placing links that describe the audience and purpose for each of the webs using hyperlinks to terms that might not be understandable to some users. These links might include a vocabulary list, shared terms, shared knowledge (bibliographies, for example), or shared experiences and expectations (rules for participation, for example) about the system of webs.
Revealing choices at the systems level might be done by describing the purpose and intended audience for each web in the system. A system of webs from an international organization might include links to regional or local webs, for example. These choices might be to links for further information about each web (purpose and audience).
At the web level, a developer is most concerned about organizing and presenting information for a particular purpose and intended audience. Although the systems-level work is strong in its emphasis on context, web-level development often focuses on providing information cues. Cues are words, icons, or graphics that help the user make choices about what part of the web (if any) to encounter next.
For revealing content at the web level, the goal is to direct users to the appropriate page or sequence of pages that meets their needs. Just as the systems level was too abstract for revealing too much content, so is the web level. At the web level, the designer is concerned with packaging information and directing the user to the right information content.
A long-time user of a web might want to have fast access to the web's information content, for example, whereas new users might need longer explanations and introductory information about this content. A web-level design can take this into account by providing direct links for expert users to a web's information and enclosing this same information within introductory material for new users.
In page-level design, the goal is to reveal information content while maintaining connections to the levels of context and choices at the systems and web levels. Page-level design and implementation focuses on establishing and fulfilling a consistent set of user expectations about information. Consistent placement of the web and topic icon (a technique described in Chapter 8), for example, can help a user always know to which page the web and topic relate.
For revealing choices, uniform placement of links to present alternatives for viewing information can help. These navigation links can serve as rapid-access methods for encountering various packages of the web's information. Navigation links sometimes are implemented as a navigation bar on each page of a web.
Revealing content at the page level is the main emphasis of the web-where the layers of context and cues finally are parted to reveal information to the user. When the context and cues are done well, page-level revelation of content is far easier because it can assume that the user can access the superstructure of information, prior knowledge, and context that the web- and systems-level work provides.
Consistency in content presentation at the page level involves the creative use of language and image to convey information. Methods to create coherence at the page level include using a consistent, uniform grid design for all pages of a web, with specialization or variations in this grid for specialized purposes.
At all levels of granularity, revealing context, choices, and content involves some specific design and implementation techniques. These techniques include considerations for information organization, cueing, and layout. Chapter 15, "Multimedia," covers more details about implementation issues for graphics.
An important way to express information organization in hypertext is through diagrams that express linking relationships. In a system of webs, individual webs and pages within those webs might have many links between them. Some links might be from page to page or to webs outside the system. Figure 11.1 shows a diagram depicting the organization of a sample web system. The boundaries of the webs overlap when pages are shared among the webs.
Figure 11.1 : A system of webs sharing pages.
This sharing of pages might increase efficiency in information use. If information can be used in multiple webs, overall information production and maintenance costs might be reduced. In fact, this method of using a page in many ways is one of the benefits of hypertext information organization. If webs share so many pages that the functionality and uniqueness of each individual web are obscured, the webs might no longer be considered separate works but different views of the same information.
Within a web, pages can have many different linking relationships. Figure 11.2 shows a web with a hierarchical organization of pages.
Figure 11.2 : A hierarchically organized web.
A hierarchical organization can help a user form a mental model of a set of hypertext pages that maps closely to other forms of on-line information structures (directory and file structures, for example). A hierarchical organization for a web, however, can be a limiting semantic structure. Gopher and FTP information systems lack the capability to express information relationships and must use a hierarchical system of directories (or folders) and lists to organize information. Although a useful mental model, it's just one option possible for hypertext organization.
Nonhierarchical linking or a package-to-page breakdown of the information offered in a web can provide alternatives. Figure 11.3, for example, illustrates a web that doesn't follow a strict hierarchical organization but includes linking (and mutual linking) as a way to express relatedness and information relationships. It might be very difficult, however, for some users to quickly form a mental model for information that is nonhierarchical.
Figure 11.3 : A nonhierarchically organized web.
Another alternative is to provide different views of the same information. Figure 11.4 shows a linear, list-oriented view of a set of information; Figure 11.5 is a different view of the same link information presented in a more expanded, narrative form. First-time users of the information might benefit from the expanded form, whereas frequent or expert users could use the list view. In this particular instance, the connection from one view to the next is made accessible to the user; the phrase Subjects (subject-oriented searching) is a hotspot leading to the page shown in Figure 11.5. The square icon to the left of the phrase Subject-oriented Searching in Figure 11.5 is a hotspot connecting the user to Figure 11.4.
Figure 11.4 : A list view of information.
Figure 11.5 : A narrative view of information.
At the page level, information can be organized following a classic model, such as shown in Figure 11.6. This information design style uses a head, body, and foot, much in the same way that essays (introduction, body, and conclusion) and Greek columns (capital, shaft, and base) are arranged.
Figure 11.6 : A classic web page design.
This classic design at the page level can help users employ a familiar three-way organization of information. Links to contextual information cues (both for the web and possibly for the web system) often are placed in the head. Navigation cues (user choices for further options) often are placed in the foot of the page. Just as the hierarchical web design can be limiting, however, so can the classic page design, with its reliance on a fixed structure.
Cues are a key part of providing context as well as choice information to the user. Cues often are associated with links to further information, and are placed in consistent places using the classic web page design shown in Figure 11.6. Figure 11.7 shows a web page with navigation and context cues in the border of the page.
Figure 11.7 : A web page with context and information cues.
Some examples of information and context cues at the page level follow:
Author of the page or administrative and/or technical contact person for the web This cue often includes links directly to the home pages of these contacts or a mailto link to these contacts.
The sponsoring institution for the web, if indeed the web is an "official" publication of that institution The cue for this institution could include a link to the institution's home page as a way to convey the context of the information. This cue could include the logo of the institution.
Date of creation and/or revision This cue might be very important for time-sensitive information. A listing of the current tax code is useful only if the users know immediately how current the code is, for example. The date of original creation might be presented to show how long the web has been active, as well as the date of the last revision to give the user a cue about the web's currency.
Flags or graphics to indicate newness Sometimes, webs use a graphic or some other icon or symbol in front of links that recently have been added. This gives frequent users a way to stay current in the latest offerings of the web.
Statement of ownership, appropriate use, or copyright An
explicit statement of how the information in the web should be
treated is an important cue for users. Common sense dictates that
a user does not take information in a web and pass it off as his
own. Cues as to the proper use, ranging from a simple copyright
statement to a qualification of use, can help in the appropriate
use of material. An explicit statement about liability or limitations
of the information also might make an organization's lawyers happy.
| Sample Copyright Statement |
Copyright © 1996 by XYZZ Company (info@xyzz.edu). You can use this for any educational or not-for-profit purpose. Provided "as is" without expressed or implied warranty. |
Navigation cues These include links to other choices for information within a web or within a system of webs. Often implemented as links, these also can be implemented as an imagemap (see Chapter 16, "Imagemaps").
Link to local home page This is both a context and a navigational cue. As a context cue, a link to the home page helps the user understand the purpose of a page within a whole web. As a navigation cue, a home page link gives the user a rapid way to get back to the "top" of a web.
As part of information chunking (described in Chapter 7), the web designer should seek to create an appropriately sized page. Determining an appropriate size depends on the audience and purpose of that particular page. A page might be very long and perhaps include 12 screenfuls of information, for example. If this page is a list of related items (for example, a list of people and their interests), even a long listing is useful because it quickly can be searched by using the Find command of a browser. If the page is extremely long and contains many unrelated information structures (paragraphs, lists, tables, and figures), however, 12 screenfuls might be too long.
Retrieval time also is a consideration in page length. Twelve screenfuls on a page might cause serious usability problems from the performance standpoint.
There is no single, universal length for appropriately sized pages. A page with only two screenfuls of information, for example, still might be too long for users to get a quick reference overview of information. One guideline in helping to determine the right size for pages is based on the overall information organization analogy used for a web or system of webs. A "slide show" set of webs, for example, might require that all pages are less than a screenful of information so that no page scrolling is required. Of course, limiting the size to one screenful still isn't strictly possible; variations in browser display, as well as user choices for fonts and size of the browser window, might change what one user displays as a screenful of text into many pages. Goals for page length can be set for a typical browser display and font size, however.
As a rule of thumb, slide show-style pages designed for a single screen of information often make a web very easy to use. Given a constant amount of information in a web, as the page size decreases, the number of pages in a web increases and the web becomes more porous. This goal also encourages the designer to create meaningful chunks of information based on a short page length, creating possibilities for greater information re-use.
The look-and-feel diagrams from the design process set goals for the overall appearance of each page (see Chapter 7). The web implementer, however, still has many decisions to make about the details of every page's information organization. In general, a consistent pattern for a grid often can be a good way to create coherence in web design. A grid pattern on a web page helps a user maintain a consistent set of expectations from page to page in a web. A grid pattern also implies an information hierarchy for quickly making sense of the important points on a page and thus retrieving information.
Designing and implementing a grid requires that you pay attention to principles of information layout while working within the constraints of HTML. HTML was never intended to be a page-layout language, but rather a semantic markup language. So, instead of designating dimensions based on a visual grid design, designers should create semantic layering of information through nested HTML elements.
To reveal the physical organization of a grid on a page as it is rendered in a browser, vertical lines can be drawn touching all the margins or indentations of text on a page. Figure 11.8 shows the grid pattern for a web page. The five grid lines shown correspond to header information as well as nested lists.
Figure 11.8 : A web page with grid lines marked.
Typographic changes (font size, style, and contrast) can draw a user's attention to areas on a page. Photographs, drawings, icons, and particularly color, very quickly can grab the user's eye. Bold headings, large letters, and page features with empty space around them also catch the user's attention.
Because various browsers may display letters and fonts differently, the implementer can't depend on an absolute font size or style in a design. Working within these variations, a designer can use lists, graphics, and HTML elements to focus and direct the user's attention. The user's eye is drawn to areas where the dark and light contrast of the typography or the color in images occurs. These areas should be the key interest points for the user. Using a very large amount of images or high-impact graphics reduces the visual contrast (where every visual element is overdone, as in the clown pants, multimedia overkill, or K00L design problems in Chapter 8).
Making links is at the heart of the expressive power of hypertext. Besides inappropriate or special link problems that might result (the page from outer space and meaningless links design problems in Chapter 8), the web designer also should be aware of how links can extend, augment, or contrast meaning in hypertext. Whether to make a link in a particular place within hypertext is an issue that is tied closely with the purpose and audience for that page, the other information on that page, and the author's intended meaning for that page. Moreover, linking ultimately is often an aesthetic choice, analogous to the issue of where to break lines in certain forms of poetry. Some poetic forms specify line breaks metrically (by a count of the number of syllables or "beats" in a line); in other poetic forms, line breaks are used for expressive contrast and subtle shades of meaning. Similarly, hypertext links cause a "break" in the attention of a user in specified or subtle ways.
Therefore, general rules for when to make links or when not to make links in hypertext can't easily be made. Instead, a web designer, implementer, and author can be aware of how links function and then consider how to meet the needs of the people using these functions.
Links can do the following:
Extend meaning. In the sense that a hypertext link continues a user's attention from one page to another resource, a hyperlink is a simple continuation of meaning. This style of linking might be used in a directory of alphabetical items, for example; the top page could contain all the letters of the alphabet with links to the pages containing directory entries that start with that letter. The separate pages serve as physical holders to package meaning. The relationship among these packages is meaning continuation.
Augment meaning. Meaning also can be enriched through links from one set of information to related information or commentary. This information is not a simple meaning continuation but instead serves an annotative function to provide the user with a way to get more information about a topic or to understand how the given information fits into a larger system of information. The strength of the relationship between a page and the page to which it links can vary widely. If a page refers in text to the XYZZ Company, for example, a link might be made from the text "XYZZ Company" to its home page, http://www.xyzz.com/. If the mention of the XYZZ Company is only incidental to the purpose of the page, this link probably should not be made at all to avoid distracting the user with incidental information. In contrast, if the page describes the XYZZ Company in a lengthy report, the first mention of XYZZ might be linked to the company home page to help the user find out more about the company.
Compare meanings. Associative linking is a key way to make meaning in hypermedia. Thus, hyperlinks often function as analogies to help a user compare concepts, ideas, or sets of information. The comparison is made between the text in a hypertext hotspot and its referent (the resource identified by the URL in the hypertext anchor).
A web implementer and designer, perhaps as input to the planning process (see Chapter 5, "Web Planning"), can help create a policy for linking by outlining the following:
No single style of web or page design is appropriate for every purpose. Therefore, it is very difficult for webs to be judged on some objective design criteria. Instead, a web can be evaluated based on how well it meets (or how it fails to meet) the needs of its audience for its stated purpose. There have been many more kinds of web design since the widespread use of graphical browsers following the introduction of Mosaic in 1993. Advanced levels of HTML also are changing the style of web page design (see Chapter 13, "Advanced HTML 3.2"). Because of the variety of audiences and purposes for webs, there are many approaches to web design, evolving from the early days of the Web to current styles that involve the latest in HTML elements.
Also adding to the mix of web design styles are the ideas of professional graphic designers. Although many were trained in techniques of graphic design intended for paper, the artistry of graphic designers on the Web has been felt, particularly during the wide rise in popularity of the Web among major companies and publishers during 1995-96. In fact, contemporary Web pages often mimic techniques found in paper-based magazine ads (for example, the print ads and Web site for launching Lucent, Inc. (http://www.lucent.com/) used matching styles).
As a result, styles on the Web ebb and flow as surely as the clothing fashions coming out of New York or Paris. There are periods of clear, clean, bright colors followed by periods of gaudy, flashy effects, followed by periods in which scribbled letters and an "unfinished" look are the latest rage. Often, these effects follow a new HTML feature very closely. For example, the Netscape body background and text color attributes, BGColor and Text, led many web developers to turn their web pages to black with white letters-perhaps to "show off" that they knew these new attributes, but perhaps also to differentiate their pages from the many others on the Web. As the color and font background attributes became widely known, their gratuitous use died down.
This diversity of styles on the Web is both interesting in its own right and exciting from the point of view of aesthetics. A web designer can (and should) develop an aesthetic rationale for a design; the expressiveness of the Web's language permits this. The only caution is that beauty on the Web ought to be more than skin deep. After all, the Web's pages are not the paper pages of a magazine; instead, they exist in an interconnected set of hypertext pages and support not only hypertext links to other resources, but active content, such as Java, JavaScript, or GIF-based animations.
This section takes you on a tour of different approaches to web styles, arranged loosely on the historical evolution of style on the Web. With humble beginnings in the text-only Web browsers of the early 90s, Web style now is more diverse, expressive, and complex.
The earliest examples of web page design were in the text-only browsers-in particular, the CERN (the Swiss Laboratory for High Energy Physics research) browser associated with the origin of the Web. Influenced perhaps by the hierarchical organization common in previous information systems such as Gopher, FTP, and Telnet, the early ASCII design style relies heavily on the hierarchical organization and links to extend meaning. Figure 11.9 shows a typical organization of a web page designed as part of the WWW Virtual Library and viewed through a Telnet session.
Figure 11.9 : An early ASCII-style web page design.
The use of a web page in a "classic" three-part structure of head, body, and column was shown generically in Figure 11.6 and specifically in Figure 11.7. This style has become popular with the use of graphical browsers because the visual impact of a single screen has more impact than the scrolling browsers, such as the Telnet browser.
At the web level, a classic style of information organization can be hierarchical, with pages used as analogies for containers (links to more pages) or content (a page describing information).
With the wider use of inline images and imagemaps (see Chapter 16) in graphical browsers, a more modern form of page design has emerged. Marked by a use of graphics to draw attention, reveal choices, and provide ornament, this style of web-page design runs the gamut of expressions, ranging from the single-graphic slab of the United States White House's web in its initial design in 1995 (see Fig. 11.10, http://www.whitehouse.gov/) to a mixture of graphics and text often arranged in a grid to reveal functionality.
The single-graphic slab design of the original White House web gives a very good sense of cohesion to the web's first page. The repetition of graphic elements from page to page is difficult, however; all the icons and elements shown in Figure 11.10 are embedded in the single-graphic slab. Therefore, there can be no efficiency in download time for using some of these elements in other pages. The result is sluggish performance with the graphics and less visual cohesion for the entire web.
Figure 11.10 : The first U.S. White House home page design (circa 1995).
Another modern slab style separates graphical elements into single-image files and uses these images as repeated visual cues from page to page. If the user's browser uses the cache capabilities, this scheme helps keep download time shorter. The result is a more open feel for the graphics, and the repetition of graphics reinforces visual context cues for the user.
Figure 11.11 illustrates an example of a web page designed using multiple graphic slabs to direct user attention. The graphic elements for "Cover Story," "CMC News," and "Special Issue Features" direct the user to groups of links and information. The cover thumbnail at the right in the figure and the CMC logo at the top of the page serve as navigational links to more information about this publication and its cover illustration. This example also displays a textured background to give the web page a particular feel or mood through graphics.
In extreme cases, modern web design using a large amount of haphazardly organized graphics slabs can lead to usability and aesthetic problems. As discussed in Chapter 7, these include clown-pants design; background textures obscuring the text; garish or discordant colors; and K00L design exhibiting gratuitous use of centering, font changes, and Netscape extensions.
Another variation on the modern style is the reinforcement of the grid pattern through the use of the TABLE element, part of HTML 3.0 (see Chapter 13). A TABLE element with invisible gridlines can be one solution to some clown pants design problems. The solution to the clown-pants problem shown in Figure 7.15 is based on a TABLE element (refer to Fig. 7.16). Like the fascination of some twentieth-century architects with a grid as a means of organizing a building (Le Corbusier's Unité d'Habitation, Richard Neutra's Levell House, or Philip Johnson's glass house in New Canann, Connecticut), the TABLE element may bring the grid into prominence as a central web-design element.
Although the modern style of web design essentially melds graphics to a grid or onto the classic three-part structure of a page, departures from these techniques are emerging with the wider use of cgi-bin programming (see Part IV, "Gateway Programming") to dynamically create web pages (and graphics) on-the-fly.
Instead of conceiving a page as a fixed structure, a postmodern style generates a page based on user requests. The result is that a page isn't necessarily a fixed grid but a dynamically generated object. One step in this direction is how HotWired allows users to customize their preferences for an opening page to the service (http://www.hotwired.com/Login/yourview.html). Extending this idea to an extreme could make each page in a web customized for users and made of components rather than a fixed superstructure.
The next advance in web style involves VRML (see Chapter 28, "Virtual Reality Modeling Language"). VRML, now in its 2.0 specification, already has altered the conception of the Web as predominantly text (although with many graphics, as described previously). With VRML, on-line information can be viewed as an environment in which the room or the scene becomes a unit of attention for the user. Figure 11.12 shows an example of a virtual scene on a web page.
Figure 11.12 : A virtual scene (courtesy of the Interactive Media Festival).
A web implementer, in addition to technical skills in HTML, also needs some writing capability and an understanding of how the web's audience uses language and thinks about the web's domain information. In many cases, a web implementer will be able to "steal" wording and text right from the purpose and objective statements, audience information, and domain information. With just a bit of change, this text can serve different purposes in the web implementation.
Each web page should have enough text to cue the user to the purpose of the page and how it's used. This text should be aimed at the needs of the user for that particular page: a customized statement of purpose, a concise overview of what information is on that page, and instructions for using the information. The designer might not have specified this language down to the wording level, but it is important. An implementer should use a spell checker and proofread the text for grammar and syntax errors.
Creating information that may meld a variety of media-text, pictures, sound, or links to other information services-involves shaping a pattern that reveals the order, amount, and kind of information to the audience. Ordering and patterning messages so that they have an effect on an audience is the key to making language work in a web.
An audience's goal is to match the message it receives with its need for information. Creating a message that perfectly matches an audience's needs is never possible, but centuries of thought and practice in communications have established techniques that have proven to be effective. The ancient Greeks developed rhetoric to create various techniques for persuasion. Industry and academia together have developed techniques for technical communication.
Shaping communication to meet audience needs largely depends on understanding the audience (audience analysis) and the purpose of the communication. In audience analysis, developers try to find out what the audience knows, why its members are encountering the message, and their concerns and preferences. In addition, an audience
Wants the right information at the right time at the right level of detail
Has a finite capacity to process information
Has a finite attention span and patience
Creating messages that meet an audience's needs involves a process of information development. This process includes creating, drafting, testing, and revising the message so that it meets the audience's needs. Ultimately, the communicator seeks to create a message that matches a given purpose, audience, and medium. Often, a communicator creates a store of information during this information-development process that can be used for other audiences and purposes. Information development is a process-not a single act-in which the communicator seeks to refine the information so that it fits the audience's needs. Moreover, this process does not involve a lone communicator; instead, it happens in a social and cultural context and may involve many people working together.
During the information-development process, a communicator can use various techniques to shape information for the audience.
The essence of design for a web is to capture the preceding techniques for revealing the context, choices, and content of a web at the many levels of design: systems, web, and page. A designer needs to make decisions about chunking and layering information and then convey these decisions in a way that the web implementer can use. The design techniques to accomplish this described here include creating a specification of the link relationship among web components and a common look and feel for the web's appearance.
Another goal of a web designer is to convey to the web implementer how to create pages and groups of related pages in a web. When chunking and layering information, a web designer might have used a method as described in Chapter 7, moving through the methodology of defining the information package and then the information pages. A designer can use a notation for packages, pages, and links, as shown in Figure 11.13.
Figure 11.13 : Symbols for package, page, and link diagrams.
This notation can be used to indicate the information packages as defined in Figure 7.4. This notation also can be combined with the hierarchical breakdown of pages in Figure 7.5 and the index page technique shown in Figure 7.9. The index page as well as a home page link can be designated as the header links. The major (outermost) packages as shown in Figure 7.4 can be used in a navigation footer bar for the web. Figure 11.14 shows the resulting page and link diagram.
Figure 11.14 : A page and link diagram.
Figure 11.14 shows a diagram at the page and link level. This is the level of granularity required for implementers to work. Designers, however, need to articulate a design plan at higher levels of granularity. Figures such as 11.14 don't scale well (they get overly complex and messy) for large webs.
At the web level, a designer can determine the relationships among the packages of information. Packages consist of web pages that are related according to some organizational scheme. A package of pages, for example, is the collection of the pages linked from the Resources page in Figure 11.14: the pages labeled "Research center home pages," "On-line page," "On-line journals," and "On-line bibliographies." Similarly, the implementation of the list of people and activities can be abstracted to be packages of information that can be implemented in a single page or a series of pages. The result is a representation of Figure 11.14 at a higher level of granularity, as shown in Figure 11.15.
Figure 11.15 : A web-level package and link digram.
Moving up still another level of granularity over a single web is the level of a system of webs. Often, this level is the organizational level and the set of webs that it offers to its users. Design at this level needs to hide the details of the page links and even most of the package links, showing only the major packages in the webs in the system and their relationships. These relationships could include shared resources, pointing relationships, image sharing, and database or forms sharing.
To show a systems-level web design diagram, assume that Figure 11.15 is one web (called "the research center web") in a larger system of webs that includes the following:
A products web
An affiliated organization web
Many regional and local chapter webs throughout the world
Figure 11.16 shows a systems-level view of a web.
Figure 11.16 : A systems-level web and link diagram.
Based on the page and link diagram shown in Figure 11.14, a look-and-feel diagram can be designed for the web. Figure 11.17 shows this diagram, which includes links for the footer information, header information, and the web icon. Chapter 12, "Basic HTML 3.2," discusses how this simple look-and-feel diagram can be used as a template for web implementation.
Figure 11.17 : A look-and-feel diagram.
During implementation, the web developer is concerned with taking the design diagrams and creating a web using HTML. Implementation involves file management, so this section reviews the basics of creating an extensible and stable file-management structure.
Essentially, a web implementer weaves a web from files of HTML. There might be just one file or there might be hundreds. In any case, a web implementer should be sensitive to issues of file-naming and source-code control.
First, a consistent, stable server name helps in resource retrieval. The web implementer should work with the Web master to develop a publicly known name for a web server that can remain constant, even though the actual machine that supports the server might change.
For example, a name such as
www.company.com
is a good one because it uses a common convention: the string www in front of the company's network domain name (company.com). A poor choice would be something like this:
unix5.its.itd.td.company.com
Not only is the name long and not descriptive (or maybe too descriptive, because it reflects the company hierarchy all the way down to the web server machine), but it also might not be a stable one. What if the web server is moved from the unix5 machine to the unix6 machine? A web promoter doesn't want to have to tell all users to change their hotlists or web pages to accommodate the name change. Instead, a stable name for a web server that is descriptive and constant is best.
Second, files on the server should be organized in a consistent, extendible way. Just as a web implementer doesn't want to tell users to change their URL references to a web because of a server name change, users shouldn't be forced to change their URLs because of changes in directory structure.
A web directory structure should remain stable, even as other projects are added to the server. It's not necessarily a good idea to put all the files for the very first web project in the top-level directory of a web server, for example. This causes a crunch later on when other projects are added.
So, instead of the first project (such as the "star" project) having the home page
http://www.company.com/star.html
an implementer should consider
http://www.company.com/star/
Here, the directory name that the web implementer uses (in this case, star) is a short, descriptive name of the project itself. An implementer should avoid "joke" or obscure names for directories and files because these URLs often are used in many contexts for communication. The top-level URL for that project is a path to a directory (http://www.company.com/star/), which brings up the default or home page for that project.
At the project level, a web implementer can use the structure of the web design (the package, page, and link diagram) as the basis for a directory structure. Above the project level, if a web implementer knows that a web server will contain a great deal of information in addition to projects, other naming possibilities include
http://www.company.com/projects/star/home.html
which leaves room for
http://www.company.com/projects/delta/
http://www.company.com/documents/catalog/
http://www.company.com/services/orders/
and other development. Although it's not impossible to change naming schemes, it's best to design an extendible naming scheme at the start. Naturally, a web implementer doesn't want to go to the other extreme and have a labyrinthine directory structure such as http://www.company.com/projects/new/info-tech/startups/tuesday/afternoon/star-project/home-directory/home.html.
A source code control system, such as Source Code Control System (SCCS) on UNIX platforms, may help maintain configuration control over files, particularly if a web is large or there are many web developers. Source code control systems have facilities for maintaining information to regenerate previous versions of files. Systems of source code control also can keep track of who makes changes to files and when. The whole process of web design, implementation, and management may be amenable to such tools. For small- and medium-size projects, these tools may create far too much overhead in order to be beneficial. For large projects, they might be essential to keep track of the many changes made in the web files.
HTML editors or a development environment (see Chapters 17, "Implementation Tools," and 18, "Development and Language Environments") may help web implementers in their work. These tools and environments for assisting in HTML implementation are under rapid development. In concept, they are similar to software development tools and environments. Computer-Aided Software Engineering (CASE) tools can help software developers generate code based on designs and specifications. A similar set of tools for Computer-Aided Web Engineering (CAWE) is evolving.
The concept of implementing a coherent design is to use a framework for repetition with expressive variation. Therefore, a template method of HTML implementation often can give an implementer a way to quickly create a common look and feel across several webs. Specific techniques with HTML are covered in Chapter 12. Figure 11.18 shows how a universal look-and-feel template can be used to generate similar pages that inherit layout and link characteristics (specifically, header and footer layout and body information).
Figure 11.18 : Inheritance of look and feel.
As Figure 11.18 shows, a systems-level look-and-feel diagram created using this idea can be a powerful way to enforce a consistent page layout across a system of webs. Individual webs in a system might vary the look and feel slightly, and sections within each web, as well as visual cues such as icons, might vary the general page layout.
The web implementer therefore can create a series of templates
to quickly implement a web or to create new pages of a particular
web in a system of webs. Using this same template idea, other
generic pages using forms (see Chapter 14,
"Forms, Tables, and Frames") or imagemaps (see Chapter 16)
can be created and kept as web components for when they might
be needed later. Ideally, such inheritance of look, feel, and
functionality across webs may be implemented in future automated
systems for web development.
| Design and Implementation Notes |
You can get a good idea of the kind of information that a web implementer and designer works with and produces by looking at the web design and implementation documentation that 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 and the implementation information at http://www.december.com/web/develop/wdimplement.html. |