Cuando nos encontramos con la necesidad de ajustar a tamaños pequeños o reducidos de pantalla gran cantidad de datos es necesario poner especial atención en el diseño de las interfaces.
En esta tarea tan compleja es importante tener en cuenta siempre la legibilidad. Las tablas en Responsive o móvil son un quebradero de cabeza para muchos diseñadores UX y UI.
Aspectos generales para diseñar tablas en pantallas pequeñas o móvil
Los investigadores de visualización de información llevan luchando durante mucho tiempo con el problema de mostrar datos contenidos en muchas columnas o filas cuando no caben en la pantalla en la que las visualiza el usuario.
Cuando se diseñan tablas para pantallas pequeñas o móviles es necesario diseñar con cuidado para no afectar a la legibilidad y no generar problemas de entendimiento a los usuarios.
El contenido que se muestre en la tabla debe de ser significativo, por lo que, si decidimos eliminar información hay que tener especial cuidado en no eliminar información relevante.
El proceso correcto para el diseño de la tabla es crear una tabla utilizable para una pantalla grande antes de traducirla a una tabla pequeña. El hecho de que exista la necesidad de crear una tabla para una pantalla más pequeña puede ser un buen motivo para descartar información poco relevante o innecesaria para el usuario.
1. El ancho de las columnas de la tabla
La cantidad de columnas que caben en una pantalla de móvil depende directamente del ancho de dichas columnas. Hay que mantener la legibilidad en todo momento intentando que el ancho de cada columna sea el menor posible.
2. Mejor si no hay que rotar el móvil para ver la tabla
Uno de los recursos que suelen usarse es “obligar” al usuario a girar el móvil para poder ver la tabla en posición horizontal. Cierto es, que de esta manera, permitimos visualizar un número mayor de columnas pero se reduce drásticamente la cantidad de filas que se pueden visualizar.
3. Encabezados pegajosos para las columnas
En cualquier tabla que ocupe más del alto de la pantalla en posición vertical, los encabezados que se quedan en posición fija en la parte superior de la pantalla del móvil ayudan bastante a los usuarios a saber lo que están mirando.
Sin encabezados fijos, es fácil perder el contexto de lo que muestra la tabla.
4. Desplazamiento horizontal de la tabla
Este tipo de tablas para pantallas de móvil, también conocidas como “movibles”, no suele ser una solución muy receptiva para algunos Stakeholders pero es muy fácil de usar y el tiempo de desarrollo es corto.
Consiste en usar gestos de deslizamiento horizontal para desplazarse por toda la tabla.
Es recomendable para tablas con más de 2 columnas y que no superen las 8. También es recomendable que la primera columna (leyenda) se mantenga en una posición fija cuando el usuario ejecuta el deslizamiento para permitir que conozca a que parte pertenece cada dato visualizado.
Muy importante evidenciar en el diseño que hay más datos más allá del pliegue horizontal. Al igual que en los carruseles, las flechas, los elementos de corte , los marcadores con puntos o incluso una barra de scroll horizontal, ayudan a que los usuarios comprendan que existen elementos cortados.
5. Permitir que los usuarios seleccionen los datos
Cuando todas las columnas de la tabla no caben en la pantalla de un móvil una manera de solucionar el problema es utilizar un sistema de filtrado para que los usuarios decidan qué información es más relevante para ellos y seleccionar visualizarla.
Este tipo de tablas son recomendables cuando necesitan ver los datos pero no compararlos.
En pantallas pequeñas los usuarios sólo pueden ver una pequeña parte de la tabla en comparación con pantallas más grandes. El tipo de solución elegida depende del tipo de datos que se van a mostrar.
Créditos