Il progetto
interfaccia automobilistica
Non è sul divano o in metropolitana usando un'app, è in macchina. Lui guida.
Questo è ciò che mi sono detto con ogni progetto di interfaccia quando ho lavorato Coyote, una società che è tra i principali fornitori di assistenti alla guida di comunità.
Siamo in un'esperienza diversa: l'utente è un pilota. Tra la gestione della guida, dei passeggeri o di altri controlli interni al veicolo (ad esempio: radio, aria condizionata, regolazione del sedile, animali sfrenati, ecc.), il conducente ha sufficienti fonti di distrazione nel veicolo e potrebbe anche essere necessario per interagire con un prodotto comprendente un'interfaccia.
Maneggiare e guardare un telefono cellulare o altri tipi di tecnologia come i dispositivi GPS durante la guida aumenta fino a volte 8 il rischio di collisione per il conducente (Sfonte: Fondazione AAA per la sicurezza stradale, 2017)
Il design dell'interfaccia non dovrebbe quindi distrarlo ma semplificargli il più possibile la vita in modo da rendere l'esperienza piacevole durante il viaggio. Il settore automobilistico era la mia vita quotidiana e come designer di UX/UI ho avuto l'opportunità di lavorare su problemi insoliti che l'utente/driver potrebbe incontrare.
- Cosa dovrebbe vedere?
- Cosa può fare durante la guida? Quando ?
- Come informarlo o avvisarlo?
- E la sicurezza degli utenti?
Sono stato in grado di vedere punti comuni ma anche differenzianti tra il design di un'interfaccia mobile "lambda" e un'interfaccia automobilistica (che si tratti di un'applicazione mobile o incorporata). Mentre costruisco interfacce e interazioni mobili, ecco la mia guida su misura per i progetti di interfacce automobilistiche:
Informazioni chiare e conciso
- Progetta attività e messaggi a bordo che non distraggono dalle attività critiche per una guida sicura. A seconda del servizio, a volte capitava che all'autista fosse chiesto di vedere le informazioni e di rispondere se voleva, senza che fosse troppo invadente.
Nella prima schermata (a) sopra, il messaggio potrebbe essere troppo grande sullo schermo. In piena navigazione, non solo non vede più la sua tessera, ma il pilota si trova di fronte alla costrizione di dover puntare al cross per chiudere il pop-in, che richiede troppo sforzo e può distrarlo.
Ecco perché ho scelto una composizione a ½ (seconda schermata) in modo da far apparire la navigazione su metà dello schermo. Il conducente può quindi vedere il messaggio senza essere disturbato nella sua navigazione.
- Il conducente non ha il tempo di leggere attentamente lo schermo. I segnali visivi e acustici devono essere rapidamente riconoscibili e rilevabili.
Uno spettacolo familiare. Ad esempio, utilizzare i codici stradali, non modificare i soliti pittogrammi familiari ai conducenti sulla strada.
- Riduci il più possibile il testo, e se è necessario metterlo, bandisci le fantasie, il carattere deve essere leggibile a colpo d'occhio. Evita i caratteri serif (più consigliati per le stampe) e consiglia in particolare i lineali per una migliore lettura.
Ad esempio, ho usato il Roboto per il Coyote NAV+. Dato che lo schermo era posizionato a più di 50cm dal driver, ho evitato grassi sottili o troppo densi (sottili, chiari, neri) per facilitare la lettura, utilizzare al massimo due grassi diversi. Inoltre, pensa anche alla qualità dello schermo del prodotto su cui stai lavorando l'interfaccia, a seconda del contrasto e della luminosità, la visibilità dei testi può essere disturbata.
Semplifica la vita dell'utente durante la guida
- Le mani del guidatore dovrebbero essere più sul volante che sullo schermo.
Riduci al minimo le richieste di azioni di guida sulle tue interfacce per evitare il più possibile interazioni con il prodotto. Presente su Rlink (Renault), Coyote ad esempio blocca l'accesso alle Impostazioni quando il veicolo sta guidando per motivi di sicurezza (caso (a) di seguito). Abbiamo ritenuto che il conducente non dovesse accedere alle Impostazioni, perché potrebbe fargli distogliere lo sguardo dalla strada...
- Un carico di lavoro minimo: consiglia il completamento automatico quando si richiede un'azione per semplificare l'azione dell'utente. Ad esempio, quando fai una domanda al conducente, puoi includere a timer di 5 secondi che afferma una risposta automatica se il conducente non interviene.
La barra blu che potete vedere nelle schermate sopra illustra il timer in modo da illustrare e prevedere una risposta automatica se il pilota non interviene sulla schermata.
- Ricordati di dare agli utenti la possibilità di programmare le loro notifiche e i loro display in base alle loro esigenze (visive e sonore).
" Più grande "
- Uniamo qui i criteri di leggibilità.
Gli utenti non sono così precisi nelle loro azioni durante la guida.
Ricorda che lo schermo non è nelle mani dell'utente ed è posizionato a una certa distanza nell'auto.
Coyote Nav+ posizionato nel veicolo.
I display informativi ei pulsanti devono essere posizionati in modo che l'utente possa vederli e toccarli facilmente. Inoltre, le aree touch devono essere più grandi del pulsante o del testo, così come per il testo dell'interfaccia. Naturalmente, non tutto deve essere grossolano, sta a te trovare l'equilibrio perfetto.
La dimensione del carattere varia in base alla risoluzione dello schermo e alla distanza di lettura. Da parte mia, ho seguito il Norma AFNOR 9241-300, quindi ero su un testo minimo di 16px per una distanza di circa 70 cm per l'applicazione mobile ma sull'interfaccia incorporata dedicata a Rlink, la mia dimensione minima del carattere era 26px.
Padroneggiare il contrasto
- Lavorare sul contrasto delle interfacce fa parte delle raccomandazioni e regole per l'accessibilità contenuto web (WCAG) 2.0ed è tanto più importante rispettarli per le applicazioni automobilistiche.
- I colori sono molto spesso usati come fattore informativo quando si vuole evitare l'uso del testo nel settore automobilistico. Tuttavia, la luminosità dell'auto è diversa. I colori troppo luminosi possono illuminare il conducente durante la guida notturna oppure i raggi del sole possono offuscare la visibilità dello schermo, ad esempio.
Ho fatto le mie prove di giorno, alla luce diretta del sole, e di notte, in un ripostiglio delle scope, per verificare la scelta dei colori per la leggibilità dello schermo. Devi adattarti alle condizioni e ai vincoli (luce naturale, qualità dello schermo, ecc.).
Abbiamo optato per l'utilizzo di due diverse tonalità di blu (rappresentazione della navigazione) in modo da soddisfare al meglio gli standard di contrasto in base al tema scelto.
- Niente più toni su toni : scegli con cura i tuoi colori per rispettare le regole del contrasto automobilistico.
Puoi utilizzare strumenti che calcolano i rapporti di contrasto come:
Controllo contrasto colore: https://snook.ca/technical/colour_contrast/colour.html
O il plug-in Sketch Stark http://www.getstark.co/
Animazione interfaccia
- Animazioni e micro-interazioni possono essere un modo rapido ed efficace per trasmettere un messaggio complesso.
Onboarding dell'app COYOTE.
- Le micro-interazioni vengono spesso utilizzate per il feedback per evitare incomprensioni attese. Il conducente può prevedere il comportamento del sistema, ad esempio, vedendo uno spinner animato, capisce immediatamente che si sta caricando.
Caricamento dell'applicazione COYOTE.
PORTA VIA
Ogni settore ha i suoi problemi. Come designer, dobbiamo adattarci a tutte le situazioni per soddisfare adeguatamente le esigenze degli utenti. Qui, nel caso del settore automotive, troviamo dettagli di design dell'interfaccia che a volte differiscono da altri e che non sono da trascurare.
"Ridurre al minimo gli sguardi fuoristrada"(Occhi sulla strada, mani sul volante.)
Viene sottolineata l'importanza della sicurezza del conducente su strada e le esperienze che creiamo devono accompagnare l'utente durante tutto il suo viaggio, facilitandogli la vita senza distrarlo o stressarlo.
Per ulteriori…
Ispirato dall'"head up display" (HUD), display a testa in su nel campo dell'aviazione militare, consistente nel sovrapporre le informazioni necessarie al pilotaggio, alla navigazione, ecc., il settore automobilistico ha saputo sviluppare questo principio proiettando le informazioni dalla strada e/o dalla navigazione su una diapositiva semitrasparente o sul parabrezza del veicolo. Nel campo visivo del conducente, questo principio sottolinea guida sicura a testa alta. Le case automobilistiche, tuttavia, limitano la visualizzazione simultanea di più informazioni per non distrarre o ostruire la visuale del guidatore.
Range Rover EvoqueHUD (2015)
Perseguendo questa strada di sicurezza, sempre per una user experience più semplice, anche il settore automotive sta sviluppando idee in giro l'interfaccia invisibile (o No-UI). L'idea è quella di eliminare gli elementi Uomo-Macchina per consentire un'esperienza utente meno vincolata dall'interfaccia a schermo. Le interazioni corporee (es. Kinect) o le interazioni vocali (es. assistente vocale Alexa, Siri, Google ecc.) sono le interazioni principali attraverso interfacce invisibili. L'uso della voce tramite CarPlay, Android auto o altri sistemi vocali è sempre più presente tra gli utenti in una situazione di guida e alcune grandi aziende come BMW, ad esempio, stanno iniziando persino a sviluppare il proprio assistente personale. https://www.usine-digitale.fr/article/bmw-va-proposer-son-propre-assistant-personnel-des-2019.N738489 )
Un argomento da seguire molto da vicino… non esitate a condividere la vostra opinione i nostri social network.
Silvia (@silbing), Designer UI/UX
