9. Patrones UX

9.1 Estados vacíos

Nunca una pantalla en blanco. Anatomía: ilustración o icono grande (32-48px, Pizarra) → título que nombra la situación ("Aún no hay proyectos") → línea de ayuda que dice qué ganar al actuar → botón primario con la acción ("Crear el primer proyecto"). El primer estado vacío es onboarding: es la mejor oportunidad de enseñar el producto.

9.2 Carga

Esqueletos para estructura, spinners para acciones, barras para procesos medibles (§8.14). Si tarda más de lo normal, decirlo ("Esto está tardando más de lo habitual…"). Optimismo controlado: las acciones rápidas y seguras (marcar favorito) se reflejan al instante y se revierten si fallan.

9.3 Manejo de errores

Mensaje = qué pasó + por qué (si se sabe) + cómo resolverlo. "No se pudo guardar el informe porque se perdió la conexión. Comprueba tu red y vuelve a intentarlo."
Nunca culpar al usuario, nunca jerga ("Error 500 EConnReset"), nunca callejones sin salida: siempre hay siguiente paso (reintentar, volver, contactar).
Errores de campo junto al campo; errores de sistema como toast persistente o banner; errores de página (404/500) con página propia que ofrece volver al inicio.

9.4 Acciones destructivas

Confirmación proporcional al daño: borrado recuperable → toast con "Deshacer" (mejor que interrumpir); borrado permanente → modal con consecuencia explícita ("Se eliminarán 34 archivos. Esta acción no se puede deshacer."); destrucción mayor (cuenta, proyecto) → escribir el nombre para confirmar.
El botón confirma con el verbo real ("Eliminar proyecto"), nunca "Aceptar". El destructivo nunca es el botón por defecto ni queda donde iría "Guardar".

9.5 Formularios largos y asistentes

Más de ~8 campos o decisiones dependientes → asistente multipaso: indicador "Paso 2 de 4" con nombres, una decisión por paso, "Atrás" siempre disponible sin perder datos, resumen editable antes de confirmar. Guardado de borrador automático si el flujo puede interrumpirse.

9.6 Onboarding

Mostrar, no contar: el primer uso guiado vale más que un tour de 8 globos. Máximo 3 señalizaciones contextuales, descartables, que aparecen cuando la función es relevante. El onboarding nunca bloquea a quien ya sabe.

9.7 Búsqueda y filtrado

Búsqueda global en topbar (atajo / o Ctrl+K); resultados agrupados por tipo.
Filtros como chips removibles visibles sobre los resultados; "Limpiar filtros" siempre presente; la cuenta de resultados se actualiza al aplicar.
Sin resultados = estado vacío con sugerencias ("Revisa la ortografía o intenta con menos filtros").

9.8 Jerarquía y revelación progresiva

Cada vista tiene una acción principal (un solo botón primario), información primaria visible e información secundaria a un clic (acordeón, popover, "Ver más"). Pirámide invertida: primero la conclusión, después el detalle. Reconocimiento sobre recuerdo: opciones visibles antes que comandos memorizados.