Ciò che l'interfaccia utente di Model 3 di Tesla rivela sulla sua visione per il futuro

Se sei un designer / appassionato di auto, questo post fa per te. Ho scomposto i dettagli dei comandi del cruscotto e dell'interfaccia della Tesla Model 3, la prima auto elettrica solo touchscreen per il mercato di massa. Il design dell'interfaccia utente dell'auto ci dice molto sulla strategia a lungo termine di Tesla e sui loro occhi verso un futuro senza guidatore.

Ecco il mio file sorgente Figma, ed ecco un link al prototipo che ho realizzato.

Ho seguito la saga di Tesla Model 3 sin dall'inizio. Avendo testato su una Model S l'anno scorso e essendomi innamorato di come guida e di quanto profondamente sintonizzata Tesla sull'esperienza complessiva del cliente, mi sono trovato agganciato alla prospettiva di una versione “economica” di quella stessa esperienza. Quindi, come molti di voi là fuori avrebbero potuto fare, ho guardato ogni annuncio del 3 e ho rimosso gli strati del web alla ricerca di dettagli su come sarebbe stata la cosa del pericolo.

I primi concetti erano fantastici, ma non credo di credere davvero che Tesla avrebbe abbandonato il cruscotto quando l'auto era pronta per i consumatori. "Ora potrebbe essere interessante, ma i professionisti del marketing o i consumatori non lo lasceranno volare. È solo un concetto ", dissi, annuendo coscientemente lentamente nella saggezza a me stesso.

Bene ... i miei cenni erano sbagliati. Hanno spedito la dannata cosa senza cruscotto.

O manopole.

O prese d'aria condizionata.

O una maniglia per aprire il vano portaoggetti.

Pulsanti Sans

Invece hanno bloccato tutto ciò in un touchscreen montato nel bel mezzo della macchina. Non stavano nemmeno cercando di nasconderlo, lo schermo centrale era sostanzialmente un gigantesco dito medio per il resto del mondo automobilistico; un "F-tu" non così sottile per gli oppositori, i miscredenti e le altre case automobilistiche che hanno insistito per farlo al sicuro. Tesla si è sbarazzata del motore, ma si sono spinti al massimo per scuotere un'industria centenaria; niente è sacro. Il modello 3 può avere quattro ruote e una carrozzeria a forma di automobile, ma è lì che finisce la sua somiglianza con la maggior parte delle auto.

Questa cosa è diversa

Le notizie di Tesla potrebbero avermi spaventato, ma non sono stato completamente venduto. Mi sono unito alle folle critiche con molti "whaaaa ???" e alcuni "harumphs" e "pshaw" lanciati per buona misura.

Il modello 3 può avere quattro ruote e una carrozzeria a forma di automobile, ma è lì che finisce la sua somiglianza con la maggior parte delle auto.

Volevo sapere come Tesla avrebbe nascosto tutto il controllo per l'auto dietro una lastra di vetro, quindi ho iniziato a cercare gli interwebs per qualsiasi informazione sull'interfaccia utente. Ci è voluto un po ', ma alla fine mi sono imbattuto in un progetto di un designer di nome Andrew Goodlad che, credo, aveva ricreato l'interfaccia utente Tesla Model 3 dai comunicati stampa e dai video mossi di YouTube degli interni dell'auto. Aveva realizzato un prototipo e tutto il resto.

Perché ho deciso di ricreare l'interfaccia utente

Il suo prototipo era eccezionale, ma le immagini statiche non erano abbastanza per soddisfare la mia curiosità. Volevo analizzare l'inferno dei componenti e capire esattamente come Tesla ha progettato il suo nuovo cruscotto automobilistico ... e perché.

Quindi ... ho scaricato i jpeg di tutti gli schermi usando CSS Peeper.

E poi li ho incollati in Figma.

…… E poi, senza una seconda esitazione, ho iniziato a ricreare l'IU Tesla Model 3 dalle immagini. Ho creato icone, colori campionati, progettato una vista mapbox personalizzata, messo insieme componenti Figma, interruttori, pulsanti, tutto. È stato terapeutico rintracciare il lavoro di qualcun altro come facevo da bambino con i fumetti della domenica. Se tracciare Snoopy e Bugs Bunny mi ha insegnato a disegnare, forse tracciare qui mi aiuterebbe a pensare alla difficoltà di creare un'interfaccia utente per un'auto.

È stato terapeutico rintracciare il lavoro di qualcun altro come facevo da bambino con i fumetti della domenica.

Faccio la maggior parte del mio lavoro di progettazione in Figma. Ho scritto sul perché in passato, ma fondamentalmente è basato sul Web, quindi posso condividerlo facilmente con tutti voi. Mi permette anche di realizzare e prototipare interfacce come questa in modo veramente efficiente e semplice. Ecco un link al mio file sorgente se ti piace quel tipo di cose:

https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3

Ed ecco il prototipo cliccabile di quello stesso file:

https://www.figma.com/proto/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?scaling=contain&node-id=37%3A2923

I prototipi di Figma sono
Sidenote: se c'è un certo interesse nel perché e nel modo in cui il file Figma è impostato così com'è, fammi sapere nei commenti. Verso la fine, quando l'ho composto insieme in un prototipo, ho scoperto che usare il sistema di componenti nel modo in cui lo facevo era molto veloce con il prototipo. In effetti, quella parte mi ha impiegato meno di mezz'ora, cosa che NON mi aspettavo di dire. Stavo solo collegando alcuni degli schermi insieme ai fini di questo post, ma ora sto pensando di dover scrivere di quella pazza bontà separatamente. Se mai lo farò, lo collegherò proprio qui →… ..

Cosa ho imparato dal design dell'interfaccia utente di Model 3

Questa vettura non è stata progettata per un'esperienza di guida perfetta

