Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In a tabbed interface, each tab has... "content" associated with it. Each tab has distinct "content"; e.g. in a web browser, it would be a web page. And each tab's "content" gets stuffed into a single shared area of the screen... the "content area," say.

What are these things actually called? I.e., what terms could I use that would be universally understood by designers, programmers, etc. who work with tabbed interfaces?

share|improve this question
    
Tabs in a browser aren't the same control types as tabs in modal dialogs. –  dnbrv Jan 9 '12 at 15:38
2  
Depending on how you're referencing the tab content the term "tab" may suffice. Saying X control is "In the Options tab" is understandable to anyone familiar with tabs. –  Ben Brocka Jan 9 '12 at 16:04
    
tab page - or am I missing something!? –  Roger Attrill Jan 9 '12 at 16:06
2  
"Content area". Or if specifically referring to the content within a tab "The Tab's Content Area". Don't over think this. ;) –  DA01 Jan 9 '12 at 16:15
3  
@Domenic ah, to refer to it internally I would call it the "tab content" or the tab's "content area" –  Ben Brocka Jan 9 '12 at 16:18
show 4 more comments

11 Answers

up vote 11 down vote accepted

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 that it doesn't matter whether you choose to pinpoint a single phrase, you will always meet people in your business who will call it something else.

Think of it like this: It doesn't matter that I'm a safe driver, there's no accounting for everyone else out on the road.

So whoever you meet, whoever you talk to, in whatever department or role, just make sure that you either agree the terminology that you will use with that person (and this applies to all areas - not just tabs) - or even better: adapt yourself to their world. It's just part of a UX role that you interface with people from many different departments and backgrounds.

If speaking to groups then make your own terminology clear, not in a patronising manner, but just in a casual drop-it-into-the-conversation sort of thing that gets everybody reading off the same (tab) page without requiring a conversation.

share|improve this answer
    
+1 a good pragmatic answer –  codeinthehole Jan 10 '12 at 10:44
add comment

I refer to each control, pane, window, widget that the user can manipulate with the keyboard and navigate to as a Tab Stop.

share|improve this answer
add comment

I call the content in a tab "panels". Although, I have to agree with Roger, above, that jargon varies tremendously from place to place. It's only in the last five or so years that I've seen some standardization in the terminology for web elements.

share|improve this answer
add comment

Visual FoxPro has a container called a PageFrame, which contains 1 or more Pages, which may or may not be tabbed. I'm not sure if I've seen any other development environments that use this nomenclature, though.

share|improve this answer
add comment

Its easy to get caught up in the coding side of things. My answer to this question is that its "information". The information is organized into sections. These sections are arranged to make them accessible to a user. You can decorate the navigational element or the point of interaction using a metaphorical appearance. Using an element decorated as a tab affords the user a clue as to how to access the content. Most likely the metaphor hints that this is several related content regions that occupy the same space (like a paper file/folder situation).

When I annotate my wireframes I try to make sure not to refer to the section as a "tab" but rather what the content section contains (e.g. "User Profile" or "Event").

However, if I am working with a programmer I might refer to the area as a "tab" because that is what s/he would have in mind when they go to work on the code side of things.

I hope that this helps.

share|improve this answer
add comment

I refer to them as panes.

Googled definition:

pane/pān/Noun:

  1. A single sheet of glass in a window or door.

  2. A separate defined area within a window for the display of, or interaction with, a part of that window's application or output.

share|improve this answer
    
This could be confusing, as a page with various iframes might be considered to have multiple panes ... within the tab's pane. –  ghoti Jan 10 '12 at 7:20
    
An iframe is usually referred to as an iframe. –  codeinthehole Jan 10 '12 at 10:27
    
Sure, but the content of an iframe is not the same as the iframe itself. According to the definition above, an iframe that interacts with an application running in the parent window could also be called a pane. –  ghoti Jan 10 '12 at 18:32
add comment

