Frontend, interfaces gráficas y usabilidad

Frontend, interfaces gráficas y usabilidad
1. Fundamentos de experiencia y flujo
  1. Interacción humano–computador
    1. Modelos mentales y expectativas del usuario
    2. Affordances y señales de uso
    3. Feedback inmediato y retroalimentación visible
    4. Latencia percibida y sensación de control
    5. Mapeo directo entre acción e impacto
    6. Coste cognitivo de uso
    7. Errores prevenibles vs recuperables
    8. Fitts’ Law y distancia de objetivos
    9. Ley de Hick y sobrecarga de opciones
    10. Memoria de trabajo y carga visual
  2. Flujos de usuario
    1. Objetivo primario de la tarea
    2. Happy path vs edge cases
    3. Pasos obligatorios vs opcionales
    4. Minimización de fricción
    5. Puntos de abandono
    6. Estados previos y siguientes (contexto antes/después)
    7. Flujo lineal vs ramificado
    8. Recuperación tras interrupción
    9. Continuidad entre dispositivos
    10. Persistencia parcial de progreso
  3. Estados de la interfaz
    1. Estado inicial / vacío
    2. Estado cargando
    3. Estado con datos
    4. Estado sin resultados / vacío significativo
    5. Estado de error y recuperación
    6. Estado parcialmente interactivo / deshabilitado
    7. Estado confirmado / éxito
    8. Estado pendiente / en progreso
    9. Estados transitorios vs persistentes
    10. Estados locales vs globales de la app
2. Interacción y comunicación con la persona usuaria
  1. Arquitectura visual
    1. Jerarquía visual (peso, tamaño, contraste)
    2. Tipografía y escala modular
    3. Uso de color funcional
    4. Iconografía semántica
    5. Espaciado y ritmo visual
    6. División en zonas funcionales (navegación / contenido / acciones)
    7. Patrones de lectura F/Z
    8. Enfoque en lo accionable vs lo informativo
    9. Señales de accesibilidad visual
    10. Consistencia entre pantallas
  2. Patrones de interacción
    1. Selección (click/tap/drag)
    2. Búsqueda y filtrado
    3. Edición inline
    4. Confirmación explícita y undo
    5. Formularios paso a paso (wizards)
    6. Navegación tabular / pestañas / acordeones
    7. Menús contextuales
    8. Hover vs long-press vs right-click
    9. Gestos táctiles
    10. Acciones masivas / edición en lote
  3. Microinteracciones y percepción
    1. Animaciones pequeñas con intención funcional
    2. Indicadores de carga no bloqueantes
    3. Hover states / pressed states
    4. Vibración háptica y feedback táctil
    5. Sonidos sutiles de confirmación o error
    6. Indicadores de “escribiendo…” o “enviando…”
    7. Reacciones visuales inmediatas a entradas del usuario
    8. Confirmaciones no modales (toasts)
    9. Transiciones suaves entre vistas relacionadas
    10. Micromensajes de ayuda en contexto
  4. Notificaciones y gestión de atención
    1. Notificaciones locales en la app
    2. Notificaciones push
    3. Urgencia vs ruido
    4. Priorización visual (color, posición, persistencia)
    5. Centro de notificaciones histórico
    6. Modo silencioso / no molestar
    7. Alertas bloqueantes vs no bloqueantes
    8. Confirmaciones requeridas vs informativas
    9. Relevancia personalizable por el usuario
    10. Caducidad de la notificación
  5. Descubribilidad y búsqueda
    1. Etiquetado claro de acciones
    2. Tooltips y ayudas inline
    3. Búsqueda global en la interfaz
    4. Atajos de teclado visibles
    5. Tutorial progresivo (no front-load)
    6. Ejemplos prellenados (placeholders significativos)
    7. Demostraciones guiadas (“try it” interactivo)
    8. Estado inicial educativo (empty state instructivo)
    9. Secciones “qué hay de nuevo”
    10. Destacar funcionalidades avanzadas sin bloquear las básicas
  6. Contenido en la interfaz
    1. Microcopy claro y directo
    2. Lenguaje inclusivo
    3. Evitar tecnicismos innecesarios
    4. Evitar culpar al usuario en errores
    5. Indicar causa y acción posible
    6. Texto contextual, no genérico
    7. Tono consistente con la marca
    8. Evitar muros de texto
    9. Estados vacíos con instrucciones accionables
    10. Etiquetas cortas y accionables en botones
  7. Onboarding y aprendizaje continuo
    1. Progresivo y contextual, no tutorial gigante inicial
    2. Modalidad guía interactiva paso a paso
    3. Señalización visual de “nuevo”
    4. Estados demo con datos ficticios
    5. Checklist de primeros pasos
    6. Recordatorios suaves de funcionalidades clave
    7. Onboarding distinto según rol/permiso
    8. Re-onboarding tras grandes rediseños
    9. Centro de ayuda integrado
    10. Aprendizaje por repetición guiada
