Tag Info

Hot answers tagged

41

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


40

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


29

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


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


21

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


20

Why not show a few items from each list, and collapse the rest? Alternatively, use an accordion, but it may not always work.


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


15

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


15

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.


14

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


13

Marco Zehe, Mozilla accessibility QA engineer and evangelist, provided some advice in an article about implementing tabs in web apps with WAI-ARIA. He advocates cursor keys for moving focus between tabs in a set and then spacebar to activate the focused tab, which is consistent with the native desktop experience. Left and Right arrow keys should move ...


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


11

You could have a '...' tab and use some JavaScript (yay jQuery) to "scroll" to the right when you click it and reveal the other tabs. Then you could have an arrow on the left so you can go back to the newer tabs. (TY @ChrisF for the inspiration)


11

Color Separation I don’t know how much help this is, but I’ll re-cast your question into something more specific. As you intuit, you want high color contrast between unrelated things, and low color contrast among closely related things. So your question becomes, how do you determine the perceived degree of color contrast between any colors? The ...


11

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


11

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


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


11

It seems to be an attempt to : reduce the need for labelling and custom filtering allow users to process their emails faster (in a broad sense) help users to focus on what they feel is important at the moment: checking regular emails, social networks chores and notifications, promotional emails, etc.


11

If users want to share your content they will share the content. Trying to force their behavior works against you. Making them view the button isn't going to increase the quality of the content. Anti-pattern indeed.


10

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


10

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


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

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


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

My suggestion is to go for Tab + Filter combination.


9

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


8

There is Tab Candy http://www.azarask.in/blog/post/tabcandy/



Only top voted, non community-wiki answers of a minimum length are eligible