it-swarm-es.com

¿Las barras de desplazamiento están muertas en 2020?

Recientemente escuché a un diseñador decir algo en el sentido de que los diseños web modernos no usan barras de desplazamiento visuales, o al menos solo son visibles al desplazarse. Soy un desarrollador front-end y realmente no había escuchado esto. ¿Hay algo de cierto en esto? Específicamente mi pregunta es:

Para una aplicación web, cuando el contenido es desplazable:

  1. ¿Debería haber barras de desplazamiento visibles (y por qué)?
  2. ¿No debería haber barras de desplazamiento visibles (y por qué no)?
92
jbyrd

Si deberia.

Las barras de desplazamiento visibles son una ventaja "esta página es desplazable"

Sin sugerencias visuales como esta, la funcionalidad podría perderse.

107
colmcq

Algunas pautas de diseño moderno ciertamente desprecian las barras de desplazamiento visibles de forma persistente, pero no todas. Por ejemplo, en Guía de diseño de materiales , para menús, si un menú es desplazable, debería mostrar una barra de desplazamiento. En cualquier caso, si su contenido es desplazable, debe quedar claro al mirarlo que permite el desplazamiento.

Depende de un diseñador individual o pauta si esa capacidad se basa en una barra de desplazamiento que indica claramente cuánto puede desplazarse hacia abajo (tradicional), un enlace "leer más" o una flecha apuntando hacia abajo en la pantalla (como en muchas páginas de inicio o blogs de aplicaciones modernas ), o un desvanecimiento al acercarse al borde del área de contenido que implica que puede moverse en esa dirección para ver más o más claramente, pero la capacidad de pago en sí misma es el componente necesario. Sería un mal diseño presentar contenido que se pueda desplazar pero que no indique esa posibilidad de desplazamiento para el usuario. Podría frustrar al usuario o hacer que pierda información importante o llamadas a la acción.

102
sintax

Como usuario del mouse, aborrezco el contenido desplazable que no me da una vista y acceso a las barras de desplazamiento.

  1. La barra de desplazamiento es un control. Me permite navegar rápidamente en páginas grandes con las que no se puede comparar la cantidad de desplazamiento de los dedos, desplazamiento, etc. También me da más precisión para la mayoría de las páginas que mi rueda de desplazamiento.

  2. La barra de desplazamiento me da información. Me permite determinar rápidamente cuánto tiempo tomará leer el contenido de la página (suponiendo una barra de desplazamiento decente cuyo asa: relación de desagüe es igual a la pantalla: relación de página) y me indica qué tan lejos he llegado a la página. . También me da un índice para determinar dónde estoy en la página si quiero desplazarme rápidamente hacia arriba y hacia abajo.

  3. La barra de desplazamiento ocupa una cantidad insignificante de espacio. En este momento, mi pantalla está en 1920 x 1080 = 2.1 Mpx. La ventana de Firefox con esta página está en 1125 x 905 = 1.0 Mpx. La barra de desplazamiento es de 16 x 816, ocupando un total de 13 Kpx, o 1.3% de mi pantalla. Mi monitor está bastante cerca de mí porque lo uso para jugar, por lo que de todos modos tiendo a mantener mi ventana más estrecha que el monitor, por lo que la barra de desplazamiento no ocupa espacio en absoluto.

  4. Hay ocasiones en que ni siquiera sé si el contenido es desplazable, aunque tiendo a intentar desplazarme con la rueda sin siquiera revisar la barra, por lo que dudo que este sea un gran problema para las páginas web. Para las aplicaciones de escritorio que normalmente no se desplazan, sería un problema mayor.

  5. Si desea una barra de desplazamiento ocultable, debe aparecer cada vez que me desplazo manualmente (con la rueda del mouse, las teclas del teclado, el panel táctil, etc.), y cada vez que muevo el mouse hacia el borde derecho de la pantalla.