To echo Roger's answer, if the question is really "How do we get everyone to use the same terms when discussing UX?" then the answer is quite a bit different.

To start with, Roger is correct...CONVERSATION is the key. You can call it a "banana" if you want--as long as everyone is on the same page and knows that.

What can really help with this is to develop a component library.

So, an example would be 'tabs'. In your component library, you'd have a section on tabs. Ideally that section would include things such as:

  • terminology
  • description of the usage (and non-usage)
  • description of the interactions
  • samples of when to use or not to use this
  • examples of related components
  • visuals for design mockups and/or wireframe sketches
  • and (ideally) technical documentation along with sample presentation layer code

This provides a central 'glossary' for all team members...UX, development, business line managers, etc.

share|improve this answer
    
I guess I was hoping people had already developed such component libraries and standardized, as a community, on such terms. –  Domenic Jan 9 '12 at 18:12
    
oh, no. Not in the least bit. In fact, I'm rarely on a team where even UXers agree on terms. It's frustrating, for sure. "Wait, I thought you said you wanted this to be a modal window?--right--but that's what I made--no, I wanted a modal window that you could still click on the background--but that's not a modal--etc, etc." ;) –  DA01 Jan 9 '12 at 18:30
    
@Domenic, I think as in a lot of technical areas the 'friendly' term is often a simplification from a more technical term and the technical term will differ depending on implementation details. Such as content-window might be used because the control is called a window in one language, likewise in another language they might call it a content-pane because the implementation didn't allow you to specify a border. –  ChrisFletcher Jan 9 '12 at 20:20
    
I think there's lots of reasons. As you state, different code libraries use different terms. In general, UI terms are fuzzy to begin with. Lots of corporate-speak also permeates large organizations (instead of web terms, they have Lotus Notes terms...instead of email terms, they have Outlook terms, etc.) And, finally, lots of people just have habits...including all of us UX folks. –  DA01 Jan 9 '12 at 20:22
add comment

The word "tab" is often used to refer to both the tab control and the tab content area. For instance, "browser tab" refers to the web page being displayed in one of the tabs in the browser. But when referring to the tab control surface that you click to switch between tabs, you say "click on the tab to switch to another page", or something similar.

So the simplest solution is just to refer to it as a tab and make clear from the context of what you're saying that you're referring to the tab as a content surface rather than a UI control.

share|improve this answer
    
I think it's necessary to make a distinction between the navigation control (tab) and the content that's displayed via the interaction. –  codeinthehole Jan 10 '12 at 10:29
add comment

Twitter's Bootstrap framework uses Tabs and Tab content:

<ul class="tabs">
  ...
</ul>
<div class="tab-content">
  ...
</div>

Something similar is used in the jQuery UI Tabs.

share|improve this answer
2  
"Tab content" is the content of tab....brilliant :) –  JeroenEijkhof Jan 9 '12 at 17:32
add comment

I would say its called ItemContainer. Haven't found any HTML specific documentation, but WPF does call it like that.

  • A Tab Control has several (Tab) Items.
  • A Item has a header (the actual tab) and content in a ItemContainer.
share|improve this answer
add comment

I think "content area" is as good as anything else I've heard.

In fact, the content that shows in a tab needn't be a web page. It could be a local file (hit Ctrl-o), or the interface of an internal function (Tools/Addons in Firefox) or the interface of an addon (Mozilla Lightning).

Other applications have tabs too (Thunderbird, almost every complex configuration dialog box I've seen). The thing that ties these all together is that each tab has content. And the area where they put it could easily be the content area.

It MAY be that rendering engines (Gecko, Webkit, etc) use common terminology for the place where they will draw things they interpret from HTML. But since not all tab content is generated by an HTML parser, I'm not sure if such a term would even be appropriate.

Good luck. If you figure out a great term, please post it as a response to your question!

share|improve this answer
    
Content area is very generic. Any area of the page which displays content could be referred to in this way. –  codeinthehole Jan 10 '12 at 10:28
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.