3. Capa de presentación y composición de UI
  1. Renderizado y composición de interfaz
    1. Árbol de nodos / árbol de vistas
    2. Layout responsivo (adaptación a viewport)
    3. Flujo de composición (layout → paint → composite)
    4. Reutilización de vistas y subárboles
    5. Virtual DOM / reconciliación
    6. Server-Side Rendering (SSR)
    7. Static Site Generation (SSG)
    8. Hydration parcial / progresiva
    9. Islands architecture
    10. Rendering incremental bajo demanda
  2. Gestión de estado local de UI
    1. Estado controlado vs no controlado
    2. Formularios controlados
    3. Estados efímeros (focus, hover, expanded)
    4. Estados derivados / memoización
    5. Estructuras inmutables para cambios predecibles
    6. Local reducers / stores por componente
    7. Sincronización de estado con URL
    8. Restauración de estado al volver atrás
    9. Persistencia temporal en memoria o storage local
    10. Rollback visual tras error en acción
  3. Estabilidad visual
    1. Evitar layout shift inesperado (CLS)
    2. Reservas de espacio para contenido que carga tarde
    3. Evitar saltos al inyectar publicidad o banners
    4. Animaciones suaves en lugar de parpadeos
    5. Carga de fuentes sin parpadeo excesivo (FOIT/FOUT)
    6. Mantener foco del teclado estable
    7. Mantener scroll position entre renders
    8. Indicadores de “cargando” que no bloqueen todo el layout
    9. Evitar overlays intrusivos que muevan el contenido
    10. Progresión visual comprensible al usuario
4. Arquitectura de la aplicación frontend
  1. Modelado de componentes
    1. Componentes presentesacionales vs contenedores
    2. Props y entrada explícita
    3. Encapsulación de comportamiento
    4. Componentes reusables y componibles
    5. Componentes controlados vs no controlados
    6. Aislamiento de efectos secundarios
    7. Separación entre vista y lógica de negocio
    8. Patrones de render props / slots / children function
    9. Diseño de componentes atómicos, moleculares, organizacionales
    10. Versionado / deprecación de componentes UI
  2. Gestión de estado compartido
    1. Estado global de aplicación
    2. Stores centralizados
    3. Context propagation
    4. Reducción de renders por suscripción selectiva
    5. Estados cacheados por recurso remoto
    6. Normalización de datos en el cliente
    7. Invalidación de caché coherente
    8. Sincronización de estado entre pestañas
    9. Control de concurrencia en actualizaciones
    10. Persistencia selectiva (localStorage / IndexedDB)
  3. Gestión de navegación y flujo
    1. Routing declarativo
    2. Routing basado en URL / hash / memoria
    3. Rutas protegidas (auth)
    4. Rutas anidadas
    5. Lazy loading de rutas
    6. Guardas de navegación (confirmar salida, cambios sin guardar)
    7. Deep linking
    8. Sincronización de la UI con la URL (query params como estado)
    9. Navegación optimista (UI antes de confirmación real)
    10. Manejo de estados intermedios entre pantallas
  4. Integración con el sistema de diseño
    1. Uso de tokens de diseño (color, espaciado, tipografía)
    2. Librerías de componentes compartidas
    3. Versionado del design system
    4. Theming (modo oscuro / marca blanca)
    5. Compatibilidad visual entre equipos y productos
    6. Consistencia en interacciones (hover, focus, active)
    7. Alineación con guías de accesibilidad
    8. Procesos de aprobación de nuevos patrones
    9. Detección temprana de drift visual
    10. Eliminación de componentes duplicados
  5. DSL de interfaz y plantillas
    1. Componentes declarativos
    2. Templates reutilizables para vistas repetidas
    3. Configuración basada en esquemas (schema-driven UI)
    4. Formularios generados por metadatos
    5. Renderizado condicional declarativo
    6. Builders visuales internos
    7. Layouts parametrizables
    8. Internacionalización integrada en las plantillas
    9. Testing snapshot de vistas declarativas
    10. Evolución controlada sin romper pantallas existentes
