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

In fact, in web design, a site’s overarching flow and structure is referred to asremark-its architecture, a term defining the placement of elements on a page, how they interact, the inte

Define abbreviations and acronyms: Just about every industry has its own

sublan-guage of abbreviations and acronyms, which can look like ancient Latin to visitorsnot fully comfortable in the vernacular For this reason, an accessibility statementshould 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 thesite 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 theperfect opportunity to politely encourage others to learn about accessibility andhow to implement it across their own websites Typical links include the WAI,17theW3C’s published specs to WCAG,18Section 508,19and other government regula-tions, and occasionally web designer resources like Dive Into Accessibility20 orAccessify.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 howpeople can overcome them For instance, users of older versions of Netscape willprobably 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, ple simply need to upgrade their software

peo-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 ensuringstandards compliance across the entire site See Figure 3-7 for an example of a goodaccessibility statement

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 tocheck markup is to run it through various tests, from simple validation checking to screenreader simulation For the benefit of end-users, it is always worth double-checking allcontent

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 altattributes reside within the <image> tags, but only a human reader would be able to tell ifany text embedded in that image is written in a legible typeface And while those same

63 3

programs can check to see if alternate content exists for the <object> tags, only a realperson can judge if the content makes sense and is not written over the heads of itsaudience.

That being said, validation services offer a great place to start accessibility testing becausethey will pick up just about any technical problem that may interfere with access Here are

meta-is a fantastic resource that offers a broad swath of information collected in onereport

HiSoftware’s Cynthia Says23 is an older diagnostic tool, but still useful because itspecifically checks markup against Section 508 compliance, which is an abbreviatedversion of WCAG 1.0 adopted by the US government There’s nothing ground-breaking, but it will sniff around for missing alternate content, server-sideimagemaps, and insufficient table markup

Site Valet24is another online accessibility tool that has a more expansive feature setavailable 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 veryeasy to immediately target the naughty bits of the markup

The W3C’s Markup Validation Service25does not test for accessibility specifically,but rather tries to validate HTML with the specified DOCTYPE Since valid HTML andaccessibility go hand in hand, it’s another solid checkpoint for the website

acces-22 www.watchfire.com

23 www.contentquality.com

24 http://valet.webthing.com

The Lynx browser26is 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 andremember DOS-like terminal screens to access online documents, the Lynx browserwill be a nice trip down memory lane

The Firefox browser has many plug-ins designed to test accessibility, but the Fangs Screen Reader Emulator27is probably the most useful Instead of running a sepa-rate browser or buying a screen reading device, simply load a page in Firefox andclick Fangsfrom the Toolsmenu, and it will display the site as it would appear to atext-only screen reader

User testing

Again, the list of organizations willing to invest in focus groups and user testing will be egated to the richer companies and better-funded government agencies For instance, anemployee of IBM might convince his company to conduct a study on a few pages, or astate government to examine their own website, but don’t expect much else In addition tofunding (which has to cover the space, equipment, and personnel), you will need to finddisabled users willing to demonstrate their web surfing habits in front of a stranger

rel-If all the pieces fall into place for a live user testing session, study the methodologies andadvice from others who have done the same so that the effort is not wasted Jakob Nielsenand the Nielsen Norman Group, Joe Clark, and others have orchestrated these same studiesand have published their results and processes In fact, some companies might want tohire 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 widefor every possible visitor, the revenue and marketing potential of the domain is maximizedwhile 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 recommendedaccessibility guidelines—especially WCAG 1.0—common sense and simple, real-worldtechniques will always benefit your visitors

65

3

26 http://lynx.isc.org

27 www.sourceforge.net/projects/fangs

4 ARCHITECTURE AND NAVIGATION

Website design is often compared with building architecture The similarities run ably parallel In fact, in web design, a site’s overarching flow and structure is referred to as

remark-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 weaving of components doesn’t happen magically; web design, like building design, takesmeticulous planning with a focus on organization and usability

inter-The navigation system, a key component of the architecture, can make or break a largecorporate website Imagine, for a moment, your company site as a large building All of thehallways, 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 tothe middle of the building (linked from another site to a deep page) You do not want abuilding with dead ends, broken elevators, and ambiguous or disingenuous signs Likewise,the site visitor does not want broken links, inconsistent buttons, and no indication ofwhere they are in the site hierarchy

