Cliente: DANIELI AUTOMATION
Anno: 2023
Danieli
Un nuovo volto per l'HMI di processo
EVOLVERE SENZA SNATURARE L'HMI DI PROCESSO
Il nostro progetto di riprogettazione delle HMI Danieli Automation ha riguardato sia il layout di navigazione che gli elementi grafici, al fine di rendergli più intuitivi e ridurre i tempi di comprensione sia per gli utenti finali che per i manutentori esperti.Danieli Automation è impegnata in un cammino pluri-decennale di innovazione sia funzionale che di aspetto grafico e di evoluzione continua del template, con macro-step ogni 10 anni. Il nostro intervento si colloca all'interno di uno degli step evolutivi dello standard e doveva tenere conto di uno scenario piuttosto articolato: diversi impianti per diversi clienti, una crescente automatizzazione degli impianti e una conseguente riduzione dell'intervento degli operatori, l'esigenza di mettere in maggiore risalto situazioni in evidenza e di unire un basso impatto visivo ad azioni complete. Tutto questo evitando cambiamenti troppo radicali che avessero un forte impatto sui tempi di sviluppo o sulla formazione degli operatori.
Il progetto è partito con una fase preventiva di analisi in cui si sono compresi requisiti e obiettivi, si sono studiano i manuali utente e si sono presi in esame tutti gli elementi che componevano l'interfaccia grafica esistente. Dall'analisi sono emerse le seguenti necessità prioritarie:
- Creare una gerarchia di navigazione
- Creare una gerarchia tra informazioni
- Creare gruppi funzionali di elementi
- Utilizzare il sistema visivo, e in particolare il colore, il colore in modo semantico
HOMEPAGE, MENÙ, STRUTTURA, WIREFRAME
L’applicazione di Danieli presentava infatti alcune criticità sotto il profilo del wireframe per cui il primo obiettivo è stato quello di definire una distribuzione migliore degli elementi della top bar e bottom bar,raggruppando gli elementi semanticamente simili, e assegnando una posizione più visibile agli oggetti rilevanti, per ricostruire una gerarchia spaziale più rispondente a quelle che sono le gerarchie di significato tra gli elementi..In particolare, il vecchio standard prevedeva una certa “polverizzazione” delle informazioni: le info ausiliarie erano posizionate in varie parti dell’interfaccia; ma soprattutto non c’era una trasposizione visiva chiara dei due livelli di navigazione: principale e contestuale, che erano gestite su un unico livello.
L'orientamento condiviso con Danieli Automation è stato quello di distribuire i contenuti sia in base al loro valore gerarchico, sia in base ai pattern di lettura e di ergonomia percettiva, con le informazioni critiche collocate in punti strategici.
Abbiamo quindi deciso di suddividere la barra superiore in due parti: quella superiore per la navigazione di area (navigazione madre) e per gli allarmi cruciali, quella inferiore per la navigazione contestuale (navigazione figlia) e per le notifiche non cruciali. In questo modo il valore semantico degli elementi asseconda una lettura naturale alto-basso.
La bottom bar ospita invece informazioni di controllo e orientamento come i breadcrumb di navigazione, data e ora e i permessi per ciascun area.
Abbiamo quindi deciso di suddividere la barra superiore in due parti: quella superiore per la navigazione di area (navigazione madre) e per gli allarmi cruciali, quella inferiore per la navigazione contestuale (navigazione figlia) e per le notifiche non cruciali. In questo modo il valore semantico degli elementi asseconda una lettura naturale alto-basso.
La bottom bar ospita invece informazioni di controllo e orientamento come i breadcrumb di navigazione, data e ora e i permessi per ciascun area.
STUDIO DEL SISTEMA VISIVO
Dal punto di vista del sistema visivo, dallo studio dello standard precedente, è emerso come le gerarchie visive fossero sottosfruttate: le informazioni risultano schiacciate sullo stesso piano. Il colore poi non era utilizzato sempre in maniera univoca: ad esempio uno stesso punto di verde veniva utilizzato sia con valore semantico (ok) sia anche per semplicemente distinguere un fluido o un coil. Questo poteva portare a confusione. Inoltre c’era un mix di sistemi visivi, flat e ombreggiato, che non è che sia a priori sbagliato (nulla lo è ma lo è sempre in base al contesto) ma in questo caso l’utilizzo delle ombreggiature non aggiungeva nulla, soprattutto nei sinottici di linea, anzi appesantiva il carico cognitivo.
Abbiamo quindi alleggerito il carico cognitivo attraverso una rimodulazione dei contrasti che potesse creare più piani di lettura e quindi tradurre meglio la gerarchia di navigazione e migliorato l’utilizzo del colore, minimizzando l’uso dei colori semantici quando non necessari.
Dal punto di vista del sistema visivo, dallo studio dello standard precedente, è emerso come le gerarchie visive fossero sottosfruttate: le informazioni risultano schiacciate sullo stesso piano. Il colore poi non era utilizzato sempre in maniera univoca: ad esempio uno stesso punto di verde veniva utilizzato sia con valore semantico (ok) sia anche per semplicemente distinguere un fluido o un coil. Questo poteva portare a confusione. Inoltre c’era un mix di sistemi visivi, flat e ombreggiato, che non è che sia a priori sbagliato (nulla lo è ma lo è sempre in base al contesto) ma in questo caso l’utilizzo delle ombreggiature non aggiungeva nulla, soprattutto nei sinottici di linea, anzi appesantiva il carico cognitivo.
Abbiamo quindi alleggerito il carico cognitivo attraverso una rimodulazione dei contrasti che potesse creare più piani di lettura e quindi tradurre meglio la gerarchia di navigazione e migliorato l’utilizzo del colore, minimizzando l’uso dei colori semantici quando non necessari.
Scendendo nel dettaglio delle strategie utilizzate, abbiamo evidenziato le info critiche, differenziando quindi i dati con valori semantici differenti (ad esempio i campi di input dai campi disabilitati), che nel vecchio standard erano presentati in maniera simile.
Abbiamo dato priorità all'informazione visiva rispetto a quella testuale (abbinando -ove possibile- icone ai testi) così da orientare meglio l'utente nella ricerca del dato. I contrasti -che nel vecchio standard erano piuttosto polarizzati- sono stati rimodulati per restituire una adeguata profondità di piani gerarchici tra elementi.
Abbiamo dato priorità all'informazione visiva rispetto a quella testuale (abbinando -ove possibile- icone ai testi) così da orientare meglio l'utente nella ricerca del dato. I contrasti -che nel vecchio standard erano piuttosto polarizzati- sono stati rimodulati per restituire una adeguata profondità di piani gerarchici tra elementi.