Cómo diseñar tablas - Parte 1 de 3

En esta segunda y penúltima parte del manual "Cómo diseñar tablas" seguimos analizando y aprendiendo cómo conseguir que nuestras tablas sean legibles, usables y visualmente atractivas.

El objetivo es simple: ser un experto en estos elementos, las tablas, tan necesarios y útiles en dashboards y en la sociedad de datos en la que vivimos.

Notas del episodio

Enlaces mencionados en el podcast

Aquí encontrarás los enlaces a las fuentes más destacadas para la realización de este episodio:

Accede a la checklist para asegurar un buen IxD en tus proyectos web, app o de visualización de datos

Subscríbete a la newsletter y accede gratuitamente a la checklist y resto de material de los episodios exclusivo para los miembros de la comunidad Lecciones UI para Creativos.

¿Eres de los que prefieren leer?

Transcripción del podcast por si lo tuyo es leer a tu rollo con una buena taza de te/café/mate...

Hace algún tiempo fui al médico. Por suerte no era para nada grave, si no hoy ya no lo cuento. EL caso es que me hicieron una analítica para unas pruebas. Por lo visto, yo tenía que llevar un papel del médico para que en la analítica hicieran unos tests extras para comprobar más cosas.

Nadie me lo dijo, así que yo me hice la analítica tan feliz. Cuando volví al médico me preguntó que por qué no estaba el resto. Así descubrimos que, según él, el fallo era mío. La enfermera lo secundaba y me insistía en que tendría que haber llevado el dichoso papel a las pruebas. insistieron tanto que al final cuando me explicaban que tenía que volver al centro de los análisis, me lo decían ya a poco a poco y como si yo fuera lerda.

Pero yo ni soy lerda ni me cuesta entenderlo. La directiva que me tendrían que haber dado era fácil: “Cuando vayas a hacerte el análisis, entrega este papel también para que hagan todos los tests necesarios”. El problema es que no me lo habían dicho.

Esto pasa a menudo. Hay cosas muy sencillas, pero lo son cuando alguien te las dice. Lo mismo sucede a la hora de diseñar tablas. Puede parecer que hay cosas de cajón al explicarlas, pero precisamente hasta que alguien no las explica, es fácil que se te pasen por alto.

Por eso hoy seguimos con el segundo de los 3 capítulos de la guía para diseñar tablas que empezamos en el capítulo anterior. Objetivo: ser masters en el diseño de estos elementos cada vez más necesarios en el mundo de datos en el que vivimos.

¿Empezamos?

Alineación en las columnas

Este punto es también importante para mejorar la legibilidad, y no siempre se tiene en cuenta. A priori, muchas veces se tiende a alinear todo el texto a la izquierda y punto.

Sin embargo, esta alineación no siempre es la más adecuada para todos los datos. La norma general se poodría decir que es alinear a la izquierda siempre excepto en los casos de datos numéricos que pueden tener diferentes medidas. En estos casos se alinearían a la derecha para mejorar su legibilidad.

Por tanto, la alineación será:

  1. Datos de texto se alinean a la izquierda
  2. Datos numéricos que no varían en medida (ejemplo: números de teléfono, códigos postales, fechas, etc) se alinean también a la izquierda.
  3. Datos numéricos que sí varían su medida se alinean a la derecha. Ejemplo: cantidades ( número de personas afectadas, número de casos, cantidad de dinero, etc) y porcentajes.
  4. Las cabeceras deben estar alineadas de la misma manera que lso datos de su columna. Por tanto, para columnas de cantidades variables y porcentajes estarán alineadas a la derecha.

Fuentes tabulares para los números

También ayuda a mejorar la legibilidad utilizar fuentes tabulares o monoespacio para las columnas con números. Las fuentes monoespacio son aquellas que utilizan el mismo espacio para todas las letras, en vez de un espacio proporcional. Por tanto, una m y una i utilizarán el mismo espacio en este tipo De Fuentes:

Ejemplo tabla fuente monospace para números

En este ejemplo se ha utilizado la tipografía Roboto, excepto en las columnas con datos numéricos en los que la tipografía utilizada es Roboto Mono.

La altura de línea

Otro factor a tener en cuenta es la altura de línea. Debe elegirse teniendo en cuenta la cantidad de datos que contendrá la tabla. Una altura de línea regular y relajada ofrecerá mayor espacio en blanco y creará una lectura más confortable para datasets largos.

A menudo los clientes piden que se muestre la mayor cantidad posible de datos en pantalla, y para ello no les importa que se reduzca de forma considerable la altura de línea. Es importante explicarles bien en este caso que se está mostrando más información en pantalla y reduciendo el scroll a base de degradar de forma considerable la legibilidad y aumentando la posibilidad de errores de análisis por parte del usuario.

