List of Figures | Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)

< Day Day Up >

Introduction

Figure I.1: www.WebAdTech.com (Dec. 2000)-No page identification; poorly written error message hard to spot amid ads; unhelpful website search box.
Figure I.2: www.aya.yale.edu (June 2002)-Found items all the same.
Figure I.3: www.cio-dpi.gc.ca (Dec. 2000)-Cryptic site map.
Figure I.4: slacvm.slac. stanford .edu (Dec. 1991)-Home page of first U.S. website, viewed through the NeXT Web browser, which displayed only text. Links to two databases- a directory of Stanford Linear Accelerator employees and an archive of high-energy physics preprint papers. (To see this page and more of the first U.S. website, visit www.slac.stanford.edu .)
DILBERT reprinted by permission of United Feature Syndicate, Inc.
The 5th Wave, www.the5thwave.com.

Chapter 1: Content Bloopers

Hilary B. Pric. Reprinted with Special Permission of King Features Syndicate.
Figure 1.1: www.PWCGlobal.com (Jan. 2002)-Home page is vague about what this company does.
Figure 1.2: www.PWC.com (Jan. 2002)-Home page doesn't fully identify the company, much less its business. Also has a Web address that many would expect to point to PriceWaterhouseCoopers.
Figure 1.3: www.Acer.com (Feb. 2002)-Home page provides few clues about what Acer does.
Figure 1.4: www.Earthwatch.org (Jan. 2002)-Home page clearly and succinctly describes what Earthwatch does.
Figure 1.5: www.37Signals.com (Jan. 2002)-Home page was purposely unconventional but in doing so provided no clue what the company does. Hint- It designs websites . The company's revised home page is shown in Figure 1.6 in Avoiding the Blooper.
Figure 1.6: www.37Signals.com (June 2002)-Revised home page clearly describes what 37 Signals does.
Figure 1.7: www.zBuyer.com (Feb. 2002)-(a, b) Arbitrary, subjective categories. C- "Michael Lewis" isn't even a product category.
Figure 1.8: www.usps.gov (June 2002)- A- On the USPS home page, the top-level categories seem arbitrary. B- The pages for each category show that the categories overlap.
Figure 1.9: www.NWA.com (Feb. 2002)-Two items on this list are not travel specials; they are announcements about new planes.
Figure 1.10: www.Walmart.com (Jan. 2002)-Main page for category doesn't list all products in category. A- Digital Cameras category page lists 11 cameras . B- All Digital Cameras page lists 17 cameras.
Figure 1.11: www.Yale.edu (June 2002)-Categories at Yale University's site are clear, nonarbitrary, and sensible .
Figure 1.12: www.Pitsco-LEGOdacta.com (Feb. 2002)-The names and descriptions of two product catalogs were apparently written in isolation and don't help site visitors choose between them.
Figure 1.13: www.Netscape.com (June 2002)-The names and descriptions of three software download packages are not only unhelpful for distinguishing between them but also misleading.
Figure 1.14: www.SharperImage.com (Sept. 2002)-Products in a family are easy to distinguish from their pictures and descriptions.
Figure 1.15: www.Macromedia.com (June 2002)-Site sections are well described and easy to distinguish.
FOXTROT 2002 Bill Amend. Reprinted with permission of UNIVERSAL PRESS SYNDICATE. All rights reserved.
Figure 1.16: www.United.com (Mar. 2002)- A- Home page says fares for London and Paris start at $499 and $594, respectively. B- Inner page gives lower prices for same destinations.
Figure 1.17: www.Earthwatch.org (Jan. 2002)-Registration page is ambiguous about whether registrants' data will be shared with other organizations.
Figure 1.18: www.Acer.com (Dec. 2001). A- Main catalog lists one film scanner. B- Acer America catalog lists two.
Figure 1.19: www.Acer.com (Dec. 2001)- A- Main catalog's spec sheet for 2720S doesn't mention Mac. B- Acer America's 2720S product page lists "Mac" as an available driver.
Figure 1.20: www.Acer.com (Dec. 2001)-Acer America's 2740S spec sheet disagrees with itself about the scanner's Macintosh compatibility.
Zits Partnership. Reprinted with Special Permission of King Features Syndicate.
Figure 1.21: www.RussellStover.com (Feb. 2001)-Home page says site will be ready "Fall 2000."
Figure 1.22: www.CalShakes.org (Sept. 2002)-On September 16, The Seagull is still marked as "now playing" even though it ended on September 1 and another play started 5 days ago.
Figure 1.23: www.Enron.com (Mar. 2002)-Months after the Enron scandal became public and Enron filed bankruptcy and laid off most of its employees, its Enron Energy Services page continued to describe it as "one of the world's leading" power companies.
Figure 1.24: www.MKP.com (Apr. 2002)-Attempts to purchase a book warned that the site's digital certificate for secure transactions had expired .
Figure 1.25: www.Enron.com (Mar. 2002)-Enron's home page was updated when the scandal broke and Enron filed bankruptcy and laid off most of its employees.
Figure 1.26: www.Slims-SF.com (Oct. 2001)-Festival site doesn't indicate the festival's location in Golden Gate park.
Figure 1.27: www.ValcoElectronics.com (Jan. 2002)-Product detail page has no more information about LGW40 than catalog page.
Figure 1.28: www.United.com (Mar. 2002)-While you are trying to book a flight, the site distracts you with enticing links to useless marketing statements.
Figure 1.29: www.siwafer.com (Mar. 2002)-Announcement contains filler text.
Figure 1.30: www.ThePattySite.com (Jan. 2002)-Legal disclaimer is fake Latin filler.
Figure 1.31: www.NHASP.org (Jan. 2002)-Job Vacancies link yields blank page.
Figure 1.32: A- siwafer.com (Mar. 2002); B- Stanford.edu About Continuing Studies Program page (Sep. 2001)-Pages of nothing.
Used by permission of Jennifer Berman.

Chapter 2: Task-Support Bloopers

