Una nuova GUI di riferimento per il controllo ambientale intelligente
Dispositivo smart home
Design UX
Design UI
- CLIENTE
- Elsner
- POSIZIONE
- Germania
- SQUADRA
- UX designer, UI designer, interaction designer, project manager, product owner, ricercatore
- SITO WEB
- elsner-elektronik.de
Elsner si è rivolta a noi con un brief che toccava ogni livello di un moderno prodotto smart home per i consumatori. Il design della GUI si è sviluppato all’interno di una struttura aziendale con un team di UX e UI supportato da un comitato direttivo composto da cinque persone. L’interfaccia utente avrebbe servito consumatori in 54 paesi e i rivenditori di dieci paesi sono stati integrati nel processo di progettazione e validazione.
La consegna ha richiesto nove mesi, con un embedded design team che ha lavorato fianco a fianco con gli ingegneri per allineare l’interfaccia all’hardware su misura, alla logica di controllo esistente e a una rete di componenti connessi. Poiché si trattava di un controller per riscaldamento e raffreddamento, il lavoro è iniziato con una mappatura dettagliata dell’ambiente fisico del sistema.
Il dispositivo riceveva input da stazioni meteorologiche, sensori di CO₂, sensori di umidità, sonde di temperatura e dall’unità di riscaldamento principale. L’accuratezza dei sensori, l’affidabilità degli attuatori e la stabilità della rete hanno definito ogni decisione iniziale. L’interfaccia doveva funzionare con le API attuali anticipando al tempo stesso quelle future, creando una base in grado di evolversi con nuovo firmware e varianti di prodotto.
I NOSTRI CONTRIBUTI
Mappatura dei requisiti
Ricerca degli utenti
Benchmarking
Design UX
Prototipazione e test dell'utente
UI Design - claro y oscuro
Design system a livello organizzativo
Garanzia di qualità
COLLABORAZIONE STRUTTURATA TRA DESIGN E INGEGNERIA ATTRAVERSO LE DISCIPLINE
Il progetto è avanzato attraverso livelli interconnessi che si rafforzavano a vicenda. La ricerca sugli utenti e il benchmarking competitivo hanno fornito una comprensione iniziale di esigenze, vincoli e modelli di settore. Le sessioni con rivenditori provenienti da dieci paesi hanno aggiunto esperienza diretta e messo in evidenza differenze comportamentali tra i mercati. I rivenditori hanno inoltre fornito indicazioni sulla pressione competitiva locale e sui trend emergenti.
Le prime sessioni di engineering hanno rivelato aspetti pratici del comportamento del firmware, inclusi i tempi di aggiornamento della temperatura e le condizioni in cui l’unità di riscaldamento applicava nuovi valori. Forte di queste conoscenze, siamo entrati nella fase divergente del modello double diamond, in cui wireframe e percorsi concettuali sono stati aperti, testati, confrontati e analizzati in base a punti di forza e debolezze.
I prototipi sono stati testati insieme agli ingegneri, che hanno messo in luce comportamenti nascosti legati a condizioni di latenza, deriva di calibrazione e sincronizzazione dei controlli. Tutte le direzioni emergenti sono state portate al comitato direttivo, che ha contribuito a raffinare la visione a lungo termine e a mantenere coerenza tra i livelli tecnico, strategico ed esperienziale.
DESIGN PLASMATO DA VINCOLI REALI
L’hardware alla base di questo controller ha influenzato l’intero progetto. Si trattava di un dispositivo su misura con comportamenti insoliti, memoria limitata e una potenza di elaborazione modesta, ma che offriva comunque un insieme di funzioni sorprendentemente versatile per un pannello TFT LCD rotondo da quattro pollici con risoluzione di 480 × 480 pixel. Le primissime discussioni con il team di ingegneria hanno evidenziato vincoli critici legati alla tensione disponibile, all’interfaccia grafica e al margine prestazionale del processore. Il cliente ci ha richiesto di tenere conto delle specifiche tecniche dei fornitori di display, in particolare per quanto riguarda la tensione necessaria per il pannello e la retroilluminazione, nonché le considerazioni sull’interfaccia grafica, la profondità di colore e la disponibilità dei campioni.
Quando è iniziata la riprogettazione, lo schermo finale non era ancora stato selezionato, quindi il nostro unico riferimento era costituito dall’unità precedente e da un ampio insieme di feedback sul campo relativi a ritardi di scorrimento, tempi di caricamento e rendering incoerente durante l’attività dei sensori. Gli ingegneri hanno delineato i budget di memoria, la tempistica dei cicli di aggiornamento dei dati e il comportamento del sistema di riscaldamento durante la calibrazione. Per ridurre al minimo i rischi, abbiamo fatto una scelta strategica progettando l’esperienza a una risoluzione inferiore di 320 × 240 pixel, per poi scalarla una volta confermato il pannello finale. Ogni scelta visiva e comportamentale ha rispettato i limiti fisici ed elettrici del dispositivo, e ogni vincolo è diventato uno stimolo all’invenzione. Durante tutto il processo abbiamo collegato ogni decisione tecnica ai fattori umani per preservare chiarezza e comfort all’interno di un ristretto perimetro operativo.
Risultati della ricerca sui fattori umani
Nella pratica
INTERFACCIA CALIBRATA SUI CONTESTI REALI
Il controller doveva funzionare in modo affidabile in numerosi contesti, per cui fattori fisici e ambientali hanno guidato il design dell’interfaccia. L’altezza di installazione di 140 centimetri posizionava lo schermo all’altezza naturale degli occhi. Questo ha definito le dimensioni dei target tattili e limitato i modelli di scansione verticale. La maggior parte delle interazioni avveniva alla luce del giorno, mentre l’uso serale richiedeva una modalità scura automatica attivata al tramonto. I flussi più comuni includevano il controllo dell’illuminazione, l’attivazione di scene e la regolazione delle tende, mentre la logica di installazione veniva configurata separatamente dagli ingegneri di sistema tramite software desktop.
L’interfaccia doveva inoltre gestire condizioni non ideali mantenendo chiarezza. Quando i sensori producevano letture ritardate, valori contraddittori o errori di calibrazione, l’interfaccia comunicava questi stati in modo calmo e privo di ambiguità. Gli avvisi provenienti dall’unità principale di riscaldamento venivano trattati come segnali primari, mentre le notifiche minori, come le finestre aperte, restavano visivamente secondarie. Questo sistema a doppio livello ha preservato sia la trasparenza sia l’equilibrio cognitivo.
Farsi un’idea della GUI
ESEMPIO DI COMPONENTE UI: CONTROLLO DELLA TEMPERATURA
Il controllo della temperatura offre una visione concentrata dell’equilibrio tra design thinking e realtà ingegneristica. La scala verticale si ispira a un termometro classico, con la temperatura attuale posizionata al centro. Questa struttura rifletteva i risultati comportamentali, che mostrano come gli utenti raramente regolino la temperatura di più di quattro gradi in entrambe le direzioni.
I partner di ingegneria ci hanno aiutato a comprendere come gli aggiornamenti di temperatura arrivano dall’unità di riscaldamento e come visualizzare letture ritardate senza introdurre confusione. La pressione dei pulsanti più o meno produce un chiaro segnale cromatico: rosso per più caldo e blu per più freddo. Ogni incremento avviene a passi di mezzo grado, poiché il firmware applica i nuovi valori tramite comandi interni discreti.
La temperatura desiderata viene visualizzata come una linea tratteggiata e rimane fissata ai limiti quando lo scorrimento supera l’area centrale. Le animazioni sono ottimizzate per evitare scatti sul processore con risorse limitate. Tutte le decisioni sono state esaminate con il comitato direttivo per garantire stabilità e chiarezza nel lungo periodo.
Concetto di interazione del componente UI della temperatura
Suddivisione: 100 segmenti = 0,5°T (temperatura) per segmento
Rimossi: 20 segmenti → 80 segmenti rimanenti
Arco per cerchio: 360°/100 = 3,6°
Conclusione: 0,5°T = 3,6° arco, 1,0°T = 7,2° arco
ESEMPIO DI DESIGN UX/UI: CONTROLLO CIRCOLARE
L’indicatore circolare della temperatura introduce una diversa forma di precisione. Il cerchio è suddiviso in cento segmenti, ciascuno dei quali rappresenta mezzo grado. La rimozione dei venti segmenti inferiori ha creato un limite visivo, lasciando ottanta segmenti attivi. Ogni segmento corrisponde a 3,6 gradi sull’arco, il che significa che un grado completo di temperatura equivale a una rotazione di 7,2 gradi. Questo livello di rigore matematico era necessario perché il dispositivo presentava limiti stringenti di rendering.
La temporizzazione delle animazioni è stata allineata agli intervalli di aggiornamento del firmware, in modo che le variazioni visive non si discostassero mai dai valori termici reali. L’indicatore mostra la temperatura attuale in modo neutro, mentre le regolazioni sono evidenziate in rosso o in blu. Quando l’utente modifica la temperatura, il campo sottostante si aggiorna mostrando il nuovo valore e la direzione del cambiamento. In parallelo, abbiamo riorganizzato la navigazione in un sistema modulare con menu overlay e scorciatoie configurabili.
Una delle negoziazioni più complesse ha riguardato il controllo delle tende. Per motivi tecnici, gli ingegneri insistevano nel mantenere tutte le funzioni su un’unica schermata, mentre la ricerca sugli utenti evidenziava il rischio di sovraccarico visivo. Dopo diverse iterazioni con il comitato direttivo, siamo arrivati a una configurazione che preservava l’usabilità rispettando al contempo i vincoli ingegneristici.
Comportamento del componente UI radiale della temperatura
PRECISIONE IN OGNI DETTAGLIO DI DESIGN
Il lavoro migliore vive nei dettagli più piccoli. I target tattili sono stati calibrati al millimetro affinché l’interfaccia risultasse naturale nell’uso in piedi. La distanza di lettura e la luminanza del pannello hanno guidato spaziature e tipografia. Ogni valore cromatico è stato testato direttamente sull’hardware per garantire che nessun elemento risultasse sbiadito alla luce del giorno. I test sui prototipi hanno rivelato l’esatta curva di latenza durante gli aggiornamenti dei sensori e hanno aiutato a perfezionare micro-animazioni capaci di guidare lo sguardo senza sovraccaricare il processore.
Al di sotto della precisione visibile si trovava un intero livello di raffinamento strutturale. La riorganizzazione dei menu e la ricostruzione della gerarchia informativa si sono rivelate essenziali sia per la chiarezza sia per la rapidità. I modelli di navigazione sono stati mantenuti coerenti in tutta l’interfaccia e aggiornati nel corso del progetto man mano che emergevano nuove evidenze. Gli stati sono stati chiariti e allineati, e i colori delle modalità chiara e scura sono stati trattati come sistemi accoppiati per mantenere sempre stabile la mappa cognitiva dell’utente. Il risultato è un dispositivo che appare semplice solo perché ogni dettaglio nascosto è stato risolto con disciplina e attenzione.
Abbiamo inoltre consegnato un design system completo che includeva design token a livello organizzativo, una libreria di componenti completa e chiari modelli di governance a supporto della coerenza nel lungo periodo.
Design system con design token a livello organizzativo
UN NUOVO STANDARD PER LA UX DELLA SMART HOME
Questo progetto ha riunito tutti gli aspetti più impegnativi del design di GUI embedded. Ha operato entro confini tecnici rigorosi, una struttura di governance multilivello e un ecosistema di sensori e attuatori interconnessi. Anziché essere limitato dai vincoli, il team li ha utilizzati come impalcatura per l’innovazione. Designer, ingegneri, rivenditori, ricercatori e un comitato direttivo hanno modellato il prodotto nel corso di nove mesi di collaborazione. La metodologia ha garantito continuità, dalla ricerca sugli utenti alla fase di esplorazione concettuale fino al prototyping tecnico allineato al reale comportamento del firmware. La validazione su hardware prototipale ha assicurato che l’interfaccia funzionasse correttamente anche in presenza di letture dei sensori ritardate, valori contraddittori e stati di recupero.
L’architettura modulare supporta ora l’evoluzione futura del firmware e nuove varianti di prodotto. Durante il progetto, la navigazione è stata affinata attraverso diversi cicli di iterazione, fino a consentire sia un accesso rapido alle azioni più frequenti sia una struttura di menu completa in cui tutte le funzionalità fossero facilmente reperibili. Questo equilibrio garantisce al prodotto stabilità e adattabilità nel lungo periodo.
La navigazione riflette i reali modelli di utilizzo. I componenti di temperatura traducono le realtà tecniche in interazioni sicure e consapevoli. Gli avvisi comunicano la verità operativa senza generare allarme. Ogni livello è coerente, dai vincoli fisici del dispositivo al comfort cognitivo dell’utente.
Il risultato è un’interfaccia embedded che rappresenta un punto di riferimento per il design di GUI tecnicamente complesso, unendo precisione, realismo e una struttura in grado di evolvere nel tempo.