5. Datos, red y sincronización
  1. Consumo de APIs
    1. Fetch / XHR / gRPC-web
    2. Manejo de errores de red
    3. Retries con backoff
    4. Cache en cliente
    5. Normalización de respuestas en el cliente
    6. Transformación de wire format a modelo interno
    7. Manejo de paginación
    8. Streams de datos vs requests puntuales
    9. Seguridad de tokens/autorización por request
    10. Firma/verificación de integridad de payload
  2. Sincronización con backend
    1. Lecturas frescas vs lecturas cacheadas
    2. Invalidación reactiva
    3. Actualizaciones delta / patch
    4. Sincronización periódica
    5. Sincronización bajo demanda
    6. Colas locales de cambios pendientes
    7. Conflictos de escritura simultánea
    8. Resolución de conflictos en cliente
    9. Confirmación optimista y rollback visual
    10. Versionado de recursos
  3. Tiempo real y concurrencia
    1. Suscripción a eventos del servidor
    2. Indicadores de presencia en vivo
    3. Edición simultánea de la misma entidad
    4. Estados de “alguien está escribiendo”
    5. Conflictos de edición paralela
    6. Bloqueo suave vs bloqueo duro de recursos
    7. Difusión por canal / sala compartida
    8. Diferenciación entre cambios locales/remotos
    9. Update incremental de vistas sin recargar
    10. Priorización de eventos críticos vs ruido
  4. Modo offline y resiliencia de red
    1. Cacheado local de datos críticos
    2. Cola de operaciones pendientes offline
    3. Reintento al reconectar
    4. Indicador de estado offline/online
    5. Desactivación de acciones que requieren conexión
    6. Resolución de inconsistencias al volver online
    7. Persistencia en IndexedDB / almacenamiento local
    8. Políticas de expiración de datos offline
    9. Uso de Service Workers
    10. Experiencia degradada pero utilizable
  5. Escalabilidad con datos en vivo
    1. Paginación incremental infinita
    2. Virtualización de listas
    3. Renderizado parcial de tablas grandes
    4. Throttling y debouncing de actualizaciones
    5. Agrupación de eventos en lotes
    6. Priorización visual de cambios recientes
    7. Indicadores de “hay más cambios nuevos”
    8. Evitar rerender global ante cambios locales
    9. Suscripción selectiva por canal / sala / recurso
    10. Evitar sobrecargar el main thread
6. Rendimiento y experiencia percibida
  1. Costos de renderizado
    1. Layout thrashing
    2. Reflows no necesarios
    3. Repaint excesivo
    4. Cálculo pesado en el hilo principal
    5. Uso de memorization / memo / pure components
    6. Batching de actualizaciones
    7. Suspense / carga diferida de partes costosas
    8. Animaciones aceleradas por GPU
    9. Uso de Web Workers para trabajo pesado
    10. Limpieza de listeners y timers
  2. Entrega y carga inicial
    1. Bundle splitting
    2. Lazy loading por ruta o por componente
    3. Preload / prefetch selectivo
    4. Compresión de recursos
    5. Minimización de CSS y JS
    6. Carga progresiva de imágenes
    7. Uso eficiente de fuentes web
    8. Prioridad de recursos críticos
    9. Evitar JS bloqueante en el head
    10. Edge caching / CDN
  3. Interactividad percibida
    1. Time to Interactive
    2. Respuesta inmediata a input
    3. Estados de “procesando” claros
    4. Transiciones suaves entre pantallas
    5. Animaciones breves para evitar sensación de congelamiento
    6. Minimizar el tiempo de bloqueo del main thread
    7. Feedback optimista
    8. Evitar scroll jank
    9. Evitar “UI muerta” tras click
    10. Priorizar respuesta de acciones sobre tareas en background
  4. Presupuestos de performance
    1. Límite de peso de bundle
    2. Límite de scripts de terceros
    3. Límite de tiempo de bloqueo del hilo principal
    4. Límite de CLS / LCP / INP
    5. Cuotas de consumo de CPU en dispositivos móviles
    6. Cuotas de memoria en dispositivos de gama baja
    7. Comportamiento aceptable bajo red lenta
    8. Métricas mínimas de respuesta a input
    9. Tiempos máximos de render incremental
    10. Alertas automáticas cuando se rompe el presupuesto
