news

Industrial Interfaces: from the shop floor to the front-end

A study released in 2022 by the National Confederation of Industry (CNI) indicates that 69% of manufacturing companies have already adopted at least one digital technology from a list of 18 categories. However, most of these organizations employ only a limited number of such tools, pointing to an early stage in their digital transformation journey:

Use of Digital Technologies in Industry

Reference Source: National Confederation of Industry (CNI)

Professor Ricardo Caruso of Fundação Vanzolini defines: “[…] from the perspective of industrial production, connectivity refers to the ability to digitally integrate teams and equipment, enabling the continuous exchange of data throughout the production process.”

Thus, connectivity within the industrial environment supports faster, data-driven decision-making. Events on the production line become visible in real time across all departments.

As an example, Caruso notes that the quality assurance team can address a deviation as soon as it is detected on the shop floor. An equipment shutdown can automatically trigger a maintenance request, while simultaneously notifying the planning team of the equipment’s unavailability.

In September 2021, the Brazilian Agency for Industrial Development (ABDI) published the results of a survey on IT solutions for the manufacturing sector. Advanced manufacturing execution systems and big data solutions are used by 70% and 19% of industrial companies, respectively:

Reference Source: Brazilian Industrial Development Agency (ABDI)

Ensuring a high-quality user experience is essential for the long-term sustainability and success of any web-based system. In this context, front-end metrics measure the actual user experience regarding load speed, interactivity, and visual stability of a webpage:

Front-end Metrics

According to Marc Reinan Gomes, who holds a postgraduate degree in Technical Leadership: “[…] Core Web Vitals have become our compass for measuring the quality of the experience in our product. These metrics give us a clear picture of where our application is failing or excelling.”

In parallel, observability metrics refer to monitoring, measuring, and understanding the internal state of a system or application by analyzing its outputs, logs, and performance indicators. Marc explains: “[…] implementing observability means instrumenting our code to capture not only errors, but also usage patterns, performance bottlenecks, and friction points along the user journey.”

Front-end and Usability in the Industrial Environment

To illustrate the digitization process, it is possible to use front-end metrics applied to a platform that collects industrial machinery data, with a focus on performance and interface usability. These metrics are essential to ensure that users have smooth and efficient experience when using any page, platform, or system:

Metric

Ideal Value

Actual Value

Observed Impact

LCP

≤ 2,5 s

2,2 s

The productivity chart loads quickly on the home screen, creating a positive first impression.

INP

≤ 200 ms

180 ms

Filters respond promptly to clicks, ensuring seamless navigation.

CLS

≤ 0,1

0,05

The interface remains stable during loading, with no unexpected changes.

Fictitious Model with Positive Metrics

Regarding usability, in this example, it can be concluded:

  • Visual feedback is instantaneous after interactions, such as selecting machines or dates, improving the operator’s experience;
  • Real-time data loading has been optimized so as not to block essential interface elements;
  • The layout is responsive and stable, with minimal shifting—even on smaller screens, such as industrial tablets.

Conversely, it is possible to imagine a scenario in which the platform in question is facing performance issues:

Metric

Ideal Value

Actual Value

Negative Impact

LCP

≤ 2,5 s

5,8 s

The production dashboard is slow to load, causing frustration right from the initial user interaction.

INP

≤ 200 ms

650 ms

The delayed response of filters and data visualizations gives the impression that the system has frozen.

CLS

≤ 0,1

0,32

Unexpected UI movements during loading lead to misclicks and data loss.

Fictitious Model with Negative Metrics

In this case, regarding usability, it can be concluded:

  • Perceived sluggishness when launching the platform, especially in industrial networks with limited connectivity;
  • Imprecise interactions, such as clicking on buttons that have shifted due to layout instability;
  • Lack of fast and reliable responses for operational decision-making.

Factories are typically located in industrial areas with low urban density, which brings certain limitations. Bringing these examples to the Brazilian context, in shop floor environments, front-end metric development requires an approach that takes several factors into account. Connection instability, variability of local infrastructure, intermittent connectivity, and device diversity are a few of these factors.

“[…] The reality of industrial networks is quite different from what we are used to. Many times, we work with connections that fluctuate between 3G and broadband, and our application needs to operate well in both scenarios,” says Marc Reinan.

Given these challenges, it becomes even more important to carefully select the tools used to monitor application performance in these contexts. For data collection, specific libraries or native APIs may be employed. One example is the JavaScript Performance API, which enables automatic measurement of metrics such as response time, rendering, and user interactions:

				
					// Could not parse the buffer
window.addEventListener('load', () => {
  const timing = window.performance.timing;
  const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
  enviarMetrica('page_load_time', pageLoadTime);
});
				
			
Fictitious Example of Data Collection

Usability & Fast Navigation – Zero Lag on the Production Line

Although usability and navigation speed operate at different stages of the user experience, both directly influence perceptions of platform efficiency and quality. Querying a large database can trigger critical delays in information delivery, while sluggish navigation can disrupt the pace at which users interact with the system.

Prolonged response times can hinder crucial decision-making, especially in manufacturing environments where timing and information accuracy are strategic factors. Additionally, latency in these operations can create a negative perception of system stability, even when issues are isolated to the data architecture.

On the other hand, navigation speed has a direct impact on day-to-day user experience, driving greater engagement with the platform. A responsive and intuitive UI reduces users’ cognitive load, boosts task execution efficiency, and fosters a positive perception of the product as a whole.

Following the adoption of digital technologies, among the companies interviewed by CNI, 72% reported increased productivity in daily operations. Furthermore, 60% cited substantial improvements in product or service quality and reductions in operational costs. Marc explains: “[…] when you optimize a system that is in use 24/7 by multiple users, every second saved is multiplied exponentially.”

However, it is important to remember that navigation performance and query efficiency are complementary optimizing only one does not guarantee good usability. To deliver a truly satisfactory experience, both the data structure and the UI must be designed in an integrated fashion, with a focus on performance, fluidity, and reliability.

“[…] I make extensive use of the concept of ‘perceived performance.’ I can’t always make a query faster, but I can make the user feel the interface is responding, through skeleton screens, progressive loading, and proper feedback,” notes Marc.

Learn more about 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.