Adobe Education

Adobe Web Tech Table of Contents:

• Lessons revised for CS2

• Lessons revised for CS

• Original lessons

Unit 3: Planning a Web Project, Part 2

Lesson 3.1: Site Design

!	Lesson Goal: Make key decisions about your site's structure and navigation.

During the previous phase of Web design (information design), you answered key questions about the site's goals, audience, and content. During the site design phase, you will use that information to make decisions about the site's structure — the skeleton that holds everything together. This includes planning the site's organization, navigation, interaction or functionality, and overall usability.

Site Organization

Site design is the second phase of the Web site design process (see Figure 3.1-1). In this phase, the focus is on the site's structure or organization, and key decisions must be made regarding the site's navigation, usability, and functionality.

Figure 3.1-1: Three Phases of Web Site Design:
Site Design Phase Highlighted

Site Structure Listing

The questions about site content which you answered during the info design phase, particularly those questions relating to how information should be grouped, should lead you to ideas about how your Web site should be organized. In his Information Architecture Tutorial (http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial1.html), John Shiple suggests creating a site structure listing, which is a text-based, hierarchical outline of your site's content. This listing shows the major sections, their subsections, the subsections' divisions, etc. Once you've done this, it's easier to decide which organizational structure is best for your site.

For example, the beginnings of a site structure listing for this course site might look like this:

1. Home Page
2. Introduction to the Internet
   1. Brief History of the Internet
      1. The Internet and Its History
      2. Internet Committees
      3. Common Internet Protocols
   2. The World Wide Web and Browsers
      1. The Internet and the World Wide Web
      2. Links and Files
      3. The Growth of the World Wide Web
      4. Browsers
   3. Internet Search Strategies
      1. Search Tools
      2. Search Strategies
      3. Search Results
      4. Evaluating Web Sites
      5. Citing Web Sites
   4. Acceptable Use Policies
      1. What's an AUP
      2. Comparing AUPs
3. Web Site Planning
4. Web Site Development

Site Organizational Structure

A site's organization can be classified according to the type of organizational structure utilized: linear structure, hierarchical structure, random access structure, and mixed structure. Each of these structures has certain implications for the site's navigation. As an example, let's hypothetically apply each structure to a generic Web Design course Web site and examine its implications.

Linear Structure

Figure 3.1-2 illustrates how a course's navigation might look if we applied a strictly linear structure:

Figure 3.1-2: Linear Structure for Web Site

Notice the following about the linear site structure:

• The linear structure is sequential.
• The audience is limited to going forward or backward one page at a time.
• The linear structure is very appropriate when the Web designer wants the audience to see one page at a time and then move to the next page in the sequence.

Implications of the linear structure for the course Web site:

• The audience is forced to move through the Web site based on the linear structure; therefore, the audience can only navigate from the home page to the first lesson, from the first lesson to the second lesson, etc.
• There are no direct links from the home page to lessons other than the first lesson.
• There is no easy way to go from one page to another page that is not next in the sequence.
• With such limited navigation options, the audience may not linger long enough to see what other content is available within the Web site.

Hierarchical Structure

Figure 3.1-3 illustrates how a generic Web Design course navigation might look if we applied a strictly hierarchical structure:

Figure 3.1-3: Hierarchical Structure for Web Site

Here are some key features of the hierarchical site structure:

• The hierarchical structure is based on a top-down site design, i.e., it is based on content designed using categories and subcategories.
• The hierarchical structure is far less limiting than the linear site structure.
• The audience can link to any main area within the site structure from the home page; thus, this structure is a very effective way to design informational Web sites.

Implications of the hierarchical structure for the course Web site:

• There are direct links from the home page to each of the main topics of the course (i.e., Internet Overview, Web Site Planning, HTML, etc.).
• The audience can move efficiently to the topic of interest.

Random Access Structure

Figure 3.1-4 illustrates how a generic Web design course navigation might look if we applied a random access structure:

