 |
| [Screenshot of Mashable.com from Jan. 16, 2013] |
+Mashable redesigned its website in December, and while I don't think it does everything right, the folks at the popular tech site made some very interesting decisions about how to present content that I think reflect some new realities about how people navigate content on the Web.
It's a bold redesign that is almost consciously different than anything that currently exists on the Web. Here are the takeaways for me. [tl;dr at the bottom]
3-COLUMN LAYOUT: Using the eye's natural tendencies
Mashable has chosen to believe that the eye will gravitate to the right naturally, so instead of putting the biggest stories top left, they put their newest stories on the left, with small thumbnails that ensure more new content is visible above the fold in that column.
In the second column you get the fastest-growing content (a friend at Mashable confirms these are the ones most rapidly growing in traffic) to see what's buzzing right now. Think of it like a Rally-car race: these stories haven't gone as far as the ones that went before them, but they are going the fastest. Each one even comes with a tiny line graph showing its speed.
On the right, with the biggest images and therefore most editorial weight, are the biggest stories on the site right now. Most-viewed overall.
INFINITE SCROLL: The killer app
While a bit buggy and jumpy, the most important thing about the redesign (though of course not unique to Mahsable) is the dynamic loading of content as you scroll down. This creates literally endless pages. The more you scroll the more content you get. Readers can go as deeply as they want.
And while this is great for section fronts, it is most innovative on the story level - if you read to the bottom of a story, the site basically loads the section front for that category below. Reading a lifestyle story or a story about social media? Well when you're done you'll get a basically endless amount of other stories in that category without clicking back to any section fronts. Very nice.
MINIMAL NAVIGATION: Goodbye stacks of subnavs
While you can navigate by content type along the top of the page, where a simple rollover will load links and images for 5 top stories, there are not a million subnavs and buckets breaking things up on the page.
To me this reflects a new philosophy of what people look for when they come to your homepage. They don't come thinking "I wonder what the latest lifestyle/business/video game content is on Mashable", rather they are thinking "I wonder what's new, I wonder what's trending, I wonder what I should know about because everyone else does."
Adjusting to this reader mindset is a very smart move.
MOBILE-FRIENDLY: Perfect integration with a phone or tablet, whichever way you hold it
Consistent design is important in our multi-screen lifestyles now, and Mashable now delivers the exact same experience no matter what device you are using to access it. Stories are all easy to click and navigate on iPhone (1 column at a time) and iPad (2 columns in portrait mode, 3 in landscape), and everything works the same way.
IMAGES EVERYWHERE: Gives readers something to click on
No plain headlines anywhere on the page, which is very satisfying. Click-maps that I have seen at several websites that I have worked show that people click on the thumbnail way more often than they click on the headline.
~There is one drawback~
NO CLEAR CATEGORIES: All stories look the same
When you have pages with infinite scroll, I believe it's important to give more at-a-glance information for people skimming the whole page.
Some visual cues so you could see which stories are in which category (if you want to scan for the latest social-media-specific content, e.g.) would be helpful. The topnav, which follows you down the page, takes care of that to some extent, but they have to look somewhere else to get it.
THE CAVEAT: It's Mashable
While this type of design makes more sense for a narrowly focused site like mashable than a truly general-news website, I do think it's smart in some of the ways it adapts to the way people consume content online (coming in one story at a time instead of navigating section fronts), which I think is a relevant lesson for any news website.
Verdict: 5 stars, once they fix the laggy loading.
[tl;dr]
Mashable's redesign succeeds in 5 big ways: Infinite scrolling, 3-column layout that emphasizes new content and works perfectly on mobile devices, minimal navigation menus and photo-heavy layout. It has one drawback in that categorization of stories is not very clear, but there are lessons to be learned for all news websites from the new Mashable.com
No comments:
Post a Comment