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


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


22

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


21

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


20

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


18

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


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.


16

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.


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

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

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


12

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


12

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


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

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

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

They both look wrong and unecessary. For a tabbed interface the colour of the tab should be the colour of the selected page.


10

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


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



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