These pitfalls are avoided by planning in advance You need to define three critical thingsfrom the get-go:

How much content you have to work with (at least to start)How those pieces of content relate to one anotherWhat kind of navigation structure needs to be implemented to best cover thatcontent

This chapter will cover those three points, plus best practices in building the website gation, from dictating global, local, and contextual menus, to drafting complementarynavigation components like breadcrumb trails, site maps, and more

navi-Organizing content

The Web comprises billions of pages of text, images, video, sound, and more.1The ization of that content is what makes it useful to the Internet’s denizens The creation ofhierarchies, 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

organ-a smorgan-all corner of thorgan-at greorgan-ater structure, organ-a microcosm of digitorgan-al orgorgan-anizorgan-ation From the verybeginning, 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 aproof-of-concept diagram outlining the website’s structure and where individual pieces of

68

1 A rough estimate from February 2007 places the number of publicly available web pagesaround 30 billion For more info, visit the Boutell.com FAQ at www.boutell.com/newfaq/misc/sizeofweb.html

content fall under different levels of importance This architectural prototype will ence the site design because it will be a major driving force in how the navigation iscrafted—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.

influ-Determining the big buckets

The first step in organizing a site is determining the site’s main sections These are the bigbuckets for the content, and usually map to a website’s primary navigation Deciding onthese 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 practiceshave been established People expect to see a contact link just as they expect thelogo in the header to return them to the homepage Breaking or ignoring these candeeply 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 ofthe new design Since the old design was (hopefully) in place long enough for itspositive and negative points to be recognized, most marketing managers willenthusiastically 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 evenhad this.”)

Specific project requirements: In your initial conversations with the marketing

department and others involved with the site creation, specific directives maycome to light—“We absolutely need to have a section devoted to ourpatented technology,” or, “I can see a whole separate section on this product.”

These explicit requirements offer a great starting point when you start mulling overthe 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 andimages, and designers know—in a very broad, nonscientific way—how all the cardswill 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 date changes made on the fly (“Sorry, we need to add one more section” is an oft-heardphrase.) Actual section labels can also become a focus of manic fixation as you, yourcoworkers, your client, the company marketing directors, C-level assistants, mail clerks,the FedEx delivery guy, and your cat obsess over the semantic difference between

accommo-“products” and “solutions.”

Using these guidelines, a first draft of the primary navigation should take little time Somesections will be obvious, and others will need fine-tuning down the road Iterations arealmost inevitable But identifying the large thematic buckets for content organization is afirst step in crafting the architecture of the corporate site

4

Visualizing the architecture

Once the main sections of the website are decided, it’s a matter of fleshing out the sections, minor categories, and even individual pages if the site is small enough to allowfor that level of focus At this stage, designers and information architects must criticallyevaluate the content that will be present on the site, how it will be organized, and the beststructure to support all of the information

sub-There are different tools for visualizing the architecture of a website Each presents thedata 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 asearch 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 mapapproaches the structure from a user-centric point of view, allowing you to think abouthow 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 anauthor-centric point of view Keeping these two versions side by side establishes a roughcheck-and-balance environment to ensure that your site organization makes sense fromdifferent 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 ning a new website (or a heavy-handed redesign), as it encourages free association andrapid exploration of themes

plan-Mind mapping promotes a tree-like view of information, where subsidiary sections branchout from the central anchor Hierarchical diagrams trace the organization of contentthrough linear paths and assume that visitors will choose a single path and drill down untilthey 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 secondrepresents a much deeper site with hundreds of pages of content (some nodes are hidden

in order to save space)

70

Mind mapping is simple, and works best when exercised without restraint The name ofthe game is expeditious refinement and iteration, not deliberate, prolonged decision-making over tiny details In fact, as the mind map unfolds, more pages and subnavigationitems will naturally reveal themselves from free-associative thinking There are manyresources dedicated to the art of mind mapping (including entire books), but here are afew tips common among the experts:

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

1.Always start in the center and work outward This is a more efficient use of spaceand avoids thinking in downward, linear movement A homepage is the naturalcenter 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 lar section Revise later

