Pestaña (interfaz)

En el diseño de interfaces, una pestaña es un objeto de interfaz gráfica de usuario que permite contener varios documentos o paneles dentro de una sola ventana , utilizando pestañas como un widget de navegación para cambiar entre conjuntos de documentos. ^{[ 1 ]} Es un estilo de interfaz que se asocia más comúnmente con navegadores web , aplicaciones web , editores de texto y paneles de preferencias, con administradores de ventanas y administradores de ventanas en mosaico .

Las pestañas se inspiran en las tradicionales pestañas de tarjetas que se insertaban en archivadores de papel o ficheros (siguiendo la metáfora del escritorio ). Suelen mostrarse gráficamente en páginas web o aplicaciones tal como aparecen en papel.

Las pestañas pueden aparecer en una barra horizontal o como una lista vertical. Las pestañas horizontales pueden tener varias filas. En algunos casos, las pestañas se pueden reordenar u organizar en varias filas mediante la función de arrastrar y soltar . Las implementaciones pueden admitir la apertura de una pestaña existente en una ventana separada o la selección de varias pestañas para moverlas, cerrarlas o separarlas. ^{[ 2 ]}

El procesador de textos WordVision ^{[ 3 ]} para la IBM PC en 1982 ^{[ 4 ]} fue quizás el primer producto disponible comercialmente con una interfaz de pestañas. ^{[ 4 ]}

Don Hopkins desarrolló y lanzó varias versiones de marcos de ventanas con pestañas para el sistema de ventanas NeWS como software libre, que el gestor de ventanas aplicó a todas las aplicaciones de NeWS y permitió a los usuarios arrastrar las pestañas a cualquier borde de la ventana. ^{[ 5 ]}

La versión NeWS del editor de texto Gosling Emacs de UniPress fue otro producto temprano con múltiples ventanas con pestañas en 1988. ^{[ 6 ]} Se utilizó para desarrollar una herramienta de autoría para el navegador de hipermedia HyperTIES de Ben Shneiderman (la versión de estación de trabajo NeWS de The Interactive Encyclopedia System), en 1988 en el Laboratorio de Interacción Humano-Computadora de la Universidad de Maryland . ^{[ 7 ] [ 8 ]} HyperTIES también admitía menús circulares para administrar ventanas y explorar documentos de hipermedia con applets PostScript .

Si bien Boeing Calc ya utilizaba hojas con pestañas (como los llamados blocs de notas ) desde al menos 1987, ^{[ 9 ] [ 10 ]} Quattro Pro de Borland popularizó las pestañas para hojas de cálculo en 1992. Microsoft Word las utilizó en 1993 para simplificar los submenús. ^{[ 4 ]} En 1994, BookLink Technologies presentó ventanas con pestañas en su navegador InternetWorks . Ese mismo año, el editor de texto UltraEdit también apareció con una interfaz moderna de pestañas de varias filas. El enfoque de interfaz con pestañas fue seguido por el shell de Internet Explorer NetCaptor en 1997. A estos les siguieron varios otros como IBrowse en 1999 y Opera en 2000 (con el lanzamiento de la versión 4, aunque una interfaz MDI era compatible antes de eso), MultiViews en octubre de 2000, que cambió su nombre a MultiZilla el 1 de abril de 2001 (una extensión para Mozilla Application Suite ^{[ 11 ]} ), Galeon a principios de 2001, Mozilla 0.9.5 en octubre de 2001, Phoenix 0.1 (ahora Mozilla Firefox ) en octubre de 2002, Konqueror 3.1 en enero de 2003 y Safari en 2003. Con el lanzamiento de Internet Explorer 7 en 2006, todos los principales navegadores web presentaban una interfaz con pestañas.

Los usuarios adoptaron rápidamente el uso de pestañas en la navegación y búsqueda web. Un estudio sobre el comportamiento de navegación por pestañas realizado en junio de 2009 reveló que los usuarios cambiaron de pestaña en el 57 % de las sesiones, y el 36 % de los usuarios utilizaron nuevas pestañas para abrir resultados de búsqueda al menos una vez durante ese período. ^{[ 12 ]}