Figure 2.1: www.Microsoft.com (Feb. 2001)-Asks for same information twice. A- User specifies PowerPoint as subject of question. B- Menu on next page doesn't reflect choice from previous page.
Figure 2.2: www.ProxyVote.com (Oct. 2001)-Asks for same information twice. A- User provides 12-digit control number. B- New user registration form (lnvestorDelivery.com) asks for same 12-digit control number.
Figure 2.3: www.Southwest.com (Sept. 2002)-Forgets what user told it. A- User specifies afternoon departure , evening return. B- Results page set departure and return to "Anytime" and lists flights that reflect that.
Figure 2.4: www.CalShakes.org (July 2002)-Ticket order form is reset when revisited to change the order.
Figure 2.5: www.UBid.com (Dec. 2001)-Clears most data fields on any page refresh. A- Data in form. B- Form after browser window resized and page redisplays.
Figure 2.6: www.EarthLink.net (Jan. 2002)-Activating or deactivating a Vacation Auto-reply message requires logging in three times.
Figure 2.7: www.House.gov (Nov 2001)- A- "Write Your Representative" page requires state and zip code. B- Error message indicating that state is required.
Figure 2.8: www.Earthlink.net (May 2002)-Asking for more data than needed. A- Form requires full phone number. B- Error message when only area code given. Area code should be enough.
Figure 2.9: www.Agilent.com -Demanding more data than needed. A- Comment form (Jan. 2002) requires country needlessly. B- Customer registration form (Feb. 2001) requires all fields, including Fax and Address 2.
Figure 2.10: www. Continental .com (Sept. 2001)-When destination city is given as "Detroit," site makes users choose between "all airports" and the one Detroit airport that Continental flies to.
Figure 2.11: www.zBuyer.com (Feb 2002)-Two Search functions to choose from, but the default menu value of the second one makes it the same as the first, so there is no need for two.
Figure 2.12: www.Sibelius.com (Jan. 2002)-Cryptic download locations, such as "UK 1" and "UK 2" make choosing between them impossible .
Figure 2.13: www.ProxyVote.com (Oct. 2001)-Choice is incomprehensible to most ProxyVote users.
Figure 2.14: Client website (Nov. 2000)-Users must select a language to proceed, even though more than 90% of users will choose English, and even though the Spanish and Portuguese sites are "under construction." The site should just go to the English pages, with links from there to the Spanish and Portuguese sites.
Figure 2.15: www.AA.com (May 2002)- A- Reservation form, specifying "NYC" as destination. B- User is told the destination is ambiguous and is asked to choose a destination but is offered one option that is the same as already given.
Figure 2.16: www.eDesignCorp.com (Dec. 2001)-Asks visitors to identify their browser, even though the site could determine this itself by "browser sniffing."
Figure 2.17: www.Sibelius.com (Jan 2002)-Site " knows " what computer and operating system visitor is using. A- When accessed from a Mac, default platform is correct. B- The same when accessed from a Windows PC.
Figure 2.18: www.Netscape.com (June 2002)-Netscape's download page "sniffs" users' browsers.
Figure 2.19: www.NetWorldMap.com (June 2002)-Can usually correctly guess a Web visitor's approximate location from the IP address.
Figure 2.20: www.UNEX.UCLA.edu (Feb. 2002)-The two available options aren't mutually exclusive or exhaustive. Some users' circumstances don't fit either choice.
Figure 2.21: www.pitsco-lego-dacta.com (June 2002)- A- Catalog order form, with State/Province menu. B- Menu omits District of Columbia (Washington, D.C.).
Figure 2.22: www.pldstore.com (June 2002)-The customer registration form at the PLD Store site has a state menu that includes the District of Columbia.
Figure 2.23: A- www.Continental.com (Sept. 2001); B- www.NWA.com (Sept. 2001)-Airline websites that don't know Detroit DTW is Ann Arbor's nearest major airport.
Figure 2.24: AA.com (Sept. 2001)-( A through C ) Can't "choose by price" if destination is Ann Arbor, but can "choose by schedule." D- Can "choose by price" if destination is Detroit.
Figure 2.25: www.Greyhound.com (Jan. 2002)- A- Ask to travel from Fremont to Torrance (both in California). B- Greyhound has no stations in those towns, so site substitutes alphabetically by nearest towns that have bus stations.
Figure 2.26: www.Greyhound.com (Jan. 2002)-Ticket Center on home page results in even more ridiculous substitutions.
Figure 2.27: A- Weather.com (May 2002); B- Weather.Yahoo.com (May 2002)-Don't know about New York City.
Figure 2.28: www.United.com (June 2002)-Knows that Detroit DTW serves as Ann Arbor's airport.
Figure 2.29: www.EarthLink (July 2001)-EarthLink lets customers fill out and submit the order-status form before telling them that its order status isn't available right now.
Figure 2.30: Correction of blooper at EarthLink.net -First DSL Order Status page immediately tells users that order status is unavailable.
Reprinted with Special Permission of King Features Syndicate.
Figure 2.31: www.Citibank.com (July 2002)-Start at Payee List maintenance page.
Figure 2.32: www.Citibank.com (July 2002)-Can either type payee name or select from list. (Page has same title as previous page.)
Figure 2.33: www.Citibank.com (July 2002)-To select from Merchant Directory, have to indicate which part of list to show. (Page still has same title.)
Figure 2.34: www.Citibank.com (July 2002)-Choose Merchant. Three merchants have the same name.
Figure 2.35: www.Citibank.com (July 2002)-Merchant details. Still can't be sure this is the right one.
Figure 2.36: www.Citibank.com (July 2002)-Merchant details again, with mysteriously editable name. Requires customer account number at merchant.
Figure 2.37: www.Citibank.com (July 2002)-Error message- invalid account number (erroneous as it turns out).
Figure 2.38: www.Citibank.com (July 2002)-Error message that account number is invalid (erroneous as it turns out).
Figure 2.39: www.Citibank.com (July 2002)-Clicking on Back from account number form takes user back several steps, to first payee specification page.

Chapter 3: Navigation Bloopers