particu-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 thenavigation

Although mind maps are traditionally hand-drawn, there are several pieces of softwarethat aid in the process NovaMind, Mindjet, MindMapper, among others, all accomplishthe same basic goals FreeMind,2an open source alternative, works well for both basicsketches and later refinement

Hierarchical diagrams

While mind mapping is one means of defining the architecture, any site of substantial sizealso requires a top-down structure that displays the information in a hierarchy, where thetop represents the singular homepage and subsequent levels comprise more granularmenu 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 anexample

72

Figure 4-2 A hierarchical diagram shows the architecture from the top down.

2 http://freemind.sourceforge.net/wiki/index.php/Main_Page

A well-designed hierarchical model not only allows for a comprehensive view of the

infor-mation, but the shape of that information as well For instance, a flat architecture starts

with the homepage, but quickly fans out into many choices, with little content and fewpages housed within each section By contrast, a vertical architecture has few choicesstemming from the homepage, but each section extends deeply into its topic A well-balanced architecture looks like a shallow pyramid, with a distinct point cascading downinto thickening subsections

Neither structure is right or wrong, but each can present obstacles to users A flat zation may present too many choices from the get-go—on the homepage, visitors areunsure about where to click since the labels may not be distinct enough for a clear deci-sion They might click around and become frustrated with the lack of content within eachoption A vertical organization is the opposite Too few choices can present an equal level

organi-of confusion, and users may delve several clicks deep before realizing the path is not going

to lead them to the content they are after

How the hierarchy is laid out directly influences the navigation scheme through the site Ithelps the designer plan the primary, global, local, and contextual navigations

Collecting the content

If you’re lucky, you will have all the content for the site before the design phase is evenstarted But if you’re like 99 percent of web designers tackling 99 percent of their projects,content will be outdated, incomplete, or in permanent revision purgatory with a finalversion seemingly never to be delivered The project leader of the website—whetherdesigner, developer, or marketing leader—is responsible for keeping track of the site’stext

Monitoring the copy can help influence the architecture, since many writers and contenteditors can change the organization around as they draft the text Some pages might becombined, other pages might be divided, and some sections can be deleted altogether

The direction of corporate content is also influenced by directors and vice presidents

of the company, and they can easily decree entire swaths of a writer’s work unfit for lication

pub-Content might come from different authors in different formats; text, for instance, mightcome as Word docs, HTML files, instant messages, e-mail, and even hand-written notes

Inconsistencies can lead to mistakes and incorrect information being published To avoidthis, it’s best to rigorously police content, maintaining a small library of the prototype ver-sions and exercising stringent version control

It helps to create a file structure on the local or server hard drive that mimics the structure

of the website For instance, a website category might be “About Us”; inside the contentdirectory, there might be a sister folder called About Uscontaining text files for each HTMLpage Those text files should have descriptive file names like About – Company History[ver2.3 – 20061203].txt, which signifies version 2.3 of the company history page, cre-ated December 3, 2006 (Regular text files work best for web content because they reducethe content to plain ASCII characters, stripping out any formatting left over from Wordand e-mail programs, as shown in Figure 4-3.)

4

Figure 4-3 Managing content for a website requires explicit version control so that the correct

content appears in the final site

Inside the actual text file, keep the content organized At the top of each file, write thepage title and its metadata information, including description and keywords In addition,clearly indicate pullquotes, bold text, and whatever else is applicable to the HTML page

Navigation design

Once the architecture of the corporate website is fleshed out, the navigational structuresnaturally follow It should be obvious from the preparative work how menus are going tocascade, and what is going to comprise the global, local, and contextual links

Global links are generally built from the big buckets Because the global navigation is sistent across the domain, major sections are accessible from any point in the site Localmenus are relevant to only the section they’re found in For instance, a local menu insidethe About Usarea might include Company History,Principals,Stock Information, and Contact

per-Us These links would not be found in the Productssection On a more granular level,contextual links are those appearing in actual content—often embedded and not alwaysobvious

While many usability experts argue that a visitor should not have to dedicate more thanthree clicks to getting what they want, there is no hard-and-fast rule capping the number

