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 entertainment. Activities would be related to the site itself: Quote Horoscope Fortune Lottery Poll
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services
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 t conflict 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 secondary 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
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services
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).
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services
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 s like to do 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.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services
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
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
68 Part I: Tools, Planning, and Content Striking 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 individual 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), althoughWeb 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 aWeblog, 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 sWeb 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
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
Making Sites Ch4apter Usable and Persuasive Secrets in This Chapter #49: Create Consistent Branding . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 #50: Determining Primary Navigation . . . . . . . . . . . . . . . . . . . . . . . . . 69 #51: Secondary Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 #52: Grouping Navigation by Like Items . . . . . . . . . . . . . . . . . . . . . . . 72 #53: Iconography and Language Use . . . . . . . . . . . . . . . . . . . . . . . . . 74 #54: Managing External Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 #55: Direct Access to Site Features . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 #56: Placement of Critical Information . . . . . . . . . . . . . . . . . . . . . . . . 83 #57: Consistent Placement of Elements . . . . . . . . . . . . . . . . . . . . . . . . 84 #58: Drop-Down Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 #59: Pop-Up Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 #60: Consider Tabbed Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 #61: Provide Orientation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 #62: Date and Time Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 #63: Cost-Controlled Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . 90
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services
66 Part I: Tools, Planning, and Content Figure 3-7: The online style guide for the New York public library. The NYPL Style Guide, at www.nypl.org/styleguide/, is extremely straightforward and provides a starting-point guideline for those interested in developing a practical style guide. tip I ve found it especially helpful to publish the guides in multiple formats: PDF, Web, and print. This makes the guide widely available to everyone no matter where they are. Summary How information is managed can be a very challenging process. There is no doubt that the redesigns and upgrades for manyWeb sites have proven the need for intelligent IA going into a project. In deconstructing these sites, many of which suffer from organic growth problems inconsistent naming, poorly organized archives, navigation systems that are limited because they were designed to reflect a more simple architecture we become very aware that IA is as essential to the site development process as graphic design or HTML. As we begin applying IA methods, we also begin to grasp the way the various fields within the Web profession are layered and interwoven. Good project management and planning are integral to a smooth project, good IA is essential to bridge the technical and presentational aspects of aWeb site, and IA inevitably is a portion of usability and content design two of the topics you ll be delving into more deeply in the following chapters.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
Chapter 3: Architecting Your Information 65 Secret #47: Setting Site-Wide Standards As I mentioned earlier, it may be up to someone other than the IA to set and document the standards being used. However, it can also fall into their jurisdiction because the IA should at this point have a deep understanding of how the site and its interface work. Whether managed by your IA team, design team, or content team, it is always helpful to set site-wide standards. These are the various production guidelines that the entire team will follow as it works through the production concerns of the site. Setting these standards can be the job of the lead designer, the project manager, or can be done by a full team. tip If you are working in a team environment, getting feedback from all team members for site standards will help you avoid leaving important information out. Some of the concerns for which you should study your site and create a standard include the following: Code Code commenting Colors Directory structures File naming conventions Graphic formats Maintenance list Accessibility guidelines Content guidelines Team members and roles Policies tip Project managers should encourage site-wide standards early on, and check on all relevant site standards during the Quality Assurance (QA) phase. Secret #48: Developing a Site-Wide Style Guide The style guide gathers up all the various standards you ve created for your site and places them in a single guide so that all members of a team can access the information and ensure that all the guidelines are followed. Whenever a team member has a concern, he or she can check the guide before asking questions, saving everyone time. Style guides typically reflect all the information found after the development of site-wide standards. During their redesign of the New York Public Library, Jeffrey Zeldman and Carrie Bickner co-created an excellent style guide for coding standards (see Figure 3-7).
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services
64 Part I: Tools, Planning, and Content The main issues in creating archive systems are as follows: Understanding your content Categorizing content accordingly Structuring the directories and documents in such a way that they can be permanently stored and retrieved If you rethinking Hey! I did all this when auditing my content, you recorrect. The big difference is figuring out how to make a given document permanent. Changing a URL or filename is a major issue, so you don t want to do that if you can avoid it. The best way to do this is to know while going in, which documents will require archiving and permanently house them by date, category, and topic. tip The best thing you can do to ensure long-term structure for archives is to determine which documents will be archived, and leave them in that location forever. These days, archives are managed by a content management system (CMS).CMSs are an extremely hot topic these days, mostly due to the fact that they are very often extremely expensive and difficult to implement. What s more, any good CMS will allow you to import existing information into its format, so if you aren t using a CMS with archiving for a given project, consider building your own archiving structure and then worrying about the technology later. note Having a search feature on all pages is a tip you re going to read quite often in this book. If you have a very large site, you can provide additional user pathways to detailed content such as archives via advanced searches that allow the site visitor to search using date, keyword, content, and topic filters. Secret #46: Considering Frequency of Updates and Redesigns Another issue that sneaks into the long-term concerns of a site s architecture is how frequently the information is going to be updated and the site freshened up. This relates to IA because it is during the IA process that you can determine areas of potential technical growth of the site for the long term, allowing designers to tap into technologies such as server-side includes, application and database technologies, and other document and function-related processes without having to redesign the infrastructure. note Always anticipate that a Web site will grow or be redesigned. If you don t build your architecture without some organized awareness of what might potentially emerge, you are at a serious disadvantage later on, when growth does occur and redesign is imminent. Along with helping to create a scalable architecture, ensuring that you make plans to update and redesign the site early on allows you to anticipate with improved accuracy what kind of growth your document base is going to expect. This means you ll be able to architect your site to allow for scalability.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services