Cinta (interfaz de usuario)

En el diseño de interfaces gráficas de usuario , una cinta es un elemento de control que consiste en un conjunto de barras de herramientas organizadas en varias pestañas . La estructura típica de una cinta incluye barras de herramientas grandes con pestañas, que contienen botones gráficos y otros elementos de control gráficos, agrupados por funcionalidad. Estas cintas utilizan pestañas para mostrar diferentes conjuntos de controles, eliminando la necesidad de numerosas barras de herramientas paralelas. Las pestañas contextuales son aquellas que aparecen solo cuando el usuario las necesita. Por ejemplo, en un procesador de texto , puede aparecer una pestaña relacionada con imágenes cuando el usuario selecciona una imagen en un documento, lo que le permite interactuar con ella.

El uso del término "cinta" se remonta a la década de 1980 y originalmente se utilizaba como sinónimo de barra de herramientas simple. Sin embargo, en 2007, Microsoft utilizó el término para referirse a su propia implementación de barras de herramientas con pestañas que abarcaban un conjunto de controles para Microsoft Office 2007 , a la que Microsoft denomina "Fluent UI". Aunque Microsoft popularizó el término con un nuevo significado, existían diseños de controles con pestañas similares en software anterior de otros proveedores, incluidos 3D Studio Max R3 y versiones posteriores, Adobe Dreamweaver , Borland Delphi , Sausage Software HotDog y Macromedia HomeSite .

El uso de una interfaz de cinta data de principios de la década de 1990 en software de productividad como Microsoft Word y WordStar ^{[ 1 ]} como un término alternativo para barra de herramientas : se definió como una parte de una interfaz gráfica de usuario que consiste en una fila horizontal de elementos de control gráfico (por ejemplo, incluyendo botones de varios tamaños y listas desplegables que contienen iconos ), típicamente configurables por el usuario. ^{[ 2 ] [ 3 ] [ 4 ]}

Una interfaz de barra de herramientas , llamada "cinta", ha sido una característica de Word desde las primeras versiones de Word 5.5 basadas en MS-DOS (aprox. 1990) ^{[ 5 ]} y las primeras versiones basadas en Windows (activadas por la opción de menú "Ver | Cinta" ^{[ 6 ]} ), para las cuales la publicidad inicial hacía referencia al uso de "la cinta para reemplazar una cadena interminable de comandos y permitirle formatear caracteres visualmente en lugar de memorizarlos". ^{[ 3 ]}

La cinta de opciones con pestañas, tal como se introdujo en Microsoft Office 2007.

La cinta de opciones con pestañas rediseñada, introducida en Microsoft Office 2021.

Con el lanzamiento de Microsoft Office 2007 llegó la "Interfaz de Usuario Fluida" o "UI Fluida", que reemplazó las barras de menú y las barras de herramientas personalizables con un único "menú de Office", una barra de herramientas en miniatura conocida como "barra de herramientas de acceso rápido" y lo que se conoció como la cinta: múltiples pestañas , cada una con una barra de herramientas que contiene botones y, ocasionalmente, otros controles. Los controles de la barra de herramientas tienen tamaños variados y están clasificados en grupos visualmente distinguibles. ^{[ 7 ] [ 8 ]} El nuevo diseño tenía como objetivo aliviar el problema de que los usuarios no encontraran o no supieran de la existencia de las funciones disponibles en la suite de Office. ^{[ 9 ] [ 10 ]} Posteriormente se afirmó que el nombre "cinta" se originó a partir de una idea de diseño inicial en la que los comandos se colocaban en un panel largo que se podía enrollar como un pergamino medieval ; el nombre se mantuvo después de que el mecanismo de desplazamiento fuera reemplazado por pestañas. ^{[ 11 ]}

Las aplicaciones de Microsoft que implementan cintas de opciones tienen cada una un conjunto diferente de pestañas que contienen los controles de usuario de esa aplicación. Dentro de cada pestaña, se pueden agrupar varios controles relacionados. Al hacer doble clic en la pestaña activa o al hacer clic en el botón "Minimizar", se oculta el panel de comandos, dejando solo las pestañas visibles. Al repetir esta acción, se muestra el panel. ^{[ 12 ]} La cinta de opciones consolida la funcionalidad que antes se encontraba en menús, barras de herramientas y, ocasionalmente, paneles de tareas en un solo lugar. ^{[ 13 ]}

