The whiteboard

XI.6 November + December 2004
Page: 36
Digital Citation

The race of the web sites


Authors:
Kathy Gill

Method

The two candidates’ sites are www.johnkerry.com and www.georgebush.com. I visited both sites from two perspectives: as an undecided voter and a committed voter. As an unaligned voter, I looked for the following:

• Candidate position on health care/prescription drugs

• Candidate position on economy/jobs

• Candidate military service information

• Web site privacy statement

As a committed voter, I sought three things:

1) How to donate to the campaign

2) How to volunteer for the campaign

3) A candidate blog


With this issue we continue a Whiteboard tradition that we started in 2000: Kathy Gill’s quadrennial review of U.S. presidential candidates’ Web sites. I’ll just let Kathy tell you about it herself. —Elizabeth Buie

 


Time and space restrictions prevented me from testing tasks for undecided voters or reporters, the other two audience groups I identified. I believe, however, that the information needs of the two tested audiences suffice for a usability review.

I used both a PC (Windows XP) and a Macintosh (OS X) and browsed with Microsoft Internet Explorer (PC), Safari (Mac) and Mozilla (Mac). I accessed sites with a 28K dialup connection, wireless access (wi-fi), and DSL. I set the browser width at 875 pixels on the Mac; the PC monitor was set at 800x600.

I found interesting parallels between the 2000 and 2004 candidate sites, starting with the choice of technologies. Both of the Democratic candidate sites (Gore and Kerry) used Linux, Apache and PHP [1]. On the other side, the two Republican sites (Bush the candidate and Bush the president) relied upon Windows, Microsoft Information Server and ASP [2]. Once could be chance; twice seems deliberate and reinforces party stereotypes. Figure

The Kerry home page video link required me first to select my player and connection speed. The Bush site defaulted to one player but allowed me to reset preferences to one of two others. It, too, prompted me for a connection speed. Figure

Overall Design

Today’s campaign staff recognizes the importance of having key tasks linked from the site home page. Almost all of the tasks were one click away from the home page, although the information behind the click might not be exactly what the voter thought she was going to find.

However, a clear difference in design philosophy manifests itself from each campaign home page. The Bush site is visually busy and graphics intensive; it is designed for 1024x768 monitors, which suggests that the intended audience owns up-to-date technology with fast access. However, the "red" states where Bush has much of his support have large rural populations with less-than-stellar Net access.

The Bush site is top-heavy, the top third of the screen (800x600) being devoted to images containing little content. It also positions navigation links (Blog, Donate, Action Center, Vote, W Stuff) above the campaign logo. These links escape the eye on first visit because they require reverse eye movement. In addition, the links suffer from banner-blindness: the tendency of the human eye to avoid anything that resembles a banner ad or occupies a similar position.

The Kerry site, on the other hand, is designed to accommodate an 800x600 monitor and is much easier on the eye. Compared with the Bush site, it uses a muted color palette (softer blues) and is much more restrained in its use of red for emphasis or links.

The Democratic site uses half as much decorative space at the top as the Republican one does. Three links (Blog, Volunteer Center, Contribute) appear to the right of and below the Kerry-Edwards logo, a position that better reflects Western eye movement.

Both sites have grouped text links marching down the left margin. Kerry’s dark-blue text on light-blue background might cause trouble for older voters because of physiological changes in the aging eye.

Navigation

Experts generally agree that Web sites should conform to visitor expectations, which arise from experience with other sites. A potential supporter of a candidate should quickly succeed at finding information about the issues important to her. Committed supporters should find it easy to volunteer or to donate money. The two sites showed clear differences in navigation mechanisms, differences that affect task completion.

Hyperlinks

All modern browsers support Cascading Style Sheets (CSS), which allow developers to provide user feedback when the mouse passes over a hyperlink. The "hover" attribute, for example, can trigger a change in color, type weight, type size, or underline. Adding the code for this action does not negatively affect older browsers.

For the left-side navigation links, the Bush site uses "hover" to simulate a mouseover effect with text links. However, this site does not provide this feedback consistently; nor does the site use different colors for visited and unvisited links. Thus, the Bush site provides inadequate navigation feedback.

All tested text links on the Kerry site incorporated the "hover" attribute. However, the site failed to change color consistently for visited text links, making it more difficult for the site visitor to determine which documents had been reviewed. Although better than that of the Bush site, Kerry’s navigation feedback also fell short of Web usability best practices.

Consistency

Navigation schemes should answer the question "Where am I?" and should be consistent within the site. In other words, both the order and the wording of links should be consistent. Both sites have issues with consistency, although the Bush site’s issues are more severe.

