editorial notícias

Interfaces industriales: del piso de producción al front-end

Un estudio divulgado en 2022 por la Confederación Nacional de la Industria (CNI) indica que el 69 % de las empresas industriales ya han utilizado al menos una tecnología digital, de una lista de 18 categorías. Sin embargo, la mayoría de ellas utilizaba una cantidad reducida de estas herramientas, lo que indica una fase incipiente en el proceso de digitalización:

Uso de tecnologías digitales en industrias

Fuente de referencia: Confederación Nacional de la Industria (CNI)

El profesor de la Fundación Vanzolini, Ricardo Caruso, define: “[…] desde el punto de vista de la producción industrial, la conectividad se refiere a la capacidad de integrar digitalmente equipos humanos y maquinaria, posibilitando el intercambio continuo de datos a lo largo del proceso productivo”.

De este modo, la conectividad en el entorno industrial contribuye a decisiones más ágiles y basadas en datos precisos. Los eventos de la línea de producción pasan a ser visualizados en tiempo real por todas las áreas.

Como ejemplo, Caruso menciona que el área de calidad puede abordar una desviación tan pronto como sea detectada por el piso de producción. La interrupción de un equipo puede generar automáticamente una orden de mantenimiento, mientras que, de manera simultánea, notifica al equipo de planificación sobre la indisponibilidad.

En septiembre de 2021, la Agencia Brasileña de Desarrollo Industrial (ABDI) publicó resultados de un muestreo de soluciones de TI para las industrias. Software de gestión avanzada de la producción y soluciones de big data son utilizados por el 70 % y el 19 % de las industrias, respectivamente:

Fuente de referencia: Agencia Brasileña de Desarrollo Industrial (ABDI)

Garantizar una experiencia de usuario de alta calidad es esencial para la sostenibilidad y el éxito de cualquier sistema web a lo largo del tiempo. En este sentido, las métricas de front-end miden la experiencia real del usuario en relación con la velocidad de carga, la capacidad de interacción y la estabilidad visual de una página:

Métricas de front-end

Para Marc Reinan Gomes, posgraduado en Liderazgo Técnico: “[…] Las Core Web Vitals se han convertido en nuestro referente para medir la calidad de la experiencia en nuestro producto. Estas métricas nos dan una visión clara de dónde nuestra aplicación está fallando o prosperando.”

Paralelamente, las métricas de observabilidad se refieren al monitoreo, medición y comprensión del estado interno de un sistema o aplicación, analizando sus resultados, logs y métricas de desempeño. Marc explica: “[…] implementar observabilidad significa instrumentar nuestro código para capturar no solo errores, sino también patrones de uso, cuellos de botella de rendimiento y puntos de fricción en la experiencia del usuario.”

Front-end y usabilidad en el entorno industrial

Para ejemplificar el proceso de digitalización, es posible utilizar métricas de front-end aplicadas a una plataforma que recolecta datos de maquinaria industrial, con énfasis en el rendimiento y la usabilidad de la interfaz. Estas métricas son esenciales para garantizar que los usuarios tengan una experiencia fluida y eficiente durante el uso de alguna página, plataforma o sistema:

Métrica

Valor ideal

Valor real

Impacto observado

LCP

≤ 2,5 s

2,2 s

El gráfico de productividad se carga rápidamente en la pantalla principal, generando una buena impresión.

INP

≤ 200 ms

180 ms

Los filtros responden de forma ágil a los clics, asegurando una navegación fluida.

CLS

≤ 0,1

0,05

La interfaz permanece estable durante la carga, sin cambios inesperados.

Modelo ficticio con métricas positivas

En cuanto a la usabilidad, en este ejemplo, es posible concluir:

  • La retroalimentación visual es instantánea tras interacciones, como la selección de equipos o fechas, mejorando la experiencia del operador;
  • La carga de datos en tiempo real fue optimizada para no bloquear elementos esenciales de la interfaz;
  • El layout es responsivo y estable, con mínimos desplazamientos, incluso en pantallas más pequeñas como tabletas industriales.

En contrapartida, es posible imaginar un escenario en el que la plataforma en cuestión esté enfrentando problemas de desempeño:

Métrica

Valor ideal

Valor real

Impacto negativo

LCP

≤ 2,5 s

5,8 s

El gráfico de producción tarda en cargar, generando frustración desde la primera interacción.

