Newspaper Website Redesigns

After spending some time looking at the recent redesign of the Chicago Tribune and Los Angeles Times websites I have to give the Tribune a slightly better grade for usability and learnability than the Times, mostly based on some simple design choices and the treatment of links, while the Times easily wins for sharp visual design.

The key area where the Times lacks is in how it handles navigation. In the new design almost all text is black, strongly mimicking the look of a print newspaper. From a visual design perspective this is just flat. The Tribune in contrast makes its headlines blue. The headlines of both sites are links, are not underlined, and give rollover feedback. The blue text on the Tribune site just seems to stand out more and makes it easier to scan the page. The different color also hints at clickability and invites exploration. Blue is one of the Tribune’s brand colors, so this also makes sense from a marketing perspective. There is no reason for the Times to mimic print design to such an extreme.

Los Angeles Times
Los Angeles Times
Chicago Tribune
Chicago Tribune

While most news website users will expect that headlines are links, the all black text treatment of the Times makes it harder to scan for relevant content and triggers. The Tribune, while using the same template, makes it easier to scan down the page and find links. Blue is clickable, black is not.

Both papers use the same template, not surprising since both are owned by the Tribune Company, but the way the Chicago paper executes the design makes it is a little easier to learn how to use the site. The key differences are:

— On the Tribune homepage, the tabs in the global navigation are visible no matter what the user does. On the Times homepage, the user has to roll over the global navigation before a tab background image appears. While the Times global navigation is pretty clear, the Tribune makes it a little more obvious that it is navigation. Once you go beyond the Times homepage, section tabs are revealed.

— On the Tribune homepage a global navigation item for “home” is selected, giving the reader a clear sense of where they are in the site hierarchy. As you navigate away from the homepage, the “home” tab provides a nice target to get back to a starting point. The Times homepage in contrast shows nothing as selected, thereby losing a chance to educate users about the navigation. After you navigate away from the homepage you have to click the logo to get get back. That’s hardly a fatal flaw, as most web users have figured out that a site’s logo links back to the homepage, but the Tribune’s design again just makes the navigation choices a little more obvious.

— Another difference is how the sites handle weather in their header. To the right of the Tribune logo is the temperature and an icon indicating whether it’s cloudy, sunny, raining, etc. The Times uses that real estate for date and time, but no weather. Weather is more volatile in Chicago, so maybe this makes sense. But to replace it with date and time doesn’t seem to offer the user anything. Usage metrics may show that Times users don’t spend much time on the weather page, but how about a highway gridlock meter icon that links to a real-time expressway traffic page or something else useful.

When it comes to typography and general visual design, the Times wins hands down. It has settled on a nice serif font — Georgia — that is consistently applied and easier to read than the Tribune’s Arial, especially for the articles. If the designers were looking to mimic the typographic sense of style of the New York Times or A List Apart, they hit their mark. It just looks classy. If they add some color to the headlines, they’ll have a real winner.

The Times also handles the homepage areas that feature content from other sections of the site in a more stylish and cleaner way than the Tribune, which has bulky colored headers for features like Sports and Entertainment. Aside from the lack of color in some of the fonts, the Times overall has more appealing visual design. And the faux ink splatter at the footer of the page is a fun design element.

The other papers in the Tribune portfolio (Baltimore, Orlando, Ft. Lauderdale, Hartford, Allentown, and Newport News) also are using the same new template, but the Chicago and LA papers have the best executions. The others lack personality and could easily be mistaken for any other news website.

If the Tribune Co. had mixed the visual style of the Times with the usability advantages of the Tribune, they’d have had a truly stunning design.

Welcome

Welcome to UXploration.

This is where I write about things that interest me in my professional life as a user experience architect and as a graduate HCI student.

I’m currently enrolled in the graduate HCI program at DePaul University in Chicago and will try to post details of school projects and research as well.

Having to produce something fresh on a regular basis forces me to look at my work and studies more critically and to find things that may be of interest to others. I’m looking forward to learning a lot as I go. I hope others do too.