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 , ventana o ventana gráfica de computadora para que todos los El contenido se puede ver, 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 hacia una ubicación conocida o desconocida dentro de un espacio de información bidimensional. [1] También se lo 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, generalmente 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 ambas 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 en el canal para realizar ajustes más precisos. El "pulgar" tiene diferentes nombres en diferentes entornos: en Mac OS X 10.4 se llama "desplazador"; [3] en la plataforma Java se llama "pulgar" o "perilla"; La documentación .NET de Microsoft se refiere a él como "cuadro de desplazamiento" o "pulgar de desplazamiento"; en otros ambientes se le llama "elevador", "quint", "puck", "limpiaparabrisas" o "grip"; En ciertos entornos donde los navegadores usan un lenguaje independiente de 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 usa "disco" para el movimiento horizontal.
Se pueden encontrar funciones adicionales, como acercar/alejar o varias herramientas específicas de la aplicación . Dependiendo de la GUI, el tamaño del pulgar puede ser fijo o variable; en el último caso de pulgares 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 los pulgares proporcionales estaban disponibles en varias GUI, incluidas GEM , AmigaOS y PC/GEOS , incluso a mediados de la década de 1980, Microsoft no los implementó hasta Windows 95 . Un pulgar proporcional que llena completamente el canal indica que se está viendo el documento completo, momento en el que la barra de desplazamiento puede quedar oculta temporalmente. A veces, el pulgar proporcional también se puede ajustar arrastrando sus extremos, como en Sony Vegas , un paquete de software de edición de vídeo no lineal . En este caso ajustaría tanto la posición como el zoom del documento, donde el tamaño del pulgar 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 usa 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, mover el cursor hacia el margen izquierdo mientras se usaba Bravo cambió su forma a una flecha de dos puntas para permitir el desplazamiento. Al presionar el botón rojo izquierdo o superior se desplazó el contenido hacia arriba y la línea al lado del cursor fue a la parte superior de la ventana. Al presionar el botón azul derecho o inferior, el contenido se desplazó hacia abajo y la línea en la parte superior de la ventana descendió hasta el cursor. Al mantener presionado el botón amarillo del medio, el cursor cambió a un pulgar, lo que permitió saltar a ese porcentaje del documento con un indicador de la ubicación actual. [4]
En 1977, Smalltalk incluía una barra de desplazamiento estable en el lado izquierdo de la ventana de enfoque. Al hacer clic en la mitad derecha de la barra de desplazamiento, el contenido se movía hacia arriba y la mitad izquierda lo movía hacia abajo. El pulgar central de la barra se podía arrastrar suavemente y mostraba el porcentaje del 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 estaba controlado por el botón central. El botón izquierdo se desplazó hacia arriba para mover la posición seleccionada al borde superior de la ventana, y el botón derecho se desplazó hacia abajo para mover el borde superior de la ventana a la posición seleccionada. [6]
Entre 1981 y 1982, 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 los usuarios, y los botones + y – permitían desplazarse por las páginas. El pulgar era un diamante de tamaño fijo, independientemente de la cantidad de documento visible. Al hacer clic en la región del elevador del pulgar se saltará 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, Macintosh tenía un rectángulo gris claro con un pulgar de "cuadro de desplazamiento", una pista de "área gris" y flechas que apuntaban en direcciones opuestas hacia el contenido que quedaría expuesto cuando se presionara la flecha respectiva. Las flechas desplazarían una sola unidad con un clic o se repetirían automáticamente al presionar continuamente. Se eliminaron los botones de página y, en su lugar, se podía hacer clic en la pista del ascensor para pasar a la siguiente sección. Al presionar el pulgar, arrastrarlo lo llevaría a ese punto en particular a menos que se hiciera un movimiento muy alejado de la barra de desplazamiento antes de soltarlo, abortando la acción. Se mostraba una barra de desplazamiento vacía cuando una ventana no estaba enfocada o si todo el documento estaba visible dentro de la ventana. [8]
En 1985, GEM utilizó un pulgar de "cuadro de desplazamiento" de tamaño proporcional, pero por lo demás funcionaba de manera idéntica al 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 permitió alejar el mouse de la barra de desplazamiento después de hacer clic y mantener presionado, para reducir los problemas de coordinación ojo-mano. 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 contenido por porcentaje o por ventana en lugar de por página.
En 1988, Open Look creó un pulgar de ascensor con teclas de flecha directamente sobre él. Al hacer clic en la pista movida por las páginas y la repetición automática, el puntero avanzaría. Se colocaron anclajes de cable al principio y al final del documento, y se podía arrastrar el centro del ascensor. [9]
En 1989, NeXT volvió a mover la barra de desplazamiento al 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. Se podría arrastrar el pulgar y usar la tecla Alt mientras se arrastra ralentizaría su movimiento.
En 1997, PalmPilot incluía una barra de desplazamiento convencional donde el texto se extendía más allá de los límites de la pantalla con 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 usó un pulgar proporcional y movió ambos botones de flecha a la parte inferior de la barra.
En 2007, el iPhone y el iOS incluían una barra de desplazamiento normal en el navegador web y otras aplicaciones, aunque era sólo para salida y no se podía interactuar con ella. En los contactos, se proporcionó una barra de desplazamiento de letras para desplazarse 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 el mismo lanzamiento 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 suben por el trackpad, el contenido de la página sube, lo que le permite 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 barras de desplazamiento que desaparecían. 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]
Arrastrar el pulgar es históricamente la forma tradicional de manipular una barra de desplazamiento. Al mover el cursor sobre el pulgar en la pantalla y luego presionar y mantener presionado, se puede arrastrar el pulgar. Esto a menudo se hace usando un trackpad o el botón izquierdo de un mouse o panel táctil convencional. Al mover el cursor mientras se presiona hacia abajo, se mueve el pulgar de la barra de desplazamiento para ver diferentes secciones de la página. [15] En 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 utiliza otra técnica de desplazamiento, como el desplazamiento con dos dedos o el uso de las teclas de flecha. Por lo tanto, el usuario debe desplazarse utilizando uno de estos métodos primero y luego mover el cursor al pulgar, dondequiera 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 mouse convencional. Al mover la rueda en la dirección deseada, el contenido se mueve 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 de la computadora.
Se puede hacer clic en los botones de flecha del teclado para desplazarse hacia arriba, abajo, izquierda o derecha en una página. Esta técnica de desplazamiento generalmente hace que la pantalla se desplace muy lentamente en comparación con otras técnicas de desplazamiento. Al hacer clic en los botones de flecha, la página continuará desplazándose hasta que se alcance uno de los límites de desplazamiento.
Se puede hacer clic en el canal encima o debajo del pulgar para saltar inmediatamente a ese punto de 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 alcanzado 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 en qué parte de una página debe desplazarse.
Muchas aplicaciones, como Microsoft Word y PowerPoint , contienen barras de desplazamiento con flechas direccionales en la 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 con el cursor se desplaza continuamente sobre más áreas 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 ofrecía como una opción en Mac OS 8.5 ); uno de ellos también puede duplicarse para mostrarse en ambos extremos de la barra, lo que brinda familiaridad a quienes están 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 trackpad 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áginas. [18]
Otra técnica de desplazamiento con barras de desplazamiento es observar qué botón del mouse se presionó. Por ejemplo, un clic izquierdo en la flecha hacia abajo podría hacer que la ventana se desplazara hacia abajo, mientras que un clic derecho en el mismo lugar se desplazaría hacia arriba (por ejemplo, RISC OS ), o se podría usar el botón central para colocar el pulgar con precisión. Esta forma requiere menos habilidades motoras finas , aunque requiere un mouse con varios botones y posiblemente un mayor grado de conocimiento de la GUI.
Además, algunas máquinas compatibles con Windows tienen un mecanismo de desplazamiento en el lateral 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 resultar en diferentes direcciones de desplazamiento correspondientes. [19]
Una técnica de desplazamiento más moderna es utilizar el desplazamiento con dos dedos en un trackpad de 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 en "natural", mover sus dos dedos hacia la parte superior del trackpad hará que la página se desplace 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. Si el usuario "mueve" sus dedos moviendo sus dos dedos muy rápidamente a través del trackpad y luego soltándolos, la página continuará desplazándose en la dirección en la que movió hasta que finalmente se desacelere y se detenga, ya sea porque uno de los se alcanzan los límites de desplazamiento o porque la velocidad de desplazamiento disminuye tanto que eventualmente simplemente se detiene. Esta característica se llama inercia.
Se han propuesto o implementado muchas variaciones del diseño y uso tradicional de la barra de desplazamiento. Para evitar limitar la visibilidad de la ventana con barras de desplazamiento y al mismo tiempo permitir la funcionalidad, se ha propuesto el uso de una correa de software (línea delgada) asociada con el movimiento del puntero del mouse alrededor de la correa. De manera similar, la barra de desplazamiento se puede colocar directamente dentro del contenido donde sea útil, disminuyendo el espacio utilizado y reduciendo los movimientos requeridos 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 los 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 ha ido o hacia dónde irá 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 produce el desplazamiento, y 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 de los teléfonos formadas por las letras del alfabeto, la letra correspondiente al área actual se puede mostrar más grande o resaltada de alguna manera. Si bien estos son estables y los 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 tipo barra de desplazamiento permiten desplazarse por un espacio bidimensional simplemente moviendo un solo rectángulo en cualquier dirección del plano. Por ejemplo, el 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 para secuencias de proteínas. [22] Inicialmente, la barra de desplazamiento horizontal parece una convencional. Pero luego la barra de desplazamiento ofrece tres características adicionales:
En RISC OS, arrastrar una barra de desplazamiento con el botón izquierdo del mouse funciona de la manera habitual, pero arrastrar con el botón derecho hace que el puntero desaparezca y ambas barras de desplazamiento se manipulen simultáneamente. Muchas operaciones de GUI en RISC OS realizan una función relacionada pero ligeramente diferente cuando se hace clic derecho.
La capacidad y los métodos específicos necesarios para personalizar la apariencia 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. Estos no son estándar y sólo son compatibles con las versiones 5.x o superiores de Microsoft Internet Explorer y Opera . [23] [24] Y en los navegadores basados en WebKit , hay 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 de valle 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 de informática suelen estar familiarizados con las barras de desplazamiento, pero aquellos con conocimientos limitados pueden no entenderlas intuitivamente, especialmente teniendo en cuenta las variaciones más recientes, sin ayuda. [27] Independientemente de la 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 recientemente 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. El mapeo 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 entonces 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 dónde ha llegado el desplazamiento en el contenido, a menos que se detenga la acción de desplazamiento para ver el contenido. Esto lo dificulta independientemente de si el usuario sabe o no lo que busca o la organización general del contenido. Aquellos que sí tienen un indicador están limitados por las configuraciones predeterminadas de visibilidad, cantidad y estilo. [21] Si intenta desplazarse mientras realiza una acción como resaltar, es posible que la cantidad de desplazamiento no corresponda a la cantidad deseada, sobrepasándose o solicitando al usuario que reposicione varias veces. [29] También se puede producir un exceso al intentar colocar 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 resultar en uno más grande ya que el desplazamiento activa una acción automática para saltar a la página siguiente. [15]
Un informe de 1986 de William Buxton y Brad Myers probó diferentes interacciones con las dos manos, incluido el desplazamiento, el clic y el cambio de tamaño. En su estudio, hacer clic y cambiar el tamaño se realizaron en paralelo. Su primer experimento pidió a los participantes que realizaran una tarea de selección/posicionamiento, y su segundo experimento solicitó que los participantes realizaran una tarea compuesta de navegación/selección. El estudio encontró 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 hacía con cada una de sus manos, más rápido realizaba las tareas que se le pedía. [30]
{{cite journal}}: Citar diario requiere |journal=( ayuda ){{cite book}}: Mantenimiento CS1: falta el editor de la ubicación ( enlace )