Its been bothering me for years now: For a few hundred bucks we can place powerful mini computers in our pockets with high resolution displays, precise touch technology and dozen of sensors. But in our cars we have to pay thousands of dollars for infotainment systems with small screens, outdated technologies and interface designs that seem to be 5 years old.
I was very excited when Tesla launched its Model S a few years ago hosting a brilliant 17 inch capacitive touchscreen as it’s main control unit. However I was a little disappointed when I saw their interface design. While the UX has some promising rudiments, the visual design could be from the early Web 2.0 era. When you’re brave enough to replace all your in-car controls with a huge touchscreen, why stop there? Why use plenty of skeuomorphisms to mimic actual buttons instead of emphasizing the fact that you no longer have those haptic buttons and detach your UI from their technical restrictions?
As a side note: I’m not saying getting rid of all tactile buttons and focusing solely on a touchscreen is necessarily the best way to go for a car interface, but it’s definitely an interesting and challenging approach.
As mentioned I’m exited by Teslas general approach to bring modern technology into our cars and even if their UI seems visually a little bit out of date, they are still among the creative leaders. Looking at some of Teslas competitors it’s frightening how old fashioned the interfaces of most car makers look and feel. You can find a big selection of bad in-car UX in this great read from Geoff Teehan
During the big trade shows the same car makers present their most recent concept cars with shiny new screens and interfaces. Those infotainment concepts often look gorgeous but are solely designed for their visual appearance and to showcase fancy technology. However, the functionality of those concepts is usually not optimized to work in everyday environments.
With all that in mind, we at Bureau Oberhaeuser asked ourselves how we would approach the UI for a car infotainment system. So we decided to challange ourselves with a quick design exercise and ran a side project over a few weeks. As mentioned, we really like Tesla’s general approach and since they provide the best hardware on the market we decided to base our concept on the awesome Model S and it’s 17 inch touchscreen.
We designed a concept using responsive widgets that can be rearranged on a flexible grid. The widgets are available in multiple sizes and can freely be combined for a customized user experience by simply dragging and dropping them. The widget size can be adapted either by hitting a button or using a “pinch to zoom” gesture. The color coding of the different widgets makes it easier to quickly recognize the functions you’re looking for. Multiple screen layouts can be saved and managed through a dropdown menu in the statusbar. Hitting the startscreen button always takes you back to your customized startscreen.
I want to emphasize again that this is an early stage concept that was built within a few weeks as a side project. We are aware that it’s much harder to design a car interface under real life conditions with all the technical and budgetary restrictions of building a production car for the mass market. It would require much more work and real life testing to make this concept ready for market, but we believe in the general approach and will continue to refine it.
The good news is that the conversation about next generation infotainment systems has already started and with Apple and Google entering the market there will be a huge lift in the near future. Even the traditional car makers are starting to realize the lack of great UI design by introducing enhanced infotainment systems like Audi’s new virtual cockpit or Volvo’s Sensus System. Either way, I’m looking forward to finally driving my car without getting frustrated while using my infotainment system.
For more background information also read some more thoughts about our telsa interface concept on Medium.
View the full case study at Behance: https://www.behance.net/gallery/23771657/Tesla-Interface-Concept
Founder Bureau Oberhaeuser