Grid Format User Interfaces All The Rage?

Navigating the home page of most newspaper websites stinks.  There are literally hundreds of links scattered about with very little thought toward user engagement and ease of use.  In the 14 years that most news sites have been in use, it still seems easier to navigate a printed newspaper than a news site.

Personally speaking, I can skim through an entire Wall Street Journal in about 5 minutes before going back and reading entire articles that interest me.  Try doing this on a news site and you will quickly realize that there is no seamless way to recreate the speed and effectiveness.  The New York Times article skimmer and others below attempt to solve this problem.

The New York Times is working on the new user interface prototype for their content called ‘article skimmer’.  Below is a screen shot of their Dining & Wine section in Article Skimmer. It’s a nice clean layout, good for scanning.

Below is a screenshot from their current Dining & Wine section.  Skimming for interesting articles looks much better in the Article Skimmer, but where did the special features like search and the dropdown topics go?  Which of the two looks easier to navigate?  Which is more intuitive?

MSN is currently beta testing something similar for their celebrity / movie news site Wonder Wall.

Newser is an online news service that adds human intelligence to machine-driven aggregation.

All sites are attempting to create better User Interfaces to the content within.  All use a grid format that features text,  photos, video and audio to engage the user.  All use Javascript to allow dynamic content display without refreshing the entire page.  Newser takes this one step further and filters their content from over 100 news sources, kind of like a visual Huffington Post or Drudge Report.

The Article Skimmer site is completely unusable on my Blackberry World Edition, with or without Javascript enabled.  This may be a shortcoming of that phone, but a successful site like this should be platform agnostic, besides, Newser works on it… kind of.  Maybe NYT will release this as a downloadable application, who knows.  Like I said earlier, this is a prototype… only the beginning.

RELATED:

Thanks to reader “dana” for bringing my attention to Tastespotting’s home page and use of a grid user interface.  From their site:

Founded on the idea that we eat first with our eyes, TasteSpotting is our obsessive, compulsive collection of eye-catching images that link to something deliciously interesting on the other side. Think of TasteSpotting as a highly visual potluck of recipes, references, experiences, stories, articles, products, and anything else that inspires exquisite taste.

Eye-catching is right.  This site was launched in 2007, I don’t know how long they’ve been using this display layout but it is the best one I have found to date.  The number of cells in the grid expand or contract depending on your screen size. Above is what I saw on my 14″ laptop without scrolling and on my 24″ iMac it displayed 3 rows of 6 images without scrolling!  So cool.  and (There’s more!?) yes, they use the grid display on all their main pages and the site rendered flawlessly on my blackberry.

UPDATE march 3, 2009:
I contacted the Tastespotting people and asked a few more questions about their awesome layout, enjoy!

RI - I love your grid user interface.  I blogged about yesterday for metaprinter.com.  Can you tell us more about the display?  Who designed it?  How long have you used it?  Would you ever switch away from it?  Do you read a newspaper or news site?  Do you think they can use a system like this effectively?

SARA- Hi Robert!

Thanks for the love, the mention! What more do you want to know about the display? We designed it (if you’re asking who *specifically* put the CSS/html together – that’s a group of my friends who are designers)

We’ve been using it for a little over 2 years ever since we launched the site. The site was launched expressly with this layout in mind for users. Not sure how we would switch away from this setup as the setup itself is kind of the purpose of the site – portal-y, gallery-like view of image-driven content.

Personally, I do read newspapers, but I’m not sure this design works for them, as news sites’ content is so much more about the words than images. It is easy to visually scan 48 images and decide what is or isn’t worth a clickthrough, but words are harder to process that way. The design with large images works for anything/subject/category that has a lot of importance on the visuals – think of anything that has lots of magazines that are eye candy – food, fashion, cars…

That’s all I have. Let me know if you have more questions!

cheers,
Sarah