Copyright Mark Parisi.
Figure 3.1: www.Acer.com (Dec. 2001)-Site reflects that Acer's scanner maker is Benq. A- Acer's Product page. B- Benq's Scanner page.
Figure 3.2: www.zBuyer.com (Feb. 2002)-Site shows organization chart. A- zBuyer's product categories include "Outlet" and "Target." B- Outlet categories are very similar to zBuyer's. ( c ) Target's categories overlap with zBuyer's.
Figure 3.3: www.SGI.com (Jan. 2002)-Customer service page has offerings that seem to compete with each other.
Figure 3.4: www.sfgov.org/juryduty (Feb. 2002)-Three navigation bars- two are duplicates, and one is for the parent website but looks like text-only links for this site.
Figure 3.5: www.Rational.com (Feb. 2002)-Multiple competing navigation schemes- left navigation bar, two top navigation bars, top left menus , and bottom menu.
Figure 3.6: www.iFilm.com (Jan. 2002)- A- Three navigation bars, two of them shown as tabs- tabs within tabs. B- Clicking on top tabs yields another pseudo-tab.
Figure 3.7: A- Monterey.com (Sept 2002); B- Yale.edu (Sept 2002)-Single main navigation scheme separated from site logistics.
Figure 3.8: www.Sun.com (Sept. 2002)-A lot of content behind a simple navigation scheme.
Figure 3.9: www.United.com (Sept. 2002)-Many links, all organized in a single navigation scheme.
Figure 3.10: www.uBid.com (Dec. 2001)-On the site's Contact page, the two Customer Care links send email to the same address.
Figure 3.11: www.Eudora.com (July 2001)-Duplicate links of several types.
Figure 3.12: www.Connectix.com (Jan. 2002)-Two Home links go to different pages. Upper one goes to Support home; lower one goes to Answer Path home.
Figure 3.13: www.WisconSUN.org (Jan. 2002)-Excessive duplication- three copies of every link. Yellow headings are not links.
Figure 3.14: www.Rational.com (Feb. 2002)-Needless link duplication- If links are on a navigation bar, they should not be duplicated in the content area.
Figure 3.15: Intranet Web application-Original page for executable images (xlmages) category displays links to subcomponents of the category.
Figure 3.16: Intranet Web aplication-Redesigned category page for xlmages- summarizes state of xlmages.
Figure 3.17: www.Microsoft.com (Jan. 2001)-Duplicate and similar links in center of yellow area and bulleted list below.
>2002 The New Yorker Collection from cartoonbank.com. All Rights Reserved.
Figure 3.18: www.Monterey.com (Jan. 2002)-See answers in Figure 3.19.
Figure 3.19: www.Monterey.com (Jan. 2002)-Answers to exercise.
Figure 3.20: Correction of blooper at WisconSUN.org -Excessive duplication reduced, links look like links and are on headings.
Figure 3.21: eng.ufl.edu (May 2002)-Textual duplicate links at top of all pages on the site. Supports visitors who use text-only browsers or have graphics disabled on their browser.
Figure 3.22: Link duplication on home page. A- www.Safeway.com (Sept. 2002)-Minimal duplication. B- www.CalPerfs.Berkeley.edu (Mar. 2002)-Highlighting everything.
Figure 3.23: www.Monterey.com (Oct. 2001)- A- Monterey.com home page button for getting Monterey weather information. B- The button goes to the home page of News46, a news website offering weather information.
2002 The New Yorker Collection from cartoonbank.com. All Rights Reserved.
Figure 3.24: www.IGC.org (May 2002)- A- IGC.org's home page has a "Donate" link. B- Clicking the "Donate" link displays the home page of GiveForChange.org, a separate organization.
Figure 3.25: www.BarnesAndNoble.com (Dec. 2001)- A- Computer Books page has "Best of 2001" link. B- That link displays best books in all topics, not just computer books.
Figure 3.26: www.IEEE.org (Dec. 2001)- A- IEEE's renewal page offers option to register for online account. B- That link goes to generic Web Account page offering same option.
Figure 3.27: www.BarnesAndNoble.com (Dec. 2001)- A- Computer Books page has "New Releases" link. B- That link correctly displays newly released computer books.
Figure 3.28: www.CharityFocus.org (Sept. 2002)- A- CharityFocus' Donate page has a "Donate Now" link. B- Clicking "Donate Now" displays the CharityFocus page at NetworkForGood.org, a separate organization.
Figure 3.29: www.ValcoElectronics.com (Jan. 2002)-Catalog page. Current page not indicated on navigation bar or with page title. Users can't see where they are.
Figure 3.30: www.RealEstate.com (Sept. 2002)-Agent Search page has banner ad instead of title.
Figure 3.31: www.DMV.ca.gov (Jan. 2002)-Catalog page. Current page not indicated on navigation bar or with page title. Users can't see where they are.
Figure 3.32: www.RealEstate.com (Sept. 2002)-Appraiser Search page has title.
Figure 3.33: www.Pentagram.com (Oct. 2002)-Current page is marked on navigation bar. No separate page title.
Figure 3.34: www.acm.org/chi2002 (Feb. 2002)-Navigation bar marked plus prominent page title.
Figure 3.35: Navigation bar has active link to this page- A- ComputerWorld.com (Jan. 2002); B- MSDN.Microsoft.com (Feb. 2002). No useful purpose and potentially disorienting.
Figure 3.36: www.NSF.org (Sept. 2002)-Active link to home on home, which could be mistaken for separate splash page.
Figure 3.37: www.Enron.com (Mar. 2002)-Wholesale Services home page has active link to this page as well as to Enron.com home.
Copyright 2002 Casey Shaw/USA Weekend magazine used with permission
Figure 3.38: www.iFilm.com (Jan. 2002)-Tab identifying this page as the "Credits" page is also a link to the "Credits" page, that is, here.
Figure 3.39: www.Amazon.com (Feb. 2002)-"Contact Us" link at the bottom of page returns to this page.
Figure 3.40: www.RCN.com (Nov. 2001)- A- Papers shown in two frames - table of contents in left frame, document content in right frame. B- Clicking on a document link in the right frame redisplays the document in the right frame, splitting the right frame into two frames. ( c, d ) Continuing to click on a document link in the rightmost frame causes an infinite sequence.
Figure 3.41: www.Google.com (Sept. 2002)-Navigation bar item for current page (marked) is not a link.
Figure 3.42: www.FeldenkraisGuild.com (Jan. 2002)-No navigation links provided when search finds nothing.
Figure 3.43: www.Sibelius.com (Jan. 2002)-Error message displayed when software download fails. No navigation links on page; just a cryptic message.
Figure 3.44: www.RussellStover.com (Feb. 2001)-Thank You message displayed after a user signed up for email updates. No navigation links on page.
Figure 3.45: www.MKP.com (Apr. 2002)-Blank page displayed after an order is canceled . What now?
Figure 3.46: Correction of blooper at www.MKP.com -Cancellation acknowledgment page is no longer mostly blank and includes variant of MKP's navigation bar at bottom.

Chapter 4: Form Bloopers

