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:

Su Kinecar, le app sono accorpate per categoria. Una tab bar vicina al guidatore permette il passaggio istantaneo tra di esse.
Sconsiglio di presentare wireframe troppo dettagliati e verosimili, perché distolgono l’attenzione dallo “scheletro” dell’interfaccia: potreste ricevere dei feedback su come l’app non sia abbastanza “colorata” e non su quanto sia facile da usare. Per questo carta e penna sono il miglior modo di iniziare.

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.

Per aiutare il riconoscimento a colpo d’occhio, ad ogni app è stato assegnato un colore che è applicato all’icona e ai principali elementi interni.

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.

Lo sfondo nero elimina, visualmente, i bordi del display e crea un aspetto più pulito dando l’illusione che lo schermo principale sia ancora più grande.

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:

La combinazione di un launcher simil-smartphone, due dimensioni prestabilite per le app e la possibilità di avvicinare rapidamente al guidatore l’app usata dal passeggero, rendono l’esperienza sicura, intuitiva e veloce.

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 esempio di integrazione tra comandi fisici e virtuali. La leva al volante controlla le funzioni che richiedono immediatezza, ma richiama il pannello dei comandi a schermo quando necessario.

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:

L’IPC posizionato in alto darà in tempo reale feedback sui gesti compiuti dall’utente sull’SWD (come il cambio widget) facendo si che lo sguardo del guidatore rimanga ad altezza strada.

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:

L’app Kinecar fa da “ponte” tra le altre app dello smartphone ed il sistema di bordo, filtrando le informazioni e inviando al veicolo solo le funzioni principali ed utilizzabili alla guida.

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:

A seguito dell’azione sulla leva corrispondente, il sistema comunica l’accensione dell’indicatore di direzione con un’animazione semplice e divertente.

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:

Su richiesta del guidatore di avvicinare a sé l’app più lontana, lo scambio avviene con un’animazione. L’utente tende con naturalezza a seguire l’app interessata e a interagirci immediatamente.

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:

Per ragioni di sicurezza ed evitare interazioni accidentali, il cambio della Drive Mode viene confermato da un trascinamento lungo l’altezza completa dell’SWD. L’utente, portato a toccare il simbolo della modalità interessata, viene subito informato dal pulsante stesso che deve essere trascinato in una certa direzione.

Il nostro percorso verso la migliore esperienza utente a bordo è appena cominciato, Stay Tuned!

Condividi
Nessun Commento

Lascia un Commento