Both sites use grouped text links down the left margin. The Bush site changes the left hand navigation dramatically on the "issues" pages, accessed via tabs near the top of the page. The "issue" tab changes color when the visitor reaches that page (a good "you are here" hint), but the banner-like design and horizontal bars inhibit eye movement upwards. Fortunately, the issue name also appears at the lower right of the header, further reinforcing location.

The Bush site’s left-hand navigation, however, violates the consistency principle. A new set of image links appears at the top of the left margin. Standard left-hand text links appear below the issues-related links—accessible, but in the wrong order, and out of sight at 800x600. Figure

The Kerry site has a simpler navigation scheme, using only the left margin area. Its occasional navigation inconsistency comes from navigation specific to multi-page articles, which appears at the bottom of the page. Instead of remaining as a placeholder in the bulleted navigation list, the bullet for the "you are here" page disappears. Thus, the navigation list changes order with each new page. The consistency violation is minor because very few articles have this navigation element. Figure

Breadcrumbs

The Bush site violates Net norms with its "backwards" breadcrumbs. A breadcrumb link trail has become a de facto standard way to show a site visitor how a page fits into the site architecture. Traditionally, the breadcrumb reads left to right, with "Home" being the first link. The Bush site uses right-to-left breadcrumbs, a major deviation from best practices. The Kerry site follows Net norms in sequence, but fails to include the title of the landing page—a minor violation of best practices.

Task Review

Good Web site architecture anticipates the information that a potential voter might want to find and then structures the site to make it as easy as possible to succeed. Both of the 2004 sites show clear improvement in information architecture and platform compatibility over their predecessors from 2000.

Find Candidate Positions on Issues

Both candidates feature the economy/jobs and health care at the top of their issues list. The Bush site provides tabbed navigation to information about seven issues. The Kerry site provides left-hand navigation to information on seven issues at the top level, but the voter can find eight more issues by following the main issues link. However, a hidden ("more plans") link to a sitemap of the Kerry policy pages features 20 issues with links to about 75 individual policy statements.

On the Bush site, issues page navigation focuses on campaign goals (have voters take specific action) rather than voter goals (identify the candidate’s position on issues); this navigation reflects organization-centered design rather than user-centered design.

All pages rendered similarly across browsers and platforms, with the exception of some featured links in four of the Bush issues sections, which appear to use two different templates for lower-level pages. Four of the seven issues categories exhibit a rendering problem, illustrated in the economics page (Figure 5). The content missing from this screen—rendered correctly on the health page (Figure 6)—is rendered below the fold. This jars the eye and underscores the importance of testing.

The Kerry site provides an easily scannable index (Figure 7) of policy documents on a variety of issues, although finding the page might be a challenge. The Bush site has only seven policy categories, forcing the voter to guess where and whether an unlisted issue might be addressed.

Privacy Statement

The privacy statement is one of two links in the footer of every page I reviewed on the Kerry site; it’s easy to find and, as an infrastructure link, is in the expected place. The Bush site places the privacy link under "Services" in the left-hand navigation, which is not where I would look for it.

To Donate

The Kerry donation form is a standalone page with no extraneous navigation information, while the Bush form is squeezed into the content area reserved for other Web pages.

To Volunteer

In a major, unfortunate departure from 2000-era sites, both campaigns now require registration before a potential volunteer can determine what opportunities might be available in her neighborhood, county, or state. Research suggests that such registration reduces site visitor interaction. The Bush site provides a teaser list of volunteer ideas behind its "Volunteer Center" link; the Kerry site bluntly asks for log-in. The Bush site also does a better job in indicating which information a volunteer must enter when registering, and which is optional. Finally, the Bush site features a helpful calendar that allows the voter to identify campaign events in her home state or on a specific date, without forcing her first to register as a volunteer. I found no such tool on the Kerry site.

Candidate Blogs

Taking a cue from the Howard Dean campaign, both Bush and Kerry feature a "campaign blog," one click away from the home page. However, the implementations differ markedly. A Kerry blog entry contains the information and structure characteristic of a blog: a title, short entry contents linked to more details, a date stamp, a permalink, and an author—a real person. In addition, Kerry’s blog allows site visitors to add comments. The Bush "blog" lacks some key features of a blog. It does not contain a date stamp, the long entries are authored anonymously, and it does not allow comments. Instead, the Bush blog continues the marketing push evidenced on the issues pages by including nonstandard blog links that urge the voter to promote the campaign to friends.

Annoyances and Quibbles

