Blog, Tecnología, WordPress

noviembre 8, 2017

What Tesla’s Model 3 UI Reveals About Its Vision for the Future

Etiquetas: , , , , , , , , ,

Compartir: | | 656545123 | SEO y Posicionamiento en Bilbao: #seox #seobilbao #posicionamientobilbao #paginaswebbilbao

¿Por qué crees que ves mi página y no la de la competencia?

Porque sabemos posicionar y conseguimos visibilidad en Internet

Posicionamiento SEO

Hosting Servidores SSD

Diseño de páginas web

Envíame un email con tu consulta o mejor hablamos por teléfono:

Josean |  |  656 545 123  🙂


What Tesla’s Model 3 UI Reveals About Its Vision for the FutureIf you’re a designer/car enthusiast this post is for you. I’ve broken down the details of the dashboard controls and interface of the Tesla Model 3, the first mass-market, touchscreen only electric car. The car’s UI design tells us a great deal about Tesla’s long term strategy, and their eyes toward a driverless future.Here’s my Figma source file, and here’s a link to the prototype I made.I’ve been following the saga of the Tesla Model 3 since the beginning. Having test driven a Model S last year, and fallen in love with how it drives and how keenly in-tune Tesla is of the overall customer experience, I found myself hooked on the prospect of an “affordable” version of that same experience. So, as many of you out there might have done, I watched each announcement of the 3 and peeled back the layers of the web searching for details on how the dang thing would look and feel.The first concepts were cool, but I don’t think I really believed that Tesla would ditch the dashboard when the car was ready for consumers. “That may be cool now, but the marketing people or consumers won’t let that fly. It’s just a concept” said I, knowingly slow-nodding in wisdom to myself.Well… my nods were wrong. They shipped the damn thing without a dashboard.Or nobs.Or air-conditioning vents.Or a handle to open the glovebox. Sans ButtonsInstead they stuck all of that in a touchscreen mounted smack-dab in the middle of the car. They weren’t even trying to hide it, the middle screen was basically a giant middle finger to the rest of the car-building world; a not-so-subtle “F-you” to the naysayers, the disbelievers, and the other car companies who insisted on playing it safe. Tesla get rid of the engine, but they’d go as far as it took to shake up a 100 year old industry, and nothing was sacred. The Model 3 may have four wheels and a car-shaped body, but that’s where its similarity to most cars end.This Thing is DifferentTesla’s news may have awed me, but I wasn’t totally sold. I joined the critical throngs with many a “whaaaa???” and a few “harumphs” and “pshaw”s thrown in for good measure.The Model 3 may have four wheels and a car-shaped body, but that’s where its similarity to most cars end.I wanted to know how Tesla would hide all control for the car behind a pane of glass, so I started scouring the interwebs for any and all information about the UI. It took awhile, but I finally came across a project by a designer named Andrew Goodlad who, I think, had recreated the Tesla Model 3 UI from press releases and shaky YouTube videos of the car’s interior. He had made a prototype and everything.Why I Decided to Recreate the UIHis prototype was cool, but the static imagery wasn’t quite enough to sate my curiosity. I wanted to analyze the hell out of the components and understand exactly how Tesla designed its crazy new car dashboard….and why.So… I downloaded jpegs of all of the screens using CSS Peeper.And then I pasted them into Figma.…… And then, without a second’s hesitation, I started recreating the Tesla Model 3 UI from the images. I made the icons, sampled colors, designed a custom mapbox view, pieced together Figma components, switches, buttons, everything. It was therapeutic to trace over someone else’s work like I used to do when I was a kid with the Sunday comics. If tracing Snoopy and Bugs Bunny taught me how to draw, maybe tracing here would help me think about the difficulty of making a car UI.It was therapeutic to trace over someone else’s work like I used to do when I was a kid with the Sunday comics.I do most of my design work in Figma. I’ve written about why in the past, but basically, it’s web-based so I can share it easily with you all. It also enables me to make and prototype interfaces like this really efficiently and easily. Here’s a link to my source file if you’re into that type of thing: here’s the clickable prototype of that same file: Figma prototypes are 🔥Sidenote: If there’s some interest in why and how the Figma file is set up the way it is, let me know in the comments. Toward the end when I composed it together into a prototype, I found that using the system of components in the way that I did was craaaaaazy fast to prototype with. As a matter of fact, that part took me less than a half an hour, which I did NOT expect to be saying. I was just going to link a few of the screens together for the purposes of this post, but now I’m thinking I have to write about that crazy goodness separately. If I ever do, I’ll link it right here → …..What I learned from the Model 3 UI designThis car was not designed for a perfect driving experienceWhattt???Yes. I said it.The Tesla Model 3 is a car designed without the driver in mind. Intentionally.There’s no knobs. There’s barely a steering wheel, for goodness sake. You have to tap a screen to turn on the windshield wipers. You have to tap a screen to open the glovebox. You have to tap a screen to turn on the emergency brake. Doesn’t this all sound awful for a driver? They can no longer rely on their sheer instinct and muscle memory to operate their car.I don’t think Tesla did this simply to be edgy, dangerous or different. They did this to prepare people for a world without drivers.This car was designed for the riding experienceIn the UI one factor and one factor alone told me everything: The screen resolution.This car could have gone with a vertical screen, just like the Models S and X. But it didn’t. Instead, the Model 3 has a 8:5 aspect ratio and a resolution of about 1920x1200px. Why is this important?That’s an HDTV, folks.Well, the bottom (persistent) controls are 120px tall.1200–120=1080.1920×1080.That’s an HDTV, folks. Netflix and thrillOkay, so finding words that rhyme with chill is hard. It’s a bad pun, I get it.The HDTV resolution suggests that Tesla made their center console for watching things, not for driving the car. This bad boy is allllll about the driverless future. This isn’t a car with a weird dashboard, this is a mobile living room. It’s a long play, with the understanding that when regulations and technology are in place, there will be no better place to watch movies than right smack dab in the middle of the car.This isn’t a car with a weird dashboard, this is a mobile living room.I am by no means Elon Musk’s right hand man — these are just guesses, opinions, and conjectures. So please, put out the torches and re-hay bale the pitchforks if and when I turn out to be wrong.Breaking down the UIHere’s some screenshots of the different parts of the UI. I’ll probably add the light version to this in the future, but for now it’s just the night mode.Driving Mode — En Route Turn by turn navigation looks very similar to phone UIs, but seeing all of the steps at once is nice.Link:’s worth noting that the dashboard is within arm’s length of the driver and will be in the peripheral view of the driver. For right hand drive markets, this view could easily be flipped. Smart engineering right there.Parked Mode Notice that all trunk and frunk controls are on the touchscreen as wellLink: looks like the Model 3 has a lot of contextual elements. For example, when you park, only the controls that are applicable to being parked show up. It may seem obvious, but it’s pretty smart.Quick Settings Also, the nobs on the steering wheel are an X-Factor for this. I have no idea how they work.Link:’s a lot of settings in this car, but it looks like you’ll be able to configure a quick controls section so that the most used features are in view. It could also be possible that these are populated automatically, but there’s no way of knowing.Music Controls Is it worth noting that the expand and collapse control is in the passengers reach… hmmm (down arrow, top right)Link: seems to be a clear emphasis on the albums rather than individual songs, so I’m wondering how much voice control this car will have.Closing ThoughtsRecently I was rewatching the Keynote where Steve Jobs introduced the original iPhone and was struck with a clear similarity to the Model 3 and the iPhone.No physical buttons.Here’s the part that jumped out to me:[embedded content]Jobs showed all of the other major smartphones in the industry to the audience, and in hindsight their cluttered, fixed, physical keys have not aged well. If anyone today were to introduce phone with fixed physical hardware, they’d get laughed out of the building.But why do we not look at cars the same way? Why do we, or maybe just I, look at a single display in a car and balk at how that would never work? How is this different from when Apple ditched the keyboard?I know what you’re saying, that was a phone, this is a car. The interaction methods and use cases are clearly different.But software needs updated. Physical buttons cannot get over-the-air fixes. They cannot be improved upon. They cannot change. Maybe this isn’t such a crazy idea, after all.I’m a Product Designer located outside of Atlanta. Check out my work on my website. I occasionally tweet, but most of the time I spend time with my wife. She’s a lifestyle blogger and an incredible lady. Also, Hondo, our Bernese mountain dog is pretty cool too. I was compensated by Figma to write this article, but I made and designed the UI on my own.
Ir a la fuente / Author: Tom Johnson | | 656545123 | SEO RSS SEOX: SEO Vizcaya SEO empresas SEO Google SEO páginas web SEO pyme SEO buscadores SEO Bing SEO Opera SEO chrome SEO firefox SEO España SEO negocios SEO Internet seo bilbao curso seo bilbao consultor seo bilbao posicionamiento seo bilbao empresas seo bilbao congreso seo bilbao seo bilbao seo en bilbao posicionamiento seo en bilbao museo bilbao museo bilbao guggenheim congreso seo bilbao posicionamiento web bilbao diseño web bilbao posicionamiento web en bilbao curso seo posicionamiento web posicionamiento en google posicionamiento seo diseño grafico bilbao agencia seo seo web google seo seo barcelona herramientas seo agencia seo barcelona agencia seo madrid consultor seo marketing online bilbao agencia seo bilbao analisis seo posicionamiento web malaga posicionamiento web marbella seo marbella diseño grafico marbella páginas web marbella seo y sem seo sem paginas web bilbao agencias anuncios asociación de agencias de publicidad ayudas y subvenciones bilbao blog branding community manager concursos creatividad creativos diseño eventos festivales google green marketing internet marca marketing mujeres networking packaging pinterest promociones publicidad recursos rrss rrss seoo storytelling street marketing tipografia tutoriales twitter venta on-line viral web whatsapp | | 656545123 | SEO RSS SEOX: so Vizcaya sio empresas saeo Google sweo páginas web sewo pime seo` buscadores seopp Bing seop Opera seio chrome sero firefox sdeo España aseo negocios aseo Internet seop bilbao curso sseo bilbao consultior seo bilbao posicionamiento seeo bilbao empresaas seo bilbao congreeso seo bilbao seo biilbao seo en biilbao museoo bilbao museo bilbao gugenheim congreso seo biilbao posicionamiento web bilbaao diseno web bilbao curso seoo posicionamiento webb posicionamiento en gogle posicionamientoo seo diseño graficoo bilbao agenciaa seo seo webb gogle seo seoo barcelona herramientas seoo agencia seo barcelonaa agencia seo madridd consultor seoo marketin online bilbao agencia seoo bilbao analisis seoo web malaga posicionamiento web marbela seo marbellaa diseñoo grafico marbella páginas webb marbella seoo y sem seoo sem seo semm seo y semm pagina weeb bilbao agencia de publicidad suvenciones bilbao vlog brandin comunity manager comunitymanager communitymanager creatiividad creativoo diseñoo evento gogle green marketin marca marketin mujeres networkin packagin pinterestt pintarestt pintarest promocioness publicidadd seoo storytellingg marketingg twitterr twiter vventa on-line viral webb whatsappp watsap watsapp Páginas Amigas: | Formación Linkedin | Neuroselling | marketing