7. Accesibilidad, confianza y ética
  1. Accesibilidad e inclusión
    1. Navegación por teclado completa
    2. Focus visible
    3. Texto alternativo en imágenes
    4. Contraste suficiente
    5. Roles y ARIA adecuados
    6. Lectores de pantalla
    7. Evitar dependencias exclusivas de color
    8. Ajustes de tamaño de texto
    9. Animaciones reducidas / modo de accesibilidad
    10. Formularios etiquetados correctamente
  2. Internacionalización y localización
    1. Soporte multilenguaje
    2. Formatos locales (fecha, moneda, separadores)
    3. Plurales y géneros
    4. LTR y RTL
    5. Texto incrustado en imágenes
    6. Evitar suposiciones culturales rígidas
    7. Zonas horarias y contexto temporal
    8. Ajustes regionales de legalidad y cumplimiento
    9. Copias adaptadas, no solo traducidas
    10. Evitar anglicismos técnicos opacos sin explicación
  3. Seguridad y confianza
    1. Indicadores claros de acciones destructivas
    2. Confirmaciones para operaciones críticas
    3. Manejo seguro de credenciales
    4. Indicadores visuales de cifrado / sesión segura
    5. Prevención de phishing visual interno
    6. Prevención de clickjacking
    7. Bloqueo de UI tras inactividad prolongada
    8. Feedback al usuario sobre permisos solicitados
    9. Explicación del uso de datos personales
    10. Estados de sesión y cierre de sesión claros
  4. Cumplimiento y datos sensibles
    1. Minimización de datos visibles
    2. Redacción parcial / enmascaramiento de datos
    3. Flujo seguro para datos personales o financieros
    4. Historial de acciones del usuario
    5. Confirmación de identidad reforzada para ciertas acciones
    6. Consentimiento explícito para almacenamiento
    7. Indicaciones legales visibles cuando corresponde
    8. Auditoría de acceso a información sensible
    9. Retención / expiración de datos visibles
    10. Descarga / portabilidad de datos personales
  5. Ética de interacción
    1. Evitar patrones oscuros (dark patterns)
    2. Evitar manipulación emocional
    3. Claridad sobre el costo real de las acciones
    4. Respeto al tiempo del usuario
    5. Preguntar vs asumir consentimiento
    6. Evitar adicción por gamificación excesiva
    7. Evitar obligar a compartir datos innecesarios
    8. Transparencia sobre uso de IA / automatización
    9. Evitar sesgos en presentación de información
    10. Respeto a límites cognitivos y sensoriales
8. Sistema de diseño y gobernanza de experiencia
  1. Sistema de diseño
    1. Tokens de diseño
    2. Librería unificada de componentes
    3. Patrones de interacción normados
    4. Guía de uso de color y tipografía
    5. Espaciado y grid
    6. Iconografía estándar
    7. Estados de error / éxito consistentes
    8. Animaciones estandarizadas
    9. Librería accesible por defecto
    10. Versionado del sistema y changelog
  2. Mantenibilidad y deuda de experiencia
    1. Componentes duplicados
    2. Inconsistencias de estilo
    3. Patrones legacy no accesibles
    4. Elementos experimentales sin consolidar
    5. Divergencias entre equipos
    6. Dependencia en overrides ad-hoc
    7. Fragmentación de layouts
    8. Falta de documentación de uso correcto
    9. Falta de eliminación de patrones obsoletos
    10. Acumulación de hacks visuales
  3. Gobernanza del diseño
    1. Comité o figura responsable del diseño global
    2. Proceso de propuesta de nuevos patrones
    3. Revisión cruzada entre diseño y ingeniería
    4. Aprobación de cambios que afectan accesibilidad
    5. Control de consistencia de marca
    6. Auditorías periódicas de experiencia
    7. Mecanismo de feedback de equipos satélite
    8. Roadmap de evolución del sistema
    9. Comunicación de cambios mayores
    10. Deprecación planificada de componentes viejos
  4. Estándares y guías de interfaz
    1. Guía de tono y voz
    2. Guía de microcopy
    3. Guía de formularios y validaciones
    4. Guía de estados de error
    5. Guía de confirmaciones y diálogos
    6. Guía de interacción con teclado
    7. Guía de accesibilidad mínima aceptable
    8. Guía de navegación y arquitectura de información
    9. Guía de notificaciones
    10. Guía de componentes críticos reutilizables