Los dispositivos móviles son más complicados, ya que la barra de desplazamiento ocupa una gran cantidad de espacio, especialmente si es lo suficientemente grande como para usar.

  • R. Por lo general, resuelvo el problema cambiando a la vista de escritorio (aún no he visto un sitio web cuya versión móvil sea tan buena, y mucho menos mejor que la versión de escritorio, por lo que de todos modos prefiero la vista de escritorio). Luego me alejo, me desplazo hacia abajo, luego vuelvo a acercar. Es más rápido y más preciso que intentar desplazarse, desplazarse, desplazarse mientras se acerca y no requiere una barra de desplazamiento agarrable. (También me permite acercarme para obtener mejores vistas de imágenes, diagramas, etc., que la mayoría de los sitios móviles se niegan a permitir inexplicablemente).

  • B. Firefox on Android tiene una barra de desplazamiento no accesible para indicarme en qué parte de la página estoy (para las versiones de escritorio y móviles de un sitio), al igual que la opción predeterminada "Internet "navegador. Los uso como lo haría en un navegador de escritorio con un mouse para indexar y determinar la longitud de la página.

  • C.Tengo la tendencia de ver solo páginas web grandes en un monitor adecuado, por lo que es mucho menos probable que esté en un dispositivo móvil tratando de desplazarme por un archivo .pdf de 900 páginas o algo así. Si su aplicación web nunca tiene más de dos o tres pantallas, el desplazamiento es un problema mucho menor.

  • D. También vale la pena señalar que el desplazamiento con los dedos en la pantalla táctil suele ser más rápido y más preciso que usar la rueda del mouse, por lo que una página debe ser mucho más grande antes de que sea difícil navegar rápidamente.

Conclusión

Para configuraciones de mouse (o trackpad o trackball), creo que la barra de desplazamiento siempre debe ser visible y capturable. Como mínimo, debería aparecer al desplazarse o al mover el mouse cerca de la barra de desplazamiento.

Para configuraciones de pantalla táctil móvil, creo que la barra de desplazamiento siempre debe estar visible al desplazarse, pero no necesita ser agarrable, y probablemente debería ocultarse cuando no se desplaza para reducir el espacio desperdiciado.

No me he metido con la tableta/iPad o pantallas táctiles más grandes, por lo que no estoy seguro de cómo me siento al respecto.

Por supuesto, tener la opción de cambiar los estilos visuales (ya sea a través de cookies temporales o a través de la configuración de usuario almacenada, dependiendo de si su usuario es un invitado o tiene una cuenta) es la mejor opción, pero debe usar algo funcional por defecto.

61
MichaelS

Este punto de vista proviene principalmente del entorno Mac, donde las barras de desplazamiento generalmente se muestran brevemente cuando aparece el contenido por primera vez, luego se desvanecen. Cuando se produce el desplazamiento (activado por el usuario o no), vuelve a aparecer la barra de desplazamiento. Solo el asa es visible (como una barra negra redondeada semitransparente); sin flechas ni canaletas. Si el cursor está sobre la barra de desplazamiento cuando aparece, se ensancha y permite arrastrar con el cursor. En ningún momento el contenido cambia de tamaño; se comporta como si la barra de desplazamiento no estuviera presente, y la barra de desplazamiento se representa en la parte superior.

Esto se aplica cuando se utilizan mecanismos de entrada tipo trackpad o tipo trackpad (es decir, una computadora portátil). Las barras de desplazamiento normales todavía se muestran de forma predeterminada cuando se usa un mouse.

Por supuesto, esto también se extiende al móvil; iOS usa un comportamiento casi idéntico (menos la interacción del cursor). De hecho, creo que comenzó en iOS (donde las barras de desplazamiento serían demasiado pequeñas para tocar de manera confiable) y migró a macOS.

