Jump to content

Tab (interface): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
m Phrasing.
Tags: Visual edit Mobile edit Mobile web edit Newcomer task
remove {{Multiple issues|1=}}}
(36 intermediate revisions by 34 users not shown)
Line 1: Line 1:
{{Short description|Interface component}}
{{redirect|New Tab|the novel|New Tab (novel)|5=Tab (disambiguation)}}
{{redirect|New Tab|the novel|New Tab (novel)|5=Tab (disambiguation)}}
{{tone|date=August 2016}}
{{POV|date=May 2018}}
{{Use dmy dates|date=February 2020|cs1-dates=y}}
{{Use dmy dates|date=February 2020|cs1-dates=y}}
[[File:Language tabs on en wiktionary.gif|thumb|400px|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]].]]
[[File:Language tabs on en wiktionary.gif|thumb|400px|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 '''tabbed document interface''' ('''TDI''') or '''Tab''' is a [[graphical control element]] that allows multiple [[documents]] or [[Panel (computer software)|panel]]s to be contained within a single [[window (computing)|window]], using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with [[web browser]]s, [[web application]]s, [[text editor]]s, and preference panes, with [[Window manager|window managers]], especially [[Tiling window manager|tiling window managers]], being lesser known examples.
In interface design, a '''tab''' is a [[graphical user interface object]] that allows multiple [[documents]] or [[Panel (computer software)|panel]]s to be contained within a single [[window (computing)|window]], using tabs as a navigational widget for switching between sets of documents.<ref>{{Cite web |last=Khola |first=Vivek |date=2023-02-17 |title=Tab (interface) |url=https://www.blogger.com/blog/post/edit/6582574524271522717/8279353370664220742 |website=www.blogger.com }}</ref> It is an interface style most commonly associated with [[web browser]]s, [[web application]]s, [[text editor]]s, and preference panels, with [[window manager]]s and [[tiling window manager]]s.


GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the [[desktop metaphor]]).
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, of which the former takes typically less screen space whereas the latter can show more items at once while still having space for individual titles. Horizontal tabs may have multiple rows. Tabs may be organizable by changing their order through [[drag and drop]] or creating a separate window from an existing tab. Implementations may support [[Selection_(user_interface)#Range_selection|range-selecting]] multiple tabs for moving, closing, and separating them.<ref>{{cite web |last1=Elliott |first1=Matt |title=How to manipulate multiple tabs in Chrome or Firefox |url=https://www.cnet.com/how-to/how-to-manipulate-multiple-tabs-in-chrome-or-firefox/ |website=CNET |access-date=29 October 2021 |language=en |date=2014-01-28}}</ref>
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 [[Selection (user interface)#Range selection|range-selecting]] multiple tabs for moving, closing, or separating them.<ref>{{cite web |last1=Elliott |first1=Matt |title=How to manipulate multiple tabs in Chrome or Firefox |url=https://www.cnet.com/how-to/how-to-manipulate-multiple-tabs-in-chrome-or-firefox/ |website=CNET |access-date=29 October 2021 |language=en |date=2014-01-28}}</ref>


==History==
==History==
The WordVision [[DOS]] word processor<ref name="manes19840403"/> for the [[IBM PC]] in 1982<ref name="seymour19940315"/> was perhaps the first commercially available product with a tabbed interface.<ref name="seymour19940315"/> ''[[PC Magazine]]'' later wrote that it "has served as a free R&D department for the software business—its bones picked over for a decade by programmers looking for so-called new ideas".<ref name="seymour19940315"/>
The WordVision [[DOS]] word processor<ref name="manes19840403"/> for the [[IBM PC]] in 1982<ref name="seymour19940315"/> was perhaps the first commercially available product with a tabbed interface.<ref name="seymour19940315"/>


[[Image:HyperTIESAuthoring.jpg|thumb|right|250px|[[HyperTIES]] browser and [[Gosling Emacs]] authoring tool with [[pie menu]]s on the [[NeWS]] window system]]
[[Image:HyperTIESAuthoring.jpg|thumb|right|250px|[[HyperTIES]] browser and [[Gosling Emacs]] authoring tool with [[pie menu]]s on the [[NeWS]] window system]]
Line 19: Line 18:
The [[NeWS]] version of UniPress's [[Gosmacs|Gosling Emacs]] text editor was another early product with multiple tabbed windows in 1988.<ref>{{cite web|url=http://www.donhopkins.com/home/archive/emacs/to.jag.txt|title=Email from Don Hopkins to James Gosling, David S H Rosenthal, Owen Densmore, Jerry Farrell about Text selection in NeMACS.|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=1988-08-17|work=Don Hopkins' Web Site}}</ref> 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]].<ref>{{cite web|url=http://www.donhopkins.com/drupal/node/101|title=HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=2005-09-29|work=Don Hopkins' Web Site|access-date=2010-03-01}}</ref><ref>{{cite web|url=https://www.youtube.com/watch?v=hhmU2B79EDU|title= HCIL Demo - HyperTIES Authoring |author-first=Don|author-last=Hopkins|website= [[YouTube]] |author-link=Don Hopkins}}</ref> HyperTIES also supported [[pie menus]] for managing windows and browsing hypermedia documents with [[PostScript]] [[applet]]s.
The [[NeWS]] version of UniPress's [[Gosmacs|Gosling Emacs]] text editor was another early product with multiple tabbed windows in 1988.<ref>{{cite web|url=http://www.donhopkins.com/home/archive/emacs/to.jag.txt|title=Email from Don Hopkins to James Gosling, David S H Rosenthal, Owen Densmore, Jerry Farrell about Text selection in NeMACS.|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=1988-08-17|work=Don Hopkins' Web Site}}</ref> 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]].<ref>{{cite web|url=http://www.donhopkins.com/drupal/node/101|title=HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=2005-09-29|work=Don Hopkins' Web Site|access-date=2010-03-01}}</ref><ref>{{cite web|url=https://www.youtube.com/watch?v=hhmU2B79EDU|title= HCIL Demo - HyperTIES Authoring |author-first=Don|author-last=Hopkins|website= [[YouTube]] |author-link=Don Hopkins}}</ref> HyperTIES also supported [[pie menus]] for managing windows and browsing hypermedia documents with [[PostScript]] [[applet]]s.


While [[Boeing Calc]] already utilized tabbed sheets (as so called ''wordpads'') since at least 1987,<!-- Boeing Calc 3.0 August 1987, but possibly earlier, to be researched --><ref name="Malloy_1987"/><ref name="Corwyn"/> [[Borland]]'s [[Quattro Pro]] popularized tabs for spreadsheets in 1992. [[Microsoft Word]] in 1993 used them to simplify submenus.{{r|seymour19940315}} In 1994, [[BookLink|BookLink Technologies]] featured tabbed windows in its [[InternetWorks]] browser. That same year, the text editor [[UltraEdit]] also appeared with a modern multi-row tabbed interface. The tabbed interface approach was then followed by the [[Internet Explorer shell]] [[NetCaptor]] in 1997. These were followed by a number of others like [[IBrowse]] in 1999, and [[Opera (web browser)|Opera]] in 2000 (with the release of version 4 - although a MDI interface was supported before then), MultiViews October 2000, which changed its name into MultiZilla on 1 April 2001 (an [[Add-on (Mozilla)|extension]] for the [[Mozilla Application Suite]]<ref>{{cite web|url=http://multizilla.mozdev.org/history.html|title=Mozdev.org - multizilla: history|last=van Rantwijk|first=HJ |publisher=[[Mozilla]]|access-date=2010-03-01}}</ref>), [[Galeon]] in early 2001, [[Mozilla Foundation|Mozilla]] 0.9.5 in October 2001, Phoenix 0.1 (now [[Mozilla Firefox]]) in October 2002, [[Konqueror]] 3.1 in January 2003, and [[Safari (web browser)|Safari]] in 2003. With the release of [[Internet Explorer 7]] in 2006, all major web browsers featured a tabbed interface.
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 --><ref name="Malloy_1987"/><ref name="Corwyn"/> [[Borland]]'s [[Quattro Pro]] popularized tabs for spreadsheets in 1992. [[Microsoft Word]] in 1993 used them to simplify submenus.{{r|seymour19940315}} In 1994, [[BookLink|BookLink Technologies]] featured tabbed windows in its [[InternetWorks]] browser. That same year, the text editor [[UltraEdit]] also appeared with a modern multi-row tabbed interface. The tabbed interface approach was then followed by the [[Internet Explorer shell]] [[NetCaptor]] in 1997. These were followed by several others like [[IBrowse]] in 1999, and [[Opera (web browser)|Opera]] in 2000 (with the release of version 4 - although an MDI interface was supported before then), MultiViews October 2000, which changed its name into MultiZilla on April 1st, 2001 (an [[Add-on (Mozilla)|extension]] for the [[Mozilla Application Suite]]<ref>{{cite web|url=http://multizilla.mozdev.org/history.html|title=Mozdev.org - multizilla: history|last=van Rantwijk|first=HJ|publisher=[[Mozilla]]|access-date=2010-03-01|archive-date=2008-12-07 |archive-url=https://web.archive.org/web/20081207023540/http://multizilla.mozdev.org/history.html|url-status=dead}}</ref>), [[Galeon]] in early 2001, [[Mozilla Foundation|Mozilla]] 0.9.5 in October 2001, Phoenix 0.1 (now [[Mozilla Firefox]]) in October 2002, [[Konqueror]] 3.1 in January 2003, and [[Safari (web browser)|Safari]] in 2003. With the release of [[Internet Explorer 7]] in 2006, all major web browsers featured a tabbed interface.


Users have 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 (computing)|search engine]] results at least once during that period.<ref>{{cite conference | author = Jeff Huang, Ryen W. White | year = 2010 | title = Parallel Browsing Behavior on the Web | book-title = Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10) | url =http://jeffhuang.com/ParallelBrowsing_Final.pdf }}</ref>
Users have 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 (computing)|search engine]] results at least once during that period.<ref>{{cite conference | author = Jeff Huang, Ryen W. White | year = 2010 | title = Parallel Browsing Behavior on the Web | book-title = Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10) | url =http://jeffhuang.com/ParallelBrowsing_Final.pdf }}</ref>


Numerous special functions in association with browser tabs 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 (web)|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). Links can most often be opened in several modes, using different user interface options and commands:
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 (web)|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). [[Internet Explorer|Microsoft Internet Explorer]] marks tab families with different colours.
* in a new main window
* in the same main window and tab panel
* in the same main window and a new tab panel, which is instantly activated
* in the same main window and a new tab panel, which remains in the background until the user switches to it.