9. Calidad y validación
  1. Testing
    1. Pruebas unitarias de componentes
    2. Pruebas de integración de vistas completas
    3. Pruebas end-to-end en navegador real
    4. Snapshots visuales / regresión visual
    5. Pruebas de accesibilidad automatizadas
    6. Pruebas de performance en cliente real
    7. Pruebas de contratos con backend mockeado
    8. Tests deterministas de edge cases
    9. Simulación de latencia / fallo de red
    10. Pruebas cross-browser / cross-device
  2. Pruebas de experiencia y usabilidad
    1. User testing moderado
    2. User testing no moderado
    3. Pruebas A/B
    4. Heatmaps y mapas de clic
    5. Grabaciones de sesión con consentimiento
    6. Encuestas in-product
    7. Medición de tasa de éxito de tarea
    8. Tiempo hasta completar tarea crítica
    9. Tasa de abandono de flujo
    10. Fricción percibida y feedback cualitativo
  3. Versionado y mantenibilidad de cambios
    1. Lanzamientos graduales (rollout progresivo)
    2. Feature flags
    3. Canary release por segmento de usuarios
    4. Métricas antes / después del cambio
    5. Reversibilidad rápida (rollback)
    6. Compatibilidad con datos locales ya guardados
    7. Versionado de contratos visuales internos
    8. Documentación de cambios notables para soporte
    9. Comunicación de cambios al usuario final
    10. Auditoría de riesgo previo al merge
10. Colaboración y multiusuario
  1. Presencia en tiempo real (quién está viendo/editando)
    1. Indicadores de cursor remoto
    2. Avatares de presencia simultánea
    3. Estados “escribiendo…” por usuario
    4. Notificación de entrada/salida de sala
    5. Señalización de visualización vs edición activa
    6. Zonas de trabajo reservadas
    7. Estado de conexión de cada colaborador
    8. Sesiones de co-edición efímeras
    9. Anotaciones contextuales en vivo
    10. Escalamiento visual con muchos usuarios concurrentes
  2. Resolución de conflictos de edición simultánea
    1. Locking optimista
    2. Locking pesimista
    3. Merge automatizado por campo
    4. CRDTs
    5. Historial de cambios por usuario
    6. Alertas de conflicto en tiempo real
    7. Vista previa del contenido remoto antes de aceptar
    8. “Última palabra gana” vs reconciliación inteligente
    9. Revertir cambios remotos no deseados
    10. Estado intermedio de reconciliación
  3. Historial compartido y atribución por persona / rol
    1. Línea de tiempo de cambios
    2. Autoría visible por elemento
    3. Comentarios y discusión inline
    4. Revisión y aprobación formal
    5. Roles (lector / comentarista / editor / aprobador)
    6. Responsabilidad trazable
    7. Restaurar versiones anteriores
    8. Comparación visual diff entre versiones
    9. Auditoría para cumplimiento
    10. Señalización de cambios críticos pendientes de revisión
11. Operación y evolución del frontend
  1. Observabilidad y métricas
    1. Métricas reales de usuario (RUM)
    2. Latencia percibida de interacción
    3. Tiempos de carga inicial y navegación interna
    4. Crash reporting en cliente
    5. Registros de errores JS
    6. Alertas de degradación percibida
    7. Métricas de accesibilidad en producción
    8. Métricas de conversión y abandono de flujo
    9. Seguimiento de performance por dispositivo/red
    10. Segmentación por versión desplegada
  2. Mejora guiada por evidencia
    1. Priorización basada en impacto real en usuarios
    2. Iteración sobre puntos de fricción más altos
    3. Eliminación de features no usadas
    4. Ajuste fino de microinteracciones
    5. Cambios escalonados probados con cohorts
    6. Roadmap dirigido por datos y feedback cualitativo
    7. Observación de comportamiento post-cambio
    8. Mecanismos de feedback in-product
    9. Telemetría ética y con consentimiento
    10. Revisión cruzada diseño–producto–ingeniería