Diseñar mejores tablas de datos

Pobres mesas. ¿Dónde se equivocaron?

Después de ser el pan y la mantequilla de la web durante la mayor parte de su historia temprana, muchos diseñadores dejaron de lado las mesas para obtener diseños más modernos y modernos. Pero aunque podrían estar apareciendo menos en la web en estos días, las tablas de datos aún recopilan y organizan gran parte de la información con la que interactuamos día a día.

Por ejemplo, existe lo que considero la madre de todas las tablas: el "Arancel Armonizado" de los Estados Unidos, una tabla que abarca más de 3.550 páginas y enumera cada bien que se puede importar a los EE. UU., Incluidas entradas tan emocionantes como "Abrigos, abrigos, capas, capas, anoraks (incluidas chaquetas de esquí), rompevientos y artículos similares (incluidas chaquetas acolchadas y sin mangas) para hombres o niños.

¿Qué es un abrigo, de todos modos?

La ira provocada por las tablas de datos se debe, sin duda, a lo horrible que pueden verse cuando no están bien diseñados. El diseño de una tabla es su eje: si se hace correctamente, hace que los datos complejos sean fáciles de escanear y comparar. Si se hace mal, puede hacer que la información sea completamente incomprensible.

Así que hagámoslo bien, ¿verdad?

Conoce tus números

No todos los números fueron creados iguales. No estoy hablando de π y ∞ (aunque a menudo lo hago, en fiestas); Estoy hablando de números que son tabulares o de estilo antiguo, ya sea de línea o proporcionales.

Aquí hay una ilustración rápida de la diferencia entre las figuras de estilo antiguo y de revestimiento.

Figuras de estilo antiguo vs.

Las figuras de estilo antiguo se ven bien en las oraciones, donde coinciden mejor con el tamaño y el espaciado de las letras minúsculas; Las figuras de revestimiento son más uniformes y refuerzan la estructura cuadriculada de la tabla.

La diferencia entre figuras proporcionales y tabulares no es tan obvia:

Figuras proporcionales vs. tabulares

Las figuras proporcionales están diseñadas para coincidir con el color, es decir, el tamaño y el espaciado generales, de la tipografía. Las figuras tabulares, por otro lado, tienen un tamaño idéntico, de modo que las columnas de números se alinean correctamente. Si bien la diferencia puede no parecer grande en la escala de una o dos líneas, el uso de figuras tabulares hace que escanear tablas grandes sea significativamente más fácil y menos propenso a errores.

Una nota técnica sobre el uso de figuras de revestimiento tabular

Al diseñar, tendrá que hacer un poco de trabajo para asegurarse de que los números que está utilizando sean los correctos (las figuras de revestimiento tabular no suelen ser las predeterminadas). Los productos de Adobe tienen un panel "opentype" que se puede utilizar para establecer las cifras correctamente, y CSS proporciona una sintaxis ligeramente críptica para habilitar esta función. Más allá de eso, algunas búsquedas básicas en Google deberían guiarte por el camino correcto.

Pero ahora para las malas noticias: no todos los tipos de letra tienen verdaderas figuras de revestimiento tabular disponibles. Los que sí tienden a ser bastante caros. Hay algunas excepciones: el excelente Work Sans es un tipo de letra gratuito que tiene verdaderas figuras de revestimiento tabular.

Si no puede encontrar un tipo de letra adecuado que tenga figuras de revestimiento tabular, una buena alternativa son las fuentes monoespaciales, aunque tienden a tener un aspecto más de "código fuente", siempre serán adecuadas para mostrar números en tablas. Además, el nuevo tipo de letra predeterminado del sistema Apple San Francisco tiene excelentes figuras de revestimiento tabular y se ve muy bien en tamaños pequeños.

Asuntos de alineación

3½ reglas simples a seguir:

1. Los datos numéricos están alineados a la derecha
2. Los datos textuales están alineados a la izquierda
3. Los encabezados están alineados con sus datos.
3½. No use la alineación central.

Lista de estados de EE. UU. Por población histórica - Wikipedia

Los datos numéricos se leen de derecha a izquierda; es decir, comparamos los números mirando primero sus dígitos, luego sus decenas, luego sus cientos, y así sucesivamente. Así es también como la mayoría de las personas aprenden aritmética: comience por la derecha y avance hacia la izquierda, llevando dígitos a medida que avanza [1]. Por lo tanto, las tablas deben mantener los datos numéricos alineados a la derecha.

Los datos textuales se leen (en inglés) de izquierda a derecha. La comparación de elementos textuales generalmente se realiza ordenando por orden alfabético: si dos entradas comienzan con la misma letra, se utiliza la segunda letra, y así sucesivamente. Intentar escanear texto rápidamente puede ser irritante si no está alineado a la izquierda.