En general, esto tiene ventajas y desventajas:

  • No tener que hacer espacio para las barras de desplazamiento simplifica el diseño de la página (menos elementos que distraen) y permite más espacio para el contenido, especialmente cuando se pueden desplazar varios lugares.
  • Los usuarios de Mac están acostumbrados a este comportamiento y lo esperan.
  • No hay salto en el tamaño del contenido cuando un área se vuelve desplazable de repente, lo que también corrige una ambigüedad común en la que se puede necesitar una barra de desplazamiento siempre que sea visible, y no se necesita si está oculta (por ejemplo, debido al ajuste del texto).

  • En el lado negativo, como ya se mencionó, debe encontrar otra forma de indicar que el contenido es desplazable. No es un problema para la parte principal de una página web porque esto se espera de todos modos, pero puede ser un problema para el contenido interno dependiendo de las expectativas del usuario. El flash inicial ayuda, pero no siempre es suficiente.

  • La interacción del usuario para saltar a otra ubicación en el documento es torpe; el usuario debe mover el cursor hacia donde aparecerá la barra de desplazamiento, desplazarse ligeramente con la rueda del mouse o "desplazamiento con 2 dedos", tomar la barra de desplazamiento cuando aparezca y arrastrarla a la ubicación deseada. El desplazamiento de impulso ayuda a evitar esto en algunos casos.
  • Debido a que la barra de desplazamiento aparece en un fondo transparente, si el fondo es oscuro puede ser difícil de ver. macOS proporciona una barra de desplazamiento alternativa blanca que se puede usar en este caso (creo que los navegadores cambian automáticamente a esto si el fondo es lo suficientemente oscuro, pero no es 100% infalible). También le da a la barra un brillo sutil (o sombra) como un seguro a prueba de fallas bastante bueno.

Si es posible, por supuesto, quédese con componentes nativos del navegador para este tipo de cosas. Se asegurarán de que cada usuario obtenga una experiencia natural para su plataforma (ciertamente he visto que muchos sitios web intentan replicar el desplazamiento de impulso y el desplazamiento elástico con resultados finales atroces). Los usuarios de Mac no te agradecerán por forzar las barras de desplazamiento visibles donde no las esperarían, y los usuarios de Windows no te agradecerán por ocultar las barras de desplazamiento donde las esperarían.

26
Dave

La eliminación de las barras de desplazamiento en mi opinión es otro ejemplo de la ideología idiota y superficial de poner el estilo sobre la funcionalidad. Esto es volver al frente de cómo debería ser y es indicativo de la tontería de la sociedad para mí. Las barras de desplazamiento tienen un propósito funcional importante que otros métodos alternativos no siempre pueden replicar. Creo que el cambio se basa en parte en la noción de que las personas usan pantallas táctiles, por lo que no es necesario, pero muchas personas aún no lo hacen. Muchos métodos alternativos requieren concentración extra y delicadeza para manipular, lo cual es una pérdida de energía que preferiría gastar en hacer el trabajo, en lugar de luchar con una mala interfaz de usuario. Los métodos de desplazamiento tradicionales generalmente se combinan con el desplazamiento del teclado presionando la tecla de flecha hacia abajo, lo que me parece mucho más fácil que otros métodos que requieren más concentración, pero al eliminar las barras de desplazamiento, el desplazamiento de la flecha del teclado también a veces desaparece, lo que debería ser un GRAN no -¡No! Un ejemplo es que la gran red social F ha causado irritación constantemente con su estilo de desplazamiento "dinámico" mientras se desplaza hacia arriba a través del historial de mensajes, y donde no sabe dónde está en la conversación mientras se desplaza hacia arriba, pero luego se desplaza hacia arriba cierto punto y de repente se carga una carga extra de historial de conversación y terminas saltando muy por delante de donde querías estar.

Creo que también es en parte ignorancia y en parte un deseo de ahorrar recursos y ancho de banda en los servidores para ahorrar dinero a las empresas a expensas de la experiencia del usuario. También se trata de simplificar las cosas para que los idiotas hagan las cosas "más fáciles" de usar para comandos muy básicos, a expensas de hacer que las cosas sean más problemáticas para cualquier persona que no esté tonta y que quiera hacer algo muy poco común. Espero que blockchain anuncie el final de esta era de sacrificar la experiencia del usuario para ahorrar dinero, y que podamos tener sistemas que funcionen rápidamente y sin problemas tanto para usuarios básicos como avanzados.