Figure 4.1: Client Web application (Apr. 2002)-"Report Type" field requires users to type, not choose, T or E. Case matters- typing t or e provokes an error message.
Figure 4.2: www.USPS.gov (May 2002)-Zip code lookup form. State field requires typing, not choosing. Do you know the abbreviation for, say, Arkansas?
Figure 4.3: www.USPS.gov (Feb. 2002)-State abbreviation list (displayed by clicking on link in Figure 4.2). Lists state abbreviations, but doesn't allow users to choose one.
Figure 4.4: www.United.com (Mar. 2002)-A structured (two-menu) date control and a simple date menu.
Figure 4.5: www.realestate.com (Sept. 2002)-Find Agent form has State menu. Users may not know abbreviations for states they don't live in.
Figure 4.6: www.NWA.com (Mar. 2002)-A date text field with an optional pop-up date chooser.
Figure 4.7: www.Microsoft.com (Feb. 2001)-Error message displayed after form submitted with invalid phone number.
Figure 4.8: Client Web application (Apr. 2002)-Accepts only dates in the form- "14-jan-2002," which won't fit without sideward scrolling.
Figure 4.9: www.United.com (Mar. 2002)-Rejects Frequent Flier numbers that include spaces, the format United uses elsewhere.
Figure 4.10: www.EDD.CA.gov (July 2002)-"Employer" data field in unemployment application won't accept nonalphanumeric characters , making it impossible to type company names like AT&T and Excite@Home.
Figure 4.11: www.Sony.com (Dec. 2001)-Won't accept product model number with spaces, which is how it is shown in the product's documentation.
Figure 4.12: www.Sony.com (Dec. 2001)-It still doesn't like the number and provides a list for choosing one.
Figure 4.13: www.Sony.com (Dec. 2001)-The list has the number, with no spaces or hyphens.
Figure 4.14: www.Intel.com (Mar. 2002)-URL field accepts a maximum of 35 characters, so it won't accept most of the URLs for this site. Even their own sample URL won't fit!
Figure 4.15: www.NWA.com (Mar. 2002)-Date field with a pattern for valid dates.
Figure 4.16: www.BankOfAmerica.com (Mar. 2002)-Segments date, social security number, and phone number into subfields.
Figure 4.17: www.Slip.net (July 2001)-Error message displayed when user submits form without changing a menu from its default value.
Figure 4.18: www.LLBean.com (Nov. 2000)- Radiobuttons with no valid initial value, from two different forms at the site. In both cases, not having a default is justifiable, perhaps even required.
Figure 4.19: www.Agilent.com (Jan. 2002)-Website comment form has radiobuttons with no default value. The "No" response should be the default in this case.
Figure 4.20: Contrasting menu designs. A- Emerging Web menu design. B- Traditional menu design.
Figure 4.21: www.StanfordBookstore.com (Sept. 2002)-Menu that should have a default value but doesn't. A- Shopping cart page includes an easily missed menu with a long confusing description and no valid initial value. B- Error message displayed if user clicks Checkout without setting "Please choose" menu to "yes" or "no."
Figure 4.22: www.LLBean.com (Nov. 2000)-Menu with no valid initial value. A- The menu in step 2 is initialized to a label " Color /Style," not to a valid value. B- This is true even though the product comes in only one color. (c) If customers try to proceed without setting the Color/Style menu, they get an error message.
Figure 4.23: www.LLBean.com (Feb. 2002)- A- The second menu is labeled so vaguely, users have to open it B- to see that it is asking the applicant 's type of residence.
Figure 4.24: www.Agilent.com (Feb. 2001)-Menus with no initial value and vague labels. Do the three menus represent three products, with product options on the menus, or do the they represent product categories, with products on the menus?
Figure 4.25: www.REI.com (Nov. 2000).-Menu with default. Contrast with L.L. Bean tent example in Figure 4.23.
Figure 4.26: www.LLBean.com (Feb. 2002)-Radiobuttons with default.
Figure 4.27: www.UPAssoc.org (July 2001)-Radiobuttons with default "none" value.
Figure 4.28: Improved design for StanfordBookstore.com -Label drastically shortened . Substitution choice presented as Checkbox is defaulted to accept substitutions.
Figure 4.29: www.StanfordBookstore.com (Sept. 2002)-State menu defaults to Alabama, for a customer of the Stanford University Bookstore, which is in California.
Figure 4.30: www.MKP.com (June 2002)-Default search method is "By Author," which is not what most users usually want.
Figure 4.31: www.JacksonAndPerkins.com (Sept. 2002)-Option to receive email "spam" is checked by default.
Figure 4.32: www.Evite.com (Sept. 2002)-Default is to send user "spam" email.
Figure 4.33: www.ThisDayInMusic.com (Mar. 2001)-Default for the date is "invalid."
Figure 4.34: www.ACSCSN.org (Sept. 2002)-Default lets users opt in, not out.
Figure 4.35: www.IEEE.org (Oct. 2002)-No text input focus is set in the User ID field when this page appears.
Figure 4.36: A- www.TowerRecords.com (Sept. 2002); B- www.Ford.com (Sept. 2002)-No text input focus is set in the Search field when this page appears. Users have to click in the field before starting to type.
Figure 4.37: www.google.com (Sept. 2002)-Home page sets text input focus, so users can just start typing.
Figure 4.38: www.IOBA.org (Feb. 2002)-The labels appear at left edge of browser window, whereas the text fields appear at the right edge. If the browser window is large, the gap is so large it's hard to see which label goes with which field.
Figure 4.39: www.ITN.net (Feb. 2002)-The Search questions appear at left, while the Search buttons appear at the right. Users won't immediately associate the questions with their buttons .
Figure 4.40: www.LongIslandUniversityedu (Mar. 2002)-Labels are closer to the next button than to the one they label.
Reproduced with permission. Copyright 2002 The Christian Science Monitor (www.csmonitor.com). All rights reserved.
Figure 4.41: www.PLDStore.com (Feb. 2002)-Inconsistent label alignment. A- Customer registration page. B- Order Catalog page.
Figure 4.42: www.TechReview.com (Jan. 2002)-Left- and right-aligned form labels on same page.
Figure 4.43: www.LLBean.com (Oct. 2002)-Label baselines are not aligned with baselines of text in the fields.
Figure 4.44: www.Erlbaum.com (Feb. 2002)-Labels are bottom aligned with data fields and data fields aren't aligned with each other, resulting in an amateurish-looking form.
Figure 4.45: www.IOBA.org (Feb. 2002)-Labels on the member-search form, unlike the new-member registration form, are close to their type-in fields.
Figure 4.46: Correction of blooper at www.ITN.net (Figure 4.39)-Added visual connection between labels and buttons.
Figure 4.47: Correction of blooper at www.ITN.net (Figure 4.39)- A- Better- Moved labels next to buttons and deleted question marks. B- Best- Deleted redundant words.
Figure 4.48: Good label position- A- www.google.com (Feb. 2002) Left aligned. B- www.amazon.com (Feb. 2002) Right aligned.
Figure 4.49: www.CharityFocus.org (Mar. 2001)-One radiobutton used as if it were a checkbox- "I accept the Volunteer Code." Once you turn it on, you can't turn it off.
Figure 4.50: www.TicketWeb.com (Jan. 2002)- A- One option presented as one radiobutton, not selected by default. B- Error message if user proceeds without choosing the only option.
Figure 4.51: LIU.edu (Mar. 2002)-Checkboxes misused for radiobuttons. A- Sex question. B- Other questions.
Figure 4.52: www.CharityFocus.org (Mar. 2002)-Incorrect single radiobutton has been replaced by a checkbox- "I accept the Volunteer Code."
Figure 4.53: www.Sibelius.com (Jan. 2002)-For this software product, only one language option is available- English. Instead of displaying one radiobutton, the language "choice" displays no control and simply indicates which language will be delivered.
Figure 4.54: www.LIU.edu (Sept. 2002)-Mutually exclusive choice correctly presented as radiobuttons.
Figure 4.55: www.cl.uh.edu (May 2002)-Text area is not editable; it explains the category selected in the menu.
Figure 4.56: www.uBid.com (Sept. 2002)-Checkboxes misused to indicate required fields. "Special Instructions" text field displays noneditable instructions. Item 3, "Enter Your Message," is editable.
Figure 4.57: Correction of bloopers at www.cl.uh.edu and uBid.com- A- Corrected University of Houston form has text in gray box. B- Corrected uBid form has noneditable text checkmarks and text directly on the background.
Figure 4.58: A list server that uses the Mailman software (Mar. 2002)-The Disable mail delivery control is confusingly labeled- It's backward from what people would expect.
Figure 4.59: www.Monterey.com (Mar. 2002)-A very confusing form because of poor labeling, one radiobutton, and other factors.
Figure 4.60: www.DenPlan.co.uk (Feb. 2002)-Radiobuttons indicate type of location typed into "Near to" box.
Figure 4.61: www.Earthlink.net (July 2001)-Confusing layout.
Figure 4.62: www.HP.com (July 2001)-Confusing labeling and layout.
Figure 4.63: www.ITN.net (Mar. 2002)-Unique calendar tool for selecting travel dates. Users must first select the date control they want to set by clicking on its arrow. Then the calendar sets that date control.
Figure 4.64: www.Citibusiness.com (Mar. 2002)-What is the Delete button for?
Figure 4.65: Correction of blooper at www.Monterey.com -A- Actual newspaper subscription form, with bloopers. B- Improved labeling.
Figure 4.66: Correction of bloopers at A- www.Denplan.co.uk and B- www.Earthlink.net -The new layout for www.Earthlink.net makes it clearer that users are supposed to give their DSL phone number and either their credit card number or the work-order number.
Figure 4.67: www.NWA.com (Mar. 2002)-A more common and straightforward way of providing a calendar tool for choosing dates.

