Firebelly Design

July 28, 2009 by Keith Norman

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!

Comments