The Kerry site annoys experienced Web surfers with a "signup" splash page in front of the site’s home page. This seems to be the triumph of marketing over content, because its sole purpose is to get voters to sign up for e-mail alerts. I don’t recommend this as a way to introduce yourself to someone who hasn’t yet decided whether she’s going to vote for you! The splash page is triggered by link http://www.johnkerry.com/ — to bypass the signup screen, you can append "index.html" to the URL. Figure

The Bush site tries too hard to be "interactive," as evidenced by its "Quick Vote" polls at the foot of most pages. All of the questions are quizzes, not opinion polls, but "Quick Vote" is not the right headline for a quiz! Click "submit" and poof! a "sign up for e-mail alerts" window pops up—the antithesis to user friendliness. Click "close window," and the page with the question refreshes and provides the answer; but the refreshed page returns to the top, forcing the voter to scroll back to the bottom to see the answer.

Finally, text on the Bush site is just plain hard to read. At first I thought it was a platform issue (sites tested only on Windows platforms tend to be hard to read on Macintosh platforms), but I found it equally hard to read on the PC. What causes this problem? The site uses CSS to set leading per printed documents: Not only does the Bush CSS use points (rather than pixels or relative measurements) it also squeezes text by allowing only one point of leading. Improved readability requires more leading, not less. Both sites use sans-serif fonts, which are easier to read on screen than serif fonts. Figure

Accessibility and Standards Compliance

Using guidelines developed by the World Wide Web Consortium (W3C) and the U.S. federal government, the Bobby tool (bobby.watchfire.com) tests some of the criteria related to making Web pages accessible to people with disabilities (see Table 1). Neither the Bush nor the Kerry site achieves Section 508 approval. However, the Kerry site requires only human checks for WAI approval, whereas the Bush site fails to provide ALT text for images in addition to needing human checks.

Both sites’ home pages are on the large side, but the Bush home page takes substantially longer to load. The page size of the sampled issues pages reflects the greater content depth on the Kerry site; the Bush site asks the voter to access a second page (increasing click cost) for more detail.

Neither site validates as HTML 4 (the referenced DTD) using the W3C validator [3]. The Bush site uses several stylesheets, which fail CSS validation. The Kerry stylesheet passes.

The Verdict

These two political Web sites evidence great strides in user focus since the previous presidential election cycle. The Kerry site slightly outperforms the Bush site, which in particular could have used thorough functional and accessibility testing. Both sites, but especially Bush’s, reveal an organization-centric mindset. Consistent and comprehensive user feedback venues would have benefited both of these sites.

Let’s hope we see even more improvement in candidate Web site usability in the next four years than we have in the last four.

Author

Kathy E. Gill is a senior lecturer in the Digital Media Program at the University of Washington, Department of Communication. She holds degrees in journalism and agricultural economics. In seven presidential elections, she has divided her votes between the two major parties and does not consider herself an ideologue. In her spare time, she can be found on her Ducati Monster 900 motorcycle or teaching newbies how to ride. Kathy can be reached at kegill@u.washington.edu

Footnotes

1An open-source, server-side scripting language used to create dynamic Web content.

2Active Server Pages, a Microsoft technology used to create dynamic Web content. The 2004 site uses ASPX and the 2000 site used ASP.

3Document Type Definition (DTD), A set of rules that defines the tag set being used.

4Estimated using http://www.websiteoptimization.com/services/analyze/

Figures

F1Figure 1. Bush Web site viewed with Mac/Safari at 875 pixels wide; the site has an overly wide fixed design.

F2Figure 2. Kerry site viewed with Mac/Safari at 875 pixels wide; the site offers a more restrained color palette and is easily viewed at 800x600 without horizontal scrolling.

F3Figure 3. The Bush site uses at least two design templates. Issues pages have a dramatically different left-hand navigation set.

F4Figure 4. The Bush site breadcrumb trail reads right-to-left instead of the standard, Western left-to-right. The Kerry site uses a standard breadcrumb sequence but fails to include the page title.

F5Figure 5. Several issues sections on the Bush Web site render incorrectly.

F6Figure 6. This screenshot shows how the issues pages on the Bush site should look.

F7Figure 7. The Kerry site provides a detailed index to all policy documents, but hides the link to the page.

F8Figure 8. The Kerry site uses a splash page to try to entice visitors to subscribe to e-mail alerts. Skip the intrusion and let’s go straight to the content.

F9Figure 9. The Bush site needs to adjust leading (line height) to improve readability.

Tables

T1Table 1. Results of Accessibility and Download Testing

©2004 ACM  1072-5220/04/1100  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2004 ACM, Inc.

 

Post Comment


No Comments Found