Chapter 5: Search Bloopers

Figure 5.1: slacvm.slac.stanford.edu (Dec. 1991)- A- High-energy physics (HEP) preprint database page from first U.S. website. B- Search dialog box for HEP database (reached by clicking the Search link in the page on the left). (To see these pages and more of the first U.S. website, visit www.slac.stanford.edu .)
Copyright Mark Parisi.
Figure 5.2: A- ACM.org (Mar. 2000); B- IGC.org (Mar. 2000)-Search controls distinguish keyword search from text search.
Figure 5.3: www.SBC.com (Mar. 2000)-Search page expects users to specify whether their search text is "Literal Text" or "Boolean."
Figure 5.4: www.Dice.com (Jan. 2002)-Search function offers several choices, including "Boolean expression," but it's hidden in a menu and isn't the default value, so it's not so bad.
Figure 5.5: www.DMV.ca.gov (Sept. 2002)-Search function offers choice of searching "My CA" or "This Site," with the former as the default. Visitors unfamiliar with the main California website won't know what My CA is.
Figure 5.6: www.Dice.com (Jan. 2002)-Restrict by Area Code option- How does it work?
Figure 5.7: www.ACM.org (May 2002)-Unclear how to use Domain Name and Base URL fields, or what they do. These fields are so mysterious , they will be ignored by many site visitors.
Figure 5.8: www.NPR.org (Mar. 2000)-Unusual search options. Choices are difficult to understand and distinguish, for example, "search" versus "concept search." And what is "relate?" Also, the buttons look like radiobuttons but aren't.
Figure 5.9: A- Sears.com (May 2002); B- Amazoon.com (May 2002)-The simplest possible search controls are a text field and a button.
Figure 5.10: www.Google.com (Sept. 2002)-Simplest controls for searching the Web.
Figure 5.11: www.CA.gov (Sept. 2002)-Search controls are labeled in easy-to-understand nontechnical language.
Figure 5.12: www.SBC.com (May 2002)-Search controls are labeled in easy-to-understand nontechnical language.
BIZARRO 2002 by Dan Piraro. Reprinted with permission of UNIVERSAL PRESS SYNDICATE. All rights reserved.
Figure 5.13: www.SharperImage.com (Nov. 2000)-Task-focused search function finds products only.
Figure 5.14: www.NPR.org (May 2002)-Task-focused search function finds radio stories only.
Figure 5.15: www.CNN.com (Apr. 2002)-Competing search functions. The top Search button is more noticeable but is the one people are least likely to want- It searches the entire Web, not just CNN.com.
Figure 5.16: www.LATimes.com (Apr. 2002)-Competing search functions. A- Two Search boxes are on home page. B- Three Search boxes are on the Search results page.
Figure 5.17: www.CPSR.org (Jan. 2002)-Competing search functions, "Quick Site Search" versus "Complete Search," force users to make a choice despite not knowing the trade-offs, if any.
Figure 5.18: Search functions for different purposes look very different. A- General site search. B- Stock quote lookup.
Figure 5.19: www.Lycos.com -Results of a search for "acoustic guitar." A- (early 1999) Hits look very similar, so it's hard to tell which ones are good. B - (Mar. 2002) Hits look more different, so it's easier to scan the list.
Figure 5.20: www.DigiGuide.com (Feb. 2002)-Results of a search for "software" begin each item with marketing text, making differences hard to see.
Figure 5.21: www.SiliconValley.com (Oct. 2001)-All "hits" look the same. Are they the same, or do they just look alike? Can't tell without clicking on them.
Figure 5.22: www.Amazon.com (Sept. 2002)-Search "hits" show and stress discriminating information. Users needn't try links to find relevant ones.
Figure 5.23: www.AltaVista.com (Oct. 2002)-Search "hits" highlight the search term in
Figure 5.24: www.LATimes.com (Feb. 2002)- A - Two items look alike, but the first link works and the second link is "broken." B - Two true duplicates.
Figure 5.25: www.VitaminShoppe.com (Feb. 2002)-Search for "wild yam" yielded duplications in the Product Categories section of the results.
Figure 5.26: www.iFilm.com (Jan. 2002)- A- Search for Joe Bini doesn't find his listing at the site. B- Adding quotes finds even less. C- Listing for Joe Bini is found by browsing.
TO COME
Figure 5.27: www.InfoWorld.com (Feb. 2002)-( A , B ) Fruitless searches for a known article using the first few words of its title. C- Spelling "nixes" in full found the article.
Figure 5.28: www.United.com (Feb. 2002)- A- A search for a flight to Minneapolis turns up B- seven matches- One is Minneapolis, but the other six are irrelevant.
Figure 5.29: www.BarnesAndNoble.com (Jan. 2002)- A- A look at the top of the search results shows results sorted in "bestselling order," not by relevance. B- At the bottom of the results, the best matching book is listed as item 20 of 21 items.
Figure 5.30: www.VitaminShoppe.com (Jan. 2002)-A search for "glucoseamine sulfate" gave the first seven items matching only "sulfate," and the actual hits start at item 8.
Figure 5.31: www.HauteAtHome.com (Jan. 2002)-Fine Entree's results page lists items alphabetically, but by their decorous names. Lamb Crown Roast isn't under L, it's under C for "chili-infused."
Figure 5.32: www.Feldenkrais.com (Oct. 2002)-Page for finding a Feldenkrais practitioner includes two ways to search- using the form at the upper right or clicking on a state at the bottom.
Figure 5.33: www.Feldenkrais.com (Oct. 2002)-Results of a search for practitioners in California A- by using a search form, by practitioner name and B- by clicking on the California link, by city name.
Figure 5.34: Improvement of HauteAtHome.com .-Items are ordered more sensibly.
Figure 5.35: Improvement of HauteAtHome.com . Column headers are links that reorder the table by that column.
Figure 5.36: Improvement of Feldenkrais.com -Menu is added to allow users to reorder the results.
Figure 5.37: www.Erlbaum.com (Feb. 2002)-In searching for "osherson" A- specifying only the author yields no hits. B- Specifying the author and other criteria yields many hits, though none by Osherson.
Figure 5.38: www.RadioShack.com (Jan. 2002)- A- A search for "videotape" turns up no videotape. B- A search for "video tape" results in many hits, including videotape.
Figure 5.39: www.Dice.com (Jan. 2002)-Search terms are not shown with results. In this case, the term was "editor."
Figure 5.40: www.Erlbaum.com (Feb. 2002)-Search terms are not shown with the results.
Figure 5.41: (left) Feldenkrais.com (Jan. 2002); (right) VitaminShoppe.com (Jan. 2002)-Search terms are shown with the results.
Figure 5.42: www.Stanford.edu (Jan. 2002)-Search terms are shown with the results, which are editable.
Figure 5.43: www.DigiGuide.com (May 2002)-The number of hits is not shown with results.
Figure 5.44: www.Enron.com (Mar. 2002)- A- Search for "ken lay." B- The total number of hits is not shown with the results. C- The number of hits for each separate term is "buried" at the bottom of each results page.
Figure 5.45: www.Amazon.com (Sept. 2002)-Both the search terms and the number of hits are shown with the results.

