Contexto

Diseño de una plataforma de software (“Thermal Vision Theme”) orientada a técnicos de campo e ingenieros de calidad. El objetivo principal fue crear una interfaz capaz de mostrar múltiples streams de video (cámaras ópticas y térmicas) simultáneamente sin sobrecargar cognitivamente al usuario.

Sistema de Diseño Industrial (Dark Theme)

Paleta de Alto Contraste: Uso estricto de colores para señalización industrial. Se definió el Naranja (#FF6B00) como acento principal, Cyan (#00E5FF) para estados de conexión/información y Verde (#39FF14) para indicadores de éxito y video en vivo.
Componentes Visuales: Creación de un visualizador de componentes personalizado en Vue.js (ar_view.vue) con tarjetas e inputs consistentes, adaptados para lectura rápida en ambientes con poca luz.
Microinteracciones de Estado: Animaciones sutiles para transiciones entre conexiones de cámara (ej. “Connecting…”, “Live”) proporcionando retroalimentación visual inmediata.

Retos Técnicos de UI/UX

Rendimiento de Renderizado (UI Performance): Procesamiento de video MJPEG directo en el navegador minimizando el reflujo (reflow) del DOM para garantizar que la interfaz se mantuviera fluida (60 FPS) incluso bajo estrés de red.
Arquitectura de Navegación: Diseño de un Layout capaz de alternar dinámicamente entre canales ópticos y térmicos sin perder el contexto de la información.

Impacto y Resultados

Legibilidad Operativa: El “Thermal Vision Theme” redujo la fatiga visual de los operadores durante jornadas de más de 8 horas.
Efectividad en Campo: Aumento significativo en la velocidad de toma de decisiones al diferenciar temperaturas críticas instantáneamente.