¿Cuál es una mejor experiencia para el usuario: una tabla desplazable o una tabla de tamaño completo que permite que la ventana del navegador realice el desplazamiento?
¿Cuál es una mejor experiencia de usuario?
- ¿Una tabla desplazable mediante la configuración de desbordamiento de CSS en un DIV?
- ¿Una tabla de tamaño completo que permite que la ventana del navegador se desplace?
Una tabla de tamaño completo que permite que la barra de desplazamiento del navegador (2) realice el desplazamiento de los datos es una mejor experiencia para el usuario, ya que varias barras de desplazamiento en la misma página tenderían a confundir a los usuarios y ser un poco irritante.
Por supuesto, esto solo se aplica si los datos de los que estamos hablando de desplazamiento aquí son el foco principal de la página, en cuyo caso, sería aceptable tener una barra de desplazamiento dedicada a esa parte de la pantalla.
- Varias barras de desplazamiento verticales en la misma ventana del navegador pueden ser confusas, especialmente cuando se usa una rueda de desplazamiento.
Siempre que tenga sentido en el contexto de la interfaz, se puede utilizar cualquier método. Sin embargo, trato de no usar DIV de desplazamiento dentro de DIV como regla general, ya que se vuelven desordenados. Cuando el desplazamiento del usuario toca la parte inferior de un DIV, el navegador a menudo comienza a desplazarse al siguiente DIV o la página, lo que puede ser discordante.
En mi experiencia, una interfaz menos compleja tendrá una curva de aceptación/aprendizaje más corta, todos los demás factores iguales.
Diría que si tiene una tabla de datos muy grande, la mejor manera de hacerlo es usar CSS para configurar el desbordamiento en su <tbody> etiqueta en la tabla. De esa manera, su encabezado (almacenado en <thead>) permanecerá visible sin importar cuánto se desplace el usuario. Esto le dará al usuario una experiencia similar a la que se puede proporcionar en una aplicación estándar al visualizar datos tabulares.
Creo que esta es la mejor solución porque con mucho desplazamiento, el usuario tendrá que recordar cuáles son esos encabezados de columna, y si puede hacerlo para que siempre puedan ver los encabezados, definitivamente le está dando una mejor experiencia (Recuerda las palabras inmortales de Steve Krug: "No me hagas pensar").
Ocurrió con un ejemplo perfecto de muy mala implementación de una ventana desplazable dentro de la ventana del navegador justo después de leer esta publicación. Creo que está claro lo incómodo que es usar esto.
Primero intenté usar la barra de desplazamiento externa que desplazaba a todos los perros, moviendo el mouse dentro de la ventana interna desplaza a los perros, pero ahora solo veo la mitad de la ventana y tengo que volver a la primera barra de desplazamiento para moverla hacia atrás. El contenido primario no debe relegarse a un marco interno pequeño como este.
Vaya con la opción 2. El desplazamiento dentro del desplazamiento siempre confunde a los usuarios y es molesto cuando llega al final y la página se despliega.
Mi pregunta es, ¿tiene alguna forma de ordenar los datos para que el conjunto de datos que se muestra sea más pequeño para empezar? ¿O escondiéndote con una mezcla de JavaScript y CSS o usando algún tipo de script? Mostrar muchas filas de datos nunca es tan fácil de usar. A menos que el usuario comprenda las maravillas de ctrl + f, se puede perder mucho tiempo desplazándose.
También puede pensar en agregar encabezados que floten en la parte superior de la lista a medida que se desplazan. De esa manera, los usuarios no tendrían que desplazarse hacia arriba para descubrir cuáles son los nombres de las columnas.
En general, se deben evitar las barras de desplazamiento anidadas. El único momento en que realmente deberían usarse es si tiene controles debajo de la tabla que podrían perderse si la tabla es muy larga.
Depende del uso que preveas.
Hay muchas buenas razones para evitar las barras de desplazamiento anidadas, pero también hay casos en los que se debe desplazar la tabla. Aquí están algunas:
- Aparte de la mesa, todo lo demás cabe en la pantalla. Si este es el caso, entonces no tiene barras de desplazamiento anidadas (es decir, el navegador no las tiene), y puede haber buenas razones para hacer que solo la tabla se pueda desplazar.
- El uso principal de la tabla es hacer referencia a una pequeña parte de ella contra otra cosa en la página. Por ejemplo, debe completar tres datos basados en algo en la tabla que el usuario debe buscar (el 'algo' es demasiado intuitivo para automatizar). Si hace que toda la página se pueda desplazar, el usuario debe buscar en la tabla lo que desea, y luego desplazarse hacia la parte superior para completar la información, luego buscar nuevamente, etc. de la interfaz de usuario permanece en la pantalla.
el desplazamiento vertical permite que el navegador maneje el desplazamiento horizontal (debe eliminarlo por completo) use la configuración de desbordamiento de CSS para manejar.
Los estudios han demostrado que al usuario no le importa desplazarse hacia abajo, pero odia desplazarse a través.