Por ejemplo, ¿no sería genial si un software como skype y F messenger le permitiera desplazarse instantáneamente hasta el comienzo de su historial de mensajes en lugar de esperar para siempre que se cargue sección por sección? Siempre sospeché que eso es ahorrar recursos para cargar todo el lote de una vez. Sin embargo, si alguien con un poco de inteligencia y pensamiento matizado estuviera diseñando esto (espero que sea más común en los círculos de blockchain que en las corporaciones), todos podríamos tener nuestro pastel y comerlo. Podemos ahorrar recursos (que aún no es algo trivial incluso en la cadena de bloques) y obtener la información que queremos al instante sin tener que soportar este horrible sistema de carga de página por página.

Simplemente diseñe el marco de todo el historial de la línea de tiempo en una barra de desplazamiento junto con las fechas que aparecen a medida que se desplaza. Tan pronto como suelta el botón del mouse o el desplazamiento de strop, se puede cargar esa sección en particular. Si desea volver al principio, desplácese hacia la parte superior y solo debe cargar la primera página. Sin embargo, si necesita que todo se cargue de inmediato, para buscar una palabra clave, por ejemplo, simplemente proporcione un botón simple que se pueda presionar si es necesario para obtener todo el historial de mensajes o el historial de lo que sea que esté buscando.

Si alguien señala específicamente que es necesario que se cargue todo eso, entonces la cadena de bloques debe acomodar los recursos. Esta es la diferencia entre él y las corporaciones en el viejo modelo, quien sospecho que sería reacio a permitir que incluso aquellos que específicamente necesitan cargar todo, puedan proteger sus recursos por su asqueroso motivo de ganancias y joder al usuario. Es por eso que necesitamos blockchain, y preferiblemente la versión abierta.

11
Lex

Como un punto de vista mixto ...

Las barras de desplazamiento horizontal suelen ser algo malo. Puede significar que se ha optimizado para el ancho de pantalla de un monitor de PC, que no se traduce bien en dispositivos móviles. Al desplazarse hacia abajo, leer la página completa necesita muchos desplazamientos de izquierda a derecha en cada pantalla de contenido. Y a la inversa, esos sitios habrán desperdiciado espacio en pantallas más grandes. (Lectores mayores, ¿recuerdan los sitios web que dicen "Mejor visto a 1024x768"? Sí, esos.) No deberíamos tener que aguantar eso en 2019, esto no es la década de 1990 y todavía no estamos usando Netscape Navigator. Solo no vayas allí.

Las barras de desplazamiento vertical, por otro lado, están bien. Estamos intuitivamente acostumbrados a desplazarnos hacia abajo, por ejemplo, piense en cómo leería un periódico en papel. Toda la página es fácilmente visible con solo desplazamiento arriba/abajo.

Sin embargo, hay una escuela de pensamiento de que más de 2 o 3 pantallas llenas de contenido es demasiado. Después de eso se hace difícil encontrar cosas. Entonces, si bien las barras de desplazamiento funcionan, ¡no dejes que te lleve a páginas de longitud ilimitada!

8
Graham

Sí, las barras de desplazamiento deben estar visibles, aunque no sea por otra razón que no sea la accesibilidad.

Hay muchos casos en los que ocultar una barra de desplazamiento hace que su sitio/programa entre frustrante e inutilizable:

  • Uso de hardware/software de asistencia para acceder a su página
  • Usando un mouse que no tiene una rueda de desplazamiento
  • Usar un sistema de escritorio remoto que no pase por eventos de desplazamiento
  • Usar un panel táctil que se desplaza con gestos con varios dedos (la mayoría de los usuarios promedio no saben que existen)
  • Usando una pantalla táctil, la página tiene más de un par de pantallas de alto, y necesito desplazarme a algún lugar en el otro extremo de la página
  • Usando una pantalla táctil, desplazándose por una página que está llena de enlaces/botones (donde el movimiento de tocar y mover es razonablemente probable que active algo accidentalmente)

Las barras de desplazamiento visibles son una manera fácil de evitar todos estos problemas. Si el argumento principal de su colega es que otros sitios lo están haciendo, entonces ni siquiera lo escuche. La presión de grupo no es un argumento válido a menos que esté acompañado de una razón significativa y significativa por qué hacerlo es una buena idea. Ese tipo de pensamiento es cómo el <blink> la etiqueta se hizo popular.

