Monday, March 3, 2014

The Awful nbcnews.com Redesign

nbcnews.com has a new look! It debuted about a month ago, right in time for the Winter Olympics coverage in Sochi. (oddly enough the NBC Sports site did not get a makevoer)


You can use it on your smartphone and tablet!

It has huge pictures and huge headlines!

And its a big old mess if you’re on a desktop or laptop.

Some say its a dumbing down/adolescent view of the news for a short attention spanned culture with big pictures and images instead of headlines. I wouldn't go that far, but I can see their point.

















Seems like I’m not alone in my dissatisfaction of the website as you read on the comment sections on reddit,  huffington post and newscast studio

So what's wrong with the website?

The Tiled/Modular Layout

Looks like the top brass at NBC and the agency who designed it (who also allegedly designed slate.com also) took the “mobile first” philosophy a bit too seriously.

Some have complained “since NBC broke up with Microsoft, why would they go to ‘Windows 8’ design”. In NBC’s defense, the only similarity is the tiled design, other than that, it shares little with Windows 8 “metro” design eschewing its bright color and thin sans serif type.

A very overly simplified explanation of Mobile First is to design for the mobile experience FIRST, then move to the desktop. 

It makes a lot of sense, since so many people access the web via smartphones and tablets now. Mobile sites used to be an afterthought. But it seems the designers at nbcnews.com committed the opposite sin..the desktop version is afterthought this time.

nbcnews has gone to the tiled/modular approach for the desktop version of its site. While this approach works well on more image/art dominated websites like flickr or pinterest, on a news site it makes little sense. There is no visual or information hierarchy to how the news is presented. There's also mysterious white space where it looks like a tile is missing

Whats the most important news stories on nbcnews.com? Hell if i know! Everything is given the same weight and mass. Each story is pretty much given the same importance, from a story about “Animators Closer to Capturing Physics of Curly Hair” to “Why Does Putin Stir up So Much Trouble for America”



If you’re quickly scanning for headlines on nbcnews.com, good luck…you really can’t.


The Navigation

Both Slate and NBC News have decided to ditch the traditional vertical side or top horizontal nav bars in favor of the relatively new mobile convention/affordance of clicking on three stacked vertical bars to reveal a mega menu. There's even the word MENU under the the vertical bars just in case you don't know what that means!

Since real estate is precious on mobile device, this makes sense that you have to hide some menu information. But on the desktop, not so much. The type size also just seems too big which leads us into…



















Horsey Type and Images

Big headlines and big images are all the rage in the new “flat design era” (Is this Web 3.0 now? I don’t think it is, but it would be a good name for it). I actually like 1em=16px for reading text on the web. Its a bit bigger than the norm, but its more legible, especially for those with vision problems.

But the huge sans serif font headline images just look TOO big on the desktop version of NBC News. There’s also a curious use of white space… there seems to be an imaginary right column that has nothing in it. Shrink your browser size, and it goes away, but once way it looks awkward. View it here.



Nice Looking News Sites are Possible!

To give NBC some credit, at least they are trying. Most news site are a mess. Huffington Post looks unprofessional. CNN Looks crowded, but at least its organized (similar to the BBC) But both the BBC and CNN offer separate mobile site experiences and are not responsive.

Al Jazeera America actually has a great well designed layout for their desktop version, and its responsive.  My only gripe is the tiny typography for their top horizontal navigation.

France 24 also has an excellent website layout, but its more adaptive for tablets, and offer a separate mobile site.

Russia Today’s website is somewhere in the middle. It won’t win any beauty awards, but it’s responsive, and there is some information hierarchy going on.

Did NBC News Get Anything Right?

Well, the site is VERY social media/sharable friendly with each story having a sticky social media nav bar, which is a nice feature.
The website does use a lot of modern website trends as I've stated, but they all seem to be used badly.

Do you like the new nbcnews.com redesign? What's your favorite news site?

1 comment:

  1. Your screenshot didn't even include the totally awkward banner ad at the top of the homepage. See this screenshot taken just now: https://www.dropbox.com/s/vbowm5qxvjlihbm/Screenshot%202014-03-06%2007.37.39.png

    If you go to efforts with responsive design to fit the window, then why not be really forward thinking and develop responsive ads too? Otherwise, not only hangs a rectangle that is totally reminiscent of the late 90s, but it looks stupid with the layout.

    ReplyDelete