Chapter 6: Text & Writing Bloopers

Figure 6.1: www.StanfordBookstore.com (Sept. 2002)-Question is too wordy.
Figure 6.2: www.ACM.org (Sept. 2002)-Login error message is too long.
Figure 6.3: www.DMV.ca.gov (Jan. 2002)-Long textual links are hard to scan, especially in lists and with text repeated in adjacent links.
Figure 6.4: www.jeep.com (Sept. 2002)- A - Before. Too much text. B - After. Text reduced and bulleted.
Figure 6.5: Improved design for StanfordBookstore.com -Label drastically shortened.
Figure 6.6: Improvement of www.DMV.ca.gov -Wordy links shortened, repeated text moved to headings, line spacing increased, and headings shortened.
Bill Griffith. Reprint with special permission of King Features Syndicate.
Figure 6.7: www.Earthlink.net (Sept. 2001)-Asks user to enter three pieces of information into only two fields. Most users won't know what the domain is or that it is part of the email address.
Figure 6.8: Graphical user-interface toolkit jargon in websites- A - www.FinancialEngines.com (Sept. 2002) refers to "fields" instead of, say, "information." B - www.OfficeMax.com (Jan. 2002) says "click this icon." C - www.Galor.com (Sept. 2002) uses both "dialog" (an abbreviation for "dialog box") and "icon."
Figure 6.9: www.TransitInfo.org (Dec. 2001)-Geek speak that isn't even correct- Calls a text field a "dialog."
Figure 6.10: www.ACM.org/chi2002 (Apr. 2002)-Message informing user that the deadline for online registration for the ACM CHI2002 conference has passed.
Figure 6.11: www.Audi.com (Feb. 2002)-(left) Global Home page, with Continent and Country menus. (right) Error message resulting from clicking arrow button without having chosen continent and country.
Figure 6.12: www.Feldenkrais.com (Oct. 2002)-Error message exposes internal software communication.
Figure 6.13: Client Web application (Apr. 2002)-Command "Create a new record" is implementation focused, not task focused.
Figure 6.14: www.United.com (Apr. 2002)-User logged into site twice. Problem description is a bit geeky , but instructions at least make a good attempt to be helpful.
Figure 6.15: www.United.com (Apr. 2002)-Internal glitch caused task failure. Problem description is a bit geeky, but instructions at least make a good attempt to be helpful.
Figure 6.16: www.Southwest.com (Sept. 2002)-Great error message. Describes the problem in users' vocabulary and suggests what to do.
Figure 6.17: Calling users "user"-(left) BarnesAndNoble.com (Jan. 2002) uses geeky and ambiguous term "Home Users." (right) BookPool.com (Jan. 2002) calls visitors "Past Users" or "New Users" depending on whether they've registered.
Figure 6.18: www.FinancialEngines.com (Mar. 2002)- A- Home page says "First time users? Start here." B- Advice page asks site visitors to classify themselves . One classification is "individual user."
Figure 6.19: www.Amazon.com (Jan. 2002)- A- Home page says "New Customer? Start here ." B- Login page uses the term "customer."
Figure 6.20: www.Yahoo.com (Apr. 2002)- A- maps.Yahoo.com- "Welcome, Guest User." B- weather.Yahoo.com- "Hello, Guest."
Figure 6.21: A- www.AA.com (Feb. 2002); B- www.HauteAtHome.com (Jan. 2002); C- www.WalMart.com (Jan. 2002)-Sites that don't call users "user."
Figure 6.22: www.HauteAtHome.com (Jan. 2002)-Lists of foods available for ordering include a number labeled "SKU," an insider term. Most customers don't know or care what it means.
Figure 6.23: www.zBuyer.com (Feb. 2002)-Makes a distinction between the "Bestsellers" and the "Movers & Shakers" in a product category. Unless you work at zBuyer, you probably don't know the difference.
Figure 6.24: www.Connectix.com (Feb. 2002)-To ask a customer-service question, customers have to find their product in one of two menus- fee and free. "Free Products" doesn't mean the product is free. It means support is free. "Fee Products" means a per-incident fee is charged for support.
Figure 6.25: www.DigiGuide.com (Apr. 2002)- A- Customer-support home page describes FAQ pages. B- The FAQ page is labeled "Knowledgebase" and "Common Questions."
Figure 6.26: www.Erlbaum.com (Feb. 2002)-The function to find books is called both "search" and "query" on the same page.
Figure 6.27: www.zBuyer.com (Feb. 2002)-Two buttons for starting a search are labeled differently.
Figure 6.28: www.FinancialEngines.com (Mar. 2002)-Inconsistent label style- questions, noun, command.
Figure 6.29: www.ACM.org (May 2002)-Inconsistent link-writing style- Some mention ACM; some don't. Some end with "Now"; some don't.
Figure 6.30: www.zBuyer.com (Mar. 2002)-Inconsistent label style- simple nouns, noun phrases, proper names, sentences.
Figure 6.31: www.AmericanExpress.com (Jan. 2002)-Inconsistent capitalization used in A- labels on trip preference controls and B- link text.
Figure 6.32: www.ZBuyer.com (Feb. 2002)-Inconsistent capitalization of link labels.
Figure 6.33: www.ValcoElectronics.com (Jan. 2002)-(left) FAQ page- Questions 4 through 6 are ungrammatical, and answer 5 has a typo. (right) The Product page has a spelling error.
Figure 6.34: www.Connectix.com (Feb. 2002)-Poor writing and capitalization- "reason why," "more then suggested," product name "windows" not capitalized.
Figure 6.35: www.NationalAcademies.org (Apr. 2002)-Typo- "The web site that you have requested does not exit."

