Saturday, September 9th, 2006

JavaScript Tabbed Widgets

Category: Component, Editorial

I have been working on a tabbed widget that is similar to the one found on the New York Times website below:

Most Popular Widget

In some ways this is a great little widget, as it puts a lot of content into a small package, and lets the user switch around to get what they need.

There were two problems with it though:

  • Usability: I did some usability testing, and most of the ‘average users’ didn’t get it. One purely saw this as one list of the most popular items, and didn’t even SEE the options, let alone click on them. This shows that users may be used to tabs in desktop apps, but they do not think of them on the web yet, and maybe especially on a newspaper site (you don’t tab around a real newspaper).
  • Why choose?: The options in this case didn’t mean much to the users. They just wanted to see the most popular items. They didn’t care how the popularity was calculated. Emailed, blogged, searched; who cares? It would be better if the algorythm behind the scenes just took them into account. E.g. blogged > email > searched. The tabs that would make sense give you different items. E.g. most popular across the entire site, versus in a section of the site.

So, after all of this, we are wondering if the nice effects (giving users simple access to more info via tabs) is worthwhile yet, and if people are going to get more used to this interface on the web. We would see very different results if this is on a site like ajaxian.com vs. baby.com.

Have any of you had experience with this?

Posted by Dion Almaer at 7:16 pm
18 Comments

+++--
3.9 rating from 56 votes

18 Comments »

Comments feed TrackBack URI

It is definitely confusing for some if you’re trying to “sort” a given information item; it is better to give more defined choices that are distanced from one another. For instance, it makes sense to have a top 10 list with tabs for most popular, most comments, and most diggs (or what have you). I don’t particularly like the idea of list that is broken down by the origin of information, e-mail, blogs, etc. It’s too specific.

I just found out today that jQuery is used for tabs on the Political section of MSNBC: http://www.msnbc.msn.com/id/3032553/

Tabs are for headlines, video, and a map. Still might be overkill for some, but each tab is significantly different enough that you can maximize screen real-estate without getting too confusing.

Comment by Bradley — September 9, 2006

Interesting finding you had there about the usability of tabs. Did you try to change the look of the tabs or a heading besides the tabs (“choose one: “)? To see if the problem is with the tabs or with the particular look. E.g. the NYT ones in the picture above might be a bit too subtile.

Take a look at the tabs in the info windows in google maps business search (search for a restaurant, these are likely to have tabbed info windows). I can imagine their design makes it much easier for users to understand tabs.

You made a good point with your second question and I agree with your conclusion. It looks like a technical approach, “we have the data, lets show it”.

Comment by Martin — September 9, 2006

http://in.rediff.com/index.html also offers similar tabbed feature. Its a nice feature which helps me in glancing through all the important headlines at a go.

Comment by Sandeep — September 10, 2006

http://www.zapatec.com/website/main/products/tabs/
lots of features.

Comment by andrew — September 10, 2006

I should have snagged that code when I did mine. Fortunately, I was able to make one with scriptaculous at http://www.popsyndicate.com

Works great and the whole point was to not take up a ton of vertical space.

Comment by Chris Williams — September 10, 2006

Very interesting. I’m also curious how the design of the widget will impact results. I think two enhancements would greatly improve usability:

– Use contrasting colors to indicate selected vs. unselected tabs.

– Use more descript labels or some other indication to informa users that selecting a different tab changes the “source” of information.

Comment by Kyle Scholz — September 10, 2006

If links don’t look like links, users don’t think they are clickable. Anchors in the NYT tabs are non underlined (until you roll over them), and have non-standard colors.

While I haven’t tested it, I also think tab interfaces should have space between the tabs to make them recognizable as tabs. This is the way Amazon always does it, and I am pretty dern sure they tested the heck out of it.

Comment by Dan — September 10, 2006

Interesting Finds: September 10, 2006

Trackback by Jason Haley — September 10, 2006

A great way to get people to SEE the tabs, is to include icons for each one. Thisi s ‘almost’ what yahoo does on their new homepage (OK, not sure if hidden tabbed panes are quite the same).

Comment by Tarwin — September 10, 2006

Nobody cares how the content got there, they care about attributes they can use to determine whether they want to read it. Instead of “blogged, searched, emailed”, try something like “most popular”, “editorials”, “newest” – [search]. Also, add colors and icons (as mentioned above) and I think the usability and frequency of use of it will rise. This is the only way I was able to combat this same behavior in a few of my e-commerce sites.

Comment by Chris Hamilton — September 10, 2006

This is an excellent example of how essential user-testing really is. Web developers spend so much time (and therefore money) making these clever interactive elements, but if your average user doesn’t understand them then this is a waste of time.

At the launch of PAS 78: Guide to Good Practice in Commissioning Accessible Websites the biggest take-home message was that user-testing is not optional to ensure good web accessibility. It’s nice to see the same message being shown for web usability too.

Comment by MicroAngelo — September 11, 2006

[…] http://ajaxian.com/archives/javascript-tabbed-widgets […]

Pingback by 本日書籤 « penk - Keep on rockin’ in the free world — September 11, 2006

I’ll join the crowd pointing out that the design of the tabs can have a great effect on usability. Also check out my unobtrusive-JavaScript tabifier.

Comment by Patrick Fitzgerald — September 11, 2006

I completely agree that tabbed pane increases application usability. Content might be grouped into separate blocks and displayed later on tabs. Also tabs navigation look very handy even it was triggered programmatically – user still sees the same tabbed pane and easily may switch active tab.
Check out tabs usage example in my real estate project at http://realestate.mapbuilder.net/demo/MyCompany/Demo2.0.php

Comment by Andrew Bidochko — September 11, 2006

How about this…
http://www.barelyfitz.com/projects/tabber/
???
;-)

Comment by kanenas.net — September 11, 2006

These tabs are useless. What does it matter how things are ranked according to their technical context? I’d bet over 90% of people never click off the active tab.

Content specific tabs might work, but even then I’m guessing most people won’t noticed that they can click on different tabs and see more items.

Comment by Rob Sanheim — September 11, 2006

I made one a while back for a man who was selling his house.

The top part was the graphic area, and the bottom was made up of a tabbed interface with three tabs: Pictures, specifications, and contact.

The first tab had a list of pictures. If you clicked on a picture, it would immediately put it in the top window, while you could move to the other tabs and view the specs of the house and use the last tab as a contact form.

Very kewl technique and visually appealing.

I was using DIV’s on a page and everytime they clicked on a tab, it would display that tab’s DIV. The exact way that the New York Times does it.

Comment by jdanylko — September 12, 2006

New York Times readership is relatively sophisticated, so your average users and NYTimes readers may not be the same. The NYTimes has a significant budget, and I assume they exhaustively tested their interface before rolling it out.

That said, I got to this page because I was looking for a tut on how to actually implement this. Can anybody point one out?

Comment by jonah — September 20, 2007

Leave a comment

You must be logged in to post a comment.