There are minor usability issues such as whether a new tab opens in the end of the tab list or next to its "parent". For example, [[Internet Explorer]] marks tab families with different colours.


==Development==
==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.
⚫
In 2021, researchers published the first in-depth study of Web browser tab [[user interface|interfaces]] in over a decade. They found that many people struggle with tab overload and conducted surveys and interviews about people's tab use. Thereby they formalized pressures for closing tabs and for keeping tabs open. The authors then developed related [[User interface design|UI design]] considerations which could enable better tools and changes to the code of Web browsers – like [[Firefox]] – that allow [[knowledge worker]]s and other users to better manage – and make use of – their browser tabs.<ref>{{cite news |title=Overcoming tab overload: Researchers develop tool to better manage browser tabs |url=https://techxplore.com/news/2021-05-tab-overload-tool-browser-tabs.html |access-date=14 June 2021 |work=techxplore.com |language=en}}</ref><ref>{{cite journal |last1=Chang |first1=Joseph Chee |last2=Hahn |first2=Nathan |last3=Kim |first3=Yongsung |last4=Coupland |first4=Julina |last5=Breneisen |first5=Bradley |last6=Kim |first6=Hannah S |last7=Hwong |first7=John |last8=Kittur |first8=Aniket |title=When the Tab Comes Due:Challenges in the Cost Structure of Browser Tab Usage |journal=Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems |date=2021-05-06 |pages=1–15 |doi=10.1145/3411764.3445585 |publisher=Association for Computing Machinery|isbn=9781450380966 |s2cid=233987809 |doi-access=free }} [[File:CC-BY icon.svg|50px]] Available under [https://creativecommons.org/licenses/</ref>

