thumb|upright=1.35|Example of a tabbed interface with two sets of tabs: Horizontal tabs, at the top, allow navigation to different pages within the [[Wiktionary website. Vertical tabs, to the left, represent languages in which a given spelling occurs, where the selected tab shows the word jam ('already') in Esperanto.]]

In interface design, a tab is a graphical user interface object that allows multiple documents or panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panels, with window managers and tiling window managers.

Tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor). They are usually graphically displayed on webpages or apps as they look on paper.

Tabs may appear in a horizontal bar or as a vertical list. Horizontal tabs may have multiple rows. In some cases, tabs may be reordered or organized into multiple rows through drag and drop interactions. Implementations may support opening an existing tab in a separate window or range-selecting multiple tabs for moving, closing, or separating them.

History

The WordVision word processor

The NeWS version of UniPress's Gosling Emacs text editor was another early product with multiple tabbed windows in 1988. It was used to develop an authoring tool for Ben Shneiderman's hypermedia browser HyperTIES (the NeWS workstation version of The Interactive Encyclopedia System), in 1988 at the University of Maryland Human-Computer Interaction Lab. HyperTIES also supported pie menus for managing windows and browsing hypermedia documents with PostScript applets.

While Boeing Calc already utilized tabbed sheets (as so-called word pads) since at least 1987,<!-- Boeing Calc 3.0 August 1987, but possibly earlier, to be researched -->), Galeon in early 2001, Mozilla 0.9.5 in October 2001, Phoenix 0.1 (now Mozilla Firefox) in October 2002, Konqueror 3.1 in January 2003, and Safari in 2003. With the release of Internet Explorer 7 in 2006, all major web browsers featured a tabbed interface.

Users quickly adopted the use of tabs in web browsing and web search. A study of tabbed browsing behavior in June 2009 found that users switched tabs in 57% of tab sessions, and 36% of users used new tabs to open search engine results at least once during that period.

Numerous additional browser tab capabilities have emerged since then. One example is visual tabbed browsing in OmniWeb version 5, which displays preview images of pages in a drawer to the left or right of the main browser window. Another feature is the ability to re-order tabs and to bookmark all of the webpages opened in tab panes in a given window in a group or bookmark folder (as well as the ability to reopen all of them at the same time). Microsoft Internet Explorer marks tab families with different colours.

Development

Tab behavior in an application is determined by the underlying widget toolkit (for example Firefox uses GTK) framework. Due to lack of standardization, behavior may vary from one application to the next, which can result in usability challenges.

Tab hoarding

thumb|The tab bar on Chromium of a browser tab hoarder.

Tab hoarding is digital hoarding of web browser tabs. Users may accumulate tabs as reminders of tasks to research or complete (rather than using dedicated reminder software). They may use multiple browser windows to organize tabs or direct focus;

Tab hoarding can lead to stress and information overload, including fear of losing them upon a crash or other reboot, Tab hoarders have attributed the behavior to anxiety, fear of missing out, procrastination, and poor personal information management practices. and collapsed; conversion of tabs into a list of hyperlinks;

Implementations

CSS frameworks which have tabs include Bootstrap, Tailwind CSS and Foundation.

Widget toolkits which have tabs include GTK using the widget as well as the Adwaita library using the widget. Qt using the widget.

<gallery widths=200 heights=200 caption="Examples of tabbed interface" class="center">

File:Screenshot of tabs in GNOME Text Editor.png|GNOME Text Editor

File:Screenshot of tabs in GNOME Web.png|GNOME Web

File:Table of contents - TOC -- LibreOffice Writer.png|LibreOffice Writer: Ribbon interface using tabs

</gallery>

See also

  • Microsoft Internet Explorer marks tab families with different colours
  • IDE-style interface
  • Ribbon (computing)

References

  • TabPanel Widget
  • ASP.NET AJAX Control Toolkit
  • Scriptaculous AJAX tabs
  • Tab Window Demo deDevelopmentmo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991).