Interaction Design & UI/UX: A closer look at the Tesla Model 3 touchscreen

I am a great fan of Tesla and also of Elon Musk, the care of his level of thinking for the user experience and vision simply changed the game of the entire car industry. Earlier this year, they have introduced the Tesla Model 3; the mid-size all-electric four-door luxury sedan starting at a very affordable price. As a designer, what struck me the most was the removal of the "conventional" interior car interface replaced by a 15-inch touchscreen. So many thoughts went through my mind regarding how the driving will be effective with such a large screen in the center console. We are taking a look at the work of Michael Cherkashin, a Los Angeles-based creative director at HUG. He is walking us through the original concept and also all the challenges they have encountered for designing the interface of the Model 3. Enjoy the read! Michael Cherkashin is a creative director over HUG. A branding agency on a mission to rely on for beautiful design and impactful outcomes. Based in Los Angeles, CA, USA, Michael is also Director of photography at Inhale Films. Our vision for any user interface is simple: efficiency should be as close a possible to 100%, in other words, a user should be able to perform the desired task with as little effort and distraction as possible. This would be especially pertinent to vehicles as safety is such a priority. We want to share this philosophy with drivers, fellow engineers at Tesla and other car manufacturers. We've designed intuitive multi-touch gestures and a responsive grid that can be customized to suit both driver and passenger needs. More Links Learn more about Michael Cherkashin at hugagency.com Follow Michael Cherkashin's work on Behance UI/UX & Interaction Design (In His Words) Challenges Model 3 has been released with a new 15-inch touchscreen, which is wider than previous screens on Model’s S and X. Whilst it looks great, some areas of the screen and functionality have become harder to reach. This may seem like a minor difference, however, when operating a vehicle it could become significant, as every moment is crucial. And, although the Model 3 was designed to be autonomous, in some countries, with heavy winters for example, the necessary infrastructure and support is yet to be in place, so the need for a driver in an autonomous vehicle is still required. Another challenge arises from the lack of physical buttons. In other vehicles your tactile sense can be used to find the button or adjustor without taking your eyes off the road. However, navigating a touchscreen requires the driver taking their eyes off the road; when encountering bumpy roads, it would be even more challenging holding a steady hand on the right area of the screen. To combat this we came up with two solutions. The first is an adjustable grid where users can move panels of the dashboard to best fit their needs. For instance, the media player can be moved to the passenger's side so they can enjoy playing DJ, whilst the map can be moved in closer view to the driver and expanded or hidden in case of autonomous driving. The second solution introduces multi-touch gestures that can be applied to any area of the screen, and don’t require a driver to be distracted by looking away from the road to navigate functions. These gestures would be intuitive and replicate physical buttons. Video Two Finger Gestures Using two fingertips, drivers or passengers can control the multimedia player, even when it’s not displayed on the screen. Each gesture has been designed to replicate the physical buttons and dials we’ve become accustomed to, for example, the volume wheel rotation. • Tap to play and pause • Rotation brings up the volume • Tap and scroll sideways to fast-forward • Quick scroll sideways to change media • Scroll top and bottom to change channels Three Finger Gestures Using three fingertips, drivers or passengers can adjust climate control by rotating left or right. When adjusted from the driver’s side of the screen, the temperature is controlled for the whole vehicle; alternatively, applying the same gestures from the passenger side enables dual climate control. • Rotation on the driver’s side controls temperature inside the whole vehicle • Rotation on the passenger's side turns on and controls dual climate control • Scroll top and bottom to adjust fan level Interface Look and feel is another key factor to consider, especially in such a beautifully designed Model 3. The interface should match the quality interior and exterior. We used a simple and smooth design, with a very friendly and warm feel. The buttons are large, with plenty of surrounding space so it’s easy to tap while driving. The colors are balanced to be clearly visible in bright sun, but soft enough to be less distracting for the driver. Night Mode Once the sun starts to set and night falls, the screen will switch to a darker night mode, providing less glare and distraction for a better driving experience. The brightness level is adjustable by moving one finger down from the top edge to decrease the light, and up from the bottom edge to increase the light. Notifications Notifications are made to be intuitive and easy to deal with. For example, whether you are mid phone call or cruising along, when your vehicle’s battery is running low the option for taking direction to the nearest Supercharge station is one simple touch away.