Cliente: Masco Group Automation
Anno: 2023
MGA
nuova Hmi
UNA NUOVA USER EXPERIENCE PER MGA (Masco Group)
Lo sviluppo di una nuova interfaccia grafica per Masco Group Automation (MGA), azienda di system integration e parte di Masco Group, ha avuto come obiettivo non solo l'aggiornamento dell'aspetto visivo, seguendo un approccio più contemporaneo e allineato alle tendenze attuali, ma anche una revisione completa dei meccanismi di navigazione. Questo per seguire l’approccio tipicamente pragmatico di MGA e con lo scopo di offrire agli utenti un'interfaccia più intuitiva, dove le informazioni cruciali fossero facilmente comprensibili attraverso elementi visivi.
Il progetto è nato come progetto di innovazione, commissionato a MGA da Olsa, azienda di macchinari industriali per il settore farmaceutico anch’essa appartenente a Masco Group, destinato a essere adattato per diverse interfacce utente (HMI) su diverse macchine, con varie risoluzioni di schermo. La prima fase è stata l'analisi dell'interfaccia precedente, identificando gli elementi da sviluppare, migliorare o eliminare. Il software su cui ci si è basati era relativo a un macchinario proprio di Olsa.
Questa fase di analisi è stata seguita da una fase pre-progettuale e concettuale, in cui sono stati creati wireframe per delineare in modo sintetico i concetti e meccanismi chiave che dovevano essere sviluppati.
Durante questa fase, sono state create le fondamenta per il menu delle funzioni, posizionato nella parte inferiore in modo da rimanere sempre visibile senza richiamare sottomenu e in modo che potesse essere agevolmente navigato sia dagli utenti mancini che destrimani con la stessa facilità.
Questa fase di analisi è stata seguita da una fase pre-progettuale e concettuale, in cui sono stati creati wireframe per delineare in modo sintetico i concetti e meccanismi chiave che dovevano essere sviluppati.
Durante questa fase, sono state create le fondamenta per il menu delle funzioni, posizionato nella parte inferiore in modo da rimanere sempre visibile senza richiamare sottomenu e in modo che potesse essere agevolmente navigato sia dagli utenti mancini che destrimani con la stessa facilità.
In quest’ottica è stato pensato quindi il menu principale: in alto sono riportate tutte le informazioni di monitoraggio, con particolare attenzione a collocare i pulsanti ad alta interazione sulla destra, per non ostacolare la vista dello schermo durante l’operatività con la mano.
Lo stesso principio è stato applicato alle pagine interne contenenti pulsanti o filtri, posizionati sulla destra se presenti. Per quanto riguarda il menu funzioni, i tasti con maggiore frequenza di utilizzo sono stati collocati in posizione centrale, in modo che tutte le funzioni-macchina avessero lo stesso peso. Le posizioni laterali sono invece dedicate a funzioni ausiliarie e meno utilizzate.
Lo stesso principio è stato applicato alle pagine interne contenenti pulsanti o filtri, posizionati sulla destra se presenti. Per quanto riguarda il menu funzioni, i tasti con maggiore frequenza di utilizzo sono stati collocati in posizione centrale, in modo che tutte le funzioni-macchina avessero lo stesso peso. Le posizioni laterali sono invece dedicate a funzioni ausiliarie e meno utilizzate.
Per agevolare ulteriormente l'utente, è stata creata una home dashboard che riepiloga alcuni dei dati di monitoraggio principali e una versione sintetica del sinottico, che riassume solo le informazioni essenziali per le operazioni quotidiane.
Un elemento fondamentale nella distribuzione degli elementi è stata l'adozione fin dal principio di una griglia modulare a 12 colonne, con spaziature e margini ben definiti. Questi moduli hanno guidato la strutturazione dei menu principali e la definizione dei moduli che compongono il frame content.
Un elemento fondamentale nella distribuzione degli elementi è stata l'adozione fin dal principio di una griglia modulare a 12 colonne, con spaziature e margini ben definiti. Questi moduli hanno guidato la strutturazione dei menu principali e la definizione dei moduli che compongono il frame content.
L'interfaccia è stata progettata per essere utilizzabile sia in modalità light mode che dark mode, consentendo agli utenti di scegliere in base alle proprie preferenze o alle condizioni ambientali.
La palette cromatica è stata definita in conformità con l'identità visiva aziendale recentemente rinnovata, con attenzione alla facilità di transizione e conversione cromatica tra le due modalità, semplificando il lavoro degli sviluppatori in fase di sviluppo.
Il sistema visivo è stato applicato anche alle pagine interne e al sinottico, quest'ultimo oggetto di un radicale ridisegno per alleggerire l'aspetto visivo. Le informazioni di contesto, come serbatoi e tubazioni, sono state depotenziate visivamente, mentre è stata data maggiore importanza ai dispositivi, utilizzando un cambio di colore per segnalare le anomalie.
La palette cromatica è stata definita in conformità con l'identità visiva aziendale recentemente rinnovata, con attenzione alla facilità di transizione e conversione cromatica tra le due modalità, semplificando il lavoro degli sviluppatori in fase di sviluppo.
Il sistema visivo è stato applicato anche alle pagine interne e al sinottico, quest'ultimo oggetto di un radicale ridisegno per alleggerire l'aspetto visivo. Le informazioni di contesto, come serbatoi e tubazioni, sono state depotenziate visivamente, mentre è stata data maggiore importanza ai dispositivi, utilizzando un cambio di colore per segnalare le anomalie.
Infine, l'interfaccia è stata completata con elementi personalizzati, come icone, pulsanti-icona e widget, per caratterizzare e uniformare l'esperienza utente nell'ambito delle interfacce di Masco Group, per i macchinari delle aziende Olsa e Stilmas, aziende che operano nel settore farmaceutico e parte dello stesso gruppo.