Suggestions for energy dashboard sidebar card usability and interpretability

[wtadler]

(Per @balloob's suggestion, I have broken some of the below issues out into #9975, #9976, #9977, #9978.)

The new energy dashboard is fantastic. But I think that the presentation of information in the sidebar cards (which are also available for any Lovelace view) could be improved. Here are my suggestions. For reference, I'm including the images from the documentation for these cards.

Energy distribution

Current look (more or less):

Current tooltip text: None

One thing that might confuse users is that the animation (energy dots flowing between nodes) suggests a live view of energy flow. But the numbers and the speed of the animation actually reflect production or consumption for the whole day so far, or for an entire past day if you've scrolled back in the energy dashboard. Some ways to address this: allow the user to select a time period, up to as narrow as the last 15m, perhaps (I know that v2021.9 will allow some customization here); don't animate the dots when showing a previous day (or other period that has concluded); at the very least, indicate to the user that the numbers reflect daily usage (in fact, this goes for all of the cards, since none of them say this, making interpretation unclear when they are placed on custom Lovelace dashboards besides the energy dashboard).

Another confusing thing is that the blue number represents total grid consumption (fossil and non-fossil) on the "Grid" circle, but the blue pie slice represents only fossil grid consumption on the "Home" circle (with non-fossil being split out into a green pie slice). One (admittedly imperfect) fix here would be to eliminate the "Non-fossil" circle, making that information a new line in the "Grid" circle (since it's really just part of the grid anyway), turning the "Grid" circle into a blue, green, and purple pie chart like the "Home" circle is, and somehow making it more clear that blue specifically means fossil grid consumption. (The blue bars on the main energy usage graph could then also be subdivided into blue and green as well.)

Grid neutrality gauge

Current look:

Current tooltip text:
This card represents your energy dependency. If it's green, it means you produced more energy than that you consumed from the grid. If it's in the red, it means that you relied on the grid for part of your home's energy consumption.

This card is basically redundant with the energy distribution card above. It’s just doing a few operations to tell you whether you returned more than you consumed, which you can tell by glancing at the "Grid" circle on the energy distribution card anyway. Second, it’s not immediately clear what the needle position represents. It’s relatively clear that the number displayed in the gauge is just returned - consumed, but what does the needle position mean? What are the units/limits of the gauge? I’ve looked at the code, so I get what it’s doing (and it seems like a reasonable thing to do), but it's still not clear to the user. For these reasons, I would suggest removing this card from the energy dashboard. I could see leaving it around as an option for other Lovelace dashboards (especially for users not using the energy distribution card). Another option is to integrate it into the energy distribution card, since it is so closely related. My above suggestion about making the "Grid" circle in the energy distribution card into a pie chart would pretty much convey the same information as this gauge. But if this card is definitely sticking around in the energy dashboard, here are some changes I would suggest:

1. Switch the green/red colors to the purple/blue return/consumption colors used in the energy distribution and energy usage cards. That’s exactly what the gauge zones represent: what is now green reflects net energy return (purple) and what is now red reflects net energy consumption (blue). This change would make the card much more consistent with the others. The use of green/red has two additional problems as well. First, green is also used in the energy distribution card to indicate non-fossil grid consumption, which is totally different. Green/red also has the problem, IMO, of introducing positive/negative valence, which makes the tooltip on the next graph a bit confusing. (I’ll comment on that next.)
2. Eliminate the yellow range. The size and position is totally arbitrary, and not mentioned in the tooltip anyway. It seems only to reinforce the positive/negative valence, which I think is a problem in the first place.
3. The tooltip should be corrected. It says that if the needle is in the red, it means that you relied on the grid for part of your home's energy consumption. In fact, the needle represents net usage. It could be in the green even if you relied on the grid at night, which is, of course, typical. I would suggest changing the text to the following (coupled with the previous two changes):
   This card indicates your overall energy dependency. For a given day, if the needle is in the purple, you returned more energy to the grid than you consumed. If it's in the blue, you consumed more energy from the grid than you returned.

Solar consumed gauge

Current look:

Current tooltip text:
This card represents how much of the solar energy was used by your home and was not returned to the grid. If you frequently produce more than you consume, try to conserve this energy by installing a battery or buying an electric car to charge.

First of all, it is not clear how to compare the tooltip with the graph. It takes a second to realize that “produce more than you consume” counterintuitively refers to a situation where the displayed number is low. Secondly, I don’t think it’s correct to say that channeling energy into a battery or an electric car is “conserving” energy compared to returning it to the grid. Batteries are not even necessarily advantageous for solar users with good net metering, such as in many US states. Third, the text sort of makes excess production seem like a bad thing, which is hard to square with the green/red color choice in the previous card (which, as I said, I think should be changed or eliminated anyway). So my suggested text is:
This card indicates how much of the solar energy you produced was used by your home instead of being returned to the grid. If this number is typically very low, indicating excess solar production, you may want to consider charging a home battery or electric car from your solar panels at times of high solar production.

Carbon consumed gauge

Current look:

Current tooltip text:
This card represents how much of the energy consumed by your home was generated using non-fossil fuels like solar, wind and nuclear.

I would clarify that this includes both local and grid sources. I would also clarify that higher is better, since the valence of the other gauges is not totally straightforward. (In other words, whether it is better to aim for production or parity depends on your goals, your net metering situation, etc.) But a high proportion of non-fossil consumption is unequivocally good—so why not make that clear? Suggested text:
This card indicates how much of the energy consumed by your home was generated from non-fossil fuels. This can include energy from your solar panels, or renewable and nuclear energy from the grid. The higher, the better!

Thoughts? I'm happy to open a PR if a consensus opinion emerges.

[EnochPrime]

I'd also like to point out there is an inconsistency in the color usage in the newest Energy Distribution card. As seen below the grid circle is blue and the output line to the home is also blue. Solar is yellow with a yellow output line to the home, etc. However, the battery circle is a pinkish color, but the output line it light blue.

For consistency either the battery circle should be changed to light blue to match the output or the input & output values and lines should swap colors.

Also, in my opinion, I would make all 3 lines out from solar (to grid, home, battery) yellow to match the circle. In the same fashion the line between the grid and the battery would actively switch between the grid color, when more energy transferred from grid to battery, or the battery color. There could still be the unique purple and pink colors on the grid and battery inputs since these would be a sum of solar + battery (for grid return) and solar + grid (for battery charge).

[EnochPrime]

Further discussion about this to take place under #9949.

[balloob]

Create a single discussion thread per topic please. Putting 3 topics in one won't help discussing it. Now @EnochPrime introduced even a new issue and that makes it impossible to conclude anything

[EnochPrime]

Started a new discussion specifically for Energy Distribution card color usage. #9949

[wtadler]

Thanks! I broke this out into
#9975
#9976
#9977
#9978