Thanks for visiting New Media Bytes. If you like what you see, subscribe to my RSS feed.

A week or so ago, a thread on the ONA listserv asked members about their experiences using tabbed promo boxes to promote different stories/sections.

I’ve long been a fan of these boxes, which allow producers to cram more stories on the front page of a site and gives readers teasers into sections so they don’t have to leave the homepage. If you’re interested in building one of these boxes, take a look at this ajax tabs content script.

Here are some of the pros:

  • Ability for content producers to tease more stories/sections on their homepage
  • Better navigation for users
  • Teasers can be browsed without having to reload the page

Cons include:

  • Fewer page views, which means fewer ad impressions
  • Fewer chances to look like an outdated news site! ;)

My vote goes for implementing these boxes when you can, but beware. Do it right or you could end up frustrating users.

What does it mean to do the tab box the right way?

First, make sure you are designing the box to look like a tabbed box. That means:Washington Post tabbed promo box

  • The viewed tab is highlighted and its content is shown
  • The remaining tabs are shaded, and when clicked, they will be highlighted and show content
  • Tabs should have spaces between them
  • Tabs should not be made with flash
  • Tabs should be on the top of a box

The Washington Post does a good job of helping users recognize that they can click the tabs and view more content. They use shades and gradients in their boxes to make sure readers know which tab they are viewing.

Now take a look at the tabbed promo box at the Orlando Sentinel.

Orlando Sentinel tabbed promo box

They follow many of the ideals I mentioned earlier about the better way to presented a tabbed promo box. They also have a nice feature on the top-right of the box that allows users to “play” the box. This means the box will cycle through each of the tabs.

Sounds good, but is it useful? Do news readers like to sit and watch a page, then try to read a tease before something interesting is replaced without warning by the next rotating promo?

Additionally, the tabs look more like links than tabs. It’s not apparent that if you click those tabs, you will stay on the page. Rather I would expect to go to a section.

The counter by news sites is often that readers will learn how to use the site and then the problems with navigation won’t necessarily matter. But why do we want our readers to go through the trouble of learning a site’s navigation?

Ask website usability expert Stephen Krug this question, and his answer would most likely be “We don’t.”

Why force readers to learn a system when it should be inherent to them how to navigate the site to get their news. Readers can simply click away and find their news in an easier format, such as Google News. It’s the site producer’s job to keep users on the news site, so shouldn’t we make it easy for the reader to do so and not have to think about how to get the content they need?

I found another example at the Atlanta Journal Constitution website of just a minor tweak that could get their tabbed promo box in style with others, and wouldn’t make users have to think about navigation and usability.

Atlanta Journal Contsitution tabbed promo box

At the AJC, their tabs for their tabbed promo box show up on the bottom of the box. Not a big deal, and they make the shades on the tabs very recognizable. Kudos for that, but I don’t see the reason why the tabs couldn’t be along the top, which is more common.

Obviously, these sites have designers and people making the call. I base a lot of what I say on the principles in Krug’s book.

Check out a sample chapter from the book “Don’t make me think.”

Do you have any thoughts about tabbed promo boxes? Have a good example of one or thoughts on producing them? Let me know what you’ve experienced with them.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]