[[Image:Firefox 2 Tabbed Browsing GNU-Linux.png|thumb|center|800px|An example of [[Mozilla Firefox]] with two tabs open. Each tab, here ordered in a horizontal row, shows a different webpage, thus allowing multiple pages to be contained within a single browser window.]]
[[File:Mobile_URL_tooltip.png|thumb|Tab list on Kiwi browser, a mobile browser derived from [[Google Chromium]]. Both title and URL are shown and can be expanded through [[Smartphone#Alternative_input_methods|hovering]].]]
{{clear}}

==Compliance with Microsoft User Interface Guidelines==
The name TDI implies similarity to the [[Microsoft Windows]] standards for [[multiple document interface]]s (MDI) and [[single document interface]]s (SDI), but TDI does not form part of the Microsoft Windows User Interface Guidelines.<ref>{{cite web|url=http://msdn2.microsoft.com/en-us/library/ms997505.aspx|title=Design Specifications and Guidelines - Window Management|work=[[Microsoft Developer Network]]|publisher=[[Microsoft]]|access-date=2010-03-01}}</ref>
There is some debate about how the TDI fits in with the Microsoft Windows User Interface Guidelines. In many ways the Workbook window management model most closely resembles TDI.<ref>{{cite web|url=http://msdn2.microsoft.com/en-us/library/ms997512.aspx|title=Design Specifications and Guidelines - Window Management|work=[[Microsoft Developer Network]]|publisher=[[Microsoft]]|access-date=2010-03-01}}</ref> However this is a relatively recent addition to the Windows User Interface Guidelines, and most developers still prefer to view [[single document interface|SDI]] or [[multiple document interface|MDI]] as the primary document models for MS Windows.

===Comparison to SDI===

====Advantages====
Because the tabbed document interface holds many different documents logically under one window, it keeps the primary [[operating system]] interface free of the clutter that would be created by a large number of small child windows. Another advantage is that sets of related documents can be grouped within each of several windows. Tabbed web browsers often allow users to save their browsing session and return to it later.

====Disadvantages====
[[Image:geany-tabs.png|thumb|150px|right|[[Geany]] text editor with vertically oriented tabs, showing the large number of documents that can be accommodated]]

Although the tabbed document interface does allow for multiple views under one window, there are problems with this interface. One such problem is dealing with many tabs at once. When a window is tabbed to a certain number that exceeds the available display area, the tabs clutter up (this is the same problem as with SDI but moved to another place in the user interface).

Multi-row tabs are a second issue that will appear in menu dialogs in some programs. Some prefer to have many tabs open, and some programs help making these compact yet identifiable,<ref>http://forum.maxthon.com/viewthread.php?tid=80713&pid=528941&page=7&extra=#pid528941 {{Bare URL inline|date=November 2021}}</ref> while normally dealing with multiple rows of tabs in one window is seen to have two disadvantages:

*It creates excess window clutter, unless it is limited to about 3 rows that can be scrolled by the mouse wheel.
*It complicates what should be an easy-to-read dialog, and at the same time makes it easier to see the titles of many tabs at once.

Finding a specific tab in a 3 or 4 level tabular interface can be difficult for some people. Part of the issue with this difficulty lies in the lack of any sorting scheme. Without such tabs can be strewn about without any sense of order, thus looking for a tab provides no meaningful understanding of a position to a tab relative to other tabs. Additionally, the clutter created by multiple tabs can create a dialog that is unusually small, with the tabs above it dominating the window.

Thus, although tabbed windows are adequate in environments where there is a minimal necessity for tabs (around ten tabs or less), this scheme does not [[Scale (computing)|scale]], and alternate methods may be required to address this issue.

Among the methods for addressing the problems of the scalability of many tabs:
* group tabs by dragging/moving them, and or freeze their position, and then reduce the width of individual tabs, so that more can fit within the available area, including multiple tab rows, and <ref>{{cite web|url=https://addons.mozilla.org/en-US/firefox/addon/tab-mix-plus/|title=Tab Mix Plus – Add-ons for Firefox|website=addons.mozilla.org|access-date=16 April 2018}}</ref>
* change the color of selected tabs or according to source,<ref>{{cite web|url=https://addons.mozilla.org/en-US/firefox/addon/colorfultabs/?src=ss|title=ColorfulTabs – Add-ons for Firefox|website=addons.mozilla.org|access-date=16 April 2018}}</ref> along with the use of [[favicons]] for identification and [[tooltip]]s on [[mouseover]]
* introduce [[scrolling]] to enable tabs to occupy a non-visible region of the screen
* introduce sections through any of various means, to spread tabs out to multiple areas
* introduce real-time [[Page zooming|zooming]] of a tab, based on the position of the mouse cursor<ref>{{cite web|url=http://lkozma.net/fisheyetabs|title=FishEyeTabs, tab zooming extension for Mozilla Firefox|first=László|last=Kozma|date=April 10, 2007|work=Laszlo Kozma personal page|access-date=2010-03-01}}</ref><ref>{{cite web|url=https://addons.mozilla.org/en-US/firefox/addon/fisheyetabs/|title=FishEyeTabs|first=László|last=Kozma|date=March 2, 2009|publisher=Mozilla|access-date=2010-03-01}}</ref>
* discard tabs in favor of another interface element such as a [[listbox]] or [[drop-down list]]

Large numbers of tabbed windows scale better with the tabs along the left or right edges of the window, instead of the top or bottom edges. That is because tab labels are usually much wider than they are tall, and because it is now common to use displays which are considerably wider than needed for displaying documents and web pages. The [[NeWS]] version of the [[Gosmacs|UniPress Emacs]] text editor placed tabs along the right window edge, and laid windows out in a vertical column, so each tab was initially visible, and the user could use them to raise and lower the windows, drag them around in the column, or pull them out to anywhere on the screen.

[[Image:Psiber-tabs2.gif|thumb|350px|right|PSIBER visual [[PostScript]] programming environment for [[NeWS]], with tabbed windows around objects on and off the stack.<ref name="DonHopkinsPSIBER"/>]]

Tabbed window interfaces can give the user the freedom to position the tabs along any edge, so all four edges are available to organize different groups of tabs as the user or application sees fit.
The PSIBER visual PostScript programming environment for NeWS had tabbed views that the user could stick onto the stack (represented as a "spike"), and the user could move the tabs to any edge.<ref name="DonHopkinsPSIBER"/> The NeWS pie menu and tab window manager enabled users to position the tabs anywhere along any edge, and the tabs popped up pie menus with window management functions, to uncover and bury windows, etc.

===Comparison to MDI===
====Advantages====
For people used to SDI, MDI can be confusing as windows can be hidden behind other windows.{{Citation needed|date=September 2008}} Some MDI applications lack a [[taskbar]] or menu to allow quick access to all windows, so for these applications in some cases a window can only be found by closing or moving all others. Practically, however, most MDI environments provide for much richer window-switching functionality than SDI-oriented environments. On the other hand, since in TDI applications most tabs are visible and directly accessible, it is much harder for windows to get "lost". Some MDI applications such as Opera and [[Eudora (e-mail client)|Eudora]] also have this advantage, by having tabs to access the windows.

====Disadvantages====
TDI windows must always be maximized inside their parent window, and as a result two tabs cannot be visible at the same time. This makes comparing of documents or easy copy-and-pasting between two documents more difficult. Full MDI interfaces allow for tiling or cascading of child windows, and do not suffer from these limitations.

One example of an application that allows either TDI or MDI browsing is [[Opera (web browser)|Opera]]. Using TDI by default, this application also supports full MDI and can also run as an SDI application.<ref>{{cite web|url=http://my.opera.com/ResearchWizard/blog/operasdi|title=Opera Single Document Interface|author=Christian|date=October 22, 2006|publisher=[[Opera Software]]|work=Christian's MyOpera Blog|access-date=2010-03-01|archive-url=https://web.archive.org/web/20080907005124/http://my.opera.com/ResearchWizard/blog/operasdi|archive-date=7 September 2008}}</ref>

In order to mitigate these problems, some integrated development environments, such as recent versions of [[XEmacs]] and [[Microsoft]]'s [[Visual Studio]], provide a [[Integrated development environment|hybrid interface]] which allows splitting the parent window into multiple MDI-like "panes," each with their own separate TDI tab set. [[Tiling window manager]]s such as [[Ion (window manager)|Ion]] do the same for the entire [[desktop metaphor|desktop]]. This provides many of the advantages of both MDI and TDI, although it can still be difficult for users to get used to. The [[Konqueror]] browser by [[KDE]] (available on Unix and Unix work-alikes, such as Linux, and Windows) supports multiple documents within one tab by splitting documents. In a Konqueror tab, documents can be split horizontally or vertically, and each split document can be re-split.

Another strategy for dealing with the limitation that only one tabbed document would ordinarily be visible at one time is to allow a tab to be dragged outside the parent window and converted to a separate window (which can itself have multiple tabs). This is supported in the [[Google Chrome]], [[Mozilla Firefox 3.5]], and [[Internet Explorer 9]] web browsers, for example.

==Window managers that provide a tabbed document interface==
The following [[window manager]]s provide a tabbed document interface:

* [[i3 (window manager)|i3]] - [[Tiling window manager]] available for most [[Unix-like]] systems
* [[wmii|Wmii]] - Tiling window manager that i3 is based on
* [[PWM (window manager)|PWM]]
* [[Fluxbox]]<ref>{{cite web|title=Fluxbox's old website|url=http://old.fluxbox.org/features/tabs.php|url-status=dead|archive-url=https://web.archive.org/web/20110726061426/http://old.fluxbox.org/features/tabs.php|archive-date=2011-07-26}}</ref>
* [[KWin]] - KDE SC's default window manager, since KDE 4.4
* Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991)<ref>{{cite web|url=http://www.donhopkins.com/home/movies/TabWindowDemo.mov|title=Demo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991)|editor-first=Don|editor-last=Hopkins|editor-link=Don Hopkins|format=[[QuickTime]]}}</ref>
* [[PekWM]]<ref>{{cite web|title=PekWM features|url=http://www.pekwm.org/files/pekwm/doc/0.1.12/html/overview/intro.html#overview-intro-features}}</ref>

==Patent dispute==
[[Adobe Systems]] holds [[patent]]s in the United States and Europe on certain uses of GUI tabs,<ref>{{US patent|5546528}} for a "Method of displaying multiple sets of information in the same area of a computer screen"</ref> which are widely held to be [[Inventive step and non-obviousness|trivial patent]]s. There was [[prior art]], in both GUI and [[text user interface]]s (TUI).{{Citation needed|date=August 2010}}

Adobe used these patents to sue [[Macromedia]] Inc. for employing tabs in its [[Adobe Flash|Macromedia Flash]] product. Adobe won the case and $2.8 million in damages. However, Macromedia initiated a [[Lawsuit|countersuit]] which ended in a $4.9 million ruling against Adobe. The suits were settled on undisclosed terms.<ref>{{cite press release|url=http://www.adobe.com/aboutadobe/pressroom/pressreleases/200205/200205mm_win_release.html|access-date=2010-03-01|title=Adobe Wins Patent Trial Against Macromedia|date=May 2, 2002|publisher=[[Adobe Systems]]}}</ref> In 2005, Adobe ended further dispute between the two companies when it bought Macromedia for roughly $3.4 billion.


⚫
In 2021, researchers published the first in-depth study of Web browser tab [[user interface|interfaces]] in over a decade. They found that many people struggle with tab overload and conducted surveys and interviews about people's tab use. Thereby they formalized pressures for closing tabs and for keeping tabs open. The authors then developed related [[User interface design|UI design]] considerations which could enable better tools and changes to the code of Web browsers – like [[Firefox]] – that allow [[knowledge worker]]s and other users to better manage – and make use of – their browser tabs.<ref>{{cite news |title=Overcoming tab overload: Researchers develop tool to better manage browser tabs |url=https://techxplore.com/news/2021-05-tab-overload-tool-browser-tabs.html |access-date=14 June 2021 |work=techxplore.com |language=en}}</ref><ref>{{cite book |last1=Chang |first1=Joseph Chee |title=Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems |last2=Hahn |first2=Nathan |last3=Kim |first3=Yongsung |last4=Coupland |first4=Julina |last5=Breneisen |first5=Bradley |last6=Kim |first6=Hannah S |last7=Hwong |first7=John |last8=Kittur |first8=Aniket |date=2021-05-06 |publisher=Association for Computing Machinery |isbn=9781450380966 |pages=1–15 |chapter=When the Tab Comes Due:Challenges in the Cost Structure of Browser Tab Usage |doi=10.1145/3411764.3445585 |doi-access=free |s2cid=233987809}} [[File:CC-BY_icon.svg|50x50px]] Available under [https://creativecommons.org/licenses/]</ref>
On April 18, 2007, the [[Patent troll|intellectual property agency]] IP Innovation LLC and its parent Technology Licensing Corporation filed a lawsuit against [[Apple Inc.]] regarding its infringement upon a US Patent originally filed by [[Xerox]] researchers in 1987.<ref>{{US patent|5072412}} for a "User Interface with Multiple Workspaces for Sharing Display System Objects"</ref><ref>{{cite news|url=http://www.appleinsider.com/articles/07/04/21/apples_interface_held_to_the_fire_in_dubious_suit.html|title=Apple's interface held to the fire in dubious suit|first=Katie|last=Marsal|publisher=Appleinsider.com|date=April 21, 2007|access-date=2010-03-01}}</ref>


==See also==
==See also==
* [[Comparison of document interfaces]]
* [[Comparison of document interfaces]]
* [[Internet Explorer|Microsoft Internet Explorer]] marks tab families with different colours
* [[Multiple document interface#IDE-style interface|IDE-style interface]]
* [[Multiple document interface#IDE-style interface|IDE-style interface]]
* [[Ribbon (computing)]]
* [[Ribbon (computing)]]
Line 117: Line 40:
<ref name="seymour19940315">{{cite magazine |title=Everything Old Is New Again |author-last=Seymour |author-first=Jim |magazine=[[PC Magazine]] |publisher=[[Ziff-Davis Publishing Company]] |issn=0888-8507 |date=1994-03-15 |volume=13 |number=5 |pages=99–100 |url=https://books.google.com/books?id=_7aEwukQQ0AC&pg=PA99 |access-date=2015-02-15 }}</ref>
<ref name="seymour19940315">{{cite magazine |title=Everything Old Is New Again |author-last=Seymour |author-first=Jim |magazine=[[PC Magazine]] |publisher=[[Ziff-Davis Publishing Company]] |issn=0888-8507 |date=1994-03-15 |volume=13 |number=5 |pages=99–100 |url=https://books.google.com/books?id=_7aEwukQQ0AC&pg=PA99 |access-date=2015-02-15 }}</ref>
<ref name="Corwyn">{{cite web |title=Boeing Calc - The first truly 3-D spreadsheet. |author=corwyn |url=http://www.boeingcalc.com/ |url-status=dead |archive-url=https://web.archive.org/web/20060219103549/http://www.boeingcalc.com/ |archive-date=2006-02-19}}</ref>
<ref name="Corwyn">{{cite web |title=Boeing Calc - The first truly 3-D spreadsheet. |author=corwyn |url=http://www.boeingcalc.com/ |url-status=dead |archive-url=https://web.archive.org/web/20060219103549/http://www.boeingcalc.com/ |archive-date=2006-02-19}}</ref>
<ref name="Malloy_1987">{{cite web |title=Spreadsheets - This new crop of advanced programs offers multidimensionality and natural language |author-first=Rich |author-last=Malloy |series=Review |magazine=[[BYTE]] |date=June 1987 |edition=Sommer 1987 Bonus |volume=12 |number=7 |page=69–75 |url=https://archive.org/details/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today |access-date=2020-02-12}} [https://archive.org/stream/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_djvu.txt][https://archive.org/download/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_text.pdf][http://www.aresluna.org/attached/computerhistory/articles/spreadsheets/newcrop]</ref>
<ref name="Malloy_1987">{{cite web |title=Spreadsheets - This new crop of advanced programs offers multidimensionality and natural language |author-first=Rich |author-last=Malloy |series=Review |magazine=[[BYTE]] |date=June 1987 |edition=Sommer 1987 Bonus |volume=12 |number=7 |pages=69–75 |url=https://archive.org/details/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today |access-date=2020-02-12}} [https://archive.org/stream/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_djvu.txt][https://archive.org/download/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_text.pdf][http://www.aresluna.org/attached/computerhistory/articles/spreadsheets/newcrop]</ref>
}}
}}


Line 125: Line 48:
* [http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx ASP.NET AJAX Control Toolkit]
* [http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx ASP.NET AJAX Control Toolkit]
* [https://wiki.github.com/madrobby/scriptaculous/tabs Scriptaculous AJAX tabs]
* [https://wiki.github.com/madrobby/scriptaculous/tabs Scriptaculous AJAX tabs]
* [http://www.donhopkins.com/home/movies/TabWindowDemo.mov Tab Window Demo] demo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991).
* [http://www.donhopkins.com/home/movies/TabWindowDemo.mov Tab Window Demo] deDevelopmentmo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991).


{{Graphical control elements}}
{{Graphical control elements}}

Revision as of 14:51, 22 April 2024

"New Tab" redirects here. For the novel, see New Tab (novel). For other uses, see Tab (disambiguation).

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.[1] 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.[2]

History

The WordVision DOS word processor[3] for the IBM PC in 1982[4] was perhaps the first commercially available product with a tabbed interface.[4]

HyperTIES browser and Gosling Emacs authoring tool with pie menus on the NeWS window system

Don Hopkins developed and released several versions of tabbed window frames for the NeWS window system as free software, which the window manager applied to all NeWS applications, and enabled users to drag the tabs around to any edge of the window.[5]

The NeWS version of UniPress's Gosling Emacs text editor was another early product with multiple tabbed windows in 1988.[6] 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.[7][8] 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,[9][10] Borland's Quattro Pro popularized tabs for spreadsheets in 1992. Microsoft Word in 1993 used them to simplify submenus.[4] In 1994, BookLink Technologies featured tabbed windows in its InternetWorks browser. That same year, the text editor UltraEdit also appeared with a modern multi-row tabbed interface. The tabbed interface approach was then followed by the Internet Explorer shell NetCaptor in 1997. These were followed by several others like IBrowse in 1999, and Opera in 2000 (with the release of version 4 - although an MDI interface was supported before then), MultiViews October 2000, which changed its name into MultiZilla on April 1st, 2001 (an extension for the Mozilla Application Suite[11]), 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 have 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.[12]

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.

In 2021, researchers published the first in-depth study of Web browser tab interfaces in over a decade. They found that many people struggle with tab overload and conducted surveys and interviews about people's tab use. Thereby they formalized pressures for closing tabs and for keeping tabs open. The authors then developed related UI design considerations which could enable better tools and changes to the code of Web browsers – like Firefox – that allow knowledge workers and other users to better manage – and make use of – their browser tabs.[13][14]

See also

References

  1. ^ Khola, Vivek (2023-02-17). "Tab (interface)". www.blogger.com.
  2. ^ Elliott, Matt (2014-01-28). "How to manipulate multiple tabs in Chrome or Firefox". CNET. Retrieved 2021-10-29.
  3. ^ Manes, Stephen (1984-04-03). "Taking A Gamble With Word Vision". PC Magazine - The Independent Guide To IBM Personal Computers. Vol. 3, no. 6. PC Communications Corp. pp. 211–221. ISSN 0745-2500. Archived from the original on 2015-03-17. Retrieved 2015-02-15.
  4. ^ a b c Seymour, Jim (1994-03-15). "Everything Old Is New Again". PC Magazine. Vol. 13, no. 5. Ziff-Davis Publishing Company. pp. 99–100. ISSN 0888-8507. Retrieved 2015-02-15.
  5. ^ Hopkins, Don (October 1989). "The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines". Don Hopkins' Web Site. Retrieved 2010-03-01.
  6. ^ Hopkins, Don (1988-08-17). "Email from Don Hopkins to James Gosling, David S H Rosenthal, Owen Densmore, Jerry Farrell about Text selection in NeMACS". Don Hopkins' Web Site.
  7. ^ Hopkins, Don (2005-09-29). "HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS". Don Hopkins' Web Site. Retrieved 2010-03-01.
  8. ^ Hopkins, Don. "HCIL Demo - HyperTIES Authoring". YouTube.
  9. ^ Malloy, Rich (June 1987). "Spreadsheets - This new crop of advanced programs offers multidimensionality and natural language". BYTE. Review (Sommer 1987 Bonus ed.). pp. 69–75. Retrieved 2020-02-12. [1][2][3]
  10. ^ corwyn. "Boeing Calc - The first truly 3-D spreadsheet". Archived from the original on 2006-02-19.
  11. ^ van Rantwijk, HJ. "Mozdev.org - multizilla: history". Mozilla. Archived from the original on 2008-12-07. Retrieved 2010-03-01.
  12. ^ Jeff Huang, Ryen W. White (2010). "Parallel Browsing Behavior on the Web" (PDF). Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10).
  13. ^ "Overcoming tab overload: Researchers develop tool to better manage browser tabs". techxplore.com. Retrieved 2021-06-14.
  14. ^ Chang, Joseph Chee; Hahn, Nathan; Kim, Yongsung; Coupland, Julina; Breneisen, Bradley; Kim, Hannah S; Hwong, John; Kittur, Aniket (2021-05-06). "When the Tab Comes Due:Challenges in the Cost Structure of Browser Tab Usage". Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems. Association for Computing Machinery. pp. 1–15. doi:10.1145/3411764.3445585. ISBN 9781450380966. S2CID 233987809. Available under [4]

External links

Wikimedia Commons has media related to Tab (GUI).
Retrieved from "https://en.wikipedia.org/w/index.php?title=Tab_(interface)&oldid=1220224516"