Una barra de desplazamiento es una técnica de interacción o widget en el que se puede desplazar texto continuo, imágenes o cualquier otro contenido en una dirección predeterminada (arriba, abajo, izquierda o derecha) en una pantalla de computadora , ventana o ventana gráfica de modo que se pueda ver todo el contenido, incluso si solo se puede ver una fracción del contenido en la pantalla de un dispositivo a la vez. Ofrece una solución al problema de la navegación a una ubicación conocida o desconocida dentro de un espacio de información bidimensional. [1] También se conocía como identificador en las primeras GUI . Están presentes en una amplia gama de dispositivos electrónicos, incluidos ordenadores, calculadoras gráficas, teléfonos móviles y reproductores multimedia portátiles. El usuario interactúa con los elementos de la barra de desplazamiento utilizando algún método de acción directa, la barra de desplazamiento traduce esa acción en comandos de desplazamiento y el usuario recibe retroalimentación a través de una actualización visual tanto de los elementos de la barra de desplazamiento como del contenido desplazado. [2]
Aunque los diseños de las barras de desplazamiento difieren a lo largo de su historia, normalmente aparecen en uno o dos lados del área de visualización como áreas rectangulares largas que contienen una barra (o pulgar) que se puede arrastrar a lo largo de un canal (o pista) para mover el cuerpo del documento. Esto se puede colocar verticalmente, horizontalmente o en ambos sentidos en la ventana, dependiendo de en qué dirección se extienda el contenido más allá de sus límites. A menudo se incluyen dos flechas en cada extremo del pulgar o canal para realizar ajustes más precisos. El "pulgar" tiene diferentes nombres en diferentes entornos: en Mac OS X 10.4 se llama "scroller"; [3] en la plataforma Java se llama "thumb" o "knob"; la documentación de .NET de Microsoft se refiere a él como "scroll box" o "scroll thumb"; en otros entornos se le llama "elevator", "quint", "puck", "wiper" o "grip"; En ciertos entornos donde los navegadores utilizan un lenguaje agnóstico a la terminología de la barra de desplazamiento, el pulgar se conoce como "guisante" para el movimiento vertical de la barra y todavía se utiliza "puck" para el movimiento horizontal.
Se pueden encontrar funciones adicionales, como acercar o alejar la imagen o varias herramientas específicas de la aplicación . Dependiendo de la GUI, el tamaño de la miniatura puede ser fijo o variable; en el caso posterior de las miniaturas proporcionales, su longitud indicaría el tamaño de la ventana en relación con el tamaño de todo el documento, indicado por la pista completa. Si bien las miniaturas proporcionales estaban disponibles en varias GUI, incluidas GEM , AmigaOS y PC/GEOS , incluso a mediados de la década de 1980, Microsoft no las implementó hasta Windows 95. Una miniatura proporcional que llena completamente el canal indica que se está viendo todo el documento, momento en el que la barra de desplazamiento puede ocultarse temporalmente. La miniatura proporcional también se puede ajustar a veces arrastrando sus extremos, como en Sony Vegas , un paquete de software de edición de video no lineal . En este caso, ajustaría tanto la posición como el zoom del documento, donde el tamaño de la miniatura representa el grado de zoom aplicado.
Una barra de desplazamiento debe distinguirse de un control deslizante , que es otro objeto visualmente similar pero funcionalmente diferente. El control deslizante se utiliza para cambiar valores, pero no cambia la visualización ni mueve el área que se muestra como lo hace una barra de desplazamiento.
En 1974, al mover el cursor hacia el margen izquierdo mientras se utilizaba Bravo, su forma cambió a una flecha de dos puntas para permitir el desplazamiento. Al presionar el botón rojo izquierdo o superior, el contenido se desplazaba hacia arriba y la línea junto al cursor iba a la parte superior de la ventana. Al presionar el botón azul derecho o inferior, el contenido se desplazaba hacia abajo y la línea en la parte superior de la ventana bajaba hasta el cursor. Al mantener presionado el botón amarillo del medio, el cursor cambiaba a un pulgar, lo que permitía saltar a ese porcentaje del documento con un indicador de la ubicación actual. [4]
En 1977, Smalltalk incluyó una barra de desplazamiento estable en el lado izquierdo de la ventana principal. Al hacer clic en la mitad derecha de la barra de desplazamiento, el contenido se movía hacia arriba y en la mitad izquierda, hacia abajo. El pulgar central de la barra se podía arrastrar suavemente y mostraba el porcentaje de contenido visible; la primera barra de desplazamiento proporcional. [5]
En 1980, Interlisp tenía una barra de desplazamiento que aparecía en el lado izquierdo de la ventana cuando el cursor se movía hacia la izquierda. El pulgar sombreado de la barra mostraba el porcentaje de contenido visible y se controlaba con el botón central. El botón izquierdo se desplazaba hacia arriba para mover la posición seleccionada al borde superior de la ventana, y el botón derecho se desplazaba hacia abajo para mover el borde superior de la ventana a la posición seleccionada. [6]
Entre 1981 y 1982, la Xerox Star movió la barra de desplazamiento hacia la derecha para quitarla del camino y reducir el desorden visual. Las flechas de desplazamiento apuntaban hacia adentro en la dirección en la que se movería el contenido según los estudios de usuarios, y los botones + y – permitían desplazarse por páginas. El pulgar era un diamante de tamaño fijo, independientemente de la parte del documento que se viera. Al hacer clic en la región del elevador del pulgar, se saltaba a esa parte del documento. [7]
En 1983, el Apple Lisa tenía flechas apuntando hacia arriba y hacia abajo, botones de página y un pulgar de tamaño fijo.
En 1984, el Macintosh tenía un rectángulo gris claro con un botón de desplazamiento, una pista de "área gris" y flechas que apuntaban en direcciones opuestas hacia el contenido que se expondría cuando se presionara la flecha respectiva. Las flechas se desplazaban una sola unidad con un clic o se repetían automáticamente con una presión continua. Se eliminaron los botones de página y, en su lugar, se podía hacer clic en la pista del elevador para pasar a la siguiente sección. Al presionar el botón, al arrastrarlo, se lo llevaba a ese punto en particular a menos que se hiciera un movimiento muy alejado de la barra de desplazamiento antes de soltarlo, lo que abortaría la acción. Se mostraba una barra de desplazamiento vacía cuando una ventana no estaba enfocada o si todo el documento era visible dentro de la ventana. [8]
En 1985, GEM utilizó un "cuadro de desplazamiento" de tamaño proporcional, pero que por lo demás funcionaba de forma idéntica a la de Macintosh. El resultado neto fue una barra de desplazamiento moderna que no se veía ni se sentía diferente de la barra de desplazamiento de Windows actual. GEM permitía mover el ratón lejos de la barra de desplazamiento después de hacer clic y mantener presionado, para reducir los problemas de coordinación mano-ojo. AmigaOS siguió más adelante ese mismo año, también con cuadros de desplazamiento de tamaño proporcional.
También en 1985, Viewpoint utilizó el botón derecho para mover el contenido por porcentaje o por ventana en lugar de por página.
En 1988, Open Look creó un elevador con teclas de flecha directamente sobre él. Al hacer clic en la pista, el puntero se desplazaba por las páginas y la función de repetición automática lo empujaba. Se colocaron anclajes de cable al principio y al final del documento y se podía arrastrar el centro del elevador. [9]
En 1989, NeXT movió la barra de desplazamiento hacia el lado izquierdo de la ventana. [10] El pulgar tenía un tamaño proporcional con flechas juntas en la parte inferior de la barra. Las acciones se repetían automáticamente y la tecla Alt movía el contenido por ventana. El pulgar se podía arrastrar y usar la tecla Alt mientras se arrastraba ralentizaba su movimiento.
En 1997, PalmPilot incluyó una barra de desplazamiento convencional en la que el texto se extendía más allá de los límites de la pantalla mediante el uso de un pulgar arrastrable y flechas que se podían tocar con un lápiz. También tenía dos botones físicos para desplazarse hacia arriba y hacia abajo respectivamente. [11]
En 2001, Mac OS X 10.0 utilizó un pulgar proporcional y movió ambos botones de flecha a la parte inferior de la barra.
En 2007, el iPhone y el iOS incluyeron una barra de desplazamiento normal en el navegador web y otras aplicaciones, aunque sólo era para la salida de datos y no se podía interactuar con ella. En los contactos, se proporcionó una barra de desplazamiento de letras para navegar por el contenido. [12]
En 2011, Mac OS X 10.7 eliminó los botones del final de la barra y fue diseñado para parecerse más a la barra de desplazamiento de iOS. Con la misma versión de Mac OS X 10.7, Apple introdujo el "desplazamiento natural", lo que significa que la pantalla se mueve en la misma dirección en la que se mueven los dedos del usuario cuando utiliza el gesto de desplazamiento con dos dedos. Si los dedos del usuario se mueven hacia arriba en el panel táctil, el contenido de la página sube, lo que permite al usuario leer el contenido más abajo en la página, y viceversa. [13]
En la versión 2015 de Microsoft Word para Mac, se introdujeron las barras de desplazamiento que desaparecen. La ubicación dentro de un documento ya no era visible cuando el mouse estaba fuera del área de la barra, incluso si la ventana en cuestión estaba enfocada. El propósito de este cambio fue cumplir con las prácticas de diseño estándar de Mac de ocultar la barra de desplazamiento cuando no se necesita inmediatamente para fines jerárquicos de información. [14]
Históricamente, la forma tradicional de manipular una barra de desplazamiento era arrastrando el cursor sobre el pulgar en la pantalla y manteniéndolo presionado. Esto se hace a menudo usando un panel táctil o el botón izquierdo de un mouse o panel táctil convencional. Al mover el cursor mientras se mantiene presionado, se mueve el pulgar de la barra de desplazamiento para ver diferentes secciones de la página. [15] En las aplicaciones nativas de OS X 10.11 (y algunas versiones anteriores de OS X), las barras de desplazamiento no aparecen en la interfaz de usuario hasta que el usuario usa otra técnica de desplazamiento, como el desplazamiento con dos dedos o las teclas de flecha. Por lo tanto, el usuario debe desplazarse primero usando uno de estos métodos y luego mover el cursor sobre el pulgar, donde sea que aparezca.
En Microsoft Windows , alejar demasiado el mouse del pulgar mientras lo arrastra restablecerá la posición de desplazamiento a la anterior.
También se puede utilizar una rueda de desplazamiento en un ratón convencional. Al mover la rueda en una dirección deseada, el contenido se desplaza en la misma dirección. [16] La mayoría de los ratones contienen ruedas de desplazamiento que solo se desplazan hacia arriba y hacia abajo, pero algunos ratones contienen ruedas de desplazamiento que permiten al usuario desplazarse en cualquier dirección (arriba, abajo, izquierda o derecha), incluidas las direcciones diagonales. Mientras se desplaza hacia arriba y hacia abajo, la dirección en la que se desplaza la página en respuesta a la dirección en la que el usuario desplaza la rueda de desplazamiento puede diferir según la configuración de desplazamiento del ordenador.
Se puede hacer clic en los botones de flecha del teclado para desplazarse hacia arriba, hacia abajo, hacia la izquierda o hacia la derecha en una página. Esta técnica de desplazamiento suele hacer que la pantalla se desplace muy lentamente en comparación con otras técnicas de desplazamiento. Si se hace clic en los botones de flecha, la página seguirá desplazándose hasta que se alcance uno de los límites de desplazamiento.
Se puede hacer clic en el canal que se encuentra encima o debajo del pulgar para saltar inmediatamente a ese punto en la página, o página por página para contenido de varias páginas. [15] Después de hacer clic en el canal, el desplazamiento comienza automáticamente y luego se detiene una vez que el pulgar ha llegado a la posición del puntero del mouse. Esta técnica de desplazamiento es más rápida que otras y se utiliza mejor cuando el usuario tiene que desplazarse por una gran cantidad de contenido a la vez, o cuando el usuario sabe exactamente a dónde debe desplazarse en una página.
Muchas aplicaciones, como Microsoft Word y PowerPoint , contienen barras de desplazamiento con flechas direccionales en pantalla para desplazarse. Al hacer clic en las flechas se desplaza una pequeña cantidad del contenido, a menudo líneas individuales, a la vez, y al presionarlas y mantenerlas presionadas con el cursor se desplaza continuamente sobre más área de la página hasta que se suelta. [15] A veces, ambos botones de flecha aparecen uno al lado del otro para una manipulación rápida y precisa sin tener que arrastrar el pulgar o mover el mouse grandes distancias hacia la otra flecha (esto se ofreció como una opción en Mac OS 8.5 ); uno de ellos también puede duplicarse para que se muestre en ambos extremos de la barra, lo que brinda familiaridad para aquellos acostumbrados a botones separados y adyacentes. Estos botones de flecha existieron hasta Mac OS X 10.7 , donde se eliminaron en favor de los gestos del panel táctil y los ratones con rueda de desplazamiento. [17]
En BeOS , los botones de desplazamiento en pantalla para ambas direcciones aparecen en ambos extremos de la barra de desplazamiento. En varios programas de Microsoft Office , los botones adicionales ⏪y ⏩se pueden utilizar para la navegación por página. [18]
Otra técnica de desplazamiento con barras de desplazamiento es observar qué botón del ratón se ha pulsado. Por ejemplo, un clic izquierdo en la flecha hacia abajo puede hacer que la ventana se desplace hacia abajo, mientras que un clic derecho en el mismo lugar la desplazará hacia arriba (por ejemplo, RISC OS ), o se podría utilizar el botón central para colocar el pulgar con precisión. Esta forma requiere menos habilidades motoras finas , aunque requiere un ratón con varios botones y, posiblemente, un mayor grado de alfabetización en GUI.
Además, algunas máquinas con Windows habilitado tienen un mecanismo de desplazamiento en el costado del panel táctil, como se muestra en la imagen. Para utilizar este mecanismo, se coloca un dedo en el área de desplazamiento y se mueve hacia arriba y hacia abajo o hacia la izquierda y hacia la derecha para desplazarse por la página. Nuevamente, dependiendo de la configuración de desplazamiento de la computadora, mover el dedo en ciertas direcciones a lo largo de estas áreas de desplazamiento podría dar como resultado diferentes direcciones de desplazamiento correspondientes. [19]
Una técnica de desplazamiento más moderna consiste en utilizar el desplazamiento con dos dedos en el trackpad de un Mac. En esta técnica, las puntas de dos dedos de la misma mano se colocan sobre la superficie del trackpad y se mueven en consecuencia. Si el usuario tiene la dirección de desplazamiento del trackpad configurada como "natural", mover los dos dedos hacia la parte superior del trackpad hará que la página se desplace hacia arriba, hacia la parte superior de la página; por el contrario, mover los dedos hacia la parte inferior del trackpad hará que la página se desplace hacia abajo, hacia la parte inferior. Si el usuario "desplaza" los dedos moviéndolos muy rápidamente por el trackpad y luego soltándolos, la página seguirá desplazándose en la dirección en la que los desplazó hasta que finalmente se ralentice y se detenga, ya sea porque se alcanza uno de los límites de desplazamiento o porque la velocidad de desplazamiento disminuye tanto que finalmente simplemente se detiene. Esta característica se denomina inercia.
Se han propuesto o implementado muchas variaciones del diseño y uso de la barra de desplazamiento tradicional. Para evitar limitar la visibilidad de la ventana con las barras de desplazamiento y al mismo tiempo permitir la funcionalidad, se ha propuesto el uso de un anclaje de software (línea fina) asociado con el movimiento del puntero del ratón alrededor del anclaje. De manera similar, la barra de desplazamiento se puede colocar directamente dentro del contenido donde sea útil, lo que disminuye el espacio utilizado y reduce los movimientos necesarios del puntero. [20]
La inclusión de pistas visuales y operativas dentro del área de visualización de la barra de desplazamiento puede indicar qué direcciones permiten el movimiento de desplazamiento, así como qué interacciones con la barra de desplazamiento están disponibles. [20] Esto puede ser un campo en blanco para señalar el final de una lista, la desactivación de los botones de desplazamiento y cambios de color en la barra de desplazamiento.
Algunas barras de desplazamiento incluyen un indicador de posición visual para ayudar a determinar dónde se ha realizado o se realizará la acción de desplazamiento en el contenido. [21] Para contenido de varias páginas, se puede incluir un indicador del número de página actual frente al número total de páginas junto al pulgar a medida que se realiza el desplazamiento, y las barras de desplazamiento más anchas pueden incluir una descripción general de toda la página. En barras de desplazamiento como las que se utilizan en las listas de contactos telefónicos formadas por las letras del alfabeto, la letra correspondiente al área actual se puede mostrar más grande o resaltar de alguna manera. Si bien estas son estables y las proporciona la aplicación, algunas aplicaciones y motores de búsqueda permiten el uso de marcadores de relevancia proporcionados o agregados por el usuario. Estos pueden ser estrictamente visuales o pueden detener automáticamente la acción dentro de la barra de desplazamiento una vez que se alcanza cada marcador. [20] Estos se pueden enfatizar con color o incluso sonido para ayudar aún más al usuario a encontrar lo que necesita dentro del contenido.
Los elementos de control gráfico especiales, similares a barras de desplazamiento, permiten desplazarse por un espacio bidimensional con solo mover un único rectángulo en cualquier dirección del plano. Por ejemplo, GtkScrollpane de GTK+ está implementado en los visores de texto gv y ghostview .
Otro ejemplo de desplazamiento bidimensional simultáneo es un programa de alineación de secuencias de proteínas. [22] Inicialmente, la barra de desplazamiento horizontal parece una barra convencional, pero luego ofrece tres funciones adicionales:
En RISC OS, arrastrar una barra de desplazamiento con el botón izquierdo del ratón funciona de la forma habitual, pero arrastrarla con el botón derecho hace que el puntero desaparezca y que ambas barras de desplazamiento se manipulen simultáneamente. Muchas operaciones de la interfaz gráfica de usuario en RISC OS realizan una función relacionada, pero ligeramente diferente, cuando se hace clic con el botón derecho.
La capacidad y los métodos específicos necesarios para personalizar el aspecto y la función de las barras de desplazamiento pueden variar significativamente según el sistema operativo o la aplicación de software que intente personalizar. Un método común para alterar el aspecto de la barra de desplazamiento en las páginas web es utilizar directivas CSS para cambiar los colores de la barra de desplazamiento. Estas no son estándar y solo son compatibles con las versiones 5.x o superiores de Microsoft Internet Explorer y Opera . [23] [24] Y en los navegadores basados en WebKit , existen pseudoelementos llamados:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner::-webkit-resizerWebKit también proporciona muchas pseudoclases para modificar el estilo de las barras de desplazamiento. [25]
También se han mejorado las barras de desplazamiento para codificar información sobre las entradas de la lista. [26] Por ejemplo, Google Chrome introduce marcas en la barra de desplazamiento vertical para indicar lugares en el documento donde se encontró un término de búsqueda particular.
Los usuarios con conocimientos informáticos suelen estar familiarizados con las barras de desplazamiento, pero aquellos con conocimientos limitados pueden no entenderlas intuitivamente, especialmente dadas las variaciones más recientes, sin ayuda. [27] Independientemente del nivel de alfabetización, se pueden encontrar múltiples problemas en varios tipos de barras de desplazamiento y sus interacciones. En términos de diseño, si el tamaño de la ventana ya es pequeño, el área de contenido visible se reducirá aún más por la presencia de una barra de desplazamiento. [20] Si bien algunas barras de desplazamiento que desaparecen más recientes ayudan a mitigar este problema, las más tradicionales no lo evitan, especialmente cuando hay barras horizontales y verticales presentes.
En términos de uso, muchos problemas comunes tienen que ver con la precisión. La correspondencia entre la barra de desplazamiento y la pantalla es lineal, por lo que la precisión de uso es relativa al tamaño del contenido. [28] La navegación a través de un documento más pequeño es, por lo tanto, más sencilla que la navegación a través de un documento más grande. Esto también significa que todas las partes de un documento se enfatizan por igual y la importancia de cada parte no se reconoce mediante el uso de la barra de desplazamiento.
No suele haber una indicación de a qué parte del contenido se ha llegado con un desplazamiento a menos que se detenga la acción de desplazamiento para ver el contenido. Esto dificulta la tarea independientemente de si el usuario sabe o no lo que está buscando o la organización general del contenido. Los que tienen un indicador están limitados por las configuraciones predeterminadas de visibilidad, cantidad y estilo. [21] Si se intenta desplazarse mientras se realiza una acción como resaltar, la cantidad de desplazamiento puede no corresponderse con la cantidad deseada, sobrepasarse o solicitar al usuario que se reposicione varias veces. [29] El sobrepasarse también puede ocurrir cuando se intenta posicionar cerca de la parte superior o inferior de una sola página dentro de un conjunto más grande. Un intento de ajuste de desplazamiento pequeño por parte del usuario puede dar como resultado uno más grande ya que el desplazamiento activa una acción automática que salta a la página siguiente. [15]
En un informe de 1986, William Buxton y Brad Myers probaron diferentes interacciones con dos manos, que incluían desplazarse, hacer clic y cambiar el tamaño. En su estudio, hacer clic y cambiar el tamaño se realizaron en paralelo. En el primer experimento, los participantes debían realizar una tarea de selección/posicionamiento, y en el segundo experimento, una tarea compuesta de navegación/selección. El estudio descubrió que los usuarios pueden realizar estas tareas más rápido y en paralelo cuando usan ambas manos, pero no necesariamente cuando usan ambas manos simultáneamente. También descubrieron que cuanto más relacionadas estaban las tareas que el usuario estaba haciendo con cada una de sus manos, más rápido realizaba las tareas que se le pedía que hiciera. [30]
{{cite journal}}: Requiere citar revista |journal=( ayuda ){{cite book}}: Mantenimiento de CS1: falta la ubicación del editor ( enlace )