Whattt ???

Sì. L'ho detto.

La Tesla Model 3 è un'auto progettata pensando al guidatore. Intenzionalmente.

Non ci sono manopole. C'è a malapena un volante, per l'amor del cielo. Devi toccare uno schermo per accendere i tergicristalli. (* modifica * hai una leva della console per accenderli, ma la frequenza è controllata tramite lo schermo) Devi toccare uno schermo per aprire il vano portaoggetti. Devi toccare uno schermo per attivare il freno di emergenza (* modifica * anche questo sembra essere automatico, ma l'applicazione manuale sembra essere nelle impostazioni). Non sembra tutto orribile per un guidatore? Non possono più fare affidamento sul loro puro istinto e memoria muscolare per guidare la propria auto.

Non credo che Tesla lo abbia fatto semplicemente per essere spigoloso, pericoloso o diverso. Lo hanno fatto per preparare le persone a un mondo senza autisti.

Questa vettura è stata progettata per l'esperienza di guida

Nell'interfaccia utente un fattore e un solo fattore mi hanno detto tutto: la risoluzione dello schermo.

Questa macchina avrebbe potuto andare con uno schermo verticale, proprio come i modelli S e X. Ma non lo fece. Invece, il Modello 3 ha un formato 8: 5 e una risoluzione di circa 1920x1200 pixel. Perché questo è importante?

Questa è una HDTV, gente.

Bene, i controlli inferiori (persistenti) sono alti 120 px.

1200-120 = 1080.

1920x1080.

Questa è una HDTV, gente.

Netflix e brivido

Va bene, quindi è difficile trovare parole che rimano con il freddo. È un brutto gioco di parole, ho capito.

La risoluzione HDTV suggerisce che Tesla ha realizzato la console centrale per guardare le cose, non per guidare la macchina. Questo cattivo ragazzo parla del futuro senza conducente. Questa non è un'auto con un cruscotto strano, questo è un salotto mobile. È un gioco lungo, con la consapevolezza che quando le normative e la tecnologia saranno in atto, non ci sarà posto migliore per guardare i film se non quello di un bel tocco nel mezzo dell'auto.

Questa non è un'auto con un cruscotto strano, questo è un salotto mobile.

Non sono affatto il braccio destro di Elon Musk: sono solo ipotesi, opinioni e congetture. Quindi, per favore, spegni le torce e rifai le balle di fieno se e quando risulterò sbagliato.

Abbattere l'interfaccia utente

Ecco alcuni screenshot delle diverse parti dell'interfaccia utente.

Modalità di guida - In rotta

A turno, la navigazione è molto simile alle interfacce utente del telefono, ma vedere tutti i passaggi contemporaneamente è bello.

Link: https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=37%3A2923

Vale la pena notare che il cruscotto si trova a una certa distanza dal guidatore e sarà nella vista periferica del guidatore. Per i mercati con guida a destra, questa vista potrebbe essere facilmente capovolta. Ingegneria intelligente proprio lì.

Modalità parcheggiata

Notare che tutti i controlli trunk e frunk si trovano anche sul touchscreen

Link: https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14002

Sembra che il Modello 3 abbia molti elementi contestuali. Ad esempio, quando parcheggi, vengono visualizzati solo i controlli applicabili per essere parcheggiato. Può sembrare ovvio, ma è piuttosto intelligente.

Impostazioni rapide

Inoltre, i nobili sul volante sono un fattore X per questo. Non ho idea di come funzionano.

Link: https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=178%3A1567

Ci sono molte impostazioni in questa macchina, ma sembra che sarai in grado di configurare una sezione di controlli rapidi in modo che siano visualizzate le funzionalità più utilizzate. Potrebbe anche essere possibile che questi vengano popolati automaticamente, ma non c'è modo di saperlo.

Controlli musicali

Vale la pena notare che il controllo di espansione e compressione è nella portata dei passeggeri ... hmmm (freccia giù, in alto a destra)

Link: https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3?node-id=497%3A14050

Sembra che ci sia una chiara enfasi sugli album piuttosto che sui singoli brani, quindi mi chiedo quanto controllo vocale avrà questa macchina.

Pensieri di chiusura

Recentemente stavo rivedendo il Keynote in cui Steve Jobs ha introdotto l'iPhone originale ed è stato colpito con una chiara somiglianza con il Modello 3 e l'iPhone.

Nessun pulsante fisico.

Ecco la parte che mi è saltata fuori:

Jobs ha mostrato al pubblico tutti gli altri principali smartphone del settore e, con il senno di poi, i suoi tasti fisici disordinati, fissi, non sono invecchiati bene. Se qualcuno oggi introducesse un telefono con hardware fisico fisso, verrebbe deriso dall'edificio.

Ma perché non guardiamo le macchine allo stesso modo? Perché noi, o forse solo io, guardiamo un singolo display in un'auto e ci guardiamo come non funzionerebbe mai? In che modo è diverso da quando Apple ha abbandonato la tastiera?

So cosa stai dicendo, quello era un telefono, questa è una macchina. I metodi di interazione e i casi d'uso sono chiaramente diversi.

Ma il software può essere aggiornato. I pulsanti fisici non possono ottenere correzioni over-the-air. Non possono essere migliorati. Non possono cambiare. Forse questa non è un'idea così folle, dopo tutto.

Sono un Product Designer a Nashville. Dai un'occhiata al mio lavoro sul mio sito web. Ogni tanto tweet, ma il più delle volte trascorro del tempo con mia moglie. È una blogger di stile di vita e una donna incredibile. Inoltre, Hondo, il nostro cane da montagna bernese è anche abbastanza bello. Sono stato compensato da Figma per scrivere questo articolo, ma ho realizzato e progettato l'interfaccia utente per conto mio.