Los encabezados, en general, deben llevar cualquier alineación que tengan sus datos. Esto mantiene limpias las líneas verticales de la tabla y proporciona consistencia y contexto.

La alineación central hace que las líneas de la tabla se vuelvan "irregulares", lo que hace que sea mucho más difícil escanear entradas, a menudo se necesitan divisores adicionales y elementos gráficos.

Cifras significativas consistentes = Mejor alineación

Una manera fácil de mantener sus tablas correctamente alineadas es mantener el mismo número de cifras significativas, generalmente el número de dígitos después del decimal, coherente dentro de cada columna. Las cifras significativas son todo un tema de conejo, así que mantendré mi consejo aquí breve: cuantos menos higos puedas superar, mejor.

Menos etiquetas más claras

Proporcionar etiquetas para acompañar sus datos es crucial. Estas piezas de contexto que lo acompañan permiten que una tabla de datos sea leída por un público más amplio, en un conjunto más amplio de circunstancias.

Pronóstico de la etapa de inundación del río Mississippi - NOAA

Título

Puede parecer una sabiduría convencional, pero dar a su tabla de datos un título claro y conciso es tan importante como cualquier otra decisión de diseño que tome. Con un buen título, las tablas son portables: se pueden usar en varios contextos diferentes, así como también se pueden citar de fuentes externas.

Unidades

La etiqueta más común utilizada en las tablas es la unidad de medida de los datos; a menudo, se repite junto con cada punto de datos. En lugar de repetir la etiqueta, solo inclúyala con el primer punto de datos en cada columna.

Encabezados

Mantenga los encabezados lo más cortos posible; El diseño de la tabla de datos debe centrarse en los datos en sí, y las etiquetas de encabezado largas pueden ocupar mucho espacio visual.

Tan poca tinta como sea posible

Al decidir cómo diseñar los elementos gráficos de una tabla, el objetivo siempre debe ser reducir la huella de la tabla sin perder la fidelidad estructural. Una de las formas en que puede lograr esto es utilizando la menor cantidad de "tinta" posible, es decir, siempre que sea posible, elija no estilizar un elemento.

Estadísticas de bateo de la Liga Nacional 2016 - BaseballReference

Reglas

Si alineó correctamente los puntos de datos en su tabla, las reglas se vuelven redundantes. El beneficio principal que brindan es que le permite reducir el espacio entre los elementos y, al mismo tiempo, poder diferenciar entre los elementos. Incluso cuando se usan, las reglas deben ser extremadamente ligeras para no interferir con el escaneo rápido.

Las reglas horizontales son las más útiles, ya que le permiten reducir significativamente el espacio vertical ocupado por tablas largas, lo que agiliza el trabajo de comparar muchos valores o ver tendencias a lo largo del tiempo.

Una opinión sin fundamento que tengo sobre las reglas es que las rayas de cebra son malas. Muy, muy mal. Tómelo o déjelo.

Antecedentes

Los fondos son más útiles cuando se indican diferencias en el dominio de datos: cambiar entre valores individuales y sumas o promedios, por ejemplo.
Resaltar valores, proporcionar un contexto adicional a los datos o indicar cambios en los valores de períodos anteriores se puede hacer sin fondos, utilizando elementos gráficos como ✻, † (uno de mis favoritos) o ▵.

Además, las tablas deben ser monocromáticas. El uso de colores para proporcionar un contexto organizacional o un significado adicional aumenta la probabilidad de malas interpretaciones o errores, y causa problemas de usabilidad para las personas con problemas de visión.

En conclusión

Las tablas pueden ser aburridas, pero son un elemento tan importante de cualquier documento rico en datos que valen cada onza de diseño pensando que podemos aplicarles. Al diseñar tablas más eficientes, más claras y más fáciles de usar, puede mejorar enormemente la experiencia a menudo dolorosa de analizar y comprender grandes conjuntos de datos.

Lectura adicional e inspiración

FiveThirtyEight siempre ha sido una gran fuente de inspiración: establecen sus datos numéricos en un tipo de letra llamado Decima Mono, que está específicamente diseñado para adaptarse a muchos datos en un espacio pequeño.

La tipografía práctica de Butterick es mi opción para todo tipográfico, y el tipo de referencia de la que guardas múltiples copias, ¡es muy práctico!

Por último, ningún artículo sobre diseño de datos estaría completo sin un grito de Edward Tufte. Su perspicaz escritura sobre diseño es indispensable.

[1] Para otros enfoques interesantes de la aritmética, mira cómo los niños japoneses usan un Soroban o cómo funciona la multiplicación de la red.

Un agradecimiento especial a kontur, Nathan D Huening, Robin Rendle, Scott Dawson, Karen Bachmann y Kelly Jepsen por detectar errores en esta historia.