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, keeping things orderly and clear they do help. And it snot that theWaSP 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 mnot exactly sure if it brings comfort or concern to you to know that some of the most respected Web designers and developers couldn t quite nail the information architecture and usability of aWeb site especially one in a state of transition but it does exemplify that these techniques are still being worked out and that these challenges are keeping all of us on our toes. Fortunately, WaSP is re-examining its goals and design, which often is the best any of us can do create, study the problems, and improve. Secret #56: Placement of Critical Information In the newspaper industry, headlines are said to run above the fold. This means that the critical news is placed above the fold of the paper, so that it sthe first thing people see. While the concept of fold is really nonexistent inWeb design, the idea that critical information needs to be placed at or toward the top of a page remains a good thought (see Figure 4-16). Figure 4-16: Critical elements should be placed high up on a page.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services
82 Part I: Tools, Planning, and Content Figure 4-14: The learn section is clearly demarcated at the top level, fourth option down from the top. Figure 4-15: The learn submenu is unclear and, as a result, places site features too far from the individual.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services
Chapter 4: Making Sites Usable and Persuasive 81 Figure 4-13: If you re offering downloads to non-HTML file formats, describe to your audience what they re downloading, which format it s in, and how large the file size is. Secret #55: Direct Access to Site Features What s the most important reason people come to your site? If you don tknow, you need to find out because making sure you get your visitors from their point of entry to the feature they want is a prime directive. Notice that I wrote from their point of entry. That s because not everyone will come to your site via the home page. So even if your home page has immediate access to the fabulous online game you re famous for, what happens if someone comes in via your discussion board page? You ve not only got to have direct access to the critical features on your site, but you ve got to make 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 group, which has access from the top level of our navigation (see Figure 4-14). Yet, when you click on the learn link, you get an expanded menu with a variety of options (as shown in Figure 4-15). I personally feel this menu is extremely confusing, because the options do not guide me to any specific place. I have to really think to figure out where the information I want might be. And what s the difference between reference and resources anyway? A visitor could easily
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services
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 video files, and so on. Because not all browsers support non-HTML document formats either with or without plug-ins, if you are offering the file specifically for download, be sure to note what type of file it is and how large it is (as shown in Figure 4-13). You may also want to offer any plug-ins on your site so your audiences are prepared Link text is very long I m sure you ve seen link text that is a paragraph long. When I see long passages that are linked, I assume the person doing the markup made a mistake! Typically, links should be at least 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.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services
Chapter 4: Making Sites Usable and Persuasive 79 Table 4-1: Link-Related Problems in Usability Problem Suggestions and Solutions Link has incorrect URI This common problem may not have anything to do with the way you originally managed your external links. Sites go away, or move files, and servers go down. Or, you might have simply mistyped the URL. The best way to find these problems is to run your site through link-checking software. You can do this with many products, including Web development products such as Dreamweaver. A number of online services also provide regular link checking and reports (see resources note following this table) Link has no URI This happens to me quite often as a result of adding link markup with no URI because I m using it as a placeholder. It can also happen for the same reasons mentioned for incorrect URI listings. If you are creating placeholder links, use some kind of consistent dummy text, and then use your editor to find those dummy links when you re ready to add the URLs. You may also use any of the link-checker products as a means of finding missing links Link text not visible inline Links in text are often difficult for readers to discern, particularly if the link colors are close to the text colors. The proper technique for colorizing text is a much-debated issue. Some purists, such as Jakob Nielsen, who authored the seminal book Designing Web Usability and is one of the leading pundits in the field, believe that link colors should remain the conventional browser default colors, but most designers don t agree. No matter which track you decide to take, it s important that there is some discerning feature about your inline text links, such as ensuring the link colors contrast effectively with the text, making them easier to identify Too many links in a page When the rise of the portal site came about some years back, I was pretty flummoxed about what to tell Web designers about how to manage links for portal sites. Portal sites tend to be all about linking elsewhere, but with so many links on a page, how do we know where to go first? There s no guidance. In recent years, Weblogs are becoming portals in a sense, offering far more links on a page than home pages of the past (Figure 4-12 shows a Weblog example). The best solution to the issue of having many links is to first assess what really needs to be there and remove what doesn t. Then, organize your links into effective groups. This will help your users a great deal continued
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services
78 Part I: Tools, Planning, and Content Figure 4-10: A persuasive link. Figure 4-11: The content isn t enthusiastic, and the link falls in an odd spot. I probably would not follow this link.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services
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 emotional 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 last link on earth 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 out of hand. 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/.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
76 Part I: Tools, Planning, and Content Generally, if you re trying to make your site very usable, very concise, and are encouraging the Don tMake Me Think ideology, the designer should stick to concrete 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 navigation 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.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services
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.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services
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 Entertainment. 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 asWord, 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 abstract metaphors, the meaning is not literal (see an example in Figure 4-8).
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services