P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ 68 Part I: Tools, Planning, and Content ࡗ ࡗࡗ S triking a balance between usability recommendations, practical experience, and usability testing is an accurate factor in making choices when it comes to usability practices and user experience. This chapter offers some tried-and-true wisdom of usability as it applies to common Web site features to help you find that middle ground. Although this chapter is not a comprehensive usability tutorial, it can provide you some of the best secrets to ensuring your site is both usable and persuasive for its intended audience. ࡗࡗࡗ Secret #49: Create Consistent Branding When you think of branding, you might think of logos, colors, taglines, and names relating to a given product, company, or service. Although branding encompasses those elements, true branding is a far more powerful and subtle issue than you might expect. Successful branding is about creating an emotional relationship between an indi- vidual and the representative company or product. This means that good branding creates a response in people—whether a tagline makes us feel comfortable, or a logo makes us feel energetic, or a color scheme makes us calm—these responses are the desired results of effective branding. Branding can be achieved using a variety of techniques. Contemporary marketing theory breaks down branding into two types: ࡗ Direct Experience. In direct experience branding, the emotional relationship is one-to-one. If you have a great burger at Ye Olde Burger Shoppe, the satisfying results of that meal relate emotionally to the product and brand. ࡗ Indirect Messaging. The indirect method uses slogans, sponsored events, and promotions to connect people to product brands. The key to successful indirect messaging is repetition, usually in the form of TV and magazine ads, and billboards. Web sites can benefit from both forms of marketing (Figure 4-1), although Web sites themselves are almost always going to be a direct experience for people these days. You go to a site for a reason—to read a Weblog, purchase copies of a favorite author’s books, and so forth. You interact with the site, and your experience there creates the emotional one-to-one feeling found within direct experience marketing. When creating a lasting relationship between an end user and a product, company, organization, or service, Web designers need to plan the direct experience to have a specific emotional result. For example, my bank’s Web site provides excellent service, useful management tools, and provides me with an emotional sense of security. This kind of bonding between a site’svisitor and a product can be accomplished using a range of specific usability techniques—many described throughout this chapter. But we can also draw from indirect messaging techniques to enhance our goals. All of the following things can work on the indirect level by providing repetitive images: ࡗ Using consistent placement for logos from page to page ࡗ Using consistent color and graphic styles P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 69 Figure 4-1: Ads on Web sites are considered indirect messaging, but the actual Web site itself is a direct experience. ࡗ Typography ࡗ Iconography Combining an effective direct experience and consistent statement of brand will help you to bond your site visitors to your site, creating lasting, rewarding relationships. ࡗࡗࡗ Secret #50: Determining Primary Navigation A primary navigation scheme is the main navigation for your site. It may be the only navigation you have, or you could combine it with other navigation, depending upon the scope and requirements of the site. At the heart of any Web site’s usability lies its navigation. How you evolve your navigation schemes will depend upon a lot of the work you’ve done in planning and architecting the site. But it is vitally important to make sure you really hone in on the primary features and functions of your site, reducing the number of options and placing them in an order that is logical. An example of logical ordering might be as follows: 1. Home 2. Books 3. Video 4. Audio 5. Contact P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ 70 Part I: Tools, Planning, and Content ࡗ ࡗࡗ Whereas illogical ordering might be the following: 1. Video 2. Contact 3. Audio 4. Home 5. Books Looks pretty simple, right? Well, that’s the point. You know what it’sliketodo certain tasks, such as driving a car. We’ve repeated such actions over and over in our lives, so the acts of accelerating, braking, signaling a turn, and so on have become a part of us. We’renot actively thinking out each step; it’sbecome automatic and easy. Navigation should be that for a visitor. Some readers may be familiar with Steve Krug’s aptly named book Don’t Make Me Think!. The entire idea that site visitors should not have to work out complex tasks just makes sense. Figure 4-2 shows Designtopia, a site with a common-sense approach to navigation. Figure 4-2: Designtopia offers extremely simple, persistent, and obvious navigation on all of its pages, making the experience of navigating the site a no-brainer. Using the information you gather when wireframing, prototyping, and mapping your site, primary navigation schemes emerge quite readily. And when it comes to any navigation scheme, one thing is certain: Simple is always better. tip You can also think of navigation as a form of indirect messaging. Always keep primary navigation in the same location, using the same visual styles, throughout your site. P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 71 ࡗࡗࡗ Secret #51: Secondary Navigation Secondary navigation assists users in drilling down further into the hierarchical structure of your site. Secondary navigation should be reserved for detail—the primary navigation remains dominant and consistent in its placement throughout a site. Forms of secondary navigation include the following: ࡗ Alternative text links. This technique is a very common practice of including text links on those pages where image-based navigation is in use. This helps with the accessibility of the site (see Figure 4-3). Figure 4-3: Alternative text links provided on Lynda.com. This technique is in widespread use as optional navigation. ࡗ Drop-down menus. These are menus for quick access to specific areas of a site (see Figure 4-4). Figure 4-4: Drop-down menus are a popular means of adding quick access to site sections. ࡗ Section submenus. Larger sites often have submenus for individual sections (see Figure 4-5). P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ 72 Part I: Tools, Planning, and Content ࡗ ࡗࡗ Figure 4-5: Primary navigation with a section submenu on the Adaptive Path Web site provides a classic example of secondary navigation. The most important secret when designing secondary navigation is to make sure it doesn’tconflict with the primary scheme. It should appear in a different location, whether below or to the side of the primary navigation, and it should appear only when necessary. Figure 4-6 shows a prototype page with “zones.’’ Notice how primary and sec- ondary navigation are in distinctly different zones. Figure 4-6: Mapping potential navigation zones on a prototype page. note Secondary navigation should be distinctive in its visual design, yet not so much so as to call more attention to it than the primary. ࡗࡗࡗ Secret #52: Grouping Navigation by Like Items While working with your information architecture, you’ll find that as you begin to develop navigation schemes, you’ll be listing out specific areas of a site. It’s very P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 73 helpful to take such a list and then group like items, combining them to reduce the number of options and the need for the site visitor to think much about where things might be located. Here’s a list of potential Web site navigation items for a portal site: ࡗ Quote ࡗ Horoscope ࡗ Technology ࡗ Sports ࡗ Fortune ࡗ Weather ࡗ World ࡗ Nutrition ࡗ Business ࡗ Poll ࡗ Fitness ࡗ TV listings ࡗ Movie listings ࡗ Lottery ࡗ Travel When you have the list of items complete, sit down and try to identify like groups. Right off the bat here, I see two primary groups. The first is News: ࡗ World ࡗ Sports ࡗ Weather ࡗ World ࡗ Business ࡗ Technology The other group could be Activities: ࡗ Quote ࡗ Horoscope ࡗ Fortune ࡗ Poll ࡗ Fitness ࡗ Nutrition ࡗ TV listings ࡗ Movie listings ࡗ Lottery ࡗ Travel Upon closer examination, activities can be broken up into activities and entertain- ment. Activities would be related to the site itself: ࡗ Quote ࡗ Horoscope ࡗ Fortune ࡗ Lottery ࡗ Poll P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ 74 Part I: Tools, Planning, and Content ࡗ ࡗࡗ The entertainment category would include the following: ࡗ TV listings ࡗ Moving listings ࡗ Fitness ࡗ Nutrition ࡗ Travel At this point, we have three top navigation areas: News, Activities, and Enter- tainment. Depending upon the site’s needs and structure, you can break things down even further. The point is for you to organize, merge, and combine topics in effective logical groups so the site visitor doesn’t have to. ࡗࡗࡗ Secret #53: Iconography and Language Use The use of icons (iconography) in navigation was a popular technique long before we began studying navigation for the Web. Navigation is, of course, a part of any user interface—whether it be software programs such as Word, kiosks, CD-ROMs, or Web sites. Iconography typically relies on metaphor. Metaphor is the symbolic representation of an object or idea. That representation defines some likeness between the symbol and its related object or idea. Familiar uses of metaphor in iconography include the following: ࡗ An envelope to represent e-mail ࡗ A shopping bag or stack of wrapped boxes to represent shopping ࡗ A stock ticker to represent finances ࡗ A pencil to represent articles ࡗ A briefcase to represent job and work If you think about these examples carefully, you’ll see that they are very clear in their relationship. This is referred to as a concrete metaphor. The symbol is very literal (see Figure 4-7). These icons were designed specifically to assist foreign students whose first language might not be English in finding services online such as e-mail, weather information, medical information, prescription refills, and assistance. note The icons in Figure 4-7 and the Web site screen shot in 4-9 are c  Chris Silverman, and used here with permission. Please see Chris’s site, www.csideaworks.com/, for some great iconographic design and inspiration. Another type of metaphor in iconography is referred to as abstract. An abstract metaphor can be a literal image that is abstractly related to the corresponding object or idea. More commonly, abstract metaphors are created symbols that have no specific meaning until related to the object or idea in question. The designer makes the suggestion between the icon’s design and the related idea—with ab- stract metaphors, the meaning is not literal (see an example in Figure 4-8). P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 75 Figure 4-7: Concrete iconography from designer Christopher Silverman. Figure 4-8: Can you find the navigation? It’s the circles with shapes along the bottom of this design. Abstract iconography is based on the designer’s conceptual response to the ideas being expressed. P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ 76 Part I: Tools, Planning, and Content ࡗ ࡗࡗ Generally, if you’re trying to make your site very usable, very concise, and are en- couraging the “Don’t Make Me Think’’ideology, the designer should stick to con- crete metaphor in iconography. Of course, your content and audience will shape your design decisions. For example, abstract iconography might work well on a Web site featuring the works of abstract artists. Only your research and planning will help you determine if abstract metaphor is a reasonable choice for your navi- gation icons. Of course, many designers never choose to use iconography because language is sufficient. Simply styling the text or creating images using words to suggest navigation options is a completely legitimate way to go. And now, with the many ways we can use CSS for style navigation, we don’t even need to use JavaScript to toggle images for creative effects. cross ref For more information on using CSS for style navigation, refer to Chapter 8. Consider the following guidelines when using text for navigation: ࡗ Keep text options short and concise. Instead of “Visit Other Weblogs,’’ you would use “Other Weblogs,’’or even just “Weblogs.’’ ࡗ Avoid jargon or location-related terminology where possible. This is especially true in those situations where you are trying to reach a broad audience that might not always speak the language in which your site is authored. ࡗ Stick to convention. Everyone knows what “Contact’’and “About’’means, but they might have to think twice about the words “Where’’and “What’’ being used to represent the same thing. Figure 4-9: Combining iconography with text for clarity in the primary navigation. P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 77 Of course, there’s a happy medium here. Many designers combine iconography with text. If you’re after clear communication, combining the word “e-mail’’ with your envelope icon does the trick (see Figure 4-9). If you want to create a more abstract design but still assist with clear navigation, you can use the abstract icons along with the literal text. note For more information about clarifying language usage for better comprehension and accessibility, please see Chapter 10. ࡗࡗࡗ Secret #54: Managing External Links It’s no secret that the longer you keep a person on your site, the more of an emo- tional relationship you can develop between what your site represents and that individual. This is true of all types of Web sites, including Weblogs, commerce sites, and portals. Commerce sites are especially concerned with this issue, because while you’ll visit your favorite Weblog to enjoy the content, you might never be back to the “Baby Stuff’’ Web site again, yet you can be sure they hope you’ll be buying your friend’s baby shower gifts there. So, managing external links becomes very important in those situations where keeping a person on the site up through the desired outcome of their visit is mission-critical. Typically, this means avoiding any external links in content close to the top of the page. Keep links short and relevant. You can even write the surrounding content of links in such a way to make them more—or less—attractive for your visitors to follow. Here’s an example of a link (see Figure 4-10) I’d probably follow: Finding the popular and controversial ``Heya Charlie Brown'' movie hasn't been easy. But I've found the <a href=''http://thatsite.com/heyacb.mov''>last link on earth</a> for the upbeat little flick. Get it now! And here’s a link (see Figure 4-11) I might skip: That Heya Charlie Brown thing really got <a href=''http://thatsite.com/heyacb.mov''>out of hand</a>. In the preceding figure, it’s not only the lack of enthusiasm in the voice of the content, but also the placement of the link. Had it been placed around “Heya Charlie Brown,’’it would likely be more noticeable. There are more problems than just these concerning links and Web site usability. Table 4-1 describes some of those problems and provides suggestions for managing links more efficiently. note You can find more information on link validators and link validation services at www.business.com/directory/internet and online/site management/link monitors/. [...]... chapter shares secrets that will help you create and manage content in effective ways, including how to write more effectively for the Web, understand intellectual property (IP) issues and how they influence the work of Web designers, and what is required to make strategic decisions about long-term management of content This chapter is very U.S.-centric because it deals with language and law, and these... and When to Use It” at Boxes and Arrows, a rich resource for those interested in real-world applications of usability techniques Finally, to learn about usability-related Web sites, additional articles, and books, see Appendix C, “Helpful Reading, Web Sites, and Resources.” Summary The study of usability and user experience on the Web is so active an area that it’s producing massive quantities of documentation,... and remove what doesn’t Then, organize your links into effective groups This will help your users a great deal continued ࡗ 80 Part I: Tools, Planning, and Content ࡗࡗࡗ Table 4-1: (continued) Problem Suggestions and Solutions Link is to a non -HTML document You will often have cause to offer users download links to non -HTML document formats such as PDF files, Word documents, Excel spreadsheets, audio and. .. one word and up to as many as six or seven, but not more Usually three to five words, clearly written, are sufficient Figure 4-12: Weblogs are becoming link farms The best solution is proper organization, as seen here on the right-side link options of designer Doug Bowman’s Stopdesign Web site ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive ࡗ 81 Figure 4- 13: If you’re offering downloads to non -HTML file... that access consistent (it looks and behaves the same way) and persistent (it exists in the same location on each page) throughout the site, as well The Web Standards Project (WaSP) has been struggling with an issue that exemplifies this problem quite well As of this writing, one of WaSP’s primary goals is to offer designers and developers standards-related references and resources We call this the LEARN... Creating and Managing Fantastic Content ࡗࡗࡗ ࡗ ࡗ 97 Screen resolution Screen resolutions vary greatly, and it will influence the size and appearance of text In Figure 5 -3, you can see text at the resolution of 640 × 480, and in Figure 5-4, you’ll see text at a resolution of 1024 × 768 Of course, many people are viewing the Web at other resolutions, including the very popular 800 × 600 and 1280 × 1024 and. .. things orderly and clear— they do help And it’snot that the WaSP design team didn’tdo those things But you can see that, at this time, the WaSP Web site does not provide true direct access to one of the most important features it wants to make available for site visitors I’m not exactly sure if it brings comfort or concern to you to know that some of the most respected Web designers and developers... Planning, and Content ࡗࡗࡗ A Web site’scontent is the most persuasive aspect of a site But creating content for the Web is a totally different activity than creating content for other media such as books and white papers Along with creation of Web content comes protecting and managing Web content After you’ve prepared it appropriately, legally protecting your (or your client’s) property and strategically managing... color and space Tables have a stormy history on the Web They were introduced to HTML as a means for scientists and researchers to adequately manage tabular data Prior to tables, the only way to accomplish columnar layouts was to use preformatted text and painstakingly figure out how many spaces belonged between each entry Later, tables became the grid system upon which most Web sites through the 1990s and. .. submenu is unclear and, as a result, places site features too far from the individual ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive ࡗ 83 click one and end up in the wrong place In addition, if a visitor came in at one of these lower pages, he or she might be even more confused Back up for a second and think about all the logical things we’vebeen discussing— the need for planning, understanding audience, . Planning, and Content ࡗ ࡗࡗ Table 4-1: (continued) Problem Suggestions and Solutions Link is to a non -HTML document You will often have cause to offer users download links to non -HTML document. non -HTML document formats such as PDF files, Word documents, Excel spreadsheets, audio and video files, and so on. Because not all browsers support non -HTML document formats either with or without plug-ins,. link options of designer Doug Bowman’s Stopdesign Web site. P1: FCH WY021-04 WY021-Holzshlag-v2 May 25, 2004 15:46 ࡗ ࡗࡗࡗ Chapter 4: Making Sites Usable and Persuasive 81 Figure 4- 13: If you’re offering