December 28, 2021

A UX designer walks into a Tesla Bar

I borrowed a friend’s Tesla 3 yesterday. About 5 minutes into the ride, the windshield started fogging up. I couldn’t find the defroster on the large control screen Teslas are so famous for. In desperation, I tapped the CAR icon but that took me to the settings screen which ended up being a dead end. Frustrated, I opened the side windows to clear the windshield. While pushing every button on the steering wheel, I accidentally discovered the voice control and was finally able to get the defroster working. It was such an odd experience I tweeted about how frustrating it was:

Little did I know that Tesla had updated to a new UI just a few days earlier. It’s been more than a bit controversial: A UX designer had just walked into a Tesla bar with a hornets nest on the floor.

The rather severe name calling and ad homimum attacks I got in response to this tweet are unfortunate but it is really just a day in the life of Twitter. However, I was surprised by the sheer arrogance and Dunning-Kruger on display. These people know literally nothing about human perception or performance. Someone was wrong on the internet! I have no illusions this post will convince the TeslaBros of anything but this is an interesting UX design example for those that want to explore. It’s worth going through the problem in a bit more detail.

The problem isn’t really that complicated: originally the defroster icon was visible on the bottom. With the latest December 2021 update it is now hidden behind the temperature indicator. Tapping the temperature brings up a sub-window with the defroster icon. So, yes it’s just 2 taps vs 1, but that can’t be that bad right?

Point 1: 1+1=3

Edward Tufte has this visual rule that 1+1=3. With a single line on the screen, you have just that single object, but adding a second line does something interesting, it adds a third ‘object’ on the screen, the negative space between the two. All good visual designers deeply understand this effect.

In UX design we have a cognitive equivalent. If you have two buttons, there is a third ‘object’ created, the decision a user must make on which button to tap. This cognitive load is invisible and rarely discussed but it can be a real source of confusion.

Point 2: Icon Standards + Hard Buttons

1+1=3 is one reason why there are international standards for most automotive icons. Common and well understood icons reduce cognitive load and help users learn new devices more easily. Here is the “Defrost” icon standard. Even Tesla uses it!

This is one reason why hard-buttons are so effective in old-school cars. They all use these same standard icons so it’s easier for new users to scan across them and find the one you want without any training.

Point 3: Tesla v10 was similar to old-school car designs

The v10 version of the software had the standard defrost icon along a bottom row. I’d like to discuss the pros/cons of digital vs physical buttons at a later time but my high-level point right now is that the previous v10 version actually met my needs. I would have scanned and found the button easily. I’m not anti-Telsa, I’m anti-v11.

Point 4: Icon, icon, who has the icon?

But in moving to v11, this icon bar was changed. The defroster icon is now gone. No amount of “scanning for a known icon” will work. Instead of a light task anyone can do in the moment, it’s replaced with a task that needs training: I have to KNOW where it’s hiding. I actually must RTFM. I’ll admit, this isn’t the world’s hardest thing to learn. But when I’m moving at 70mph on a busy highway with the screen fogging up, being a little bit harder isn’t great. This is why automotive UX is so hard. It’s the context and the severe consequences that make it far more impactful than a poorly designed phone app.

Most importantly, in 99% of cars on the road today, I don’t need to RTFM to turn steer, accelerate, brake, use the turn signals, or turn on the damn defroster. That’s why these things are standardized. There are lots of things I will likely need the manual for but not these basics. The v11 design broke this.

Point 5: Flat design for the lose

This new redesign uses a common flat design approach: using simple text labels as buttons. When I was scanning for the defrost icon, I saw the temperature readout but assumed it couldn’t be a button. In a calmer situation, I likely would have explored and tapped on it, but instead, in a slight panic, I tapped on the CAR icon which took me down a dead end.

Making the temperature actually look more like a button is one way to improve this. It would still be 2 taps and I’d still argue more dangerous, but at least there would be a stronger visual signal to help guide me towards the solution.

What to do?

Automotive design is hard. The “move fast and break things” of Tesla is  perfectly fine for Swipe-Right phone apps but in a car with lives at stake, they can’t be so cavalier. It certainly looks pretty to remove half of your buttons but this comes at a cost. Visual design isn’t the only variable to optimize. My suggestion would be to rank the core functions you want to be quickly found and put those in the bottom bar. If that doesn’t work, I’d work on a “more” option that guides my eye to these additional hidden buttons. Finally if you MUST put it under the temperature label, lose the flat design aesthetic and make it feel more like a tapable button.

I want to make it crystal clear that these are my initial thoughts and like any proper UX design, they require prototyping and testing to refine them further. The final solution is likely some variation. I’m not suggesting a perfect solution now, but a user-centered goal that I’m trying to achieve. Then comes the hard work of testing and retesting to make sure you’ve got it right. You can’t cut corners.