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.
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?
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.
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.
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.)
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.
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.