Client: DANIELI AUTOMATION

Tags: GRAPHIC DESIGN / UX DESIGN / GUI-HMI

Year: 2023

Danieli

A new face for the process HMI

EVOLVING WITHOUT DISTORTING PROCESS HMI 

Our project to redesign Danieli Automation's HMIs involved both the navigation layout and graphic elements to make them more intuitive and reduce comprehension time for both end users and experienced maintainers.

Danieli Automation is engaged in a multi-decade journey of innovation in both functional and graphical appearance and continuous evolution of the template, with macro-steps every 10 years. Our intervention is within one of the evolutionary steps of the standard and had to take into account a rather articulated scenario: different plants for different customers, an increasing automation of plants and a consequent reduction of operator intervention, the need to put more emphasis on highlighted situations and to combine a low visual impact with complete actions. All this while avoiding too radical changes that would have a major impact on development time or operator training.

The project started with a preliminary analysis phase to understand requirements and objectives, study user manuals, and examine all the elements that made up the existing GUI. The following priority needs emerged from the analysis:

  • Create a navigation hierarchy
  • Create a hierarchy between information
  • Create functional groups of elements
  • Use the visual system, and in particular color, color

HOMEPAGE, MENU, STRUCTURE, WIREFRAME

In fact, Danieli's application had some critical issues from the wireframe point of view so the first objective was to define a better distribution of the elements of the top bar and bottom bar, grouping semantically similar elements, and assigning a more visible position to the relevant objects, in order to reconstruct a spatial hierarchy more responsive to what are the hierarchies of meaning among the elements.

In particular, the old standard involved a certain “pulverization” of information: auxiliary info was placed in various parts of the interface; but most importantly, there was no clear visual transposition of the two levels of navigation: main and contextual, which were managed on a single level.
The orientation shared with Danieli Automation was to distribute content according to both its hierarchical value and reading patterns and perceptual ergonomics, with critical information placed in strategic locations.

We therefore decided to divide the top bar into two levels: the upper one for area navigation (mother navigation) and crucial alerts, and the lower one for contextual navigation (daughter navigation) and noncrucial notifications. In this way, the semantic value of the elements panders to a natural high-low reading.

The bottom bar, on the other hand, houses control and orientation information such as navigation breadcrumbs, date and time, and permissions for each area.
VISUAL SYSTEM STUDY
From the point of view of the visual system, derived from the study of the previous standard, it emerged how visual hierarchies were underused: information was squashed on the same plane. Color then was not always used uniquely: for example, the same dot of green was used both with semantic value as “okay” and also to simply distinguish a fluid or coil. This could lead to confusion. In addition there was a mix of visual systems, flat and shaded, which is not that it is a priori wrong (nothing is but it always is depending on the context) but in this case the use of shading did not add anything, especially in line synoptics, in fact it weighed down the cognitive load.

Therefore, we lightened the cognitive load through a remodeling of contrasts that could create multiple reading planes and thus better translate the navigation hierarchy and improved the use of color, minimizing the use of semantic colors when unnecessary.
Going into detail about the strategies used, we highlighted critical info, thus differentiating data with different semantic values (e.g., input fields from disabled fields), which were presented similarly in the old standard.

We have prioritized visual information over textual information (matching-where possible-icons to texts) so as to better guide the user in finding the data. Contrasts-which in the old standard were rather polarized-have been reshaped to return adequate depth of hierarchical planes between elements.