También en aras de la accesibilidad, no implemente sus propias barras de desplazamiento. Utilice los que proporciona el sistema. La tecnología de asistencia no siempre puede identificar barras de desplazamiento caseras y operarlas como tales.

7
bta

Una barra de desplazamiento es extremadamente útil.

  1. le muestra al usuario que la página es desplazable
  2. muestra al usuario dónde se encuentra actualmente en la página desplazable

No tienes idea de cuántas veces me enojé y perdí porque un diseñador horrible pensó que eliminar la barra de desplazamiento es una buena idea.

3
Solid_Metal

Para agregar a la respuesta de MichaelS,

En tabletas y iPads, es preferible una barra de desplazamiento no grabable, que se oculta cuando no se desplaza. Como él dijo, el desplazamiento en dispositivos táctiles es mucho más preciso, y las barras de desplazamiento visibles y agarrables son torpes y molestas. Sin embargo, dependiendo de la longitud de la página, un botón de volver al principio sería bienvenido.

Además, mientras escribía esto en StackExchange usando un iPad Pro de 12.9 pulgadas, noté que agregar una cantidad decente (~ 1 cm) de relleno, en un tono ligeramente diferente, es útil ya que permite desplazarse sin abrir enlaces accidentalmente.

2
Bob Kerman

Una pregunta interesante, mi 2c proviene de un desarrollador pero líder de UX y también ha diseñado interfaces con varias áreas de desplazamiento internas.

Algunos puntos:

  1. Deben existir barras de desplazamiento visibles si el contenido es lo suficientemente grande como para requerir un desplazamiento, ya que la presencia de una barra de desplazamiento significa y permite que el contenido pueda desplazarse.
    • El desplazamiento infinito es mi idea personal del infierno, especialmente si hace clic en la barra de seguimiento y la arrastra (tangente)
  2. Si el contenido no se puede desplazar, las barras de desplazamiento son un anticonceptivo que sugiere cosas que no pueden suceder.
    • Un caso de Edge es cosas que no se pueden desplazar ahora pero podrían hacerlo si, por ejemplo, el contenido aumenta de tamaño, esto es común en los editores o en cualquier sistema con salida dinámica. Específicamente porque si agrega/elimina la funcionalidad de desplazamiento, puede alterar los diseños, obtendrá algo horizontal jank a medida que el contenido se extiende y luego aparece la barra de desplazamiento. (si utiliza overflow: auto por ejemplo). En este caso, puede ser más fácil poner una barra de desplazamiento deshabilitada para indicar que esta es un área desplazable, pero el contenido aún no es lo suficientemente grande como para permitir este comportamiento.
  3. Las barras de desplazamiento horizontales son normalmente una mala idea si se combinan con barras de desplazamiento verticales a medida que introduce una selección de modo implícito. Como en, el valor predeterminado de un desplazamiento del mouse es normalmente desplazamiento vertical, pero con una pulsación de tecla de adición implícita (o interacción del panel táctil) se puede lograr el desplazamiento horizontal. La complejidad de esto rara vez se logra.
  4. Dentro de algunas interfaces de aplicación (por ejemplo, mapas Slippy), eliminar todas las barras de desplazamiento puede ser una buena idea, ya que el contenido se mueve debajo de la ventana del navegador en ese paradigma, no al revés. La mayoría de los usuarios comprenden bien los controles.
  5. Tratar de diseñar barras de desplazamiento es el 99% del tiempo, no es una buena idea a menos que desee muchas versiones personalizadas específicas, acepto que no se verán perfectas en todos los entornos y use los valores predeterminados del navegador.
1
dougajmcdonald

¿Está hablando el diseñador de reemplazar las barras de desplazamiento con un botón de desplazamiento hacia arriba/abajo flotante? Creo que es razonable porque ese es un enfoque móvil primero y he visto que se usa con éxito en ciertos contextos, pero esos botones no pueden reemplazar las barras de desplazamiento en una cuadrícula.

0
Ling