Hot answers tagged tabs
40
How about just showing the last 10 years of awards with the 11th tab to take you to the previous 10 years?
2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older
Most people are only going to be interested in the most recent awards, so having the older awards a second click away shouldn't be a big problem.
Clicking on "Older" would show a page with the ...
38
Chrome does the same thing:
There are two reasons for this:
It makes it hard to click close on accident. This is easiest to note on the Chrome example, if every one of those super teeny tabs had an X, it would be extremely difficult to select a tab without closing it. Prefer safe actions. If you have a safe action and a risky action, the risky action ...
27
I am going to disagree with you on this one. A logical structure to the site would match a users Mental Model, and by scattering the tabs in a seemingly random order this wouldn't equate to logical in my opinion.
OK, eye tracking studies may show that the user bounces around the screen when they are looking at it, but I don't believe that is a reason to ...
26
This is called an accordion navigation control, or accordion menu.
Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options.
Use when there are more than 2 main sections on a website each with 2 or more subsections.
Use when you have less than 10 main sections
Use when you only have two levels to ...
19
It definetly breaks the tab metaphor.
Yahoo's Design Pattern Library explicitly states they should be single-lined:
Present a single-line row of tabs in a horizontal bar under the site branding and header
And there are some pretty nasty examples in a 1999 information architecture company's page.
Another article on using the tab pattern in web ...
17
I think the master-detail paradigm may work here.
For example, look at the browse dialog of Windows7 below.
Ignoring the possible tree structure on the left, whatever you select on the left, changes the content of the right panel.
A similar structure can be found in Microsoft Office, for example when creating a new document.
17
Interesting theory based on mammalian visual processing, with significant implications not only for tabs but for any menu or list. It's also against just about every HCI standard and style guide I can find, many based on years of research and operational experience, going all the way back to MIL-STD 1472. Could they all be wrong? There’s pretty firm research ...
14
Wow, I am going to be the only one to answer this way: It's fine in the right context!
Your example is the wrong context. Steps in a wizard are not tabs. However, it's fine to use tabs within tabs if you follow the rules::
Each level of tabs should visually differentiate themselves so its clear what level of organization you are working on.
Limit ...
12
They are neat, that's for sure. However, the function of interface controls should, in the very least, be
plainly apparent by their appearance (or, conform with user expectations) and
consistent throughout an interface.
These hover-to-activate section tabs are troublesome for a few reasons.
First, their appearance likens them with other click-only ...
12
In Designing for Senior Citizens | Organizing Your Work Schedule (UXmatters, 2010), several "experts" including Dana Chisnell, Steve Baty, and Pabini Gabriel-Petit discuss the issue of designing for senior citizens. The article references original sources at the end.
Specifically, they mention legibility through color and typography usage. They mention ...
12
I had the same problem a year ago, and I went with the following solution:
When the width of the tabs is less then the width of the container, all tabs are visible.
If the tabs are wider than the container, an arrow appears on the corner, giving access to the hidden tabs upon click. The selected tab is always visible.
11
Tabs are considered to be related to each other where as Navigation Bar are not.
Tabs are generally used to segregate data are somehow related. Like A profile can be displayed in Tabs where it can be divided in Personal, Professional, Education tabs. It is mainly used to show data about the same hierarchy but different in nature and also for organizing the ...
10
Good question!
Tabs have unlimited height and they can span a number of screens, while an accordion must fit on one screen. It's not a technical limitation, of course, but it would be a terrible idea to make an accordion that expands away out of my field of view, because then I'd have to scroll down to click the next "bar", just to have it expand up and ...
10
As with any other objects that don't really have a single global name used by everyone, different people will call it different things.
Developers who use a particular toolkit might refer to it as a TabPage, ItemContainer or something else (yep - including the CamelCase!).
Designers might use content-pane, content-area, or just simply tab.
The point is ...
9
One immediate solution to your problem is to put your tabs on the side. With tab labels stacked vertically, you can keep 20 or more visible without the user resorting to scrolling. It’s easier for a user to scan down a list than across for a target item, so this is good practice whenever you have a lot of items.
The tabs-nested-in-tabs is a problem that ...
9
Simple:
First off, you may find this question about best practices for tabs interesting where faceted navigation is proposed as an alternative for nested tabs. As the comments point out, it can be a more deeply rooted problem of Information Architecture and addressing it could prevent you from creating nested tabs altogether.
Also, this question about ...
9
Maybe, maybe not, but it is not "bad" because it violates a "rule".
Rules don't always work in all situations. One of the main reasons designers exist is to decide when rules ought to be broken, or what rules are useful in a given scenario.
For instance, there are (at least) two general "rules" (I prefer the terms guidelines or patterns, for the record) ...
9
You pretty much want to go for one or the other extreme, where the extremes are:
Explicit Save for Everything. Everything needs saving through an explicit command.
Autosave Everything. Everything is saved automatically and instantly.
You want the user to have as simple a mental model of the system’s behavior as possible. You don’t want to burden the ...
9
I am going to go with Schroedingers Cat's answer but I would recommend keeping the tabs active and present a notification such as there are no bookmarked people or something along those lines. The reason being some people might not understand that a tab is grayed out or inactive and might try to click it and get confused.
From an anecdotal point of view, I ...
8
This is a topic I'm particularly interested in, because I actually do not like tabs for most situations. I think we do sometimes fall back on tabs a bit because it's an easy and common option to present more information in less space, rather than perhaps thinking around the problem a bit more and understanding the user's relationship with the data.
In ...
8
I've just conducted some 'extensive research'* into this comparing how various browsers and desktop applications treat this issue and my findings are thus:
Axure - Shows tab to the right of the one closed
IE9 - Shows tab to the right of the one closed
Firefox - Shows tab to the right of the one closed
Chrome - Shows tab to the right of the one closed
...
8
If you have two groups of tabs, users may think they can only select one, regardless of where you place them. In general, we are familiar with the perception of only having one tab selected. I would suggest a similar approach as mentioned in another answer but with radio buttons rather than checkboxes as I believe you only want the user to select one "mode".
...
8
Rather than have really long pages inside the tabs, fix the height of the tabs so that they occupy the full height of the screen and use a scroll viewer inside the tabs to display the content:
download bmml source – Wireframes created with Balsamiq Mockups
This way the tabs are always visible at the top of the screen where the user expects them ...
8
As mentioned in Smashing UX Design by Jesmond Allen and James Chudley of cxpartners, who have many years of experience with high profile retail website, they recommend using tabs in this way with caution as in usability testing they find that people don't always see the tabs.
Tabs typically differentiate unconnected groups of items. Compartmentalizing items ...
7
I would recommend an Accordion. Or how about an Expander or Cover Flow metaphor from Telerik?
7
I can see the logic in what you're saying and this type of question is the stuff that really fascinates me... BUT Im not convinced either that the second most important tab is the last one in the list.
What if you had a list of tabs that was say 6 or 7 items long. That's a lot of screen real estate for a user's eye to jump around over, and if they see a ...
7
I don't see any problem with the way that you have it now.
When someone clicks the back button it is to go back to where they were before rather than some idea that it should take you back to the previous node in some structure.
You're using it for a browser, so if I really want to go back to a tab that I was at 20 tab changes ago, I can simply click on ...
7
The problem with tabs within tabs is mostly visual, not logical. The situation you describe has three navigation levels - that's not that uncommon. If you make the different navigation levels look different from one another, you'll find that the perceived complexity is reduced.
download bmml source – Wireframes created with Balsamiq Mockups
6
Do you know what it is about visualizing tabs they don't like? Since all tabs are is an anchor that shows/hides a container, you could still do it the same way but without actually making it look like folder tabs. You could follow Dan's suggestion (which is really the same thing as using tabs without the visual cues) or maybe you could make a case for why ...
6
Senior citizens and E-commerce websites: The role of perceived usefulness, perceived ease of use, and web site usability (PDF, 2008)
Age differences in constraints encountered by seniors in their use of computers and the internet (paid content,2011)
“Partnering with Seniors for Better Health”: computer use and internet health information retrieval among ...
Only top voted, non community-wiki answers of a minimum length are eligible
