Los tableros de analíticas necesitan presentar información compleja rápidamente. Estos patrones garantizan la consistencia en todo nuestro producto mientras optimizan la comprensión rápida y la toma de decisiones.
Tarjetas de métricas
Las tarjetas de KPI son la forma principal en que los usuarios consumen métricas de alto nivel:
- Número principal: Tipografía grande y negrita (32-48px) dirige la vista inmediatamente al valor clave.
- Indicador de comparación: Flecha verde hacia arriba o roja hacia abajo con el cambio porcentual respecto al período anterior.
- Minigráfico opcional: Un pequeño gráfico en línea que muestra la tendencia de 7 días proporciona contexto sin sobrecargar.
- Claridad de etiqueta: Los nombres de métricas son cortos (máximo 2-3 palabras) con un icono de información para una explicación detallada.
Selectores de rango de tiempo
Controles de tiempo consistentes en todas las vistas del tablero:
- Opciones predefinidas: Hoy, Ayer, Últimos 7 días, Últimos 30 días, Últimos 90 días, Últimos 12 meses.
- Rango personalizado: Selector de fecha con calendario visual para una selección precisa.
- Activar comparación: Un clic para superponer datos del período anterior en los gráficos.
- Persistencia en URL: El rango seleccionado se almacena en los parámetros de URL para estados de tablero compartibles.
Patrones de filtros
Los filtros reducen los datos sin abandonar la vista actual:
- Barra de filtros: Fila horizontal de filtros desplegables para dimensiones comunes (país, dispositivo, fuente).
- Píldoras de filtro activo: Los filtros seleccionados aparecen como píldoras eliminables que muestran el estado actual.
- Constructor de segmentos: Modo avanzado para condiciones complejas con lógica AND/OR.
- Segmentos guardados: Los usuarios pueden guardar y nombrar combinaciones de filtros para reutilización rápida.
Indicadores en tiempo real
Los datos en vivo necesitan señales visuales claras:
- Punto pulsante: Un punto animado verde indica conexión activa al flujo de datos en tiempo real.
- Última actualización: Marca de tiempo que muestra "Actualizado hace 3s" con actualización automática.
- Resaltado de nuevos datos: Resaltar brevemente las filas o métricas que acaban de cambiar (destello amarillo sutil).
- Estado de conexión: Notificación emergente si la conexión en tiempo real se interrumpe, con intento de reconexión.
Estados vacíos
Lo que ven los usuarios cuando aún no hay datos:
- Ilustración útil: Gráfico amigable que coincide con el contexto (gráfico sin puntos de datos, lista vacía).
- Explicación clara: Por qué no hay datos: "Sin visitantes en este rango de tiempo" vs "El seguimiento aún no está instalado".
- Indicación de acción: Botón o enlace para resolver el estado vacío (instalar script, cambiar rango de fechas).
- Opción de datos de muestra: Para nuevos usuarios, ofrecer ver datos de demostración para entender la interfaz.
Estados de carga
El rendimiento percibido importa tanto como la velocidad real:
- Pantallas esqueleto: Formas grises de marcador de posición que coinciden con el diseño esperado reducen el tiempo de carga percibido.
- Carga progresiva: Mostrar datos en caché inmediatamente y actualizar con datos frescos cuando estén disponibles.
- Animación escalonada: Los elementos esqueleto se animan en secuencia para indicar actividad.
- Manejo de tiempo de espera: Después de 10 segundos, mostrar opción de reintento en lugar de carga infinita.
Patrones de tablas
Tablas de datos para exploración detallada:
- Columnas ordenables: Hacer clic en los encabezados para ordenar, con indicadores claros de ascendente/descendente.
- Encabezado fijo: Los encabezados de columna permanecen visibles mientras se desplazan tablas largas.
- Acciones al pasar el cursor: Las acciones de fila (ver, editar, eliminar) aparecen al pasar el cursor, ocultas por defecto.
- Paginación vs. infinita: Usar paginación para exploración de datos, desplazamiento infinito para feeds en tiempo real.
Navegación de profundización
Moverse de la vista general al detalle:
- Clic para filtrar: Hacer clic en un segmento del gráfico filtra todo el tablero a esa dimensión.
- Ruta de navegación: Muestra la ruta de profundización actual con enlaces para volver a niveles superiores.
- Detalle en panel lateral: Hacer clic en una fila abre un panel deslizante con todos los detalles sin perder el contexto.
- Navegación hacia atrás: El botón de retroceso del navegador funciona correctamente a través de los estados de profundización.