of navigation levels There may be one global menu, and two or three levels of localmenus drilling deeper into the content Ultimately, the architecture should balancebetween deep and flat Waves of decreasingly substantial navigation can lead users intolabyrinths of content, while too many choices on a global level can be overwhelming.There is quite a bit of research on the topic of “breadth vs depth.” There is no rightanswer Everyone seems to vaguely agree that creating a deep structure is a bad way tobuild a website, so avoiding narrow, linear paths of navigation is preferable

74

Many information architects argue that the number of top-level navigation links shouldnot exceed seven, referencing the widely read article “The Magical Number Seven, Plus orMinus Two,” by George A Miller.3This article makes a case that people can remember up

to seven (plus or minus two) chunks of useful, relevant information However, just as manyprofessionals debunk this article as support it, pointing to later studies claiming that usersactually find their information faster when initially presented with a broad selection of cat-egories, rather than a hierarchy.4

On top of all this, keep in mind that a website’s native navigation is a complement to theuser agent’s functionality In other words, browsers and other devices are already verygood at moving through a website The Backand Forwardbuttons easily skip through lin-ear sets of pages, the built-in history feature recalls previously visited pages, and the loca-tion field itself enables people to teleport to any location in the domain so long as theyknow the URL

Navigation placement

Since the invention of hyperlinks, web designers have argued over the design advantagesand pitfalls of different navigation placement Some favor navigation along the top of thepage, some favor navigation within sidebars, and still others place redundant links inthe footer There are many places on your page to create groups of links, as shown inFigure 4-4

Figure 4-4 There are many possibilities for navigation placement on a web page.

4

3 www.musanim.com/miller1956

4 Kent L Norman, “The Psychology of Menu Selection: Designing Cognitive Control at the

Based on the complexity of most business websites, a combination of navigation ing 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

position-on all pages, visitors can leap from sectiposition-on to sectiposition-on without having to backtrack throughpreviously visited pages This perpetual menu usually exists in the main header, separated

by both space and design, but it can also exist peacefully in the sidebar if a horizontal out does not provide enough real estate

lay-A secondary navigation can also appear in the sidebar or in the header as long as it is ally clear that it is subsidiary to the main navigation (while still being relevant to the visi-tor’s experience) Secondary links are local, meaning that they only appear in the sectionwhere they are relevant, but their design and placement should be consistent betweensections The visual dynamic between the primary, secondary, and lower navigation sys-tems is a considerable design challenge The hierarchy of links must be explicitly laid out

visu-in the visual design Consider Figure 4-5, visu-in which a domvisu-inant global menu spans theheader, and each link opens a drop-down menu When a visitor navigates to a subsection,they are presented with a local navigation on the left—clearly subsidiary to the topmenu—and a set of contextual links within the main content area The relationshipbetween parent sections and child subsections is crystal clear

The position of the navigation elements in Figures 4-4 and 4-5 is not some mystical struct decreed by the web gods, prophetically chiseled into an ancient tablet for all design-ers to follow Many websites place the global menu in the left column, or rely heavily on

con-drop-downs to present local options The point is not the physical location of the menus Rather, the graphic design of the navigation system determines how successfully visitors

move around the site A muddy visual hierarchy will dramatically decrease usability

Figure 4-5 Omniture uses a very well-designed navigation to clearly indicate which navigations are

global, local, or contextual

76

Best practices

Because the range of possibilities in designing menu structures is so wide, less experienceddesigners often act like kids in the candy store, grabbing icons, rollovers, drop-downs, andanimations to mix and hack together before stapling a blinking, honking, poorly labelednavigation to the top of every page In almost all cases, the exact opposite approach worksbetter Exercising design and technical restraint can produce a far better navigation expe-rience for visitors

The following guidelines are grounded in good usability and accessibility; breaking any one

of them can introduce significant problems for visitors They are particularly relevant tocorporate sites, where the end goal is to always serve content about the company withoutmaking the user think too hard about where to find the information The best navigationstructures are virtually invisible

Design and development no-nos

Since there are no rules governing or standardizing how technology and design are used

