Journerdism

Will Sullivan's guide to mobile, tablet & emerging tech ideas

Four trends in newspaper website navigation design

Photo courtesy Lakewentworth via Flickr


If a tree falls in the forest and no one hears it, does it make a sound?

If your newspaper website has an awesome blog / article / section / multimedia piece / feature / whatever and no one knows it exists except for the members of your web staff that posted it, does it really exist?

User navigation of news websites is perhaps the biggest problem for the publishing industry since Craig Newmark did what newspapers should have been doing for years.

Lately I’ve noticed four consistent newspaper navigation designs emerging among websites and one solution I really think is a step in the right direction.

 

First, the two old school models:

Wall Stree Journal's vertical navigation

Vertical Navigation

There’s still a lot of newspaper sites that use vertical navigation, including all the Tribune-wide site redesigns. The NYTimes shook design trends (that were moving to horizontal nav.) with their redesign last year when they integrated vertical navigation on their homepage. Although their site changes to horizontal navigation whenever you click inside the site, so it’s kind of a mixed bag. The UK Telegraph’s recent redesign also integrates a hybrid horizontal and vertical navigation.

I’m still perplexed by vertical nav. (If you can explain it’s major benefits, please do so!) It may just be a legacy format, but so were animated gifs and we don’t use those anymore because better practices emerged. I just don’t really see the logic here putting a static object like navigation in the area with the hottest views–the F-Shape! And I really don’t understand why you’d want to bury some of your navigation ‘below the fold.’

Perhaps one benefit to vertical nav is there might be a slight SEO boost for having it buit static into the site, rather than as an item in a CSS list. And well, the flip side of the F-shape argument could hold water. (‘Put your static navigation where users are going to look for sure.’)

Overall, I’m a reader that digs big pictures. Big video. Wide views. And any static elements that cut that content well down aren’t cool in my book. It’s like advertising. I just gloss over it. (That is, if I actually had to look at ads and didn’t use Firefox and the greatest invention since the Internet — AdBlock Plus.)

More Vertical Navigation examples:

 

The Times of Northwest Indiana horizontal roll over navigation

Horizontal Roll Over Navigation

This decade, as CSS was widely adopted, many sites integrated the roll over navigation offering deep links into their content. This style still persists on many sites and definitely gets the job done.

Traditionally the options for this roll out vertically once the site viewer rolls over the link, but a new version with a second horizontal bar showcasing the second-tier options is making its way around the net.

More Horizontal Roll Over examples:

 

Now, a new trend that has me puzzled:

Naples News basic horizontal navigation

Basic Horizontal Navigation

Normally, I’m all for simplicity. Newspaper sites need it. But having a horizontal navigation without roll over limits you to at about only 12 options for deep linking (including advertising’s four — Homes, Jobs, Autos and Classifieds).

Most* of Scripps Newspapers sites are big on this with their corporate template and while I appreciate the cleanliness, we need to offer deep utility. (* = The Rocky Mountain News uses roll overs and is a linked example above)

The logic behind static roll over confuses me less than vertical navigation, but it’s still perplexing that on a website with 10,000+* pages of content, why wouldn’t you want to at least give readers an option to go deep and find that content from the home page? ( * = This would include articles, bridge pages, blogs, section level pages, multimedia, etc. and vastly depends on your company’s content archiving policy, so it could easily flex to hundreds of thousands of pages if you don’t expire articles after 7 – 30 days, as most sites do.)

Or maybe the Simple Horizontal Navigation is really, really brilliant. Brilliant like MySpace’s page inflating site design, which makes people have to click multiple times to get deep into your site. Bean counters love it. Brilliant!

What about the audience though?

I just don’t buy that people are going to work that hard to find your content. I subscribe to Tim Harrower’s old school design belief that anything deeper than 3 clicks and you’ve lost most people (I’d wager my paycheck that by forcing them to click a fourth time you’ve lost 70 percent of the audience. And I’d bet two paychecks that you’ll lose 97 percent for those on slow dsl or dial-up). I’m talking about the casual, daily reader surfing around (not someone not looking for the article that mentions their son by name). They don’t have to wait and dig through your site when the entire Internet is easier, quicker, more entertaining and only click away.

More Basic Horizontal Navigation examples:

 

The newest solution I’m intrigued by:

Tampa Bay's site map navigation

Site Map Navigation

The newest newspaper website navigation trend is, what I’m calling (because I haven’t seen a industry term yet), Site Map Navigation.

It’s Horizontal Roll Over Navigation, on steroids.

Using a horizontal roll over navigation, some sites are blowing out that roll over box to really showcase all the content and related sections available deep within the site. This essentially provides sitemap above the fold, on the home page without calling it a “site map” or some other insane jargon word that my mom (or other casual users) wouldn’t understand.

This method also helps combat the challenge of having immense levels of content and only one home page to showcase it on (which must be updated and changed constantly). AND it if done right, it can organize related content together so readers can understand what else is out on your site.0

My favorite live example so far is TampaBay.com and SacBee.com, who both not only get a lot of deep links in there but organize the content in logical chunks under each site sections so readers can logically see how things are organized and how deep it goes. Ohio.com also employs this method and the Sydney Morning Herald’s recent redesign integrated a “show site sections” button that is kind of a half-navigation, half-site map hyrbid.

Site Map Navigation examples:

 

Conclusion

San Dimas High School Football RulesIn conclusion, San Dimas High School football rules!

And…

