2024.8: Beautiful badges!

Francis, I’m not here for an argument. If you have complaints, do not direct them at me. I’m simply giving Tom information about the new badges.

Not arguing, sorry if I offended you.

You didn’t offend me, I’m not going to entertain these petty squabbles targeted at me when I’m just providing information about the new badges.

2 Likes

For me, the advantage of the old badges is that they allow you to get the desired information at a quick glance: because they have all the same size, the same shape and we know their place, so we don’t need to look for them.
Even if some may seem strange at first use, I quickly get used to them, or I replace them with a template.

4 Likes

I read his quote as context, but I agree it can be hard to make the distinction (directed vs context).

3 Likes

Was indeed not directed at petro, but it must have come over that way. Written text is always more difficult to interpret

Thank you @petro. More details, and especially an example, are always helpful.

Unfortunately, I’m still confused. My badges form one row at the top of my dashboard “Overview” page. This is how HA auto-created it when I first set up HA, and I’ve found it helpful. They are all on one row on a full-size screen, or two if I’m on a small screen. They’re always the same width, spaced evenly, and always in the same place (on the same size screen.)

They are all the same size. They all have the entity value (state) in the center, all in the same size font. Those which have a UOM all show it in a small “bubble” at the bottom, with the name underneath. These original, default badges don’t have an icon.

Below my row(s) of badges are all the other cards on that dashboard, with more details about the various entities I want to display.

The demo you linked doesn’t look anything like that. The first example is a whole page full of what I think might be the “new” badges. Small rectangles with just an icon on the left and the name on the right with the state under that.

It’s not clear to me how my dashboard will look after the update converts it. I don’t really care how fashionable the design is, but I do want to display the same information, in about the same amount of space. If I can achieve that without loading add-ons or custom components, I’d be OK with a new, trendy look. If not, it would seem like going in the wrong direction; taking away functionality which worked fine.

4 Likes

Here’s examples of the old badges and their inconsistencies. You must have somehow avoided this by only having entities from the sensor domain on your dashboard.

sensors, text and icon replaced with pictures:

binary_sensors and device_trackers
badges

lights and switches:
image

There’s some other odd domains with odd behavior. But you can see that every domain is different.

The new badges by default are not shown on the demo, you have to manually add them like you would any dashboard.

Here’s what they all look like

Keep in mind, that you can change what’s in the state position to any available feature on the entity: last-changed, last-updated, any attribute

To add badges on the demo website:

The most drastic change is the look.

The only functionality that was removed was friendly name truncation & word wrap. Friendly names are now fully shown. The badge placement is identical. Left to right, new lines are created when there’s no space left to place the next badge.

6 Likes

Sorry Petro, you still aren’t listening or understanding. The most drastic change is that the badge size is now variable and the minimum size is wider than the old badges. There is also a non-removable icon in each badge. The result is that quick “at a glance” displays of device state are now far less feasible than they were previously.

14 Likes

Again, I’m not here to listen to complaints, I am a moderator not a community manager. I’m explaining to Tom how the new badges work.

I have no opinion on the new badges or how they work. Please stop assuming that I’m choosing a side.

3 Likes

Thank you again! It’s starting to make sense. I think I could almost live with these.

One question: Is there a way to specify “no icon?”

For example, most of my badges are temperature sensors. Here’s a shot of the demo with a few temperature sensors, taking the default (no name) appearance:
image

Obviously taking the default isn’t going to work, since I have no clue which sensor is which. Already, these four badges take up about the same screen real estate as seven of my “old style” badges. I have 11 of those. But let’s put aside the issue of screen real estate for now and see what happens when I add names…

That’s better, and I can use shorter names for most of mine. But without the icons they’d take up quite a bit less space. I did try shortening the names even more, but those four still take up a little more room than six of the old-style badges.

I tried leaving the icon field blank, but that just left a blank space, the same width as an icon.

1 Like

Unfortunately I think having the moderator badge will label you as a “representative” whether you like it or not.

In any event, where should someone moan, if not in the release thread? (I agree, it shouldn’t be targeted at you personally).

2 Likes

You’re welcome to moan anywhere, including here. I’m making a conscious effort to avoid getting wrapped up in complaints because that’s not the job of a moderator. There’s a Nabu Casa empolyee for that now.

3 Likes

I got flagged in seconds… Nice… Now I will feel more connected to the community…
For me, it only approves, that thinking differently from the staff is not done here… This is called censorship in a civilized world…
Whatever, tomorrow the sun rises again…

Guys. Is any of the bickering relevant to the topic?

If the answer is no, do not respond and let’s move on.

7 Likes

zip-mouth-keep-mouth-shut

1 Like

Based on the available options, no; all options include an icon.

I and others expressed a need for a “no icon” option (in a topic dedicated to UI improvements) but it (obviously) wasn’t included in 2024.8.x.

I haven’t seen a PR for it but I’m hoping there’ll be one in the near future.


FWIW, I also use badges to display temperatures and don’t need to see a row of thermometer icons. The unit of measurement tells me I’m looking at temperature (or humidity).

6 Likes

I want to take some time to address some concerns about the new badge redesign on this thread, and to show that your feedback is certainly heard.