Figure 3.1-4: Random Access Structure for Web Site

Here are some characteristics of the random access site structure:

• The random access structure allows users to move from wherever they are to any other place on the Web site.
• By providing too many options, this structure may cause confusion.
• The random access structure is simply too unwieldy if the site has too many pages.

Implications of the random access structure for the course Web site:

• There are direct links from the home page to every other page in the site (e.g., Internet Overview, Web Site Planning, HTML, etc.). Though the graphic doesn't show it, in this case, to be a true random access structure, each page would need to have links to all the individual lessons as well.
• Each Web page must have a large number of links; this would require a great deal of page real estate.
• The audience's attention might be distracted from each page's main content due to the sheer number of options.

Mixed Structure

Figure 3.1-5 illustrates how a generic Web design course navigation might look if we applied a mixed structure:

Figure 3.1-5: Mixed Structure for Web Site

The mixed site structure has these features:

• The mixed structure integrates various aspects of the other structures.
• The mixed structure is least limiting of the site structures.

Implications of the mixed structure for the course Web site:

• Like the hierarchical (top-down) structure, there are direct links from the home page to each of the main topics of the course (i.e., Internet Overview, Web Site Planning, HTML, etc.), and from each main topic to its lessons.
• The audience has access to any major topic from any other major topic (like the random access structure).
• The lessons within each unit are linked using a linear structure, which might be appropriate for the sequencing of instruction within a unit.

Architectural Blueprint

Introduction to Architectural Blueprints

Once you've created the site structure listing and thought about an appropriate organizational structure for your site, it's time to draw up an architectural blueprint — a visual representation of the site's structure. These diagrams should show how the site's components are grouped and how they link together. How detailed does this blueprint need to be? Here's what John Shiple (http://hotwired.lycos.com/webmonkey/98/28/index3a_page3.html?tw=design) has to say about it:

You'll need to make up a legend that defines how on- and off-site links, page components, pages, and groups of pages are represented in the blueprints. You might want to distinguish among parts of the site that perform a function or transaction, parts of the site that are generated dynamically, and pages merely comprised of text. If your site is large, you may have to make several architectural blueprints, starting with a generalized overview of the site and working toward diagrams with a finer and finer grain.

Generalized Overview Blueprint

With that in mind, Figure 3.1-6 is a sample architectural blueprint showing a generalized overview of a generic Web design course's Web site. Note that arrows indicate links between pages.

Figure 3.1-6: Site Architectural Blueprint — Overview

Detailed View Blueprint

Figure 3.1-7 represents a partial architectural blueprint showing a detailed view of Unit 2 of a generic Web design course Web site:

Figure 3.1-7: Site Architectural Blueprint — Detailed View

Site Navigation

Think of navigation as what helps a Web site's visitors identify:

1. where they are;
2. where they've been; and
3. where they can go.

To increase a site's usability, the navigation scheme and options should be very clear. Some of the ways to accomplish this navigational clarity include navigation bars, place-finding tools, and site maps:

1. Navigation bars
   • Global navigation: These nav bars usually include links to the site's main sections.

     Example: Near the top of each page in a course Web site, you might links to the major course topics, e.g.:
     " " " " | Home | Internet | Site Planning | HTML |, etc.

   • Local navigation: These nav bars typically include links at the same level and/or the level(s) just above or below the current level.

     Example: Near the bottom of this page, you'll find links to the other pages within this lesson:
     " " " " Go to page: " | Lesson Home | 01 | 02 |, etc.

2. Place-finding tools
   • Unlinked link labels: In a text-based nav bar, an unlinked label appears alongside several linked labels.

     Example: The nav bar near the bottom of this page contains links to the other pages within this lesson. Notice that the text label for this page is not a link; that is the equivalent of telling the user, "You are here:"
     " " " " Go to page: " | Lesson Home | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 |

   • Breadcrumbs: This method is usually found at the top of a Web page, and indicates where the current page is in the hierarchy of the site.

     Example: At the WebAIM site, if you start at the home page, click on General Information, then click on Introduction to Web Accessibility, you'll end up on a page with the following breadcrumbs trail at the top:
     " " " " Home > General Info > Introduction
     Note that this method also incorporates the unlinked link method, since Home and General Info are links, while Introduction (the current page) is not.

