Site Search Navigation

Site Navigation

Site Mobile Navigation

What’s in a Web Site?

By Steven Heller October 9, 2008 7:12 pmOctober 9, 2008 7:12 pm

Steven Heller is the co-chairman of the MFA Design program at the School of Visual Arts. (Full biography.)

Web sites are the storefronts of the digital age. And like those classic neighborhood campaign offices, they are often cluttered with visual junk. The sites for John McCain and Barack Obama’s presidential campaigns may feature different content, but they share the same basic stuff — online attributes that are clear and confusing.

John McCain’s Campaign Web site.

To discuss the sites’ graphics and functionality, I asked seven interaction designers and information architects who specialize in the Web to examine the candidates’ sites. Based on their findings it is clear that there are two kinds of virtual campaign offices: Mr. McCain’s is messier and at times folksy — a bit like a storefront on Main Street — while Mr. Obama’s is cleaner and more cosmopolitan, like a top-end retail emporium.

I looked at each site from four tasks: finding current campaign news, locating a specific issue, comparing overall positions and making a contribution. Overall, I think the Obama site didn’t fare as well as the McCain site.

Finding current news: Both Web sites had home page articles, making it easy to find. Mr. Obama’s article was a vague synopsis requiring the reader to watch a 16-minute video, while Mr. McCain had a detailed transcript of a video. Winner: John McCain.

Locating a specific issue (stem cell research): Neither Web site made it easy. Mr. Obama’s discussion is completely hidden (indeed, I had to use Google to find it). Mr. McCain’s site categorized the issue as a “Human Dignity” topic. Winner: John McCain

Comparing overall positions: Again, neither site made this easy. Mr. Obama has a downloadable report that can’t print on a standard printer. There was no overall summary on the McCain site. Winner: tie.

Making donations: This is something both sites do well. Mr. Obama’s donor form is clean and simple. Mr. McCain’s form does not have the same URL as his Web site, which could raise concerns about Internet fraud among potential donors. What’s more, the form contains too much small print. Winner: Barack Obama.

John McCain’s Web site is a traffic jam with uppercase letters, divergent and inconsistent styles fighting for attention, all with little regard for hierarchy and order. The site is trying too hard to be on top of every message, unfortunately at the expense of communication.

Barack Obama’s site champions clarity, taking time to focus on just a few items at a time and using a consistent typographic palette to make everything feel like part of the same family.

David Womack, interactive strategist

The first thing I notice is that Sarah Palin has equal billing on the site header. Her name receives the same font size and color treatment. On Obama’s site, Joseph Biden’s name appears in smaller type and is blended with the blue background. Mr. Biden’s portrait is smaller than Mr. Obama’s.

The McCain site has moved away from the gold-on-black palette of its earlier iteration, which I found striking if somewhat martial. Unfortunately, this switch seems to have caused confusion with blue, white, green, gold, red and a dark mustard yellow all competing for the user’s attention.

The Obama site, on the other hand, uses blue and white consistently, with red brought in occasionally for buttons and as an accent. The Obama site is serious about its icons, which are carefully crafted and incorporate the campaign logo.

The Obama site is clean and elegant and reminds me of a newspaper. Identifying where to go is immediate and simple. There’s a consistent application of typography and tone throughout. One-word headings direct the eye to the principle categories — issues, media, action — while the only red item on the home page drives visitors to donate. It’s got as much media as the McCain site (video, news, search functionality) but manages to present it with a lot less noise.

The McCain site is busy and loud. It reminds me of a slot machine. There are big, bold ads on the left that are way too colorful; recruitment efforts on the right are embellished with cartoony icons; and a poorly silhouetted photo of the candidates up at the top is presented with a faded, night sky behind them that reminds me of Tinkerbell in the “Wonderful World of Disney” openers.

The McCain site has a “used car lot” look, messy with a chunky grid, numerous fonts, colors and sizes, random gradients and “metallic buttons.” There’s a lot going on and very little attention to any sort of unity. On the left side you have rotating “ads” using a variety of fonts and generally bad royalty-free photography and clip art. On the right side, there are random colors and fonts.

The global navigation is functional but several drop downs extend too low, which means that content may disappear on smaller screens. I like the in-line video in the feature window, but the graphics look dated. The site uses overly large Georgia font for headlines and big worthless stock icons. On the positive side those big headlines, simple boxes, buttons and icons are easy to click on.

The Obama site is very consistent, not just on the home page but throughout. It’s easy to look at, take your time, scan and consume. It’s organized, thoughtful and confident. But it’s too staid. The feature area does not offer enough visual distinction — something needs to pop up there.

It’s difficult to know where to look and where to click on the McCain site. Competing images and typography, mismatched icons and a complete disregard for information hierarchy make it hard to find information.

