Datos antes que diseño
Tres cosas determinan si una vista de datos es buena, y las tres se deciden antes de escribir código de maquetación: qué decisión sirve la vista, qué contiene realmente el campo y cuál de varios diseños quiere la persona. Saltarse cualquiera de ellas produce una vista que parece terminada y está mal.
Cuándo usarlo
- Cualquier tarjeta, panel, tabla, dashboard o vista de detalle sobre registros que no hayas creado tú
- Un interesado dice "muéstrame X" y X es un nombre de columna
- Estás a punto de resumir, truncar, etiquetar, ordenar, colorear o contar un campo
- Estás eligiendo entre dos formas de organizar la misma información
Sáltatelo cuando los datos sean tuyos (datos de prueba) o la vista sea un único valor que ya has impreso.
Un gráfico o tabla que se vaya a publicar, compartir o incluir en un informe aún comienza aquí cuando muestra
registros que no has creado tú. Una vez que los datos están definidos, practical-charts cubre cómo se lee:
el título principal, los ejes honestos, una serie destacada, la fuente dentro de la imagen.
Paso 0: nombrar la decisión
Escribe una frase antes de tocar los datos: "Alguien que mira esto está decidiendo ___". Si no puedes completarla, estás construyendo un volcado de datos y la pregunta sobre el diseño no tiene respuesta.
- Cada campo gana su lugar si cambia esa decisión. Lo interesante pero neutral para la decisión pertenece a la vista de detalle, no a la tarjeta.
- La prominencia sigue el peso de la decisión, no la conveniencia de la consulta. El campo que fue más fácil de obtener no es el campo que merece el tipo de letra más grande.
- Un interesado que nombra una columna te ha dicho los datos que quiere, no la decisión. Pregunta qué harían de manera diferente según su valor.
Paso 1: perfilar el campo, luego diseñar
Consulta antes de diseñar. Para cada campo que mostrará la vista:
| Verificación | Por qué cambia el diseño |
|---|---|
| Recuento de no nulos | Un campo NULL en cada fila no necesita una tarjeta, necesita un informe de error |
| Valores distintos | Cuatro valores es un conjunto de chips; cuatro mil es un cuadro de búsqueda |
| Longitud: mín. / media / p95 / máx. | La media oculta el desbordamiento: dimensiona el contenedor para p95 y decide deliberadamente qué hace la cola |
| Cobertura entre registros | Una tarjeta que se activa para el 1.6% de los registros es un estado vacío con una excepción rara |
| Cardinalidad por padre | Una nota por persona es un párrafo; veinte es una lista con sus propios elementos interactivos |
| Presencia de fecha | No puedes mostrar obsolescencia para un campo que no lleva fecha |
| Vocabulario | Texto libre con ocho redacciones de la misma idea necesita normalización, no representación |
| Existe un comparador | Un número desnudo es ilegible — ver más abajo |
Declara lo que encontraste antes de proponer el diseño, en números.
Cada número en pantalla necesita algo con lo que compararse
52 notas no le dice nada al lector: no puede saber si es mucho. 52 notas (mediana 4)
es un hallazgo. Antes de mostrar cualquier recuento, total o puntuación, encuentra su comparador
— una mediana, un objetivo, el período anterior, o el resto del conjunto — y muéstralos juntos. Si no
existe un comparador, eso es evidencia de que el número no debería estar en pantalla.
El caso degenerado es un número que nunca varía: un recuento verdadero para cada registro se lee como un hallazgo y es ruido.
Paso 2: hacer bocetos de las opciones, luego construir
Para cualquier cosa con forma de tarjeta, produce varios bocetos estáticos a partir de registros reales y deja que la persona elija. Construye solo después de eso.
- Di en una línea qué optimiza cada opción y qué cuesta
- Los bocetos son HTML desechable, no un componente — no los conectes
Bocetos de seis estados, no uno
Diseña cada estado en el que puede estar la vista, cada uno a partir de un registro real:
| Estado | Dibújalo a partir de |
|---|---|
| Ideal | El registro típico — el de la mediana, no el que elegiste tú |
| Vacío | Un registro sin nada en el campo, y una cuenta nueva sin ningún registro |
| Parcial | Algunos campos llenos, otros no — en datos reales este es el caso común, no la excepción |
| Carga | Lo que ocupa el espacio antes de que lleguen los datos, con el tamaño que tendrán los datos |
| Error | La obtención falló, o el valor está malformado y no se puede mostrar |
| Hecho | Lo que confirma que una acción ofrecida por la vista realmente ocurrió |
Luego el caso de estrés
Los extremos de volumen (el más ocupado, el típico, el vacío) no son los únicos extremos. Un caso de estrés son datos que están presentes, bien formados y son dolorosos: el nombre que el campo distorsiona, el registro cuyo estado hace que una etiqueta alegre sea incorrecta, la persona cuya cuenta eliminada el resumen sigue contando. Elige el único registro que más avergonzaría a esta vista y muéstralo.
Varias tarjetas en una página: una clave para todas
Un lector aprende el significado de un color en la primera tarjeta y lo aplica a cada tarjeta posterior. Por lo tanto, antes de dibujar cualquier tarjeta en una página con varias, escribe una tabla de categorías para toda la página: el nombre canónico, un orden fijo y un color para cada categoría. Cada tarjeta, leyenda y tooltip la usa.
- Una categoría, un color; un color, una categoría. Un color pertenece a su categoría incluso en tarjetas donde esa categoría está ausente. Usarlo para otra cosa, incluso en una tarjeta que nunca muestra la original, le dice al lector que las dos son lo mismo.
- Un nombre por categoría. "Salud Global y Desarrollo" en una tarjeta y "Desarrollo Global y Salud" en la siguiente hace que el lector se pregunte si son dos categorías.
- Una taxonomía donde las tarjetas cortan los mismos registros. Antes de que una tarjeta añada su propio grupo, verifica si se fusiona en una categoría que la página ya tiene. Si una tarjeta realmente necesita una división más fina, da a las subcategorías tonos del color de la categoría principal, no colores nuevos.
- Las categorías que realmente son diferentes obtienen colores no usados, más un subtítulo que diga que el desglose es diferente. Nunca reutilices un color que la página ya le ha dado a otra categoría.
- El mismo orden en cada leyenda, con "Otros" siempre al final y siempre el mismo gris neutro.
Terminado cuando enumerar cada par (etiqueta, color) en la página dé una correspondencia uno a uno. Busca en el marcado o la hoja de estilo los valores de color, no la captura de pantalla renderizada.
Reglas de representación que surgen de los datos
- El estado vacío hace trabajo. "No hay notas aún" es un callejón sin salida. Di por qué está vacío y qué lo llena. Un estado vacío que un usuario encuentra el primer día es incorporación (onboarding) y vale la pena diseñarlo.
- Números en una tabla: alineados a la derecha, cifras tabulares (
font-variant-numeric: tabular-nums), una precisión para toda la columna, unidades en el encabezado en lugar de repetidas en cada celda. La regla 13 depractical-chartstiene el resto: sin cuadrícula, una fila clave resaltada, barras en línea. - El orden predeterminado es una decisión de diseño. Los registros que llegan en orden de clave primaria es la ausencia de uno.
Errores comunes
| Error | Qué ocurre |
|---|---|
| Diseñar a partir del esquema | La columna existe; los datos no |
| Construir sin nombrar una decisión | Todo recibe el mismo peso, porque nada tiene una razón para ser más grande |
| Darle al campo más fácil la mayor prominencia | El diseño describe el esquema, no el trabajo |
| Mostrar un número sin nada con lo que compararlo | El lector no puede saber si es bueno y deja de mirar |
| Contar algo que siempre es verdad | Un recuento que nunca varía se lee como un hallazgo y es ruido |
| Confiar en un plan escrito antes de ver los datos | Construyes lo que el plan nombró, no lo que los datos respaldan |
| Bocetear solo el estado ideal | El diseño colapsa en el registro que no tiene nada, o la mitad de algo |
| Probar solo extremos de volumen | La vista sobrevive al registro más grande y humilla a alguien en uno normal |
| Construir una opción porque se describió primero | La persona no puede elegir lo que nunca se le mostró |
| Elegir colores y etiquetas tarjeta por tarjeta | El mismo azul significa dos cosas en una página, y el lector dibuja un vínculo que no existe |
De dónde vienen las partes no obvias
- Primero la decisión, y prominencia según el peso de la decisión — Stephen Few, Information Dashboard Design
- Un número necesita un comparador — Few nuevamente, sobre el contexto como lo que hace que un número signifique algo
- Los seis estados — Scott Hurff, UI Stack
- Casos de estrés — Eric Meyer y Sara Wachter-Boettcher, Design for Real Life