Desde entonces, han surgido numerosas funcionalidades adicionales para las pestañas del navegador. Un ejemplo es la navegación visual por pestañas en OmniWeb versión 5, que muestra imágenes de vista previa de las páginas en un panel lateral a la izquierda o a la derecha de la ventana principal del navegador. Otra función es la posibilidad de reordenar las pestañas y de añadir a marcadores todas las páginas web abiertas en los paneles de pestañas de una ventana determinada, ya sea en un grupo o en una carpeta de marcadores (además de poder volver a abrirlas todas a la vez). Microsoft Internet Explorer identifica las familias de pestañas con diferentes colores.

El comportamiento de las pestañas en una aplicación viene determinado por el conjunto de herramientas de widgets subyacente (por ejemplo, Firefox usa GTK ). Debido a la falta de estandarización, el comportamiento puede variar de una aplicación a otra, lo que puede generar problemas de usabilidad.

El acaparamiento de pestañas es la acumulación digital de pestañas del navegador web. Los usuarios pueden acumular pestañas como recordatorios de tareas para investigar o completar ^{[ 13 ]} (en lugar de usar software de recordatorios específico ). Pueden usar varias ventanas del navegador para organizar las pestañas o dirigir el enfoque ; ^{[ 13 ]} sin embargo, dejar varias ventanas abiertas puede agravar el desorden de pestañas. ^{[ 14 ]}

El acaparamiento de pestañas puede provocar estrés y sobrecarga de información , ^{[ 14 ]} distracción y una disminución del rendimiento del ordenador. Puede derivar en un apego emocional al conjunto de pestañas abiertas, ^{[ 15 ]} incluyendo el temor a perderlas en caso de fallo u otro reinicio , ^{[ 13 ]} y, por el contrario, alivio cuando las pestañas se restauran correctamente. ^{[ 16 ]} Quienes acaparan pestañas han atribuido este comportamiento a la ansiedad , ^{[ 17 ]} el miedo a perderse algo , ^{[ 18 ]} la procrastinación , ^{[ 19 ]} y malas prácticas de gestión de la información personal . ^{[ 20 ] [ 15 ]}

La prevalencia del acaparamiento de pestañas es reconocida por proveedores de navegadores como Mozilla , y ha inspirado funciones de gestión de memoria y pestañas en navegadores y extensiones . ^{[ 16 ]} Dichas funciones incluyen la agrupación de pestañas, que permite organizar visualmente las pestañas relacionadas ^{[ 21 ]} y contraerlas; la conversión de pestañas en una lista de hipervínculos ; ^{[ 20 ]} y paradigmas de interfaz alternativos , como enmarcar las tareas de alto nivel como objetos de primera clase en lugar de pestañas. ^{[ 22 ] [ 15 ]} Un estudio de 2021 desarrolló consideraciones de diseño de interfaz de usuario que podrían permitir mejores herramientas y cambios en el código de los navegadores web que permitan a los trabajadores del conocimiento y otros usuarios gestionar y utilizar mejor sus pestañas del navegador. ^{[ 15 ] [ 23 ]}

Los frameworks CSS que tienen pestañas incluyen Bootstrap , ^{[ 24 ]} Tailwind CSS ^{[ 25 ]} y Foundation . ^{[ 26 ]}

Los conjuntos de herramientas de widgets que tienen pestañas incluyen GTK usando el widget Notebook ^{[ 27 ]} , así como la biblioteca Adwaita usando el widget TabBar ^{[ 28 ]} . Qt usando el widget QTabWidget . ^{[ 29 ]}

• Ejemplos de interfaz con pestañas
• 
  Editor de texto GNOME
• 
  Web de GNOME
• 
  LibreOffice Writer : Interfaz de cinta mediante pestañas

• Microsoft Internet Explorer marca las familias de pestañas con diferentes colores.
• Interfaz de estilo IDE
• Cinta (informática)

• Widget de panel de pestañas
• Kit de herramientas de control ASP.NET AJAX
• Pestañas AJAX de Scriptaculous Archivadas el 22/03/2010 en Wayback Machine
• Demostración de la ventana de pestañas del administrador de ventanas de pestañas del menú circular para The NeWS Toolkit 2.0 (1991).