Lecciones UI para creativos

¡Reemprendemos el tema de la comunicación de datos! El capítulo de hoy te será útil tanto si trabajas en: 

• proyectos de visualización de datos
• dashboards
• aplicaciones online que deban mostrar datos tabulados.   

Y te aseguro que tal y como van las cosas, en algún momento u otro te verás teniéndote que enfrentar con estos datos para visualizarlos.

¿Por qué nos importan las tablas para la visualización de datos?

Sabéis que soy una enamorada de la visualización de los datos. Pero a menudo, cuando se habla de visualización de datos se piensa sólo en increíbles infografías. Las grandes olvidadas en esa primera imagen mental son las tablas. Precisamente, sobre ellas va este capítulo.

Sí, ya sé que realmente con las tablas no estamos visualizando datos. Pero también es cierto que en muchas ocasiones, cuando se muestran unos gráficos, también se muestran tablas con datos que son necesarios para acabar de dar la información, para dar datos complementarios, etc. 

Además, está el tema de los dashboards, en los que abundan los gráficos para mostrar diferentes kpi’s, pero en los que muy probablemente también tendrás que mostrar tablas de datos (p.e.: listado de ventas, pedidos, clientes, contactos, etc).

Por tanto, que no te engañen: las tablas suelen estar en muchas infografías y en dashboards acompañando a los gráficos. Por eso, ser un experto UI/UIX en ellas es fundamental.

Además, en otros casos, como por ejemplo en una web o una landing page, una tabla será la forma más clara de dar una gran cantidad de información al usuario de la forma más ágil. 

Saber representarlas de la forma más clara y legible posible será primordial en tu trabajo, ya que si no te han llegado proyectos de ello, probablemente no tardarán en hacerlo. Y cuando suceda, este manual dividido en 3 mini capítulos, te puede ser una gran ayuda. Con él, podrás guiar al usuario en su camino a través de la tabla para que pueda descubrir la información y sacar conclusiones, o tomar una acción u otra dependiendo de los datos, etc.

Primero lo primero: Paso 1 – planificar la tabla

Probablemente, a la hora de diseñar una tabla, tu primer impulso sea lanzarte a hacer prototipos. Pero cuidado, ese paso no es el primero . Antes de nada, debes identificar y sistematizar las necesidades de los usuarios que utilizarán las tablas a diseñar.

Por ejemplo, imagina que estás diseñando una aplicación para la gestión de ciertas áreas de la empresa (facturación, pedidos, leads, oportunidades, stocks… lo que sea).

Es muy recomendable poder hablar con quien va a usar la tabla, o con parte de esas personas para preguntarles qué les ayuda a trabajar más rápidos a la hora de moverse con esas tablas, qué le haría mejorar su rendimiento con ellas, etc.

Una vez tengas claro qué información debe mostrar la tabla y cómo según las necesidades de los usuarios, puedes crear el esqueleto. Slava Shestopalov crea en este caso un ejemplo magnífico de un esqueleto de tabla. 

Esquema de tabla creado por Slava Shestopalov

Como podrás ver en el esquema, el esqueleto parte de la mínima unidad de la tabla, que es la celda. Las celdas se agrupan formando filas y columnas, que pueden tener diferentes características. Finalmente, tenemos la barra superior, los comandos que se permitan hacer mediante teclado, el manejo de errores, etc. 

Este tipo de árboles esquemáticos son muy útiles también para el equipo de desarrollo. Así pueden ver cómo combinar funciones con capacidades frontend y encontrar la mejor manera de convertir los diseños en código.

Y también permite identificar limitaciones en el lado de desarrollo que deban resolverse únicamente mediante el diseño. 

Elegir el estilo de fila apropiado

A la hora de diseñar las filas es importante priorizar la legibilidad y eliminar cualquier ruido o distracción visual. Esto no quiere decir que la norma de oro sea eliminar siempre las líneas que separan filas y columnas. Por ejemplo, en conjuntos de datos o datasets de cierta magnitud la legibilidad sería pésima. 

Por tanto, lo que yo te recomendará es aplicarlo de la siguiente manera:

Si tienes Tablas con gran densidad y cantidad de datos

Se trata de tablas con mucha información que además puede ser muy variada. El ojo humano ya tiene bastante trabajo descifrando los datos. Las ayudas visuales que le ayuden a mantenerse en la fila o columna que quiera le serán de gran ayuda. 

Para este tipo de tablas, lo más recomendable es el formato: Grid. Se trata de mostrar tanto las líneas horizontales como verticales. 

Ejemplo de tabla con estilo grid

El inconveniente de este sistema es que aumenta el ruido visual. Pero en algunas tablas con gran densidad de datos puede ser lo más conveniente.

Tanto si tratas una tabla con baja o alta densidad de datos

Existe una opción que reduce el ruido comparado con el estilo Grid y que suele funcionar bien en prácticamente todas las tablas. Se trata del estilo basado en sólo líneas horizontales.

El espacio blanco entre datos aumenta y mantenemos a la vez una buena legibilidad. 

Ejemplo de tabla con estilo de fila basado en el uso de líneas horizontales

Una alternativa a las líneas consiste en utilizar zebra Stripes, es decir, filas con fondo de color alternado. Por ejemplo, filas con fondo blanco, gris claro, blanco, gris claro, etc. alternándose. 

Ejemplo de tabla con estilo cebreado

