SomeJoe7777, I want to complement you on the very nice UI. It is simple, high contrast and very readable. Tesla needs to hire you to redesign the crappy UI that is extremely difficult to read. Anyone that designs a light background with tiny grey letters in an automobile should be shot.
Thank you for creating this.
Thanks, Michael!
Human-machine interface is something that I've thought for a very long time has been quite poor. Not just in computers/software, but in other areas as well, such as industrial and factory/plant. I have a good deal of experience from long ago with industrial/plant operators' panels where many indications (e.g. temperature, pressure, flow, valve positions, circuit breaker positions, pump status, etc.) are shown and I've always thought that those were some of the poorest excuses for a human-machine interface I'd ever seen.
- No logical organization. Frequently, there are parameters in the plant that are related to each other but their indicators are on opposite sides of the panel.
- Every indicator looks the same.
- Indicators are hard to read.
- No difference in an indicator for temperature (reading in degree F / C) and an indicator for pressure (reading in psi or bar) -- same numbers, same font, same color.
- No way to spot trends -- parameters can change slowly and you can't see that movement.
- Inconsistent use of color -- one panel has open valves in blue, a different panel uses green, another uses white. One panel uses "lights off" to indicate closed valves, another uses red.
- Panels with rows of dials and numbers actively discourage the operator from properly visualizing and understanding the equipment status. The display should be far more visual and intuitive.
- If those aren't bad enough, the real downfall of these poor human-machine interfaces is in an abnormal/casualty/problem situation. The panels do not assist the operator in focusing on what's important. In a plant/industrial accident situation, it's not unusual for dozens of alarms and warning indicators to be actuated. Only a few of them are really important and directly relate to the actual problem, all the others are a symptom or side effect of the main issue. Yet the panel doesn't assist the operator in prioritizing what is critical and what is not.
For this website, I wanted the central indicator to be an all-in-one, intuitive summary of the wind situation as it relates to the car. At one glance, the driver is supposed to be able to immediately infer exactly how the wind is pushing on his car without looking at a single number. The rotating compass, car image, and wind pointer directly convey this. Other indications break down that situation into more detail, such as the vector wind components (in a separate panel to the left, non-centralized because it's secondary information), and ground speed/air speed (in a separate panel below for the same reason).
I also wanted judicious and consistent use of color -- wind things are always in the light blue. Extra energy use is always in orange (matches the Tesla power meter), and energy recuperation is always in green (also matches the Tesla power meter). The one dot of red in the display is the North indicator on the compass. Red is a color that has to be very discreetly applied and only when absolutely necessary. It's the alarm/danger color, and shouldn't be used for anything else except very judiciously.
Because we're driving, easy readability at a glance is highly important, which is why I chose the high-contrast display, large font for numerical information, sans-serif font for on-screen readability, and careful selection of font size to convey the importance of each piece of information. Buttons are always in the shaded blue to match the Tesla interface. Web site interaction is designed for touch screen, with larger buttons so that you can hit them quickly while driving. I also wanted all information on one screen with no "modal" areas that have to be switched back and forth to get all information.
One of the trends in UI design that I think is a good thing is getting rid of the skeuomorphism (a type of UI design where the UI directly emulates or is reminiscent of a real-world object), like Apple's interfaces during the Steve Jobs era. IMO, skeuomorphism complicates the design and gets in the way of the UI doing its job. The UI should do one thing above all else: Get the relevant information to the user in the simplest, easiest, and most intuitive way possible.
