Is anyone aware of any research that has been conducted into the effective usability of tabbed menus versus ‘standard’ left hand navigation menus? Have spent ages searching but can’t find anything relevant and conclusive. Would be grateful if anyone could point me in the right direction.
Thanks in advance.
benz1
Do you mean menus that stretch across the top of the page vs menus that go down (vertically) the left side?
Usability and eyetracking studies point to an “F-shaped” pattern that’s created as people go through either an unfamiliar page or are looking at navigation. This is both because that’s where navigation and main page headers are, and people build that way because that’s where people look… you know, one of those vicious circles or whatever.
Right-hand (vertical) navigation menus then seem to get a bad rap, but if the site is built sensibly, people have little trouble using those either.
I haven’t seen anything definitive regarding what’s better: horizontal top navigation or vertical left-hand-side navigation. They are usually pretty equal. Though if your top navigation is really long, you know it may have to wrap to a new line. Multi-line navigation can get hard to use pretty quickly.
Thanks Stomme poes. Tabbed menus could be a horizontal menu across the top of a page but I’m thinking more as a supplementary menu within a page replacing what would otherwise be a sub-menu on a vertical or horizontal menu. Does this make sense?
When you said a ‘tabbed menu’, I understood a set of tabs that, when clicked, revealed hidden content. Do you just mean a normal menu?
If you are going for the look of a tabbed interface like a Windows dialog box, bear in mind that people will expect the functionality to be similar to a dialog box - inasmuch as the content should all be closely related and on the same topic, and if there is any kind of user input then you need to either save it automatically on switching tabs or make it clear that navigating to another tab will lose any changes.
If you are looking to have pop-out menus, it’s better to have drop-down from a horizontal bar than fly-out from a vertical bar, as it gives people a wider path to follow with the mouse.
What I’m looking for is research on the usability of the type of tabbed info boxes used on sites such as Yahoo! Finance - Business Finance, Stock Market, Quotes, News (in the left and right columns, not the navigation) versus simply having extra sub-menu pages.
I have a client that is of the opinion that they are not very usable so am looking for some research to support this one way or the other.
Thanks.
To me, that isn’t actually a tabbed interface. It’s a horizontal menu with drop-down sub-menus, that happens to be styled like tabs … but that’s a different beast.
As I said before, drop-downs from a horizontal list are better than fly-outs from a vertical list.
For maximum usability, you should have the sub-menu for the current area present as a static list. In other words, when you’re on any page within the “Personal investment” section, the “Personal investment” sub-menu should be on screen, maybe as a second line under the main menu - that ensures that even if people have trouble using the drop-down, they can still get to all pages.
As I said, I was referring to the tabbed sections in the left and right columns (Market Summary, Quotes & Rates), NOT the main navigation menu at the top of the page that happens to be a tabbed style.
I’m really looking for research into the usability of tab menus, not suggestions or opinions as I need facts and figures but thanks for the responses anyway.
Benz1
Now that I know what you’re talking about:
Jakob Nielsen on tabs (His actual research is published in books and PDF form, but they are large, expensive studies, often done for clients, so you will pay for detailed study results… not a bad thing, I have one and it was excellent.)
search to Tabbed Dialogs:
Tabbed Dialog Layout (as part of a school course)
Excerpt from Aaron Gustavson’s book @ A List Apart (not a whole lot here)
Old examples of BAD tabbed dialogue interfaces (famous old MS mistakes lawlz… mostly, tabs were more than one row. Avoid.)
Steve Krug mentions how to make sure they are usable in his book Don’t Make Me Think: They need to be obvious who’s selected, all tabs must be visible at once (no adding new choices dynamically) and that one of them is selected by default. Of course they need to work with keyboard like any selectable thing. A good book to purchase ANYWAY.
This is kind of a good idea: Make paper prototypes of the tabs you plan on building, and do real user testing with them. Just ask people what happens when they click on X, and/or ask them what they would do (or, it you must tell them, where they would click) to find information X. Nothing wrong with local, real testing. It gives you a kind of tangible data that online studies can supplement.
Search terms: tabbed interfaces, tabbed dialogues, + usability
Thanks Stomme poes, some interesting reading there. I think we’re going to implement both options, i.e., tabs and sub-menu and then use a heatmap over a period of time to see which is more popular.
Thanks for the links.
Steve Faulkner just twotted these, from nomensa:
Accessible Tabs #1: the problem
#2 the solution this one has a link to Jason Kiss’ article which is also quite good, if you’re interested in ARIA.
Great links, poes. I look forward to exploring those solutions. So far, have just tried out the Really Accessible Tabs first example with VoiceOver, and it’s still a bit confusing … though perhaps a seasoned VO user would understand what’s going on. Not sure.