Hot answers tagged

41

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


27

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


23

Which relationship do you want to emphasize? Use that to inform your decision. The down arrow in your image indicates a relationship of "is title of" or "is detailed by" or even "has child", whereas the up arrow indicates a relationship of "is detail of" or "has title" or even "has parent". I suspect the down arrow is more common and thus familiar to more ...


21

Adding to Will's answer, if you're looking for a non directional highlight, here is a great example from Google's material Design Material design guidelines on using Tabs The tab corresponding to the visible content is highlighted. Tabs are grouped together and the group of tabs are in turn connected with their content. Keeping tabs adjacent ...


21

If 3 tabs constraint is given and can not be changed then it is difficult to answer without understanding functionality and context. Basic, Advanced and Whatever are unlikely the categories users use to think about the problem. If your Basic tab contains size and color parameters call it Size & Color. Basic or Advanced does not have information scent, ...


18

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.


18

Per the Material Design Guidelines on top-level view strategies, three main strategies are: Focus on a single view with embedded navigation. By putting all the necessary navigation directly inline with other app content, you make it extremely visible to the user. This can be appropriate when the app’s navigation model is very simple. However, presenting a ...


15

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


15

Take cue from this. This scheme is followed almost everywhere. The selected tab seamlessly merges with the content area while other tabs have darker tone in general.


14

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


14

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


14

You can try breaking the tab control into a master-detail combination. Then you have all the width you want and a more uniform display of the key information (the columns). download bmml source – Wireframes created with Balsamiq Mockups


14

Given that my comment gets some upvotes, I'll put it in as an answer. Change to two tabs, basic and advanced and put the advanced and debug options in one list. Try and let go off something if it doesn't work. You were thinking about having three tabs. This idea gave you the label problem. Maybe it is because of the three labels. If that's the case, let go ...


13

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


12

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


12

I like the this multi-level tabbed interface although I'm not sure it meets your needs: Originally found here: Designmodo Futurico UI Pro This UI pattern is also used on Github:


12

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 both look wrong and unecessary. For a tabbed interface the colour of the tab should be the colour of the selected page.


12

My recommendation would be for option A as you are providing a visual indicator from the tab text to the content below stating that this is the highlighted tab and the related content for it is below as shown in the screenshot below This will hold good even if you move on to the other tabs as the users will scan the content from left to right and with the ...


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

This sounds like it could also apply to a horizontal main navigation for a site. Brad Frost has several options for responsive navigation systems, but the next two seem most appropriate to what you're trying to accomplish from his options. Here are those two and a third approach: Dropdown Tabs A popular way to solve this is to switch from tabs to a ...


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.


11

Don't compromise your UX for the sake of following material design. Material design is meant to compliment your UX, not dictate it. So don't follow it to the word. 1st decide on what's the best user experience and then decide on which and how much of googles material design guidelines you are going to use.


10

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


10

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


10

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


10

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


10

I haven't seen, nor was I able to currently find any studies specifically evaluating tab-based navigation vs. drop-down menu based navigation. I believe that this type of question of which navigation is better almost always boils down to which is better for the context. Thus when considering the specific examples you have posted above I do have a few ...


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