Chapter 7: Link Appearance Bloopers

Figure 7.1: www.Stanford.edu (Jan. 2002)- A- Textual links not underlined ; marked in bold, red font. B- Non-link text emphasized in bold, red font.
Figure 7.2: Unclear links- A- www.Monterey.com (Jan. 2002) "Site Guide" link is in a unique font, unlike other links. B- www.Wisconsun.org (Jan. 2002) Links are blue but not underlined. They are easy to miss .
Figure 7.3: www.WiesnerBros.com (Feb. 2002)-Address and email address are links but are poorly marked.
Figure 7.4: www.Amazon.com (May 2002)-The camera and film pictures are links, but that isn't obvious.
Figure 7.5: www.HotelDiscount.com (Mar. 2002)-The blue area at the bottom is the form's Search button, but that isn't obvious.
Figure 7.6: www.Amazon.com (May 2002)-Textual links are unmistakable because they all follow the convention exactly.
Figure 7.7: www.Monterey.com (Jan. 2002)-Buttons are clearly clickable.
Figure 7.8: Image links marked as links- A- www.ACM.org/sigchi (Nov. 2000) Image with border is a link; other images aren't links. B- www.Sears.com (Nov. 2000) Instructions above the array of images indicate that the images are links.
Figure 7.9: www.Dice.com (Jan. 2002)- A- Headings that are links are red and underlined. B- Headings that are not links are black and underlined, creating potential for users to mistake them for links.
Figure 7.10: www.ercb.com/ddj (Sept. 2002)-Underlined book titles look like links, but aren't. They should be italicized, not underlined.
Figure 7.11: A- www.Enron.com (Apr. 2002); B- UPAssoc.org (Apr. 2002)-Heading that isn't a link is in blue and underlined. Link near it is blue and underlined. Potential for confusion? You decide.
Figure 7.12: Nonclickable graphics that look like clickable "buttons." A- www.Comdex.com (Sept. 2001) Topic headings on left side look clickable but aren't. B- www.Galor.com (Sept. 2002) Splash page has "icons" that look like separate buttons but aren't.
Figure 7.13: www.Dice.com (Jan. 2002)-Table of contents on left looks clickable but is not.
Figure 7.14: www.OfficeMax.com (Jan. 2002)-Unclear which "icon" is clickable. The icon at the bottom left is not clickable. It is only a legend explaining the upper one.
Figure 7.15: Button from client Web application- The big button accepts clicks only on text label ( dotted line).
Figure 7.16: www.continental.com (May 2002)-Category tabs accept clicks only on text labels.
Figure 7.17: www.RealEstate.com (Sept. 2002)- A- Quick Find "buttons" accept clicks only on text labels; those in top navigation bar accept clicks anywhere in box. B- Quick Find "buttons" change color when pointer enters any part of the "button."
Figure 7.18: www.RealEstate.com (Sept. 2002)-Navigation "buttons" on left accept clicks only on the text labels.
Figure 7.19: This navigation bar follows the blooper recipe.
Figure 7.20: These navigation bars don't follow the blooper recipe. A- Links not enclosed in visible table cells . B- Links not completely enclosed. C- Links enclosed but underlined as links.
Figure 7.21: www.IRS.gov (Sept. 2002)-Top navigation bar links are underlined and not individually boxed.
Figure 7.22: www.IEEE.org (Dec. 2001)-Navigation "buttons" on left and across top accept clicks anywhere in outlined area.
Figure 7.23: www.OfficeMax.com (Jan. 2002)-Navigation "tabs" accept clicks anywhere in the tab.
Figure 7.24: www.Agilent.com (Feb. 2001)-Question- How many links are in this "paragraph"? Answer- two. Each starts with "Agilent."
Figure 7.25: www.United.com (Mar. 2002)-Ambiguous multiline wrapped links.
Figure 7.26: www.RadioShack.com (Feb. 2002). Some multiword links are wrapped at ends of lines, causing ambiguity about the number of links.
Figure 7.27: A- www.Albany.co.uk (Feb. 2002); B- www.IBM.com (Jan. 2002)-Multiline wrapped links with reduced ambiguity due to greater interitem spacing.
Figure 7.28: www.BarnesAndNoble.com (Jan. 2002). Bulleted links can reduce ambiguity when some links wrap onto multiple lines.
Figure 7.29: www.CRLA.net (Feb. 2002). Link embedded in text instead of just having the label "Bylaws Change" be the link.
Figure 7.30: www.Pitsco-lego-dacta.com (Feb. 2002)-Link from Splash page to home page is hard to spot.
Figure 7.31: "Click here " links. A- At www.Greyhound.com (Jan. 2002), the link to buy tickets is hard to find. B- At www.SDExpo.com (Feb. 2002), the link to the faculty list is buried.
Figure 7.32: www.aya.Yale.edu (June 2002)-Long instructions with "click here" link.
Figure 7.33: www.Standord.edu (Jan. 2002). "Click here" links in bulleted items.
Figure 7.34: Eliminating a blooper at www.NWA.com . A- Feb. 2002- "Click here " link at lower left goes to the same place as "Maps and Directions" link in middle of page. B- May 2002- "Click here " link is gone.
Figure 7.35: www.Macromedia.com (June 2002)-Links to directions and to the various categories of information are presented as headers, not as "click here " links.
Figure 7.36: www.DMV.ca.gov (Jan. 2002)-Links don't change color when followed.
Figure 7.37: www.Anderson.com (Mar. 2002)-Links always remain orange.
Figure 7.38: www.OfficeMax.com (Feb. 2002). "Bread-crumb" links change color when followed, but the links in the category list below don't.
Figure 7.39: www.Yosemite.org (Dec. 2000). Which links here have been followed, and which have not?
Figure 7.40: A- www.Enron.com (Mar. 2002); B- Connectix.com (Jan. 2002)-Subtle color differences. Which links have been followed?
Figure 7.41: A- Amazon.com (May 2002); B- CPSR.org (May 2002)-Standard link colors are used so followed links are easily distinguished from unfollowed ones.
Figure 7.42: www.Yosemite.org (Dec. 2000)-Which links here have been followed, and which have not?