Eso sí: el cebreado es sólo indicado en el caso en que quede claro que no se está destacando ninguna fila en concreto y no ser cree confusión. Es decir, que el usuario no llegue a entender que lo datos en gris claro, por ejemplo, son más importantes que los que están en fondo blanco.

Para este punto será importante que el cebreado sea con colores neutros, o colores muy rebajados como en el ejemplo anterior, para que no llamen la atención en exceso. 

Tablas para datasets pequeños

En este caso puedes eliminar todas las líneas tanto horizontales como verticales, así como cualquier fondo de las filas. Es el estilo más limpio y minimalista posible. 

Ejemplo de tabla con estilo minimalista sin ningún tipo de línea para separar filas o columnas

Pero como te decía, es recomendable sólo cuando la cantidad de datos es reducida y la legibilidad es buena pese a eliminar las ayudas visuales. 

Crear un buen contraste

A la hora de presentar datos tabulados es básico que quede claro qué es la cabecera y qué son los datos, y saber destacar dentro de los datos lo que sea necesario. Para ello utilizaremos estilos de texto y fondos diferentes. Lo haremos en concreto para:

Destacar la cabecera de la tabla

La cabecera de la tabla puede destacarse dándole un fondo diferente que al resto de la tabla, o usando un estilo de texto destacado variando el grosor y el color de este texto, por ejemplo.

Destacar datos en columnas

Puedes utilizar los mismos recursos utilizados para destacar la cabecera para destacar una columna entera, como podría ser la primera columna. Por ejemplo, imagínate que tenemos una tabla en la que se nos presentan datos de ciertos países. La primera columna podría ser el nombre de cada país. Esta primera columna podría estar en negrita y otro color, por ejemplo:

Contraste aplicado para destacar la primera columna

Dentro de una misma columna también puedes destacar un dato respecto a otro. Por ejemplo, imagina que una columna contiene datos del tipo:

45.574.784 USD (87%)

El número principal es el primero. El segundo se da en este caso como aclaración del primero, así que podría crearse un estilo diferente para el porcentaje y mostrarlo en un gris y de menor cuerpo, quitándole jerarquía respecto al primer número:

Contraste aplicado en los datos de la segunda columna para incluir dos datos diferentes en una misma columna

Añadir ayudas visuales

Además de crear un buen contraste en los casos anteriores, también es convenientes crear otro tipo de contrastes y ayudas visuales para crear una buena legibilidad y mejorar el escaneo de la información.

Cambio de dominio

Con este concepto me refiero cuando cambiamos de valores específicos a sumas o medias. Por ejemplo, imagina que estamos tratando una tabla para mostrar la información facilitada durante los últimos años por el FBI en sus informes anuales sobre los crímenes de odio en EE.UU. Se llaman así a aquellos crímenes en los que la víctima se ha seleccionado basándose en una característica personal de ésta, como puede ser la raza, la religión, la orientación sexual, el género, la identidad de género o su origen.

Bien, nos encontramos con una tabla en la que queremos mostrar los crímenes por odio de diferentes tipos desde el 2000 hasta el 2015 en EE.UU.:

Ejemplo de tabla con datos sobre crímenes de odio en EE.UU. desde el año 2000 hasta el 2015

La primera columna es el año, y las siguientes columnas son el tipo de crimen: por raza, por origen, por religión, por orientación sexual, etc.

Al final de la tabla puede ser interesante mostrar una fila final que sea la suma de todos los casos anteriores, de manera que mostraríamos una fila final que ya no es un año concreto, sino que es la suma de todos los valores anteriores. 

Podemos destacar esta fila final para que dejar claro que no es un año más, y también para permitir que el usuario que quiera hacer un escaneado rápido y ver el total para tener una imagen general pueda encontrar esta información fácilmente. 

Ejemplo de tabla con cambio de dominio en la última fila. En ella se puede ver el acumulativo de cada tipo de crímen de odio desde el año 2000 hasta el 2015.

En algunos casos lo que interesa no es marcar una fila completa, sino un campo en concreto para indicar el estado de ese dato. Por ejemplo, en una tabla que esté mostrando datos económicos, puede ser interesante mostrar de color rojo los valores que muestren datos negativos o por debajo de un umbral:

Contraste utilizado para destacar el valor positivo o negativo en la última columna

Y hasta aquí llegamos hoy en esta mini serie de diseñar tablas. Como ves, las tablas tienen muchos aspectos a considerar así como muchos posibles recursos que puedes utilizar como aliados a la hora de comunicar datos tabulados. 

Crear la típica tabla horrible que excel crea por defecto lo puede hacer cualquiera. Hacerla legible, clara y atractiva a la vez, es otra liga ya. Hoy hemos empezado hablando de los pasos previos antes de lanzarse a diseñar cualquier tabla, para luego adentrarnos ya en puntos más concretos como el estilo de fila, contraste y otras ayudas visuales que puedes utilizar. 

El próximo día continuaremos hablando de las columnas, espacios recomendados, etc. 

Y recuerda, diseñar tablas correctamente se está convirtiendo en un must debido a la clara tendencia que hay de poder lidiar y entender la gran cantidad de datos que barajan las empresas, y que además esa cantidad también tiende a su vez a aumentar. 

Conclusiones

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. 

Si te ha gustado algunas de las dos recomendaciones de libros que he dado, puedes adquirirlas a través de mi web, en el episodio 43 en maria-pascual.es/podcast. 

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.