¿Tienes El Miedo cuando descubres que tu próximo proyecto es diseñar una tabla de datos compleja y responsiva? 😨
No estás solo, he visto a grandes diseñadores temblar en sus botas al pensar en resolver este problema. Pero no hay que temer. Hace poco me enfrenté a este reto de diseño, y ahora estoy aquí para compartir algunos consejos que me ayudaron a llegar a un diseño que nuestros usuarios aman.
Hay un montón de opciones diferentes de cómo diseñar tablas, por no hablar de cómo hacerlas responsive. Las columnas y filas pueden reposicionarse, cambiar de tamaño, contraerse, minimizarse o incluso desaparecer cuando la ventana del navegador se hace más estrecha.
Como ocurre con todas las soluciones de diseño, el mejor diseño depende de cómo vayan a utilizar los datos tus lectores. Al principio de este proyecto, realizamos una investigación sobre los usuarios para orientarlos e identificamos que para nuestro proyecto:
- Esta información tabular se utilizaría por igual en una combinación de dispositivos de escritorio, tabletas y móviles.
- Estas tablas podrían contener muchas columnas de texto libre, así como números.
- Ciertos fragmentos importantes de información deben permanecer visibles en todo momento.
Con estas ideas de nuestros usuarios, estos son los principales aspectos que abordé al desarrollar un sistema de diseño para tablas de datos con mucho texto.
En primer lugar, determinar qué tipo de tabla es. ¿Es una tabla de comparación, en la que el lector compara los datos entre varias columnas, o es una tabla de contenido, en la que los conjuntos de datos son independientes entre sí?
Mi tabla se parece más a una tabla de contenido que a una tabla de comparación. Identificar esto desde el principio me ayudó a entender qué información debe permanecer cerca en el tamaño de pantalla estrecha.
Primero el móvil
La primera versión que diseñé fue la de pantalla estrecha. Intencionadamente, miré esto antes que la versión de pantalla ancha, ya que la visualización de las tablas en el móvil es importante para nuestros usuarios. Por lo tanto, necesitaba encontrar una manera de encajar información compleja y no lineal en un formato vertical.
Sabía que sería mucho más fácil escalar el diseño cuando hay mucho espacio horizontal, que diseñar una hermosa tabla para el escritorio y luchar para que siga siendo legible en el móvil. Esto también significaba que tenía en cuenta los tamaños táctiles desde el principio y que no dependía de acciones como el hover para revelar la información.
Decidí tratar el contenido más como una lista en vistas estrechas para que la información importante siguiera siendo muy visible y escaneable.
Estilos coherentes
Las filas tienen que reposicionarse cuando cambia el tamaño de la pantalla, así que utilicé estilos para ayudar a mantener la conexión entre ellas. Por ejemplo, si los encabezados de las columnas están en negrita con un fondo gris, utilice ese mismo estilo también en la vista estrecha. Eso ayudará a los lectores a reajustar la nueva distribución de las celdas.
La tipografía es tu amiga
Es fácil olvidarse de tus principios tipográficos cuando tienes muchas limitaciones, pero tomar una decisión consciente para optimizar la legibilidad será de gran ayuda para tus lectores, especialmente en un proyecto como el mío en el que las tablas tienen mucho texto.
La tipografía existe para honrar el contenido. ~ Robert Bringhurst
Escaneado
Facilite el escaneo rápido manteniendo el flujo de lectura simple y claro. Elegí que el texto de cada columna colgara del mismo borde para que el lector pudiera escanear el texto de forma lineal.
Longitud de línea
Intenta no comprometer la longitud de línea del texto aplastando muchas columnas en un espacio estrecho, o ralentizará la velocidad de lectura. Establezco una anchura mínima para las columnas de texto continuo.
Etiquetas
Piensa en dónde colocar las etiquetas para que no ocupen una cantidad excesiva de espacio, pero que aún proporcionen algo de contexto a la información.
Puse las etiquetas encima de cada contenido de las celdas de mi lista, donde ocupaban menos espacio, en lugar de a un lado. Además, así la información era más fácil de escanear. He dado un estilo diferente a las etiquetas para que sea fácil distinguir la diferencia entre una etiqueta fija y el contenido variable.