Chapter 8: Graphic and Layout Bloopers

Bill Griffith. Reprint with special permission of King Features Syndicate.
Figure 8.1: www.FinancialEngines.com (Sept. 2002)-Most of the text is too small to read.
Figure 8.2: www.FrontierAirlines.com (Sept. 2002)-Tiny, nonadjustable fonts in flight schedule. Many users will have trouble reading this.
Figure 8.3: www.FinancialEngines.com (Sept. 2002)-Tiny fonts in an online application form.
Figure 8.4: www.chicagofed.org (Sept. 2002)-Tiny text in list of links.
Figure 8.5: www.Comdex.com (Sept. 2001)-List of links displayed in tiny typeface. The links also aren't underlined.
DILBERT reprinted by permission of United Feature Syndicate, Inc.
Figure 8.6: www.SeniorNet.org (Sept. 2002)- A- Default font size , with "Enlarge Text" link (top). (b) Font size increases after clicking "Enlarge Text." Clicking "Shrink Text" restores "normal" text size.
Figure 8.7: www.ChicagoFed.org (Feb. 2002)-Background of mortgage calculator makes it difficult to read the control labels.
Figure 8.8: www.Microsoft.com (Feb. 2001)-Poor contrast between text and background makes the text difficult to read.
Figure 8.9: www.RussellStover.com (Feb. 2001)-Red text on dark blue background.
Figure 8.10: A- www.Angelfire.com (De. 2001); (b) Sciencenter.org (Sept. 2002)-Poor color contrast and patterned background.
Figure 8.11: Correction of blooper at www.ChicagoFed.org - A- Actual design. (b) Improved white background.
Figure 8.12: Correction of blooper at www.Microsoft.com -Improved contrast between text and background, while retaining use of red to signal an error.
Figure 8.13: www.VitaminShoppe.com (Jan. 2002)-Centered legal disclaimer is harder to read than it would be if it were left aligned.
Figure 8.14: www.NHASP.org (Jan. 2002)-Everything is centered, making it hard to scan. Centering bulleted lists makes the bullets useless.
Figure 8.15: www.zBuyer.com (Feb. 2002)-Centered controls are harder to scan in addition to being ugly- It is harder to spot the action buttons.
Figure 8.16: www.ValcoElectronics.com (Jan. 2002)-Everything is centered.
Figure 8.17: Client Web application (July 2002)-Error message is easy to miss. Can you spot it?
Figure 8.18: www.Citibank.com (Jan. 2002)-Error message is very easy to miss. Can you spot it? It's also not very informative.
Figure 8.19: www.RussellStover.com (Feb. 2001)- A- Registration form. (b) Form with error message.
Figure 8.20: www.REI.com (Nov. 2000)- A- Billing Address specification form. (b) Same form with error messages listed and highlighted.
Figure 8.21: Correction of blooper in Client Web application-Message appears near fields that must be retyped, in large red font, and the fields are highlighted.
Figure 8.22: Correction of blooper at www.RussellStover.com -Message is next to relevant data field and data field is highlighted. Message is also less verbose and has better color contrast.
Figure 8.23: www.ITN.net (Jan. 2002)-Current step in airline reservation process is marked using a subtle color. A- Step 1. (b) Step 2.
Figure 8.24: www.Connectix.com (Jan. 2002)-The difference in color between followed and unfollowed links is too small.
Figure 8.25: www.ChicagoFed.org (Nov. 2000)-Graph uses different colors for different plots on same axes. Some users may not be able to distinguish them.
Figure 8.26: Correction of blooper at www.ITN.net -Current step is highlighted in two ways- color and bold border. Color used to mark current step is not subtle.
Figure 8.27: www.ChicagoFed.org (Nov. 2000)-Graph uses different grays to convey information. Differences are visible to all sighted people, on any monitor.
Figure 8.28: www.Erlbaum.com (Feb 2002)-Navigation bar suggests that only link to Home is active, but all the links are active.
Figure 8.29: www.Travelocity.com (June 2002)-Pale buttons are intended to indicate "off path," but in fact suggest "inactive." A- Buttons from Flight Search page. (b) Search results page.
Figure 8.30: www.RadioShack.com (Jan. 2002)-Two navigation bars on home page. Buttons in Special Features navigation look inactive.
Figure 8.31: www.Monterey.com (Jan. 2002)-The last two buttons (lower right) are paler than the others and so could be misinterpreted as being inactive.
Figure 8.32: Correction of blooper at www.Erlbaum.com - A- Before. (b) After. Home-page link appears inactive because it is; this is the home page. All other links appear active and are.
Figure 8.33: Correction of blooper at www.Travelocity.com -Both buttons are fully saturated and so appear active, but on-path button is highlighted in addition.
Figure 8.34: HyperCard Help (1987)-An early use of tabbed pages in desktop graphical user interface software.
Figure 8.35: www.ITN.net (Jan. 2002)-"Tabs" are not physically separated.
Figure 8.36: www.ITN.net (Jan. 2002)-Well-designed tabs.
Figure 8.37: www.Fedex.com (Jan. 2002)-Tabs don't connect to panel.
Figure 8.38: www.WalMart.com (Jan 2002)-Tabs don't connect to panel.
Figure 8.39: aac.Acer.com (Feb. 2002)-Tabs aren't separate and don't show which one is selected. A- Products page. (b) Buy Acer page.
Figure 8.40: www.Acer.com (Feb. 2002)-Currently selected tab is white and connected to its panel.
Figure 8.41: Microsoft Word document properties-Typical tabs in desktop GUI software.
Figure 8.42: A- www.Askjeeves.com (Feb. 2002); (b) www.ESPN.com (Jan. 2002)-Well-designed tabs- separated labels, tabs connect to panels, current value is marked.
Figure 8.43: www.iFilm.com (Jan. 2002)-Blue area below tabs provides required continuity.

< Day Day Up >