Last week msnbc.com relaunched their news story pages and I’m finding them pretty exciting. The heart of the redesign concept is the notion that in telling a story, all the different parts of a story — an article, a video, a gallery, a comment thread, etc. — are all equally valid and important. To express this, they’ve turned any msnbc.com story page into the canonical, one-stop source for every bit of media and reporting related to that story, instead of having one URL for the article, one for the video, and so on.
Here’s a decent example:
This story is being reported with an article, a video and a photo slideshow — these are referred to as ‘slices’. Each slice also has a ‘drawer’ underneath it to allow you to continue exploring that particular type of media, or expand the article if there’s more content to read. Part of the rationale behind this is to abandon the notion of pageviews, as Mike Davidson explains here. Adverts are integrated into the general flow as slices in their own right, breaking up the content but not getting all in your face about it.
Pages vs packages
At the guardian we have the notion of a ‘story package’; it’s the same concept that msnbc are playing with but it’s simpler. Pieces of content — articles, galleries, videos, etc. — are editorially linked together in the editors’ tools and then every bit of content provides links to everything other bit of the same package. You can see it in action here, on the story about Michael Jackson dying.
It’s more flexible in some ways than msnbc’s approach and allows the editors to thematically link a much larger number of items — the Michael Jackson story package all on one page would be enormous, and the commenting model wouldn’t work; at guardian.co.uk you generally comment on the piece of content, not on the overarching story. In the case of the Jackson package there are several opinion pieces, each with a different slant on the story, each with their own discussion thread. This allows for a far more intimate dynamic between commenter and author, but does also fragment the discussion of the story. Swings and roundabouts.
One advantage to a story page rather than a story package is that more people may explore more aspects of the story if they’re presented in the same space. It’s very easy to quickly browse a gallery or watch a video if it’s immediately after an article and all you have to do to reach it is to continue scrolling.
Navigation
To explore the story page there are several floating icons that allow you to jump straight to slice you’re interested in, including links to the discussion thread and the ‘related content’ area at the foot of the story. These are pretty cool; essentially they’re a jazzed-up modern version of the ‘skip to content’ links that we’ve been peppering our sites with for a few years now except they’re not just for assistive devices, they’re for everyone, and they work pretty well. They always position themselves relative to the length of the page (though this might also work against them — as a user, I may find them easier to use if I always know where they’re going to be).
Their video player features both subtitles and transcripts which is a big usability and accessibility win. I rarely watch videos on sites because it either involves me getting headphones out if I’m in the office or turning down my radio if I’m at home, so subtitle support means I’m far more likely now to explore their video content.
The entire design is extremely polished; it feels like a finished product, very complete and lots of nice touches. It’s like playing a Nintendo game — I keep finding little secret bits and pieces like the hidden headlines at the very top of the page. I love every bit of their photo galleries. I love their timelines, visible on this story. There’s a Newsvine discussion about the redesign and predictably, most of the commenters hate it. In my experience, this means the team behind the redesign have done something worthwhile, and they should feel very proud of themselves.
Some niggles
If JavaScript is disabled, you lose a lot of functionality. Photo slideshows no longer work at all, for instance. Visitors without JavaScript enabled are a small minority these days but nevertheless, some more graceful degradation would be nice.
There doesn’t appear to be any way in referencing a particular part of the story. If I want to send someone a link to the video for instance, I don’t think I can — I have to send them the story link and tell them to find the video. It would be nice if there were per-slice permalinks for this purpose.
The video player is in Flash so I can’t watch videos on my iPhone. There does seem to be a mobile version of the site so maybe I’m just looking in the wrong place, but as MobileSafari is a fully-featured desktop browser, I generally resent being carolled into the cut-down mobile site.
Further reading
- Welcome to our new story pages | msnbc.com
- Quick critique of the new MSNBC redesign | cooper.com
- Touting Redesign, MSNBC Declares Pageviews ‘Dead’ | paidcontent.org
- Redesigning stories | jimray
Paul, thanks for taking the time to share your thoughts about our design changes. I particularly appreciate the Guardian comparisons.
You’re right about disabling JavaScript. We’re always looking for better ways to not be strictly reliant on JS for so much.
We did work to ensure that most pieces of each page are independently share-able. The video player has a ‘clip & share’ button that not only allows you to share the clip, but also edit which part you’d like to share. Each photo in a slideshow also has a share link, too. Click it and the bottom toolbar opens up with a link to that specific slideshow starting with that specific photo. Perhaps we need to make all of this a bit more obvious.
Also, we have an HTML 5-powered version of our video player for iPad users. On an iPhone, you get a mobile version of the site with many of the same features: expandable drawers, upscroll nav, etc. Videos there should play in QuickTime.
Best,
Ashley Wells
Creative Director
msnbc.com