Dashboard Composition

Las tarjetas KPI son el punto de entrada visual de cualquier dashboard. El número principal debe dominar la tarjeta con un tamaño de fuente 2-3x mayor que el resto del texto, acompanado de una etiqueta descriptiva, indicador de tendencia con flecha y porcentaje, sparkline en miniatura, y texto comparativo del periodo anterior. Sin esa jerarquía, el usuario no puede hacer un escaneo rápido del estado general.

Un dashboard con ritmo visual uniforme usa CSS Grid con gaps consistentes, border-radius identico, sombras uniformes y padding regular en todas las tarjetas. Cuando un widget requiere más espacio, ocupa columnas adicionales dentro del mismo grid, no rompe la alineación. La inconsistencia visual en sombras, bordes o espaciado genera ruido cognitivo y reduce la confianza en la interfaz.

Los filtros de un dashboard deben ser globales y estar ubicados en una barra persistente sobre los widgets. Si cada widget tiene sus propios filtros de fecha o segmento, el usuario pierde la visión unificada y no puede comparar datos entre widgets en el mismo periodo. La barra de filtros debe incluir selector de rango de fechas, segmentación por audiencia o canal, y campo de busqueda.

Cada widget de un dashboard debe cargar de forma independiente mostrando un skeleton shimmer que replica la forma de su contenido final. Esto permite al usuario consumir los widgets que ya cargaron mientras otros terminan. Un spinner de página completa bloquea toda la interfaz y no comunica progreso real. Los skeletons deben tener la misma altura y estructura que el contenido final para evitar saltos de layout.

Un chart embebido en un widget de dashboard debe incluir título descriptivo, leyenda inline con puntos de color, ejes Y con unidades y ejes X con fechas legibles. El área del chart debe tener un gradiente sutil que conecte la línea con la base, y un indicador de tooltip para explorar valores puntuales. Sin ejes, leyenda o título, el chart es decorativo, no funcional.

Un feed de actividad efectivo agrupa las entradas por periodo temporal (hoy, ayer, esta semana) con encabezados de grupo visibles. Cada entrada necesita un avatar con iniciales, texto de acción con el nombre del actor en bold, timestamp relativo, y una línea vertical conectora que establezca la secuencia. Sin agrupación ni conectores, el feed se convierte en una lista amorfa sin sentido temporal.

Un dashboard vacio es una oportunidad de onboarding, no un espacio en blanco. Debe mostrar tarjetas sugeridas con vista previa del widget, nombre descriptivo, una breve explicación de lo que muestra, y un botón de acción claro. El encabezado debe invitar a personalizar. Un dashboard completamente vacio con solo un botón "+" en una esquina no comunica posibilidades y genera abandono.

El header de un dashboard debe comunicar contexto inmediato: título descriptivo, subtitulo con el alcance o periodo, timestamp de última actualización con indicador visual de frescura, y acciones relevantes como refrescar o exportar. Un header con solo un título plano desperdicia espacio horizontal valioso y obliga al usuario a buscar acciones básicas en otros lugares de la interfaz.