Designing Effective Web Navigation 4/2002

Page 2 of 6

Printable version

VI. Content labeling

Informative labeling is important to the success of a Web site's navigational scheme. Major content sections and subsections should be given descriptive and intuitive titles. These titles will be used as labels for the various elements of the navigation.
It is important that these labels are created with the user in mind. The language used for navigational elements should be consistent with the sophistication level of the users. Obviously Tech Web (www.techWeb.com), a site catered to technology professionals, may choose to use language or labels that wouldn't be appropriate to use on CNN.com, a site catered to all.

Labels should not contain internal verbiage that is understood within the organization, but would not be intuitive to someone outside of the company. This is a frequent mistake of Web developers looking to force their organization's branding upon the site's users. Therefore, inundating the users with unnecessary confusion. For example, Disney refers to its employees as "cast members", however someone outside of the company should not be expected to recognize this. Therefore, on Disney's Web site (www.disney.com) a link to employment information shouldn't be titled "Join Our Cast", in an effort to spread Disney's culture to unsuspecting users. Disney.com recognizes this and therefore titles the link "Careers".

Site developers can't expect users to play "guess what's behind door #1" by clicking on labels when they don't know what content lies behind the label. Effective labeling allows a user to enter a site and easily decipher what they major content sections are, and therefore decide where the content they desire is located.

VII. Paper prototyping

Paper prototyping is an excellent method for gaining valuable user and client feedback early in the design process. It also allows you to save a lot of time, money, frustration, and redesign later in the development process. The goal is to receive a maximum amount of feedback for a minimum amount of effort. This type of prototyping involves roughly sketching out a site's overall layout and navigational scheme. These can be drawn by hand, or developed in programs such as Word, Excel, or Photoshop. It all depends on the project and amount of time you have. These rough sketches are often referred to as "wireframes" or "mock-ups".

Paper prototypes can be used to test and receive feedback on various granularities of the site. The home page and several 2nd and 3rd level pages can be used to test the site's navigation. A helpful test is to identify a piece of content that the target user would be interested in finding, and see if the user can intuitively choose which link to follow. The content pieces should be based on the user tasks which have already been identified, such as "finding the schools address" in the example above. For the University Web site example the content piece would be the school's address. The user would simply point to the site section or link that they feel would lead them to the content they desire. If multiple users have trouble locating important content, then the navigation and site structure needs to be rethought. Once the user has chosen a link or site section the next paper prototype can be used to illustrate what would happen after that link was chosen. Smaller pieces of paper can be manipulated to display dynamic items such as rollover or dropdown menus.

A sub section or series of site pages can be used to test the placement of specific content blocks. Paper prototyping shouldn't show actual page body content, such as finalized paragraphs or images. However, it can be used to receive feedback on the arrangement and layout of certain content groups and categories. The user may be able to supply information about how they feel the page's content should be displayed.

Paper prototyping is also a valuable tool to help ensure that the design team and client/project sponsor are on the same page. Seeing a tangible, albeit rough, design may help the client to recognize additional content they desire for the site. It may also help them to identify content or features that are displayed in a way that differs from what they had envisioned.

Some Web designers and developers worry that using paper prototyping will make them appear unorganized or unprofessional to the client. Some of their peers and competitors may deliver highly functional prototypes and professional looking site diagrams to their clients. However, by educating the client about the benefits of paper prototyping, the Web development team will be able to win the client's trust and commitment. The client should be informed that "quick and easy" usability testing methods such as paper prototyping help to save time and effort, and in turn the clients money. Something every client will be glad to hear. Most clients would rather see a paper prototype, than pay for several weeks of development on a functional design that will likely be reworked. In addition some Web designers may be reluctant to rework a design that they have already spent considerable time on. Paper prototyping helps to avoid this hesitancy, by reducing the amount of work that goes into the prototype.

Paper prototyping will likely consist of multiple iterations of user testing and client feedback. The prototyping method used will partially determine the turnaround time between iterations. Hand drawn prototypes may be developed at the client's site, as usability issues are encountered during a testing session. This type of development can greatly expedite the design process.

Page: 1 | 2 | 3 | 4 | 5 | 6  next >>