SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbed menu usability?

    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

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by benz1 View Post
    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.
    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.

  8. #8
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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, 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

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.)

    Go ahead and read this one, but I suspect 20 years has made a heck of a difference in whether users know how to use tabs

    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

  10. #10
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •