12

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?

9
  • Tabs in a browser aren't the same control types as tabs in modal dialogs.
    – dnbrv
    Commented Jan 9, 2012 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.
    – Zelda
    Commented Jan 9, 2012 at 16:04
  • tab page - or am I missing something!? Commented Jan 9, 2012 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
    Commented Jan 9, 2012 at 16:15
  • 3
    @Domenic ah, to refer to it internally I would call it the "tab content" or the tab's "content area"
    – Zelda
    Commented Jan 9, 2012 at 16:18

11 Answers 11

13

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.

0
5

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.

1
  • 2
    "Tab content" is the content of tab....brilliant :) Commented Jan 9, 2012 at 17:32
4

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.

4
  • I guess I was hoping people had already developed such component libraries and standardized, as a community, on such terms.
    – Domenic
    Commented Jan 9, 2012 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
    Commented Jan 9, 2012 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. Commented Jan 9, 2012 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
    Commented Jan 9, 2012 at 20:22
3

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!

2
  • Content area is very generic. Any area of the page which displays content could be referred to in this way. Commented Jan 10, 2012 at 10:28
  • @codeinthehole, yes, that's the point. The question didn't specify "in a web browser" or "in a configuration dialog" or "in an application". A term that covers tab content in all of those environments in more needs to be very generic.
    – ghoti
    Commented Apr 24, 2015 at 16:12
2

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.

1
  • I think it's necessary to make a distinction between the navigation control (tab) and the content that's displayed via the interaction. Commented Jan 10, 2012 at 10:29
1

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.

3
  • This could be confusing, as a page with various iframes might be considered to have multiple panes ... within the tab's pane.
    – ghoti
    Commented Jan 10, 2012 at 7:20
  • An iframe is usually referred to as an iframe. Commented Jan 10, 2012 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
    Commented Jan 10, 2012 at 18:32
1

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.

0

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

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.

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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