WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES phần 3 doc

Define abbreviations and acronyms: Just about every industry has its own sublan- guage of abbreviations and acronyms, which can look like ancient Latin to visitors not fully comfortable in the vernacular. For this reason, an accessibility statement should spell these out, and if possible, offer a short explanation of each. Declare standards compliance: This is not very interesting to most visitors, but there are the occasional trainspotters who care about things like the W3C, WCAG, Section 508, and other government regulations, and what version of XHTML the site is running. This section is for them. Offer additional resources: Many people reading your accessibility statement have no disabilities at all, and have stopped by simply out of curiosity. This page is the perfect opportunity to politely encourage others to learn about accessibility and how to implement it across their own websites. Typical links include the WAI, 17 the W3C’s published specs to WCAG, 18 Section 508, 19 and other government regula- tions, and occasionally web designer resources like Dive Into Accessibility 20 or Accessify. 21 Explain remaining barriers: Just as it is important to discuss how accessible a corpo- rate website is, it is equally important to explain what barriers remain, and how people can overcome them. For instance, users of older versions of Netscape will probably not see your site as you intend, since the browser's CSS-rendering engine is primitive compared to modern, standards-compliant browsers; in this case, peo- ple simply need to upgrade their software. Writing a good accessibility statement is not hard, and it should not take long. Hopefully, the document should simply summarize all of the effort that has gone into the accessibil- ity of the website, from small things like navigation aids to large initiatives like ensuring standards compliance across the entire site. See Figure 3-7 for an example of a good accessibility statement. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 62 17. www.w3.org/WAI 18. www.w3.org/TR/WAI-WEBCONTENT 19. www.section508.gov 20. www.diveintoaccessibility.org 21. www.accessify.com 8393CH03.qxd 8/2/07 12:04 PM Page 62 Figure 3-7. This accessibility statement speaks to the reader in nontechnical terms that explain the benefits of the site’s accessibility and how to take advantage of various features. Testing accessibility Accessibility techniques mean little if they are not applied correctly, and the best way to check markup is to run it through various tests, from simple validation checking to screen reader simulation. For the benefit of end-users, it is always worth double-checking all content. Validate the site There are numerous places that offer to test websites for accessibility, but they are limited in what exactly they can test. For instance, any markup validator can check to see if alt attributes reside within the <image> tags, but only a human reader would be able to tell if any text embedded in that image is written in a legible typeface. And while those same ACCESSIBILITY 63 3 8393CH03.qxd 8/2/07 12:04 PM Page 63 programs can check to see if alternate content exists for the <object> tags, only a real person can judge if the content makes sense and is not written over the heads of its audience. That being said, validation services offer a great place to start accessibility testing because they will pick up just about any technical problem that may interfere with access. Here are a few services: Watchfire WebXACT 22 is a suite of purchasable applications that also offers a reduced set of functionality free on its website. After entering a domain, you will be presented with four tabs of content: General (covers page size, load time, meta- data, and other stats), Quality (covers broken links, spelling errors, and alternative text), Accessibility (checks against WCAG 1.0 and indicates errors and warnings for each priority level), and Privacy (covers encryption levels, cookies, and more). This is a fantastic resource that offers a broad swath of information collected in one report. HiSoftware’s Cynthia Says 23 is an older diagnostic tool, but still useful because it specifically checks markup against Section 508 compliance, which is an abbreviated version of WCAG 1.0 adopted by the US government. There’s nothing ground- breaking, but it will sniff around for missing alternate content, server-side imagemaps, and insufficient table markup. Site Valet 24 is another online accessibility tool that has a more expansive feature set available for purchase. It takes a slightly different approach to its diagnostic output by generating the page’s HTML and then outlining warning areas. This makes it very easy to immediately target the naughty bits of the markup. The W3C’s Markup Validation Service 25 does not test for accessibility specifically, but rather tries to validate HTML with the specified DOCTYPE. Since valid HTML and accessibility go hand in hand, it’s another solid checkpoint for the website. Screen readers Let’s be honest. Few companies or organizations are willing to spend money on a single screen reading device, much less the myriad options available to disabled users. You might be able to swing it if you work for a government agency or a company whose site’s acces- sibility is critical to its customer base, but most likely, you’re going to be left looking for a software alternative. Have no fear—they exist. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 64 22. www.watchfire.com 23. www.contentquality.com 24. http://valet.webthing.com 25. http://validator.w3.org 8393CH03.qxd 8/2/07 12:04 PM Page 64 The Lynx browser 26 is a very old-school piece of software. It is a web browser, but it is text-only. For those who were around in the primordial days of the Web and remember DOS-like terminal screens to access online documents, the Lynx browser will be a nice trip down memory lane. The Firefox browser has many plug-ins designed to test accessibility, but the Fangs Screen Reader Emulator 27 is probably the most useful. Instead of running a sepa- rate browser or buying a screen reading device, simply load a page in Firefox and click Fangs from the Tools menu, and it will display the site as it would appear to a text-only screen reader. User testing Again, the list of organizations willing to invest in focus groups and user testing will be rel- egated to the richer companies and better-funded government agencies. For instance, an employee of IBM might convince his company to conduct a study on a few pages, or a state government to examine their own website, but don’t expect much else. In addition to funding (which has to cover the space, equipment, and personnel), you will need to find disabled users willing to demonstrate their web surfing habits in front of a stranger. If all the pieces fall into place for a live user testing session, study the methodologies and advice from others who have done the same so that the effort is not wasted. Jakob Nielsen and the Nielsen Norman Group, Joe Clark, and others have orchestrated these same studies and have published their results and processes. In fact, some companies might want to hire an accessibility consultancy to conduct the testing for them. Summary Accessibility is critical to a company’s success on the Web. By keeping the doors open wide for every possible visitor, the revenue and marketing potential of the domain is maximized while the business enjoys considerable side benefits like increased search engine optimiza- tion and faster-loading pages. While it is important to read the WAI’s recommended accessibility guidelines—especially WCAG 1.0—common sense and simple, real-world techniques will always benefit your visitors. ACCESSIBILITY 65 3 26. http://lynx.isc.org 27. www.sourceforge.net/projects/fangs 8393CH03.qxd 8/2/07 12:04 PM Page 65 4 ARCHITECTURE AND NAVIGATION 8393CH04.qxd 8/2/07 12:21 PM Page 67 Website design is often compared with building architecture. The similarities run remark- ably parallel. In fact, in web design, a site’s overarching flow and structure is referred to as its architecture, a term defining the placement of elements on a page, how they interact, the intended navigation, and how major sections of a site form a greater whole. This inter- weaving of components doesn’t happen magically; web design, like building design, takes meticulous planning with a focus on organization and usability. The navigation system, a key component of the architecture, can make or break a large corporate website. Imagine, for a moment, your company site as a large building. All of the hallways, elevators, stairwells, emergency exits, lobbies, and signage constitute the naviga- tion, dictating how users move from room to room (your pages of content) after arriving in the main entrance (cold start from the root directory) or being mystically teleported to the middle of the building (linked from another site to a deep page). You do not want a building with dead ends, broken elevators, and ambiguous or disingenuous signs. Likewise, the site visitor does not want broken links, inconsistent buttons, and no indication of where they are in the site hierarchy. These pitfalls are avoided by planning in advance. You need to define three critical things from the get-go: How much content you have to work with (at least to start) How those pieces of content relate to one another What kind of navigation structure needs to be implemented to best cover that content This chapter will cover those three points, plus best practices in building the website navi- gation, from dictating global, local, and contextual menus, to drafting complementary navigation components like breadcrumb trails, site maps, and more. Organizing content The Web comprises billions of pages of text, images, video, sound, and more. 1 The organ- ization of that content is what makes it useful to the Internet’s denizens. The creation of hierarchies, categories, and architectures allows our visitors to easily use, search, and ref- erence the virtually infinite library of text, images, video, and more. Your corporate site is a small corner of that greater structure, a microcosm of digital organization. From the very beginning, you must carefully map out how the site’s pages will interact with one another to not only form a cohesive whole, but to fit within the greater cosmic network. There are several ways to approach this, but the end goal remains the same: to create a proof-of-concept diagram outlining the website’s structure and where individual pieces of WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 68 1. A rough estimate from February 2007 places the number of publicly available web pages around 30 billion. For more info, visit the Boutell.com FAQ at www.boutell.com/newfaq/ misc/sizeofweb.html. 8393CH04.qxd 8/2/07 12:21 PM Page 68 content fall under different levels of importance. This architectural prototype will influ- ence the site design because it will be a major driving force in how the navigation is crafted—how many items are in the main menu, whether to have a columnar subnaviga- tion or drop-downs, or even if a breadcrumb trail is needed. Determining the big buckets The first step in organizing a site is determining the site’s main sections. These are the big buckets for the content, and usually map to a website’s primary navigation. Deciding on these broad categories requires a blend of key reference points: Web best practices: In some cases, what’s been done before on other sites—maybe competitive, maybe topically irrelevant—might be worth mimicking. Best practices have been established. People expect to see a contact link just as they expect the logo in the header to return them to the homepage. Breaking or ignoring these can deeply affect the usability of the site. What’s been done before: If the site is a redesign, there is a tremendous advantage in critically evaluating the path already laid and realigning it to match the goals of the new design. Since the old design was (hopefully) in place long enough for its positive and negative points to be recognized, most marketing managers will enthusiastically supply a designer or information architect with a stream of feed- back. (“We hate this color. This link should be over here. That section is going away. I don’t even know what this icon is supposed to represent. Wow, I forgot we even had this.”) Specific project requirements: In your initial conversations with the marketing department and others involved with the site creation, specific directives may come to light—“We absolutely need to have a section devoted to our patented technology,” or, “I can see a whole separate section on this product.” These explicit requirements offer a great starting point when you start mulling over the architecture. What makes sense: Designers often instinctively know what the main sections of a website should be. There is a sense for the depth and topical range of the text and images, and designers know—in a very broad, nonscientific way—how all the cards will fall at the end of the day. Choosing the main sections is not always a predetermined, logical, step-by-step process. There is always a period of refinement and an intrinsic need for scalability to accommo- date changes made on the fly. (“Sorry, we need to add one more section” is an oft-heard phrase.) Actual section labels can also become a focus of manic fixation as you, your coworkers, your client, the company marketing directors, C-level assistants, mail clerks, the FedEx delivery guy, and your cat obsess over the semantic difference between “products” and “solutions.” Using these guidelines, a first draft of the primary navigation should take little time. Some sections will be obvious, and others will need fine-tuning down the road. Iterations are almost inevitable. But identifying the large thematic buckets for content organization is a first step in crafting the architecture of the corporate site. ARCHITECTURE AND NAVIGATION 69 4 8393CH04.qxd 8/2/07 12:21 PM Page 69 Visualizing the architecture Once the main sections of the website are decided, it’s a matter of fleshing out the sub- sections, minor categories, and even individual pages if the site is small enough to allow for that level of focus. At this stage, designers and information architects must critically evaluate the content that will be present on the site, how it will be organized, and the best structure to support all of the information. There are different tools for visualizing the architecture of a website. Each presents the data in a slightly different way. While a mind map encourages rapid, free associative think- ing, a more formal hierarchical diagram requires site designers to think about content in a cascading path, or how visitors will naturally explore content if they don’t bail out to a search feature. Laying out the same information in a spreadsheet provides a third per- spective that requires a more decisive examination into actual content heuristics. As a general gut check, maintain more than one version of the architecture. A mind map approaches the structure from a user-centric point of view, allowing you to think about how sections expand outward from the homepage. A parallel document with the contents in a linear, bulleted format transforms the material into a table of contents, which has an author-centric point of view. Keeping these two versions side by side establishes a rough check-and-balance environment to ensure that your site organization makes sense from different perspectives. Mind mapping The term “mind mapping” (also known as “idea mapping”) represents an alternative way of organizing content. It is often used for raw idea generation in the first stages of plan- ning a new website (or a heavy-handed redesign), as it encourages free association and rapid exploration of themes. Mind mapping promotes a tree-like view of information, where subsidiary sections branch out from the central anchor. Hierarchical diagrams trace the organization of content through linear paths and assume that visitors will choose a single path and drill down until they find their page. Mind mapping visually describes the sections more efficiently. Figure 4-1 shows two corporate websites; the first is a simple 20-page site, and the second represents a much deeper site with hundreds of pages of content (some nodes are hidden in order to save space). WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 70 8393CH04.qxd 8/2/07 12:21 PM Page 70 Mind mapping is simple, and works best when exercised without restraint. The name of the game is expeditious refinement and iteration, not deliberate, prolonged decision- making over tiny details. In fact, as the mind map unfolds, more pages and subnavigation items will naturally reveal themselves from free-associative thinking. There are many resources dedicated to the art of mind mapping (including entire books), but here are a few tips common among the experts: ARCHITECTURE AND NAVIGATION 71 4 Figure 4-1. Two mind maps representing two different corporate sites. Example 1 is a smaller, brochure-type corporate site; example 2 is a much deeper site with several layers of navigation. 8393CH04.qxd 8/2/07 12:21 PM Page 71 1. Always start in the center and work outward. This is a more efficient use of space and avoids thinking in downward, linear movement. A homepage is the natural center of a website, not the top as represented in a hierarchy. 2. Explore the branches and do not stop to think too hard or long about one particu- lar section. Revise later. 3. Prune widowed sublevels. These are the tiny branches with only a single child level. Either fold the content into the parent or create more child nodes to flesh out the navigation. Although mind maps are traditionally hand-drawn, there are several pieces of software that aid in the process. NovaMind, Mindjet, MindMapper, among others, all accomplish the same basic goals. FreeMind, 2 an open source alternative, works well for both basic sketches and later refinement. Hierarchical diagrams While mind mapping is one means of defining the architecture, any site of substantial size also requires a top-down structure that displays the information in a hierarchy, where the top represents the singular homepage and subsequent levels comprise more granular menu options. This uses much of the same data as a mind map, but the alternative organ- ization provides an immediate view into the depth of the site. See Figure 4-2 for an example. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 72 Figure 4-2. A hierarchical diagram shows the architecture from the top down. 2. http://freemind.sourceforge.net/wiki/index.php/Main_Page 8393CH04.qxd 8/2/07 12:21 PM Page 72 [...]... [ver2 .3 – 200612 03] .txt, which signifies version 2 .3 of the company history page, created December 3, 2006 (Regular text files work best for web content because they reduce the content to plain ASCII characters, stripping out any formatting left over from Word and e-mail programs, as shown in Figure 4 -3. ) 73 839 3CH04.qxd 8/2/07 12:21 PM Page 74 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES. .. with niche products and exclusive services can turn their websites into lead-generating machines That process starts with the homepage 93 839 3CH05.qxd 8/2/07 1:55 PM Page 94 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Imagine your website as a wide funnel Every visitor stands on the precipice of the funnel when they visit your company’s website (as shown in Figure 5-2), and at the bottom... like breadcrumbs, site maps, and more All of these, coupled with clear and consistent labels and design, deeply affect a visitor’s experience 86 839 3CH05.qxd 8/2/07 1:55 PM Page 89 5 THE HOMEPAGE 839 3CH05.qxd 8/2/07 1:55 PM Page 90 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES A few years ago I attended a conference in Salt Lake City Having never been there and being naive in my younger... inform search engines of new content As shown in Figure 4-9, Google in particular has an online tool that allows you to ping its system every time your site map is updated 13 www.google.com/webmasters/tools/docs/en/protocol.html 14 www.w3.org/TR/NOTE-datetime 85 839 3CH04.qxd 8/2/07 12:21 PM Page 86 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Figure 4-9 Google provides an online tool for. .. alike; every business is different, and every designer prefers different ways of organizing a site’s links The result is a widely incongruent collection of directions that vary in clarity, depth, and design 95 839 3CH05.qxd 8/2/07 1:55 PM Page 96 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES It is precisely because of this disparity that the navigation should be present on the homepage, and should... (http://lap.umd.edu/poms/chapter8/chapter8.html) 75 839 3CH04.qxd 8/2/07 12:21 PM Page 76 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Based on the complexity of most business websites, a combination of navigation positioning will be used to indicate primary, secondary, and tertiary levels of organization The global navigation is persistent across the website Because the same buttons appear on all... miniature television commercials, and allocate large production budgets 97 839 3CH05.qxd 8/2/07 1:55 PM Page 98 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES These can be a valuable addition to the homepage if executed well First of all, the design should be integrated with the rest of the web page; if the site uses purple and Helvetica, the billboard should not be red and Times New Roman In addition,... 91 839 3CH05.qxd 8/2/07 1:55 PM Page 92 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Scope of the site The bigger the website, the harder it is to rein in all the pages under a single navigation structure Inevitably, as a visitor travels deeper, the big picture of the site loses focus; the menus become more contextual and the content topically limited The free -for- all nature of the Web encourages... long-time site, useit.com (www.useit.com) 77 839 3CH04.qxd 8/2/07 12:21 PM Page 78 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES New windows are useful, however, when leaving the page will definitely interrupt a critical experience For instance, if a person is filling out a complicated online form, they might want to click a small Help link to get more information about a specific field If they... process the :hover pseudoclass on anything except an anchor tag As of this writing, about 5 percent of users have JavaScript turned off A good general source for this statistic (and others) can be found at TheCounter.com (www.thecounter.com/stats/) www.htmldog.com/articles/suckerfish/dropdowns 79 839 3CH04.qxd 8/2/07 12:21 PM Page 80 WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES Breadcrumb links . fear—they exist. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 64 22. www.watchfire.com 23. www.contentquality.com 24. http://valet.webthing.com 25. http://validator.w3.org 839 3CH 03. qxd 8/2/07. site. See Figure 3- 7 for an example of a good accessibility statement. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 62 17. www.w3.org/WAI 18. www.w3.org/TR/WAI-WEBCONTENT 19. www.section508.gov 20 to build a website, so avoiding narrow, linear paths of navigation is preferable. WEB DESIGN AND MARKETING SOLUTIONS FOR BUSINESS WEBSITES 74 839 3CH04.qxd 8/2/07 12:21 PM Page 74 Many information