3. Site maps
   • According to Jakob Nielsen (Site Map Usability), "Users go to site maps if they are lost, frustrated, or looking for specific details on a crowded site." Some of the implications of this are:
     • If your site has a fair number of pages and a user could get lost, do include a site map.
     • Include a link to the site map on every page in a conspicuous place, and label the link "Site Map" so there's no question about what and where it is.
     • Make sure the site map does a good job communicating the site's structure, i.e., its information architecture.
   • Here are some other tips about site maps from Jakob Nielsen:
     • Create the site map so that visitors can obtain an overview of the site's main areas, perhaps with several levels of hierarchy.
     • Keep the site map page reasonably short; Nielsen suggests a maximum of 2.5 screens.
   • To sum it up, once again using Nielsen's words, "Site maps should be simple, compact layouts of links, and they should show everything in a single view."

Site Interactivity (Functionality)

During the site design phase, you'll also need to consider what functionality or interactivity you'll need or want to offer your visitors. What does the site need to be able to do? How should visitors be able to interact with your site? Identify and prioritize these requirements. Keep in mind that some kinds of functionality may require advanced programming, thus increasing the overall costs of developing the site.

When planning for a site's functionality, ask yourself which of the following the site will require:

• Search features
• Forms for submitting information
• Database for collecting submitted information
• E-commerce capabilities
• Password protection
• Log-in/log-out systems
• Streaming media capabilities
• Customization features

Overall Site Usability

REVIEW OPPORTUNITY
For more about usability, revisit the Usability section of Lesson 2.1 — The Web Design Process.

All of the issues discussed in this lesson — organization, navigation, and functionality — affect the overall usability of a Web site. If users can't tell where they are, find what they want, or complete a transaction, they are turned off. The bottom line is that, when users can't quickly determine how a site "works," they will leave and go elsewhere. It's really that simple.

Additionally, Internet users have little patience for things like slow downloads, the necessity to download a plug-in before they can access content, features that only work in particular browsers or browser versions, etc. Any barrier you put between users and their goals dramatically decreases your chances of holding them on your site. Be sure to weigh that fact against any perceived advantages of including fancy "bells and whistles" or large graphic or multimedia files. You might have a beautiful, state-of-the-art Web site, but it does little good if nobody stays around long enough to appreciate it.

Design Document — Site Structure Section

The site design phase of the Web design process is not complete until you add the fourth section (Site Structure) to the design document:

4. Site Structure
   1. Site Structure Listing (or Summary)
   2. Architectural Blueprints
   3. Global and Local Navigation Systems
   4. Appendix C: Site Structure Listing (optional)

Revisit the Design Document section of Lesson 2.4 — Information Design to see the Site Structure section in context.

1. As you can see, the first item to include in the Site Structure section of the design document is a site structure listing. [See the example provided in the Site Organization section.]
2. Next, you'll need to translate your site structure listing into one or more architectural blueprints for the site. [See the examples provided in the Architectural Blueprint section.]
3. Finally, you'll need to document the types of global and local navigation systems you intend to implement. For example, for this course Web site, the documentation might be worded:

   The global navigation system contains links to the home page and the site map. This will appear at the top of every page in the site.
   
   The local navigation systems will contain links to the other pages at the same level, as well as to the parent page. This will appear near the bottom of every page in the site.

Go to page: | Lesson Home | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | Printable Version of Lesson |

Course Home

Copyright © 2002-2005 Adobe Systems Incorporated, except those portions marked copyright © 2000-2005 ID 4 the Web. All rights reserved.