The Obama site is organized and orderly. The writing is action-oriented; the typography and color communicate substance; and the consistent graphics are useful guides for users.

I can’t help but wonder the political bias of each reviewer. The take-away message for me is unsurprising: Obama’s got a slick look but both candidates make it easy to donate and a little harder to get the down-and-dirty. More than anything, I think this post serves to reinforce the news that Obama is hugely more popular with the young and tech-savvy.

The first reviewer’s analysis of “getting news” on each site did surprise me — not that McCain’s was easier so much as that Obama’s forced the user to watch a 16-minute video! That’s an eternity on the Internet. Granted, I watched his entire 45-minute speech on race on Youtube, but “daily browsing” and “landmark speech of the decade” are two very different things.

The way I see it is
McCain is to a local newspaper site as Obama is to the CNN.

But the most remarkable part of Obama’s campaign from a design perspective is the “O”. That logo is probably one of the best logos/brand identity marks every created for any campaign that I’ve been a part of.

I agree with the comments by the IAs in the article. The overly busy aesthetic of Mccain’s site reminds me of the days when people just tried to cram as much info as possible onto a page. And of clients who want EVERYTHING above the fold.

McCain needs an editor. “Homeownership” as one word is much too hard to read – a bolus of a word that sticks in the craw. I visited neither site, but looking at the pictures with this post, that word jumped out at me, not in a good way. Neither site gave me thrills.

I admit that some of this analysis is interesting. But to me it seems tacky when the financial system is in a free fall. We had a bailout that both parties voted for and shoved down our throats with the help of editorials on NYT which has now proved that it won’t work and has only escalated the panic. And there were no public hearings on this at all. That’s taxation without representation and the taxpayers need to revolt. And if these two candidates are not getting how angry people are, they are going to lose to Nader who is gaining support according to an AP article yesterday. If he gets up to 5% then they must include him in the final debate. Now that will be exciting!

I agree completely with Jason Santa Maria – but also understand the practical perspective from Jared. Fantastic review! Finding an article like this in the New York Times is a very promising indicator of the growing importance of usability and design!

i really appreciate jared spool’s comments the most. i am a strident obama supporter and initially was blown away by his website. as a web developer myself i would say i was even inspired in by its craft. but this adoration has dwindled over time (for his website…not his candidacy).

the other day when i was searching for specific information about each candidate’s positions on specific science issues, i had a hard time tracking anything specific down on obama’s site. it was easy to get to on mccain’s. sadly, when i turned to google’s always more useful site:www.example.com i found tons more information on obama’s site that simple doesn’t exist on mccain’s. now, i know most users aren’t digging around for specific position points on issues like i was, but it seems like obama’s team could focus a bit more time on information architecture compared to the beautiful but possibly over crafted icons.

I was impressed from the very beginning with Obama’s branding and website. It definitely has a solid, focussed and inviting feel to it and I can find what I need within a click or two.

Regardless of political preference, a campaign site needs to be as easy to navigate as possible due to the factor of community involvement. If citizens are visiting your site and don’t know where to start or are confused in any way, you are loosing opportunites to recruit evangelists for your campaign.

Personally, I did not assume that because the reviewers above had more reasons that Obama’s site is technically designed better, that they were Obama’s supporters.

When comparing slick to campy – think about their audience. Walmart is not supposed to look like J. Crew, and vice versa. McCain’s motivator is to make himself feel more accessible to people who would feel intimidated even walking into a higher-end retail environment, which is a huge chunk of the country. Obama’s motivator is to project an established, respectable brand – something bigger, and better – a “promise” of what could be. If you swapped those presences for those individuals, both would fail in creating the appropriate mental imprint on the user, – “Hey, McCain isn’t a rich guy with umpteen houses – look at his site and his language, he talks like me!” or “Hey – Obama is well put-together and attractive, he must be the real thing!” They are shoring their perceived weaknesses with the images they both strategically choose to present.

Interesting how the consensus is that Obama’s web site has better graphic design, but McCain’s may have the better user experience. However, they both win in how their styles reflect their campaigns: Obama’s web site is very competent and professional if a little cold and overly complex. McCain’s is folksy, conventional, and warmer; but a bit chaotic and lacking sound architecture.

What's Next

About

Weekly pieces by the Op-Ed columnists Charles Blow and Ross Douthat, as well as regular posts from contributing writers like Thomas B. Edsall and Timothy Egan. This is also the place for opinionated political thinkers from all over the United States to make their arguments about everything connected to the 2012 election. Yes, everything: the candidates, the states, the caucuses, the issues, the rules, the controversies, the primaries, the ads, the electorate, the present, the past and even the future.