on the Web, programmers, graphic artists, and marketing directors often get funky in thepresentation of content, especially when it comes to creatively managing navigation TheInternet highways are riddled with usability potholes where web designers focus more onhow they want to see their website than how their audience needs to see it

Over the years, designers and information architects have become more savvy about howusers actually conduct themselves on websites, and which design tactics and navigationschemes present significant usability issues Jakob Nielsen pioneered these usability studies

in the 1990s.5Many of his findings were obvious then, and are even more glaring now

There are just some things that consistently frustrate users, no matter how badly they wantthe information

Don’t break the Back button It has been demonstrated in study after study that the

browser’s Backbutton is one of the most-used tools for navigating the Web No matterhow intuitive the menu system and architecture, people will always fall back on what theyknow first, and the Back button is the simplest way to backtrack out of a dead end

Opening links in new browser windows (see next item) or using Flash for the entire site will render the browser’s button useless

web-Don’t open new browser windows There are very few instances in which launching a new

browser window serves a functional purpose Never open new windows for external links

If there is a legitimate concern that people will leave the site, there’s not much to be done

to ease that fear (Not providing the link at all is selfish development practice, and is notgoing to hinder users from leaving your site to fire up Google.) If your company wantspeople to return to its site, it’s far better to have the links open in the same window andlet users use their Backbutton

4

5 Jakob has published several prominent books, including Designing Web Usability: The Practice of

Simplicity and Prioritizing Web Usability, and continues to write on his long-time site, useit.com

New windows are useful, however, when leaving the page will definitely interrupt a criticalexperience For instance, if a person is filling out a complicated online form, they mightwant to click a small Helplink to get more information about a specific field If they clickaway from the page, their work could be lost If the Helplink opens a new browser win-dow, it is easily referenced as a separate page.

Avoid form-based drop-downs Using a form-based drop-down presents several usability

and accessibility problems:

The navigation choices are hidden, slowing the process of moving around a site Operating a drop-down requires fine motor skills; by providing large, easily tar-geted buttons, people are less likely to select the wrong link

These drop-downs are often tied to JavaScript to work correctly, which may be abled or unavailable

dis-Form-based drop-downs are not standard, obvious menu constructs, so visitorsmight skip right past them Drop-downs are often used for contact forms and otherareas not generally associated with navigation

Never use server-side image maps From a technical standpoint, this might be the biggest

no-no Server-side image maps present significant accessibility hindrances by effectivelyhiding links behind code, making them completely inaccessible to screen readers (Theseare not to be confused with client-side image maps, which use standard, compliant HTML

to accomplish a similar effect, and which do not have any immediate accessibilitychallenges.)

Avoid mystery meat navigation In short, this means designing obtuse visual menus that

have no intuitive meaning (see Figure 4-6) For instance, imagine a set of links representedonly by icons—a house, a T-bone steak, a wrench, and a flame No one except the designerhas any clue what the heck they mean Equally bad are menus that only reveal themselves

if rolled over (The phrase “mystery meat navigation,” which describes this kind of design,was made famous on Web Pages That Suck,6a site hosting a collection of bad web designpractices.)

Figure 4-6 This navigation means nothing to the

visitor While some vague meaning could be gleaned, the menu is difficult to use without explicit labels

78

6 www.websitesthatsuck.com

Older versions of Microsoft Internet Explorer do not recognize key CSS attributes sary to create drop-downs in pure CSS, so the menus depend on JavaScript to function.7Aswith anything reliant on client-side scripting, the developer has to hope that JavaScript isnot disabled, otherwise the functionality is crippled.8

neces-In addition, drop-down navigation presents difficulty for those with impaired movement,especially if the drop-downs contain nested menus that require careful mouse control toreveal Since the appearance of elements relies on the position of the mouse and notactual definitive clicks, anyone with tremors, arthritis, or other motor control impedanceswill have a difficult time with drop-downs

There is no perfect, magical cure for drop-downs Developers can, however, take severalmeasures to ensure that their audience will have as little trouble as possible using them:

Use a drop-down script that adheres to web standards: And luckily, there is no

rea-son to write one of your own, because Patrick Griffiths and Dan Webb have written

