NPR Redesign: Usability Review Of the New Header

keith@firebellydesign.com (Keith Norman) — Tue, 28 Jul 2009 17:34:11 -0700

NPR launched a new design on their website yesterday. Here’s a side by side comparison of the two designs. Their goal was to position themselves as a news resource and not just as a radio station, according to Vivial Schiller. With that in mind, I think they did a pretty good job. But, as a studier of web UI, and local expert in usability, I thought I would take out my whipping cane and see if they really did their homework.

Let’s start with the main nav, because, those big buttons are what are contributing most dramatically to the new feel.

Not only are the buttons big, but the navigation is organized in a very friendly and understandable manner, especially when compared to the old categorization. But, big buttons aren’t just good at asserting a brand’s prominence, they make it easier for the user to navigate the site by providing large click areas. This is where these buttons fall short because only the text, not the entire button, is clickable. The page you are currently on is denoted by a folded over corner in the upper right of the tab, which I like. It’s a nice and subtle touch, but that’s all that is needed in order to help the user orient themselves while navigating a site.

Clicking on “programs” opens up this monster of a drop down sub-nav menu:

The sub-lists are nicely organized and easy to read. It doesn’t feel overwhelming. However, there is no way to access this information if you disable javascript. This seems a bit lazy because there is a programs page that the link could (and ought to) go to (http://www.npr.org/programs/) in the absence of Javascript.

Here’s what happens when you click on the “listen” tab:

My initial thought was “wow, this is great”. They selected content that they deemed to be the #1 thing they would like visitors to do on their site (makes sense that would be listening to the station) and made nice big buttons for the links, put them at the top of the page, and put them in a highlight color. However, my second thought was “yeah, but it’s hidden inside a drop down menu”. Personally I would like to see this displayed more prominently (and less seafoam greeeny), but they do compensate by having a box called “must hear” in the upper right hand side of the homepage that serves a similar purpose.

The last (oft venerable) piece is what I call the “meta nav” area. This section has become known as the “every site wants me to join their social network” section, and NPR is no exception:

However, I think the way they handled it is spot on. Firstly, the DONATE link is highlighted, but not in your face. You won’t miss it, but they aren’t being too pushy. I also like the icons for the “NPR Shop” and “NPR Community” sections, but I do question if stating “NPR” is necessary. Lastly the search bar just looks nicer and doesn’t have the text “Search NPR.org” written inside of it. I trust the new search more. It doesn’t feel like it will throw me down a dark hallway of nonsensical results and interfaces designed by developers, and it doesn’t. Whether the old one did or not I can’t say.

Last but not least, this just seems a little awkward:

That “find a station” text is actually a link, which, I get it, but it looks more like a tagline to me. There is nothing linky about that text.

Overall, I am ambivalent. The design tries to appear that it is meant to be user friendly, but when you actually poke below the surface you see that its beauty is only skin deep. But, it is definitely an improvement, so kudos to you NPR!

A Smart Way To Handle Relative Font Sizing In CSS

keith@firebellydesign.com (Keith Norman) — Thu, 09 Jul 2009 14:28:39 -0700

This technique was contributed by one of our campers at Camp Firebelly, Sarah Keane. Here’s how it works:

Apply a font-size of 62.5% to the body tag:

	<br />	body {<br />		font-size: 62.5%;<br />	}<br />

This sets the base font size to 10px, which makes it super easy to figure out how many em’s to set for your other font sizes. They will just be taken from a base 10. So 1em is 10px and so forth. For instance, if you wanted to set p tags to 12px:

	<br />	p {<br />		font-size: 1.2em;<br />	}<br />

Or set your h2 tags to 16px:

	<br />	h2 {<br />		font-size: 1.6em;<br />	}<br />

Thanks Sarah for the awesome tip!

Also, just an aside for the non-believers that set their font sizes in pixels because it’s easier: you are doing a disservice to any of your IE users who want to increase or decrease their browser font size settings. IE does not increase/decrease font sizes that aren’t set with a relative sizing (either % or em). This is a major accessibility issue that you should really take the time to fix. Think about it.

Keith Norman's Posts - Firebelly Design

NPR Redesign: Usability Review Of the New Header

A Smart Way To Handle Relative Font Sizing In CSS