INP

≤ 200 ms

650 ms

La respuesta lenta de los filtros y visualizaciones crea la impresión de que el sistema se ha congelado.

CLS

≤ 0,1

0,32

Movimientos inesperados durante la carga provocan clics erróneos y pérdida de datos.

Modelo ficticio con métricas negativas

En este caso, sobre la usabilidad es posible concluir:

  • Sensación de lentitud al abrir la plataforma, especialmente en redes industriales con conectividad limitada;
  • Interacciones imprecisas, como hacer clic en botones que cambiaron de posición debido a inestabilidad en el layout;
  • Falta de respuestas rápidas y fiables para la toma de decisiones operativas.

Las fábricas suelen estar ubicadas en zonas industriales con baja densidad urbana, lo que implica ciertas limitaciones. Llevando los ejemplos a la realidad mexicana, en entornos fabriles, la programación para estructurar métricas de front-end exige un enfoque que considere varios factores. La inestabilidad de la conexión, la variabilidad de la infraestructura local, la intermitencia de la conectividad y la diversidad de dispositivos son algunos de ellos.

“[…] La realidad de las redes industriales es muy diferente a la que estamos acostumbrados. Muchas veces trabajamos con conexiones que oscilan entre 3G y banda ancha, y nuestra aplicación debe funcionar bien en ambos escenarios”, comenta Marc Reinan.

Ante estos desafíos, se vuelve aún más relevante seleccionar adecuadamente las herramientas utilizadas para monitorear el desempeño de la aplicación en estos contextos. Para la recolección de datos, se pueden emplear bibliotecas específicas o APIs nativas. Un ejemplo es la JavaScript Performance API, que permite medir automáticamente métricas como tiempo de respuesta, renderizado e interacciones del usuario:

				
					// Midiendo el tiempo de carga
window.addEventListener('load', () => {
  const timing = window.performance.timing;
  const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
  enviarMetrica('page_load_time', pageLoadTime);
});
				
			
Ejemplo ficticio de recolección

Usabilidad y navegación ágil – sin latencia en la línea de producción

Aunque intervienen en momentos distintos de la experiencia del usuario, la usabilidad y la velocidad de navegación impactan directamente en la percepción de eficiencia y calidad de la plataforma. Una consulta en una base de datos extensa puede generar retrasos críticos en la entrega de información, mientras que una navegación lenta puede comprometer el ritmo con el que el usuario interactúa con el sistema.

La espera prolongada por respuestas puede afectar decisiones clave, especialmente en entornos fabriles, donde el tiempo y la precisión de la información son factores estratégicos. Además, la lentitud en estas operaciones puede crear una percepción negativa sobre la estabilidad del sistema, incluso si la falla se limita únicamente a la estructura de datos.

Por otro lado, la velocidad de navegación influye directamente en la experiencia de uso cotidiana, promoviendo un mayor involucramiento con la plataforma. Una interfaz responsiva e intuitiva reduce la carga cognitiva del usuario, incrementa la eficiencia en la ejecución de tareas y contribuye a una percepción positiva del producto en su conjunto.

A partir de la adopción de tecnologías digitales, entre las empresas entrevistadas por la CNI, el 72% reportó un aumento en la productividad diaria. Además, el 60% declaró una mejora significativa en la calidad de los productos o servicios y una reducción en los costos operativos. Marc explica: “[…] cuando optimizas un sistema que se utiliza 24 horas al día por varias personas, cada segundo ahorrado se multiplica exponencialmente.”

Sin embargo, es importante recordar que el rendimiento de navegación y el desempeño en las consultas son aspectos complementarios y optimizar solo uno de ellos no garantiza una buena usabilidad. Para ofrecer una experiencia realmente satisfactoria, es esencial que tanto la estructura de datos como la interfaz sean concebidas de manera integrada, con enfoque en desempeño, fluidez y confiabilidad.

“[…] Uso mucho el concepto de ‘performance percibida’. No siempre puedo hacer que una consulta sea más rápida, pero sí puedo lograr que el usuario sienta que la interfaz está reaccionando mediante skeletons, carga progresiva y retroalimentación adecuada”, menciona Marc.

Conozca más sobre ST-One.

Fique por dentro

Editorial Notícias

ST-One Logotipo

Baixe aqui o material completo e descubra como a ST-One já impactou positivamente parceiros em mais de 23 países.