Tablas de datos en móvil

Mostrar tablas de datos de una manera simple y esquemática es una de las principales funcionalidades de una web corporativa para mostrar productos, comparar artículos diferentes y dar cabida a cualquier otro tipo de información susceptible de ser tabulada.

Capturas de la versión móvil de Officeworks con un comparador que fija el producto sobre el que se compara

Para ayudarnos con estos diseños, Norman Nielsen da unas pautas para diseñar de forma correcta tablas de datos para móvil en uno de sus artículos:

• Columnas lo suficientemente largas para ser legibles: lo más importante en una tabla es que la tabla sea legible sin necesidad de usar zoom. Para ello es necesario comprobar que se ven bien en un móvil de 4 pulgadas, que es el tamaño más pequeño actualmente en el mercado (el tamaño de un iPhone SE o de un Android de gama baja).
• Rotar el móvil como último recurso: las tablas en un móvil se ven mejor en formato apaisado por razones obvias, por lo que muchos diseñadores optan por forzar a sus usuarios a girar el móvil para ver las tablas. Sin embargo, esto no es algo deseable y que se debería usar siempre como último recurso.
• Fija las cabeceras de las columnas en su lugar: los usuarios si tienen que hacer scroll vertical en la tabla pueden perder el foco de qué están viendo, por lo que es de ayuda que se fije la sección arriba para que el usuario no se pierda cuando deje de verla.
• Indica claramente si es necesario el scroll horizontal: da pistas visuales al usuario de que necesita hacer scroll horizontal, ya sea indicándolo mediante un paginador, apareciéndole cortada una columna u otro indicativo como una etiqueta.
• Fija la primera columna en su lugar: en muchas tablas por ejemplo si muestran datos de varios tipos sobre el mismo elemento, como puede ser un valor bursátil, y la tabla muestra todos los valores de la cartera bursátil del usuario; es de utilidad para el usuario fijar la primera columna y que los datos vayan pasando conforme el usuario hacer scroll horizontal, para que el usuario sepa a qué elemento pertenecen los datos.
• Permite a los usuarios seleccionar los datos que quieren ver: a veces puede ocurrir que una tabla tenga muchos datos que un usuario quiera no ver porque no le interesan, mientras que otros sí, por lo que es útil poder dejarle elegir al usuario qué datos quiere ver antes de mostrárselos para que vea lo que le interesa y facilitar el escaneo.
• Acordeones para agrupar grupos de datos: una manera de agrupar datos es mediante acordeones, ya que es un patrón de usuario conocido y ayuda a separar y agrupar información y que el usuario elija si la ve o no.
• Ayuda a los usuarios: como diseñadores de UX debemos ayudar a los usuarios, por lo que debes pensar cómo van a ver mejor la tabla y de qué manera puedes ayudarles a que ésto ocurra.

Las tablas en un dispositivo móvil es uno de los elementos más complejos de lograr que encaje correctamente en el pequeño espacio disponible y que a la vez sea fácil de usar y sobre todo útil para el usuario. Esperamos que las pautas de Norman Nielsen os sean de ayuda para mejorar los diseños de vuestras tablas para móvil.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario.
Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.