En Microsoft Office 2007, solo Word , Excel , Access y PowerPoint implementaron cintas de opciones. Sin embargo, con el lanzamiento de Microsoft Office 2010 , las cintas de opciones se implementaron en el resto de las aplicaciones de Microsoft Office . ^{[ 14 ] [ 15 ]} Microsoft Office 2010 también agregó soporte adicional para la personalización por parte del usuario final en su interfaz de usuario.

Microsoft implementó gradualmente la cinta en algunos de sus otros programas. La cuarta ola de aplicaciones de Windows Live Essentials , incluyendo Mail , Photo Gallery , Movie Maker y Writer , presentaba una cinta. ^{[ 16 ]} Desde Windows 7 , Paint y WordPad incluyen cintas. ^{[ 17 ]} En Windows 8 , el Explorador de archivos siguió el ejemplo. Las cintas también aparecieron en SQL Server Report Builder , Dynamics CRM 2011 , ^{[ 18 ]} Microsoft Mathematics v4.0, el cliente de escritorio para Microsoft Power BI y algunos otros programas que desde entonces han sido retirados.

Se ha introducido una cinta con pestañas rediseñada, como parte del rediseño de la interfaz de usuario de Office en Microsoft Office 2021. ^{[ 19 ]}

La historia del desarrollo de Ribbon, presentada por Jensen Harris en 2008, puede consultarse aquí .

Desde la introducción de las cintas en Microsoft Office 2007, ha habido un aumento en el uso de este tipo de interfaz en aplicaciones creadas por otros desarrolladores, especialmente aquellos que crean herramientas para productos relacionados con Microsoft. Microsoft facilitó la adopción con los lanzamientos de Windows 8 , Windows 7 y la actualización de plataforma de Windows Vista , que incluyó API de marco de cinta integradas , introducidas para permitir a los desarrolladores integrar una barra de herramientas de cinta en sus aplicaciones. ^{[ 20 ]} El Grupo Nielsen Norman publicó algunos ejemplos en un informe de demostración de GUI de 2008. ^{[ 21 ] [ 22 ]}

En junio de 2008, Red Flag Software lanzó RedOffice 4.0 beta, una bifurcación china de OpenOffice.org que incluía una nueva interfaz de usuario que utilizaba muchas ideas de cinta en su diseño. ^{[ 23 ] [ 24 ]} En noviembre de 2008, Sun Microsystems inició el proyecto Renaissance para mejorar la interfaz de usuario de OpenOffice.org. ^{[ 25 ]} Hasta ahora, los prototipos del proyecto se consideran frecuentemente similares a las cintas, pero esto ha generado algunas críticas por parte de los usuarios. ^{[ 26 ]}

En julio de 2011, Avid Tech añadió una interfaz de cinta bajo licencia de Microsoft a la versión 7.0 de su aplicación de notación musical Sibelius (scorewriter) , reemplazando el sistema de navegación por menús de las versiones anteriores. Esto encontró una considerable resistencia por parte de los usuarios, ^{[ 27 ]} sin embargo, la interfaz de cinta ha permanecido integrada a la GUI actual .

En septiembre de 2012, MathWorks introdujo una interfaz de cinta (conocida como "Toolstrip") en MATLAB R2012b. ^{[ 28 ]}

En febrero de 2019, LibreOffice 6.2 añadió una variante de interfaz de usuario llamada "Tabbed" que imita las cintas de opciones de Microsoft Office. ^{[ 29 ]}

Antes de que Microsoft introdujera las cintas de opciones en Office 2007, la interfaz de usuario de sus suites Office apenas había cambiado desde el lanzamiento de Office 97 el 19 de noviembre de 1996. ( Office 2000 y Office 2003 lanzaron actualizaciones relativamente menores en comparación con Office 97 , que a su vez se consideró un hito en comparación con Office 95 ).