an elegant solution called Suckerfish Dropdowns.9This uses nested list elementsstyled with CSS JavaScript is only needed for versions of Internet Explorer 6 andearlier; other browsers use pure CSS to activate the drop-down Also, because all ofthe menu links are written in plain HTML, they are easily navigable by screen read-ers, cell phones, and other devices where CSS is absent

Offer a large hit area: Make root and subsidiary elements as large as possible for

mouse movements Offer an obvious rollover state so there is no question of thelocation of the user’s pointer

Add tabindex attributes to the top set of links: Visitors using a keyboard will be

able to quickly flip through the global navigation (Make sure these links actually gosomewhere and do not serve as placeholders for the subnav.)

Provide redundant local navigation within the section: While drop-downs enable

designers to reveal the local navigation inline with the global navigation, it isimportant to reiterate the local links within the section itself This permits visitorswith JavaScript disabled to move around the site with just as much fluidity

1.It helps users understand where they are in the structure of the site.

2.It allows them to jump backward to a previous section

A study conducted at Wichita State University showed that the use of breadcrumb trails,when available, constituted 6 percent of users’ total navigation activity.10(It’s also interest-ing to note that 40 percent of the test subjects used breadcrumb trails five or more timesduring the course of the test.) While the Backbutton garnered more attention (31 percent

of all navigation activity), the study proved that when looking to retrace their steps, ple will employ breadcrumb links if they are available

peo-Breadcrumbs are typically displayed at the top of the page (near the header) as a tal hierarchy, like so:

horizon-Products ➤Cars ➤Nissan ➤Altima ➤2006

In addition, there are two different types of breadcrumbs:

Path breadcrumbs: These dynamically display the links the user chose to arrive at

the page, mimicking the browser’s history-keeping and Backbutton functionality

Hierarchical breadcrumbs: As in the example just shown, these illustrate the actual

structure of the site and are independent of how the user actually arrived on thepage This approach is far more common and usable, since it gives visitors a sense

of where they are in a site (Ideally, a hierarchical breadcrumb would mimic theURL structure—e.g., www.example.com/products/cars/nissan/altima/2006/.)

If a corporate website has more than three or four levels of navigation, breadcrumbs willprobably enhance the usability of the site As increasingly granular levels of categorizationare clicked through, it becomes less feasible to show every full level of navigation on apage, and breadcrumbs become an efficient, contextual supplement that is easy for visi-tors to understand and exploit

Flash-based navigation

Skim any design forum and you’ll quickly find heated arguments over the viability of Flash

as a website delivery platform While no one disputes its visual wow factor, the technologyintroduces numerous usability problems, not the least of which is the breaking of the Back

button, the inability to bookmark individual pages, and long loading times for graphicallyintense interfaces Many corporate websites are built entirely in Flash, and all of these suf-fer from the same problems

80

10 Bonnie Lida Rogers and Barbara Chaparro, “Breadcrumb Navigation: Further Investigation ofUsage,” Usability News 5.2, 2003 (http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm)

Many sites exercise a hybrid model of HTML content and Flash-based navigation This viates the first two problems just mentioned, but remains accessibly inferior to traditionalHTML links for several reasons:

alle-Any content in Flash is locked behind the plug-in and can only be “seen” visually,shutting out screen reading devices and browsers lacking the plug-in These useragents rely on the alternative content provided in the HTML

Tabbing through a menu built in Flash only works well if the designer specificallytests and optimizes for browsers and screen readers There may be significantaccessibility issues if visitors can only activate hyperlinks by using a mouse Adobehas published several documents describing best practices in ensuring better acces-sibility in this area.11

Users cannot right-click the menu Instead of the browser’s standard contextualmenu (which allows users to load links in new windows, check link properties, andmuch more), visitors are presented with Flash’s proprietary menu (as shown inFigure 4-7), which is completely useless

If the menu uses any complex graphics or animations, it adds to the page’s overallweight Even though most Flash developers are considerate enough to provide pre-loading animations to tell visitors how long they have to wait, if the load time takeslonger than 5 to 10 seconds, even the most patient web user will let loose a string

of unpleasantries

Figure 4-7 This site uses Flash-powered navigation with HTML-based content Unfortunately, the

contextual menu (accessed by right-clicking) is useless to the audience

4