Las tablas son elementos de presentación de datos muy simple a primera vista. No es más que una cierta cantidad de palabras y cifras organizadas respecto a una cuadrícula. Pero si nos adentramos algo más, vemos que no todo es tan sencillo como aparenta. Cada tabla varía en tamaño, contenido, complejidad y propósito. No es lo mismo una tabla con los resultados financieros de una empresa, que una tabla que muestra un directorio de inmuebles de una web inmobiliaria. Y a no ser iguales, tampoco deberíamos seguir los mismo criterios para diseñarla.
En este artículo queremos ofrecer algunos consejos a tener en cuenta cuando nos adentramos en el diseño de una tabla, tanto en formato físico como digital o para una web. Vamos a centrarnos tanto en la parte puramente visual de estilo, como de funcionalidad. Aunque, como iremos viendo, ambas están íntimamente relacionadas. Porque de nada nos servirá tener una tabla que sea original y llamativa si nos resulta muy difícil leer sus datos.
En primer lugar, veamos os diferentes estilos globales de tablas que nos podemos encontrar. Y, a partir de ahí, seguiremos adentrándonos en como el diseño nos vas a ayudar a mejorar algo primordial en una tabla: la legibilidad y la lectura de sus datos.
Eligiendo el mejor estilo para nuestra tabla
Lo primero que debemos decidir es el estilo que vamos a darle a nuestra tabla. Para ello, es necesario que sepamos ciertas características que va tener la tabla, como la cantidad de datos que tiene, el tipo de contenido, o la legibilidad que le queramos dar.
Cuadrícula
Es el tipo de tabla que se nos viene a todos por defecto al pensar en una. Es la que tiene tanto líneas horizontales como verticales, marcando filas y columnas. Es recomendable para tablas con muchos datos.
Líneas horizontales (o verticales)
Solo tiene líneas en una dirección, normalmente en la dirección de lectura de la tabla. Mejora la legibilidad, ya que no nos encontramos elementos al leer de una celda a otra. Este es el estilo de tabla más recomendado en la mayoría de las situaciones.
Tipo cebra
Una alternativa a la anterior, solo que en este caso en vez de usar líneas de separación, usaremos un color diferente de forma alterna en filas o columnas. Es perfecto cuando la fila o la columna que vamos a tener es muy larga, ya que es más fácil leer los datos sin perderse.
Sin separación
Eliminamos cualquier tipo de separación entre celdas, consiguiendo una tabla muy minimalista. Este estilo solo en tablas de pequeño tamaño o con pocos datos.
Usa el contraste a tu favor
Hemos hablado varias veces en Silo como el contraste es uno de los mejores aliados que tenemos cuando nos ponemos a diseñar. Y al realizar una tabla también podemos usarlo a nuestro favor.
Marca claramente la dirección de lectura
La legibilidad de una tabla es primordial, y debemos tener muy claro si la persona que va a leerla debe hacerlo de forma horizontal o vertical. No hay problemas en ser demasiados explícitos con esto. El estilo cebra es una opción de las varias que tenemos para resaltar la dirección de lectura.
Nuestros ojos siempre van a tender a seguir el trazo marcado con el mismo color. Ya nos lo demostró Dorothy siguiendo el camino de baldosas amarillas hasta Oz. Además, no queda muy bien que alguien tenga que seguir con el dedo por una pantalla la fila de una tabla porque se pierde. No habla muy bien de la usabilidad de nuestra tabla.
Remarca la cabecera de tu tabla
La cabecera es importante por varios motivos. Nos indica donde está el inicio de la tabla, y es la que nos ofrece el significado de todos los datos. Debemos darle la consideración que se merece. Lo podemos hacer dándole un color de fondo diferente al resto de celdas, usando una tipografía diferente o con mayor tamaño, etc.
Usa el hover en filas o columnas
Si nos centramos en diseño web, un buen truco es usar el hover para que, al pasar por encima de una fila o columna, cambie su color de fondo por completo. Sería una especie de tabla tipo cebra, pero dinámica. Perfecto si queremos mantener cierto minimalismo, pero sin perder la legibilidad.
Da un toque de color a elementos importantes
Si solo usamos el blanco y negro en nuestra tabla (o una paleta de grises), es buena idea dar un toque de color para ciertos elementos importantes. Por ejemplo, en la fila de resultados, o usando dos colores para diferenciar beneficios de pérdidas. No hay porque huir de la combinación de colores.
Alinea con criterio los elementos de tu tabla
Posiblemente la alineación del contenido sea uno de los aspectos que menos se tienen en cuenta cuando se crea en una tabla. No es extraño escuchar el típico «que esta tabla tenga todos los datos alineados al centro», sin ninguna explicación que apoye esta decisión. Por favor, no hay que hacer esto. Es una patada al libro de la legibilidad. Una patada metafórica, no se si existe tal libro.
El criterio que deberíamos seguir es el siguiente:
- Datos de texto (nombres, países, etc) alineados a la izquierda.
- Datos numéricos con relación a una magnitud (precios, porcentajes, población, etc) alineados a la derecha.
- Datos numéricos sin relación a una magnitud (teléfonos, código postal, etc) alineados a la izquierda. Si a cifra es corta, podemos alinear al centro.
- Las cabeceras siempre tienen que tener la misma alineación que los datos de su columna o fila correspondiente.
Elige tipografías monoespaciadas para los datos numéricos
Hace poco días explicamos qué eran las tipografías monoespaciadas, y en que escenarios podíamos hacer uso de ellas. Y las tablas con datos numéricos es una excelente ocasión para probarlas. Gracias a esta clase de tipografías, alinearemos perfectamente cada una de las cifras que componen un número, haciendo muy sencillo seguir en una línea vertical la posición de cada número.
Deja respirar los datos de tu tabla
Nunca está de más recordarlo: hay que priorizar la legibilidad de una tabla a mostrar la mayor cantidad de datos posibles en el mínimo espacio. No hay que tener miedo al espacio en blanco. No es un espacio desperdiciado, ya que usándolo con cabeza es un valor añadido. Los datos de una tabla deben tener, al menos, un margen por cada lado de 1em o 16px.
Muchos en ese espacio podríamos meter muchos mas datos. Sí, pero el conjunto sería mucho peor. Podríamos confundir donde termina una celda y empieza la siguiente, y la amalgama de palabras y cifras en tan pequeño espacio puede llegar a ser incomprensible.
Usa la paginación en tablas largas
Enlazando con el contenido anterior, ¿qué haríamos cuando tenemos una tabla con muchos datos, pero queremos que sea legible sin tener que hacer una mega-tabla en la que haya que hacer varias veces scroll para leerla?. Tan sencillo como usar la paginación. Romper la tabla en varias partes, dejando siempre ciertos elementos fijos, como la cabecera, que nos sirvan de nexo entre página y página.
Por supuesto, podemos añadir a esto varias funcionalidades, como que el usuario pueda decidir cuantas filas quieren que se le muestren por página. Esto es ideal para que la longitud de la tabla se adapte a cualquier tipo de pantalla. No es lo mismo leer los datos desde la pantalla de un ordenador que la de un smartphone.
Lo que podía parecer un elemento simple de realizar como es una tabla, hemos podido comprobar que tiene multitud de factores a tener en cuenta. Cuestiones como a legibilidad, la alineación de los elementos dentro de una celda, el uso de colores y otros más que hemos visto, harán que tu tabla pase de ser una cuestión secundaria, a una parte importante dentro de tu diseño.
Esperamos que os haya resultado interesante y entretenida la lectura. Y como siempre, tenéis abiertos los comentarios ante cualquier duda o sugerencia que queráis hacer, o para contar vuestra experiencia a la hora de tener que diseñar una tabla.
