- A medida que las barras de desplazamiento se vuelven más pequeñas o se ocultan, esto se convierte en un problema real de usabilidad no solo para quienes tienen dificultades para usar la rueda del mouse o los gestos táctiles, sino también para quienes quieren moverse rápidamente dentro de un documento
- A los usuarios con dificultades de control motor fino, o que usan dispositivos de puntero con precisión limitada como un eye tracker, les resulta difícil acertar a una barra de desplazamiento de 8 píxeles de ancho, y los usuarios de control por voz también quieren hacer clic directamente en la posición deseada en lugar de desplazarse repetidamente
- Aunque en GTK, Qt, Firefox, Chrome y Electron es posible ajustar el ancho o la forma de mostrar las barras de desplazamiento, esto depende de métodos poco accesibles para el usuario común como editar CSS,
gsettings,about:config, recompilar temas o configuraciones por aplicación - Antes existían botones de desplazamiento que movían el contenido poco a poco mientras se mantenían presionados, pero desaparecieron silenciosamente; las teclas de flecha reemplazan parte de esa función, aunque su comportamiento cambia según el estado del foco
- Las interfaces como los minimapas de documentos, que permiten moverse viendo el contenido y con una gran área de clic, pueden convertirse en una forma alternativa de navegación útil también para usuarios de eye tracker y lápiz óptico en tabletas
Barras de desplazamiento que se encogen y se ocultan
- La barra de desplazamiento es una UI básica que permite hacer clic y arrastrar para cambiar la posición actual dentro de un área desplazable
- Últimamente las barras de desplazamiento se han vuelto tan pequeñas que incluso es difícil mostrarlas en capturas de pantalla, y la tendencia a hacerlas todavía más pequeñas o a ocultarlas perjudica la usabilidad
- El enfoque de “simplemente usa la rueda de desplazamiento” da por hecho que todos los usuarios pueden usar una rueda del mouse o el gesto de deslizamiento en pantalla táctil
- Incluso los usuarios que sí usan bien la rueda de desplazamiento pueden querer a veces saltar rápidamente a una posición específica
Impacto en la accesibilidad
- A los usuarios con dificultades de control motor fino les cuesta sujetar con precisión barras de desplazamiento delgadas
- Los dispositivos de puntero como los eye trackers son impresionantes, pero no bastan para acertar de forma estable a una barra de desplazamiento de 8 píxeles de ancho
- Los usuarios que controlan la computadora con voz o sonidos, incluso usando herramientas como Talon Voice, pueden preferir ver la posición deseada en la barra de desplazamiento y hacer clic allí, en vez de repetir
scroll downo depender del desplazamiento automático - Ya en 2015 se discutía el problema del ancho de las barras de desplazamiento en GTK3, y las barras delgadas suponen una carga para usuarios no técnicos y para personas con problemas de manipulación manual o visión
Cómo las barras de desplazamiento se han vuelto menos fáciles de usar
- En algunos casos, el ancho de la barra de desplazamiento sigue siendo el mismo en píxeles, pero al aumentar la resolución de los monitores el objetivo real de interacción se vuelve más pequeño
- En otros casos, la propia barra de desplazamiento sí se hace realmente más pequeña
- También se menciona el caso de las barras extremadamente delgadas que Ubuntu intentó en el pasado
- Mientras las barras de desplazamiento se reducían, también desaparecieron los botones de desplazamiento que movían el contenido poco a poco al mantenerlos presionados
- Las teclas de flecha reemplazan parte de esa función, pero dependen de qué contenido tenga actualmente el foco
- Los botones podían usarse sin importar el estado del foco
- En general, las barras de desplazamiento se han vuelto menos útiles, y las opciones de usuario para corregirlo no existen o están enterradas en capas técnicas difíciles de encontrar para la gente común
La barrera de configuración en GTK
- En GTK2 se podía cambiar directamente el ancho de la barra de desplazamiento en
gtkrc, e incluso había programas con GUI para hacerlo - En GTK3 hay que ajustarlo con CSS, y si no se entiende el tema, faltan formas de configuración amigables para el usuario
- En un hilo de Reddit se presenta un script que añade
slider { min-width: ...; min-height: ...; }agtk.cssde GTK3 y GTK4, y además maneja overrides de Flatpak y la configuración de overlay scrolling - Las apps de Flatpak requieren overrides por separado, así que puede que el tema del sistema no se aplique tal cual
- GTK también usa por defecto un modo en el que oculta la barra de desplazamiento y la muestra cuando se pasa el mouse por esa zona
- En GTK3 se puede hacer que siempre se muestre con el siguiente comando
gsettings set org.gnome.desktop.interface overlay-scrolling false - También puede encontrarse en Dconf Editor, pero hay que saber dónde está
- En GTK3 se puede hacer que siempre se muestre con el siguiente comando
- Se cita un hilo de GNOME Bugzilla donde se indica que en GTK4 esta configuración no puede establecerse de forma global
- En la discusión se señala como problema que haya que pedir una opción de scrollbar no superpuesta para cada app por separado
La barrera de configuración en Qt
- El ancho de la barra de desplazamiento en Qt lo determina el plugin de estilo de widgets de Qt que se esté usando
/u/cfeck_kde, en una respuesta de r/kde, explica que según entiende solo el estilo Skulpture permite configurar el tamaño, mientras que otros estilos como Breeze requieren cambiar el código fuente en C++ y volver a compilar- Los plugins de estilo de Qt son código real, así que permiten un control potente, pero hay que encontrar uno que ofrezca la configuración deseada
- En Kvantum es difícil encontrar la configuración del ancho de la barra, aunque sí se puede desactivar la función de desaparición llamada “Transient scrollbars”
- Skulpture parece una opción que vale la pena probar, pero no se pudo confirmar cómo configurarlo por GUI sin KDE Plasma
- Si hay que depender de un solo motor de temas, queda la preocupación de si seguirá manteniéndose mientras el desarrollo de Qt continúe
La situación en Firefox, Chrome y Electron
- Firefox también usa barras de desplazamiento muy pequeñas, pero por ahora se pueden ajustar desde
about:config- Escribir
about:configen la barra de direcciones - Cambiar
widget.non-native-theme.scrollbar.size.overrideal número deseado - También se puede cambiar
widget.non-native-theme.scrollbar.stylepara modificar la apariencia - El valor
4lo configura con una forma rectangular gruesa - En la ventana de configuración general
about:preferencesse puede activar “Always show scrollbars”
- Escribir
- Como ejemplo, en Firefox puede configurarse el tamaño de la barra de desplazamiento en
50; aunque no necesariamente se quiera usar algo tan grande, la ventaja es que se puede hacer - El artículo de Athena Lilith Martin sobre configuración adicional de las barras de desplazamiento en Firefox trata ajustes extra, como desactivar los overrides de CSS de las páginas web
- Se considera poco realista esperar una configuración útil en Chrome
- En las apps de Electron también es difícil de configurar, y aunque quizá se podría arreglar inyectando CSS personalizado, no se presenta una solución clara
Una mejor forma de navegación: minimapas
- Los minimapas permiten ver el contenido, hacer clic en él y moverse a la posición del contenido que se haya clicado
- El objetivo de clic es muy grande, así que también resulta útil para usuarios de eye tracker y lápiz óptico en tabletas
- Los típicos “principios de diseño moderno” están funcionando en contra de las barras de desplazamiento y de las personas con distintas formas de usar una computadora
1 comentarios
Opiniones de Hacker News
No es solo un problema de las barras de desplazamiento. Por la eliminación de los bordes de las ventanas, ya no se distinguen de otras ventanas con colores de fondo similares, y agarrar los bordes para cambiar el tamaño de una ventana se volvió casi imposible.
La barra de título está llena de campos de búsqueda y botones innecesarios, así que casi no queda dónde agarrarla para mover la ventana, y moverse con Tab entre cuadros de texto tampoco funciona como se espera, o directamente no funciona.
Los tooltips estorban y ensucian la interfaz; muchas veces tapan lo que uno quiere ver, y el 95% contiene información duplicada o inútil.
En los últimos 10 años, el UI/UX de culto cargo abandonó décadas de principios de usabilidad acumulados y produjo resultados que solo se ven bien, pero no funcionan correctamente para mucha gente.
Apps como Postman, Teams, la mayoría de las apps actuales de Microsoft, Chrome e Insomnia deberían usarse como ejemplos de cómo no diseñar una UI de software de escritorio.
El pecado mayor es que nada de esto habría sido un problema si estos elementos pudieran configurarse a nivel del sistema de ventanas y los desarrolladores de apps no pudieran sobrescribirlos, pero Windows y Gnome/GTK, al contrario, van en la dirección de eliminar opciones existentes.
Cada vez que inicio “New Teams” me pregunta si quiero volver a Old Teams, y si abro un PDF con New Teams desde el Explorador de archivos, tampoco queda claro cómo cerrar el PDF sin perder la ubicación en el sistema de archivos.
Además, todo se siente horriblemente lento. Hay bastante gente trabajando en Microsoft/Apple/Google que no sabe hacer su trabajo, y debería darle vergüenza.
En el caso de Windows, definitivamente lo creo, y considero que todas las versiones posteriores empeoraron la experiencia de usuario.
Estoy fundamentalmente de acuerdo en que la usabilidad es más importante que la estética, pero no sé exactamente a quién se refiere “idiotas de UI/UX de culto cargo”.
Desde mi posición, con más de 20 años trabajando como líder de UX/UI, muchas veces los principales responsables de arruinar la usabilidad fueron líderes de negocio y marketers, más que diseñadores.
Claro que también hay diseñadores que creen que la forma importa más que la función e impulsan barras de desplazamiento pequeñas, pero si se les explica el problema, muchas veces ceden y crean diseños utilizables.
Los ejecutivos de nivel C, líderes de marketing y gerentes son más peligrosos porque, aunque no saben de UI, tienen opiniones fuertes y hacen pedidos como “me gusta la barra de desplazamiento de este sitio web” o “el diseño no se ve moderno”.
Pelear para defender la usabilidad y la accesibilidad es demasiado doloroso, y algunos cargos deberían actuar de forma más profesional y confiar en los expertos. También es cierto que los diseñadores deben priorizar la usabilidad.
Los menús de configuración son una pesadilla de listas apiladas sobre listas, la estructura de menús es totalmente aleatoria en cada app, y muchas veces incluso cosas que se podrían configurar localmente te mandan a un enlace de un sitio externo.
Es realmente difícil entender la intención del diseñador, y no se puede distinguir si no encontré una configuración o si directamente hicieron que no esté en ese menú.
Demasiadas veces tuve que buscar en Google para cambiar una configuración básica, y pasa lo mismo incluso en juegos, donde la experiencia es la mitad del valor del producto.
En el menú de configuración de CS2, los botones de texto de la parte superior parecen pestañas, pero en realidad solo desplazan a puntos arbitrarios de una larga lista de opciones, así que es difícil separar mentalmente qué significa cada botón.
El significado de los conceptos no está conectado entre sí ni estructurado, por lo que explorar la computación se volvió innecesariamente difícil.
Extraño la UI de Macromedia Flash; no la usé mucho, pero era realmente simple y fácil de usar.
Una de las grandes motivaciones para buscar privacidad y soluciones hechas por uno mismo es querer escapar de esta contaminación de la experiencia y el conocimiento que se ve hoy.
El antiguo cuadro de redimensionamiento estaba separado como un asa dedicada para cambiar el tamaño de la ventana, en la parte inferior de la barra de desplazamiento vertical, justo debajo del botón de flecha hacia abajo.
Como estaba justo cerca de los botones de desplazamiento para ver contenido que no aparecía en la pantalla inicial, funcionaba casi como un punto de partida y referencia natural para interactuar con el viewport.
Irónicamente, aunque desapareció de la mayoría de las UI de apps, los navegadores web todavía lo renderizan en elementos con barra de desplazamiento y resize activado, como
textarea. Eso sí, en la mayoría de las UI ya no existen los botones de desplazamiento relacionados.Hace poco tuve una revelación graciosa. No es que mi vista haya empeorado: la UI empeoró
Una scrollbar diminuta con un contraste ridículamente bajo no es accesible para nadie
Hace poco empecé a usar KDE con el tema Oxygen, y me da gusto usarlo porque no me cansa la vista
Estas scrollbars son cosas lamentables, sin margen para personalización, y si quieres aplicarles un tema a apps cerradas, buena suerte
Es demasiado evidente que a los diseñadores de UI no les importan las necesidades de los usuarios, y el mundo FOSS no es la excepción
Es triste que hayamos retrocedido desde una época en la que había software bonito, funcional, accesible y rápido, hasta esta basura de Electron cerrada y que ni siquiera permite temas
Si la UI tuviera suficiente contraste y legibilidad, ni siquiera habrían hecho falta cosas como el “modo oscuro”
Cuando uso software sin modo blanco, muchas veces es tan brillante que la pared cercana se ilumina como si hubiera prendido una linterna
Entonces bajo el brillo de la pantalla, pero los colores y el contraste se arruinan, y de todos modos no se ve nada
Extraño las interfaces grises de la era de Win 9x; no eran bonitas, pero sí se podían ver
No tiene nada de raro que la gente haya pedido modo oscuro después de que se impusiera esa UI plana enceguecedora
Los controles manuales digitales se volvieron demasiado digitales y engorrosos: es fácil salirse del menú y, al intentar volver, terminar ajustando algo totalmente distinto
Antes era fácil ajustar el contraste y brillo de una pantalla, el volumen de un amplificador, una TV analógica, un termostato, el radio del auto, etc.
Todavía no hay una tendencia a reintroducir muchos controles analógicos, pero al final nuestro mundo es analógico. La entrada es analógica, como el habla o los movimientos musculares, y la salida también lo es, como la luz y las vibraciones que llegan a los sentidos
No sé por qué los controles no son más analógicos; probablemente sea un tema de costos
Si hubiera una pantalla o laptop con controles analógicos, creo que la compraría de inmediato. Incluso si en realidad fuera un dial de 16 millones de pasos, bastaría con que respondiera al instante y se sintiera como un potenciómetro real
Estaría bueno tener una perilla que, según la situación, permita cambiar rápidamente la intensidad o recorrer opciones para hacerlas más fáciles de leer y escuchar
Hoy el 90% de lo que hacemos ocurre dentro del navegador, así que me gustaría que el navegador ofreciera una API de accesibilidad para poder controlarlo con una perilla giratoria, ya sea por Bluetooth o lo que sea. Sería como una versión potenciada de la rueda de scroll
A menudo me topo con sitios web que tienen popovers con scroll o frames internos extraños, y como la scrollbar de ese pequeño frame interno está oculta, no sé si hay más contenido y termino pensando que el sitio está completamente roto
Me da muchísima rabia, y culpo a iOS y macOS por fomentar y popularizar esta locura. También tiene responsabilidad indirecta quien impulsó la moda de la UI “plana”, que hizo más difícil adivinar qué es cada cosa
La UI es comunicación, y los diseñadores de UI básicamente decidieron que murmurar era cool
En cambio, en un sistema operativo de escritorio, incluso las pantallas más pequeñas que se usan son mucho más grandes, así que no hay muchas buenas razones para ocultar las scrollbars
Aunque los niños estén callados, dormidos o en la escuela, hoy muchas películas y series son difíciles de ver sin subtítulos
Una vez más, hay que elogiar a Firefox por darnos una herramienta para desactivar esto desde about:config. En el mejor de los casos es un adorno simpático; en el peor, es molesto y abusivo
La UI del navegador debería quedar casi por completo fuera de las áreas que un sitio web puede modificar, y eso incluye las scrollbars
Todo el artículo está muy bien escrito, y felicito al autor
Yo también volví a Firefox porque Edge no dejaba de empujarme la búsqueda de Bing y otras funciones, y hasta el aviso para restaurar pestañas se volvió demasiado fastidioso. Ojalá simplemente se callara y dejara de hacerlo
Ahora, más viejo, con la capacidad de mirar hacia atrás y la debilidad de una vista peor, puedo admitir que estaba equivocado. Es demasiado fácil abusar de eso
Por suerte se puede sobrescribir con uBlock Origin
https://addons.mozilla.org/en-US/firefox/addon/minimap-scrol...
Creo que quizá sea este
<https://www.makeuseof.com/change-firefox-scrollbar-style/>
El autor ve la mitad del problema, pero propone la mitad mala de la solución.
Las barras de desplazamiento no son solo controles: también son indicadores de posición. Muestran dónde está el viewport actual dentro de una vista más grande, como una lista larga.
Ocultar las barras de desplazamiento, como hacen algunas GUI como macOS, es muy descortés, como hacer que los botones no se distingan del texto o poner texto gris claro sobre un fondo gris claro.
La solución ya existe y está implementada casi universalmente: la rueda de desplazamiento del mouse y los gestos de desplazamiento del trackpad.
Es muy raro encontrar una vista en la que se pueda desplazar con la barra de desplazamiento, pero no con los gestos estándar del trackpad o la rueda del mouse. Mi mouse también puede desplazarse horizontalmente con la rueda, y los controles TrackPoint también.
Este tipo de desplazamiento ni siquiera requiere que el puntero esté sobre la barra de desplazamiento; basta con que esté sobre la vista/control/widget deseado.
Es muy fácil de hacer incluso con dispositivos de entrada imprecisos, manos temblorosas o mala visión.
Pero cuando existe una forma de desplazamiento tan natural y sencilla, se extraña aún más que la barra de desplazamiento cumpla su rol de indicador.
Los minimapas a veces son útiles, pero muchas veces no; personalmente, en la edición de texto me parecen voluminosos y poco útiles. Claro que estoy a favor de que existan como opción para quienes los prefieran.
Si se parte de que el documento responde correctamente, con la barra de desplazamiento es fácil moverse grandes distancias, especialmente en documentos grandes. En la web actual es difícil confiar en esa premisa.
En PDFs antiguos y enormes sin enlaces, que usan números de página por sección como “B-29”, incontables veces he hecho prácticamente una búsqueda binaria con la barra de desplazamiento para encontrar una página enterrada.
Por supuesto, la web moderna prácticamente destruyó la posibilidad de usar la barra de desplazamiento como indicador con el abuso de la carga diferida y el scroll infinito.
En Mac muchas veces salté al final del documento con Cmd-flecha abajo esperando que hubiera un final, y esperando que cargaran todos los embeds que rompen el formato.
Pero al final es como subirse a un tren sin final visible: no puedes saber cuánto avanzaste ni cuánto falta.
Por eso, como la barra de desplazamiento se volvió prácticamente inútil, uso una rueda de mouse pesada con rodamientos diseñada para el doom scrolling a alta velocidad.
El párrafo siguiente también trata las dificultades que las barras de desplazamiento pequeñas/ocultas generan para otros métodos de entrada, como los rastreadores de mirada.
La función principal de una barra de desplazamiento es mostrarle al usuario que el documento es más grande que la ventana, y la secundaria es mostrar qué parte del documento está visible. Hacer que el usuario se desplace no es su función principal.
Me sorprendió muchísimo cuando Apple empezó a ocultar por defecto las barras de desplazamiento en macOS. Parece que los diseñadores de UI de Apple no saben realmente qué hacen los controles básicos de la interfaz.
Los usuarios de Wacom/lápiz no tienen rueda de desplazamiento.
Muchos trackballs tampoco tienen rueda de desplazamiento, aunque algunos tienen un anillo de desplazamiento alrededor de la bola.
Desarrollé una lesión por esfuerzo repetitivo en el dedo con el que hacía scroll, así que quité la rueda de desplazamiento del mouse. También hubo una época en la que estiré demasiado el brazo con el que usaba el mouse y tuve que usar un trackball con la mano contraria durante varias semanas.
También hay que hablar de los bordes de las ventanas. Tengo varias ventanas de VS Code superpuestas, con fondo negro y bordes negros, y sin sombra.
No se ve en absoluto dónde está el marco/borde de una ventana sobre otra. Esto debería ser un problema del sistema operativo, pero apparently es un problema de la app.
Además, VS Code “retiró” el soporte para configurar bordes: https://github.com/microsoft/vscode/issues/160159
https://news.ycombinator.com/item?id=37865824
Mi teoría es que los diseñadores parecen apuntar a usuarios que ven una sola ventana en pantalla completa a la vez.
Su usuario modelo está sentado frente a una laptop de 13 pulgadas, en una habitación con iluminación ideal y sin reflejos; no mueve ni cambia el tamaño de las ventanas y no abre más de 3 pestañas/documentos al día.
Cada vez que leo artículos como este o blogs de UX, se vuelve demasiado evidente lo poco que nos importa la accesibilidad.
Un “buen” diseño accesible es bastante más aburrido y menos recargado que lo que se espera de las apps web modernas.
Leí el libro de Adam Silver sobre formularios y me di cuenta de que, desde el punto de vista de la accesibilidad, estamos haciendo todo completamente mal, pero la accesibilidad no es una prioridad.
En particular, los dark patterns son muy contrarios a la accesibilidad.
Por eso hacen falta leyes que obliguen a cumplir con la accesibilidad.
¿Sabes qué es un problema de accesibilidad para muchas personas de más de 40 años? Texto blanco sobre fondo oscuro.
Nunca me voy a cansar de insistir en que hagamos que las páginas web sean legibles para la gente de mi edad.
Abrir las herramientas de desarrollador y modificar el CSS del autor me permitió leerlo, pero hizo que los scripts de shell quedaran ilegibles.
Es tan incómodo que, si ni siquiera al seleccionar todo el texto se suaviza el contraste de fondo oscuro/texto blanco, directamente no leo esa página.
También se puede considerar desactivar el CSS por completo.
Algo realmente bueno de los últimos 5 años es que la mayoría de las interfaces de usuario importantes ahora ofrecen tanto modo oscuro como modo claro.
Mi solución es esta:
https://addons.mozilla.org/en-US/firefox/addon/font-contrast...
Como mínimo fuerza el texto a negro. Es bastante estable y también permite configurar fácilmente las excepciones que a veces hacen falta.
Estoy de acuerdo en que las barras de desplazamiento se están muriendo y se están volviendo inutilizables. Las barras de desplazamiento deberían ser anchas, claramente visibles y fáciles de acertar.
Deberían tener un tamaño proporcional para indicar qué parte del documento está visible, y la parte móvil debería tener rasgos que sugieran fricción, no deslizamiento.
Los botones de flecha deberían estar juntos, no en extremos opuestos, y deberían indicar con color los estados de hover y de mouse presionado.
Entre las barras de desplazamiento clásicas mostradas aquí, creo que la de Nextstep en https://scrollbars.matoseb.com/ es la que más se acerca a esas condiciones, y que Mac OS 8 es la más bonita en general.
Antes existía un campo de investigación llamado interacción humano-computadora, donde se aprendía la ley de Fitts y el hecho de que los bordes de la pantalla tienen, en la práctica, tamaño infinito y por eso son especialmente valiosos.
En OS X tengo abierto MS Teams como castigo: la ventana está pegada al borde derecho de la pantalla y la barra de desplazamiento está en el borde derecho.
Si empujo el mouse hacia la derecha y hago clic para agarrar la barra de desplazamiento, que se expande al pasar el mouse y llega hasta el píxel del borde, se arrastra toda la ventana.
No sé cómo llegamos a esto. Hubo una época en la que se investigaba activamente qué era una buena interfaz de usuario, esa investigación se reflejaba en la experiencia real de usuario, y los resultados se notaban.
Me pregunto por qué es tan raro, aparte de “porque siempre se hizo así”.
Dicen que “los diseñadores no hacen pruebas de usabilidad con usuarios no técnicos”, pero aunque las hicieran, no cambiaría mucho.
Trabajé casi 25 años como desarrollador web y colaboré con muchos diseñadores, y lo que les importa es un layout pixel perfect que coincida con su “visión”. La UX ni siquiera se les cruza por la cabeza.
En esos casos, no hay persuasión que funcione.