5 soluciones prácticas para hacer tablas de datos sensibles

Ilustración de Dominik Korolczuk.

Trabajo como diseñador sénior de UI y UX para App’n’roll, una empresa de construcción de empresas con sede en Varsovia.

Como sabrán, el diseño de hoy requiere cuidar varios tipos de pantallas y tamaños, por lo que los diseñadores debemos hacer que los resultados de nuestro trabajo sean lo más receptivos posible. Eso puede causar algunos problemas, especialmente cuando se trata de ajustar una gran cantidad de datos en interfaces estrechas de teléfonos móviles.

La razón por la que decidí compartir las soluciones con ustedes es el hecho de que las cosas más comunes con las que luché fueron las tablas de datos.

¿Cómo ajustar una amplia tabla de datos en pantallas móviles sin perder su propósito y legibilidad?

Encontré 5 soluciones comunes para manejar tablas de datos en pantallas anchas como teléfonos inteligentes o tabletas en modo vertical. Puede usarlo inmediatamente en su trabajo diario como diseñador, ¡vamos!

Acortar

La más sencilla, se trata de cortar columnas innecesarias y mantener la tabla concisa dejando solo los datos cruciales. El siguiente ejemplo muestra el sitio web de Bloomberg con solo 4 de 9 columnas en la vista móvil.

Fuente: https://www.bloomberg.com/markets/stocks/futures

Aplicable

  • cualquier tipo de datos
  • varios tipos de contenido

Pros

  • fácil de usar
  • fácil de desarrollar
  • sencillez

Contras

  • espacio limitado para la presentación de datos
  • necesita renunciar a parte de los datos

Si no desea eliminar ninguno de sus datos, las otras soluciones pueden ser más adecuadas para usted.

Movible

Esta solución no responde del todo pero es fácil de usar y rápida en el desarrollo. Se trata solo de usar gestos de deslizamiento para desplazarse por toda la tabla horizontalmente.

Tabla de datos móvil sensibleFuente: https://codepen.io/karks88/pen/jGrjdW/

Aplicable

  • para mesas anchas (3–8 columnas)
  • para mesas cortas (se recomienda mantener toda la altura de la mesa por encima del pliegue)

Pros

  • fácil de desarrollar
  • fácil de usar

Contras

  • no para grandes cantidades de contenido
  • la leyenda no es visible después del desplazamiento

Extras

  • modo de enfoque para marcar toda la fila para asegurarse de que estamos viendo los datos correctos mientras nos desplazamos
  • Filtrar columnas: oculta y muestra columnas particulares

Colapsado

Esta solución es totalmente receptiva, todo es visible sin desplazamiento y las columnas se navegan mediante gestos de deslizamiento. La columna principal (leyenda) se puede arreglar en un solo lugar para que no perdamos el contexto de los datos.

Tabla de datos receptivos contraídaTabla de guía de tallas en http://massimodutti.com

Aplicable

  • para columnas cortas
  • para mesas cortas
  • útil cuando se intercambian columnas en filas

Pros

  • fácil de usar
  • la leyenda es visible todo el tiempo

Contras

  • solo para datos cortos

Extras

  • las pestañas que representan columnas se pueden usar para navegar rápidamente

Transformado

Es una solución a prueba de balas para las tareas más difíciles. La regla principal es el colapso de las filas de la tabla en tarjetas separadas.

Ejemplo de tabla de datos receptiva transformadahttps://elvery.net/demo/responsive-tables/ (No más tablas)

Aplicable

  • una gran cantidad de datos
  • varios tipos de contenido

Pros

  • útil con una gran cantidad de datos y su tamaño
  • capacidad de colapsar y ocultar algunos datos
  • una forma versátil de presentación de datos

Contras

  • nombres de columna repetitivos
  • difícil de comparar datos particulares entre filas

Extras

  • capacidad de filtrar y ordenar el contenido con facilidad
  • capacidad de dividir el contenido en páginas separadas

Comparando

Este está estrictamente relacionado con el ejemplo Transformado, pero merece una explicación más detallada. Esta solución puede ser muy útil cuando queremos comparar las columnas. Por ejemplo, una oferta o funcionalidades de producto.

También es similar al Contraído que describí anteriormente, pero está listo para una mayor cantidad de datos. Todo lo que necesitamos agregar es una fácil navegación a través de toda la tabla, mostrando solo dos columnas a la vez.

Tabla de comparación de datosFuente: http://vizio.com

Aplicable

  • varios tipos de contenido
  • grandes cantidades de datos

Pros

  • fácil de comparar las columnas
  • útil en comercio electrónico
  • ayuda a tomar decisiones más rápido

Contras

  • ves solo dos columnas a la vez
  • requiere navegación adicional

Pensamiento final

El tipo de solución que elija depende principalmente del tipo de datos que tenga. Una buena práctica es la estrecha cooperación con un desarrollador front-end para elegir la solución más razonable en términos de consumo de tiempo y requisitos técnicos necesarios para aplicar.

Si encuentra útil este artículo, no dude en compartirlo. Voy a escribir más en el futuro. Si tiene preguntas o desea darme su opinión, comente a continuación.