The Site Map Navigation may not be the ultimate solution, but we need to integrate better logic and utlity into our newspaper site navigation because they’re a jumbled mess. We need to find a way to balance simplicity while also showcasing our vast expanses. This isn’t an ultimate fix by a long shot but it’s a step towards organizing our content — and perhaps more importantly — easily communicating to readers how the site is organized so they can connect with related content and what they want, when they want, as quickly as they want.

10 Comments

  1. Roll over nav is rarely done well. It’s hard on users and just doesn’t work as well as static links. It also has SEO problems in many implementations.

    Also, if you accept that web usage is intention-drive, that’s pull, not push, then you feel less compelled to load every possible link on the home page.

    Well established newspaper sites are seeing the home page drop as the primary entry page from 50 percent of traffic to 30 percent. More and more people are entering from multiple doors.

    For example, you could put your link to obituaries four links deep, and eventually your traffic to obits would return to present levels. People intent on finding obits will find obits. This realization can give you a great excuse to get rid of yet more link from your home page.

    Link bloat on newspaper web sites should be punished by requiring site designers to spend a night staring at a blank wall.

  2. Regarding vertical navs: have you considered the possibility that the “F-shape” has the hottest views *because* that’s where the site navigation has traditionally gone?

  3. Howard said:

    “Also, if you accept that web usage is intention-drive, that’s pull, not push, then you feel less compelled to load every possible link on the home page.”

    While I agree with this for the most part, you aren’t addressing a real problem: sometimes visitors, despite their pull/intention-driven orientation, just don’t know what to click. “Bucketing” content might be easy when you are thinking like a newspaper–”This is definitely ‘Metro’”, but most customers would rather see more options, not less–hence the success of things like the tag cloud and home page designs like this:

    http://www.mcmaster.com

    As people sniff for information, ‘lots of links’ can scent the trail through trigger words–text that evokes an ‘Ah! Yes!’ (see http://www.uie.com/articles/trigger_words/)

  4. Thanks for the comments guys.

    Howard—
    “Well established newspaper sites are seeing the home page drop as the primary entry page from 50 percent of traffic to 30 percent. More and more people are entering from multiple doors.”

    No doubt! But what does this have to do with static navigation elements built into the page? Wouldn’t it be even more critical then that we have a clear, uniform site map style navigation to let them know what else is available on the site?

    I also agree that people intent on finding obits will find obits eventually or (as I said in the entry) people intent on finding the article that mentions their son by name, they’ll find it eventually.

    But as I referenced multiple times in the entry here, I’m talking about the casual reader that has a busy life and isn’t an avid reader. Our avid readers are all dying off. We need to find new ways to build readership of non-avid readers.

    Michael—
    I think the F-shape goes back further than that to the basic principal in western societies that we read left to right, so we always start on that left column. But indeed, vertical nav is a legacy design.

    Matt—
    Exactly. Our buckets and newspaper jargon doesn’t fly in the new media age.

  5. Thanks for this Will. I don’t even really have the vocabulary or know-how to discuss site design, but you broke everything down really clearly. Keep up the great content.

    I just wanted to say I can understand rollover bars, but those second-tier rollover bars are truly irritating. I was using a site with three or four levels of rollover bars this morning, and my selections kept slipping out from under my mouse button in my pre-coffee fog. There has to be a better way than using second tier rollovers.

  6. Hey Jason,
    Thanks for reading and commenting.

    I definitely agree with your assessment on the second-tier roll over bars. I think this is partially what Howard was talking about with poor implementation. I’ve seen some of those dual roll over’s that are so sensitive it’s like walking on a tightrope with your mouse to get to the far right options. :)

    Cheers
    Will

  7. Like Howard, I too am seeing an increasing trend in visitors coming to larger sites through avenues other than the home page. Even more endangered are section pages, which can sometimes have as little as 2 percent of a sites’ total traffic.

    Being a Scrippsie, I’m all for the simple horizontal navs of knoxnews and our other Ellington-flavored sites. It’s easy to see at quick glance the general layout for stories.

    The sitemap nav concept is also interesting — I’ve been a fan of the sacbee design for quite some time — though I can see this can be really bad in terms of SEO/code architecture. View the source of tampabay.com and you can see what I mean.

    Also, what happens when sites start focusing on information rather than stories? What happens when we throw folksonomic tagging into the mix?

  8. Wow. I just noticed how entirely unusable the site-map navigation is on Ohio.com. Sometimes it stays up on rollover, sometimes it doesn’t.

    I guess someone forgot to test in that browser.

  9. Search is the future. If you just want to discover cool parts of a site, the best way to do it is through search. You can search for what interests you.

    The problem with this, of course, is that search engines on sites are soorly lacking. But with the right technology a person can search for keywords, authors, types of content (stories, photos, videos, databases, etc) and sections of a site.

    I’ve had the concept for what I call “dynamic search” for several years. If a journalism site properly employed this technology they could go with a simplier top navigation.

    The problem that most journalism sites suffer from is the wall of information. There is so much content that it turns away users, which is why Drudge is so popular. It’s just easier to use.

    Get rid of that wall, tag everything and make your search hyperpowerful. And get rid of all those worthless links in your navigation. Only core sections should be part of your main navigation.

  10. will —

    you miss out on so many cool interactive ads by using adblock. I think if newspapers had a clue about grabbing the attention of their users they should start following in the footsteps of their advertisers who are using interactive ads to promo their content on their own site — when i go to usatoday I am more compelled to play the orbitz golf ad than see the news content.

    I think advertisers are recognizing this and playing to this with smart marketing. now if only newspapers could recognize this and market their products on other sites . . . “if you build they will come” is not the answer

    sg