Debido a esto, los usuarios se acostumbraron a este estilo de interfaz, que era común en muchos productos de productividad en ese momento. Cuando Microsoft implementó las cintas, recibió reacciones mixtas. Jeff Atwood pensó que el nuevo sistema hizo obsoletos los menús como piedra angular de la interfaz WIMP cuando se presentó por primera vez en 2005. ^{[ 30 ] [ 31 ]} Redmondmag.com informó que los usuarios avanzados sienten que las cintas requieren "demasiado tiempo y paciencia para aprender". ^{[ 32 ]} Richard Ericson de Computerworld señaló que los usuarios experimentados podrían tener dificultades para adaptarse a la nueva interfaz, y que algunas tareas requieren más pulsaciones de teclas o clics para activarse. ^{[ 8 ]} Aunque la cinta se puede ocultar haciendo doble clic en la pestaña abierta, PC World escribió que las cintas saturan el área de trabajo de Office, especialmente para los usuarios de portátiles; ^{[ 33 ]} las opciones de personalización disponibles en la versión original no permitían a los usuarios reorganizar o eliminar los comandos predefinidos, aunque se podía minimizar. ^{[ 34 ]} Otros han dicho que sus iconos grandes distraen. ^{[ 35 ]} Una encuesta en línea realizada por ExcelUser informa que la mayoría de los encuestados tenía una opinión negativa del cambio, siendo los usuarios avanzados "algo más negativos" que los usuarios intermedios; la reducción de productividad autoestimada fue de un promedio de alrededor del 20%, y "alrededor del 35%" para las personas con una opinión negativa.

Otros usuarios afirman que, una vez que se aprende la nueva interfaz, el usuario promedio puede crear "documentos de aspecto profesional más rápido". ^{[ 32 ]} Un estudio reportó una aceptación bastante buena por parte de los usuarios, excepto los usuarios muy experimentados y los usuarios de aplicaciones de procesamiento de texto con una interfaz WIMP clásica, pero fue menos convincente en términos de eficiencia y organización. ^{[ 36 ]}

La decisión de abolir los menús se ha comparado con la infame campaña de la New Coke de la compañía Coca-Cola por su abandono de la base de usuarios existente. ^{[ 37 ]} Microsoft Office 2011 para Macintosh, si bien utiliza la cinta, también conserva el sistema de menús en la barra de menús de Mac. ^{[ 38 ]}

Las barras de herramientas con pestañas, como las que se encuentran en Macromedia HomeSite y Lotus eSuite , se han propuesto como un precedente para las cintas de opciones.

Los defensores del software libre , como el desarrollador de KDE, Jarosław Staniek, ^{[ 39 ]} han expresado la creencia de que las patentes relacionadas con las cintas no pueden adquirirse debido a la omnipresencia del estado de la técnica anterior . ^{[ 39 ]} Staniek señala que el concepto de cinta ha aparecido históricamente de forma extensa como "barras de herramientas con pestañas" en aplicaciones como Sausage Software HotDog , Macromedia HomeSite , Dreamweaver y Borland Delphi . ^{[ 39 ]} Lotus desarrolló las primeras interfaces de usuario de cinta para su producto eSuite. Las capturas de pantalla aún están disponibles en un libro rojo de IBM sobre eSuite (página 109 y siguientes). ^{[ 40 ]}

El 13 de febrero de 2018, un jurado del Distrito Norte de California dictaminó que Corel Corporation había infringido varias patentes de diseño de cintas de Microsoft y patentes de utilidad de cintas relacionadas con la interfaz de usuario Fluent. ^{[ 41 ] [ 42 ]}

• Ribbon Hero y Ribbon Hero 2 : videojuegos educativos que entrenan a los usuarios en el uso de cintas.
• Metro (lenguaje de diseño) : lenguaje de diseño que subyace a la interfaz de usuario de Windows Phone y Windows  8.
• Windows Aero : interfaz de usuario de Microsoft para Windows Vista y Windows  7.

• Documentación de directrices de Microsoft para la interfaz de usuario Ribbon
• Guías para desarrolladores del marco de trabajo de la cinta de opciones de Windows
• DotNetBar en Wayback Machine (archivado el 4 de febrero de 2020) , una herramienta que amplía el conjunto habitual de componentes de interfaz de usuario para Windows Forms con componentes relacionados con Ribbon.

• Diseñando la cinta , por Jensen Harris