Cinque strumenti di progettazione UX sfruttati per creare la migliore esperienza a bordo
Cos’è che rende un prodotto di successo?
Sicuramente un ampio set di funzionalità, ma soprattutto le emozioni che il prodotto suscita quando lo si usa. Il ruolo dello User Experience (UX) Designer è quello di far sì che queste emozioni non siano frustrazione e confusione, ma che l’esperienza sia piacevole e divertente. Lo fa mettendosi costantemente nei panni dell’utente e “pensando” al posto suo. Si fa carico delle scelte più complesse, guidando l’utilizzatore con un flusso di azioni semplice che minimizza le possibilità di errore.
Gli utenti target di Kinecar sono ragazzi con poca esperienza alla guida, ma tanta esperienza con smartphone e nuove tecnologie. Seguendo la filosofia di Kinecar come “Smartphone on wheels”, il sistema è pensato come estensione del cellulare. Questo ci permette di allontanarci dall’esperienza utente che troviamo oggi nei veicoli, presentando un’interfaccia familiare che riprende la struttura e la logica delle applicazioni per smartphone, ma adattate e semplificate per la guida.
Un sistema di bordo deve tener conto dell’attività principale che sta svolgendo l’utente: guidare. Per evitare un sovraccarico cognitivo, bisogna:
- rendere qualsiasi informazione fruibile con una rapida occhiata;
- eliminare del tutto i comandi time-sensitive (cioè disponibili solo per un periodo di tempo limitato, come un pop-up che sparisce dopo pochi secondi);
- progettare interazioni veloci e poco distraenti.
Ogni azione, quindi, deve poter essere interrotta in qualsiasi momento per poter riportare lo sguardo sulla strada: l’utente si aspetterà di ritrovare il sistema esattamente come lo ha lasciato nel momento in cui è pronto a interagirci di nuovo. Questo da all’utente una sensazione di pieno controllo.
Il processo di progettazione UX prevede tantissimi strumenti che portano dalla ricerca all’ideazione al supporto del team di ingegneri nello sviluppo. Di seguito ne riporto 5 degni di nota.
1. wireframe
È uno dei primi passi nella costruzione di una nuova interfaccia utente: senza considerare l’estetica, aiuta a definire il layout dei comandi, l’architettura delle informazioni e la logica di navigazione, ottimizzati per individuare facilmente ciò che cerchiamo.
Il wireframe è costituito da semplici forme che rappresentano i pulsanti e gli altri elementi ed è spesso disegnato a mano per valutare diverse opzioni con rapidità prima di elaborarle. Nel progettare il sistema Kinecar, i wireframe sono stati utili per distribuire i contenuti tra i vari schermi e stabilire la struttura base di tutte le app:
2. colori
Lo studio dei colori è una parte fondamentale del Visual Design che insieme a icone, ombre e stile tipografico “vestono” il wireframe che si evolve in un mockup.
La scelta dei colori aiuta a comunicare delle informazioni: ad esempio, nella cultura occidentale, diamo al verde e al rosso un’accezione rispettivamente positiva e negativa. Infatti, nell’Instrument Panel Cluster (IPC) dei nostri veicoli, le spie rosse sono usate per indicare un pericolo imminente. Allo stesso modo nel progettare un’app riserviamo il rosso alle azioni distruttive (come eliminare un oggetto) o per richiamare l’attenzione dell’utente, in quanto il nostro sguardo viene naturalmente attratto. Usatelo con cautela!
Un altro esempio di utilizzo a scopo funzionale lo troviamo nella nostra tab bar. Qui il colore definisce la gerarchia, perché l’unica icona colorata rappresenta l’app attiva.
Una scelta più legata all’aspetto estetico ci dimostra l’importanza della collaborazione con gli Industrial Designer: lo sfondo nero del sistema fonde l’interfaccia con la plancia: un’unica lastra di vetro anch’essa nera, in cui sono incastonati i display.
3. prototipi
Un design interattivo vale più di pagine e pagine di documenti, soprattutto in un team dinamico come è quello di ICDS – R&D. La possibilità di testare varie e possibili interazioni senza scrivere una riga di codice permette di raggiungere il massimo livello di usabilità molto più velocemente.
Si può partire da un mockup o anche da un semplice wireframe, come nel caso del multitasking di Kinecar, in cui lavorare con i prototipi è stato fondamentale. Data l’abbondanza di spazio sullo schermo, permettiamo all’utente di visualizzare due app, una accanto all’altra. Come? Cercavamo un’interazione innovativa, adatta al rapido utilizzo alla guida e allo stesso tempo percepita in modo naturale da chi è abituato ad usare uno smartphone. Dopo diverse iterazioni di design, test, re-design e compromessi, ecco il risultato finale:
Una volta scelto il prototipo migliore, questo è stato passato agli ingegneri come riferimento per l’implementazione: così non possono sbagliare!
4. INTERAZIONE MULTIMODALE
Su Kinecar, la User Interface (UI) è distribuita su tre schermi ed è controllata dal tocco, dalla voce, ma anche da alcune leve fisiche. Il tutto lavora insieme per un’esperienza fluida:
Un’interfaccia prettamente virtuale ha il vantaggio di adattarsi al contesto facendo comparire i pulsanti al momento opportuno, evitando fastidiosi alert se una certa funzionalità non è attivabile. D’altra parte, non si ha la sensazione dei comandi sotto mano e si è costretti a guardare lo schermo. Nel caso di Kinecar, anche i tasti al volante sono stati sostituiti da un display touch: come ci assicuriamo che il guidatore non abbassi lo sguardo costantemente?
Innanzitutto, sistemando i comandi principali ai bordi dello schermo. La stretta collaborazione con il team di Design Industriale ha assicurato che, grazie a un bordo leggermente rialzato, il dito del guidatore si possa orientare facilmente agli angoli del display.
Secondo, assegnando allo Steering Wheel Display (SWD) una funzione di controllo diretto dell’IPC:
Una UI così distribuita prevede, sui diversi schermi, informazioni con diversi livelli di dettaglio: sul grande schermo dell’Infotainment troviamo le app complete, che comunicano ai rispettivi widget su IPC una selezione delle informazioni più critiche, necessarie durante la guida o semplicemente meno distraenti. Il display sul volante interpreta queste informazioni per mostrare i comandi disponibili, rigorosamente senza testo.
Alcune app presenti su infotainment sono a loro volta controllate da quelle installate sullo smartphone del guidatore, altro elemento dell’esperienza Kinecar profondamente integrato:
5. animazioni
Concludiamo con un elemento spesso sottovalutato e considerato superfluo da alcuni addetti ai lavori che si rivela, invece, uno strumento importantissimo per creare un’esperienza utente di alto livello, piacevole e sorprendente. Le animazioni supportano l’utente principalmente in tre modi:
Comunicare un cambiamento di stato
Che sia a seguito di un’azione o di un cambio di contesto, un’interfaccia spesso necessita di modificare le caratteristiche di comandi o elementi informativi (on/off, momentanea disponibilità ecc). Un modo efficace di far notare il cambiamento all’utente è animando l’elemento interessato:
Aiutare l’orientamento
Durante la navigazione all’interno di un’app, l’utente crea una mappa mentale della distribuzione dei vari elementi. Possiamo immaginare che se questi elementi scomparissero o cambiassero posizione in modo netto, senza dare un riferimento spaziale, sarebbe molto difficile orientarsi. Per questo viene utilizzato il movimento:
Suggerire un’azione
Animazioni e gesture (ad esempio lo swipe) sono due elementi spesso complementari. La disponibilità di queste ultime va comunicata all’utente, in modo più o meno esplicito. Un modo molto elegante e rapido è l’utilizzo di un’animazione che anticipa il movimento del gesto, non appena l’utente interagisce in modo “sbagliato” con l’oggetto interessato:
Il nostro percorso verso la migliore esperienza utente a bordo è appena cominciato, Stay Tuned!
Nessun Commento