User interface changes are not about change for the sake of change or fashion; it is about creating a design that best fits the goal of the product, while also adhering to best practices in usability, accessibility, and aesthetics.

The fact is, the product goal of the old badges was never defined and therefore unclear: They are position at the top of dashboards, but it is unclear why and what they actually achieves. As a result, its usage is low, and those who use it are using it in a variety of ways. Usability is poor and the design is inconsistent: Names of the entities stretch multiple rows, yet their states are truncated. The colors are red by default, but red signifies warning and error.

In the early design research process, we looked into over a hundred case studies of some of the most common and most popular dashboards submitted by our users. Out of the 100+ dashboards, only 2 of them still used the old badge. This is by no means accurate, but it is an adequate data point with an acceptable margin of error. With that said, even a few percent of a million HA instances mean a few thousand instances, and we are aware of that.

Meanwhile, there are a few dozens of users using the badges from UI Minimalist or the Chip card from Mushroom cards where the old badges were used to be located. The goal of these new “Badges” is much clearer: They display concisely the key information that summarize the page. Instead of being simply a row of a dozen or more entities that a user pins at the top flooding the contents of the dashboard further down, the new badges are designed to be concise and can be easily shown or hidden depending on conditions, with as few entities visible at a time as possible.

The conundrum of designing user experiences is that there can be only one default. Even if we were to let users choose in the beginning, there will still be one more preferred than the other, or worse, it leads to unnecessary choice paralysis. Some may suggest that we should support multiple designs of the same card, but in reality it will complicate both the maintenance of the code and the documentations of their usage - We do not have the resources to ensure all variations of designs will work properly with every update.

With that in mind, we came up with a few migration strategies. Changes are never easy, and so we pick the one strategy that balances between covering the needs of most users vs investing adequate amount of time and resources.

Ultimately, we decided to test the design during beta, and then to make the call to replace the old design or not based on feedback during that period. We also ensured that we would achieve feature parity between the old and new designs, except for the usability improvements and aesthetic differences. Additionally, we wrote new documentations for contributors to create custom badges, so that users who really want the old badge can have the option back.

As of now, unfortunately we are still working on exporting the old badge into a custom badge card, as we are currently experiencing delays due to changing schedules of our maintainers. We welcome any card developers who would like to step up and help with this issue.

Since we are designing in the open, we will continue to incorporate your feedback into our next iterations. There will be better research and validation processes as we update the rest of the cards.

25 Likes

Will there be a “no icon” option in the September release?

4 Likes

First of all, thank you @madelena for the respectful explanation of the process. And for acknowledging that user feedback has value.

I’m the one who used the term “change for change’s sake” and words like “fashion” and “trendy.” Admittedly, those were chosen to evoke an attitude which I consider one of the potential pitfalls of any UI design. When the headline above a release notes thread contains the word “beautiful,” it’s clear to me that looks are a priority. Another phrase I’ve used in this vein is “form over function.” More on that later. The fact is, there have been a lot of words here extolling the virtues of a “modern,” “clean” or otherwise “trendy” look. And that’s fine. We all want HA to look good. But not at the expense of a lot of hours re-configuring our own dashboards. Obviously there’s room for both form and function improvements. Just don’t break things or take away existing functionality.

As for what the old badges actually achieve, that’s easy. For me, they put 11 critical data points about my home in a minimal amount of space right where they’re instantly visible. I don’t really care that they don’t match, esthetically, with the rest of the dashboard.

I understand that the old badges just sort of grew organically, not part of any larger plan. And I agree that a big red ring doesn’t fit the current look of HA. I want to make it clear that I’m not against change. But these were part of the default dashboard that every single new user got. It’s great that HA is so flexible that a lot of people moved on from that default and did their own thing. But to now dump on those who found those badges helpful, simply because they’re in the minority, seems cold.

Your “popular dashboards submitted by our users” dataset is clearly self-selected for users who are proud of all the work they put into customizing their dashboards. It wouldn’t include all those users who felt the default was good enough and spent their time on getting good data to display, rather than on how it’s displayed. Hence I question the conclusions you’ve drawn from that dataset.

I should stop here and say some great enhancements were added to the new badges. The ability to hide them dynamically, and putting all the config options right in the UI, are huge improvements!

I don’t agree that badges are only used to summarize the rest of the page. I use badges as a quick, concise overview of just the key data from my all over my home. Nothing below feels “flooded down.” And if the design criteria included being as concise as possible, why do the new badges take up around 50% more screen real estate than the old ones? How does forcing display of all those icons help this goal?

I agree there can only be one default. But it’s not clear to me how that’s relevant here. Especially since this whole debate was caused by the decision to break a previous default. The new badges will make a fine default for new users. Even forcing existing users away from the pervious default would be fine if it didn’t break their existing displays.

It seems to me that changing users’ old badges to the new ones does not result in feature parity, for all the reasons discussed at great length in this thread. Maybe with a few additional features.

I appreciate that these comments are being read and incorporated into future releases. I think it’s quite possible to make these new badges flexible enough to meet the needs of anyone who uses the old badges. The new badges will make our HA dashboards look better. Offering the option to stay with the old ones, at least for a while, would also be welcome for many users who just don’t have the time right now to make the change.

17 Likes