Padding en las celdas

Es recomendable mantener un padding de por lo menos 16px, tanto a nivel vertical como horizontal. Esto garantiza una distancia mínima de 32 píxeles entre los datos de dos columnas diferentes o de dos filas diferentes.

Utiliza subtexto

Este punto está completamente relacionado con el de crear contraste que hemos comentado antes. Se trata de proveer detalles útiles o contexto temporal a los datos sin utilizar demasiado espacio y minimizando el ruido visual en la tabla.

Este recurso también puede utilizarse para combinar dos a columnas en una en el caso que el espacio horizontal sea limitado y deba evitarse el scroll horizontal.

Este caso lo tuve precisamente hace poco al diseñar una aplicación que debía utilizarse en unas fábricas. Era importante mostrar en unas pantallas grandes cierta información. Parte de ésta era una pequeña tabla que mostraba la información sobre as últimas incidencias en las líneas. Debía decirse tanto el momento en el que se había dado la incidencia como el tiempo que había durado. Esta tabla era secundaria. La parte principal de la pantalla era sobre el proceso actual que se estaba dando en diferentes líneas.

Una posible solución es la siguiente basada en la combinación de las dos primeras columnas:

Tabla facilitada por el cliente como muestra de la información a mostrar.

Tabla diseñada combinando las columnas Start y Duration. Se ha eliminado también la primera columna con la numeración después de hablar con el cliente y concluir que esa columna no aportaba información ni ayudaba a los trabajadores que observaban la tabla en la fábrica y que utilizan la tabla. 

El orden en las tablas

El orden de los datos también es muy importante. Si estás comparando países sin que ningún dato sea el destacable de entrada, lo más conveniente es que estén ordenados por orden alfabético. Si la tabla presenta los datos de los países más afectados por una pandemia, lo más útil para el usuario sería presentarlo ordenando los datos de manera que la tabla presente del país más afectado al que menos, en vez de hacerlo alfabéticamente.

En cualquier caso, que haya un orden es importante. Y más usable todavía es la tabla si podemos hacer que ese orden pueda luego ser personalizado por el usuario. Por ejemplo, si las columnas son ordenarles y el usuario luego puede ordenar la tabla como desee apretando en la cabecera.

Resumen visual inicial

Imagina que estás trabajando en el diseño de una aplicación de ventas. Vas a mostrar la tabla con la información de los pedidos.

En un caso así, por ejemplo, puede ser de gran utilidad un resumen inicial visual. Sería como una especie de mini Dashboard que daría una visión general de lo que contiene la tabla.

Podría indicar número de pedidos pendientes y pedidos servidos este año, o este mes. También podría indicar la facturación y el número de pedidos durante los últimos 3 meses, etc.

Con este tipo de información, el usuario puede detectar patrones y problemas que se dan en el conjunto antes de tomar cualquier decisión y acción sobre cualquier fila de la columna.

Conclusiones

Y hasta aquí llegamos hoy en esta segunda parte sobre el diseño de tablas. En el capítulo anterior hablamos de los primeros pasos al diseñar una tabla, del diseño de filas y del uso del contraste en ellas para mejorar la legibilidad.

Hoy nos hemos centrado en las columnas y en el recurso de crear un resumen visual inicial. En el próximo capítulo, que por cierto es el tercero y último de esta serie, hablaremos de la funcionalidad a considerar y diseñar en ellas. También veremos las diferentes opciones responsive design con que podemos contar para adaptar nuestras tablas lo mejor posible a las pantallas más pequeñas.

Y ahora, sólo decirte que muchas gracias por escucharme. Si te ha gustado y te ha parecido interesante este podcast, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos y poder acceder a los materiales exclusivos para los suscriptores.

Y con esto me despido. Te espero en el episodio de la semana que viene con más conceptos, herramientas y metodologías para negocios User Interface y data vizualization que te ayuden cada vez a empoderarte más y más, y llegar más y más lejos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descubre cómo aumentar tu productividad y eficiencia en tu negocio con Lecciones UI para creativos

Breves podcast semanales en las que comparto contigo cómo mejorar los procesos tanto de gestión como de producción UI.

Lecciones UI
para Creativos

Subscríbete para descargar los contenidos. Si ya estás suscrito, puedes acceder a ellos a través del enlace que recibiste en el email de bienvenida.

Términos y condiciones

Puedes cambiar de opinión en cualquier momento haciendo clic en el enlace "dar de baja" que hay en el pie de página de cualquier correo electrónico que recibas de nuestra parte, o poniéndote en contacto conmigo en info@maria-pascual.es Trataré tu información con sumo respeto y cuidado. Para obtener más información acerca de nuestras prácticas de privacidad, visita nuestro sitio web.