Tweak layout of Alarm Panel card editor

[SeanPM5]

Home Assistant release with the issue:
0.98.5

Description of problem:
While reporting the preview bug in #3662 I played around with this card editor a bunch. And I think that it could use a few layout and usability tweaks. It's mostly three minor suggestions:

1. The "Entity" dropdown should be on its own line. This is the only required part, yet it's currently displaying an optional field before it on the same line. Because it has such small width and because the alarm_control_panel domain is pretty lengthy, it's a very poor experience on mobile and even desktop.

2. With the "Name" textfield moved underneath, the placeholder text should also indicate that it is an optional field.

3. Switch to toggles instead of a dropdown. There's only four choices, and it already shows two by default, so having a dropdown for two items seems unnecessary. And since a dropdown is collapsed by default those extra options are also not immediately visible to the user. And a dropdown also requires extra clicks/taps compared to the toggles.

Here is a before and after mockup.

Current design:

Proposed design:

Now that you can compare both images, to recap, benefits of proposed design:

• Clearly labeled heading (as per Add card name to Lovelace "Card Configuration" headings #3658)
• Entity ID being the first option shows it has priority/significance over everything else
• Can actually read the entire entity ID now
• Name field is clearly labeled as optional so there's no confusion and user can easily skip it
• All of the "Available States" are immediately visible and no longer behind a dropdown
• Because they are toggles instead of dropdown choices you save clicks
• There's not a bunch of empty wasted space on the left
• A lot more mobile friendly

[stale]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[zsarnett]

I think instead of the switches we should implement Chips. Reasoning being if in the future there are more or the platform exposes custom states. Then there could be a lot of switches displayed. This way everything is hidden until queried for.

We just have to wait for MWC to implement them :) or implement them ourselves like Bram did the data table

[bramkragten]

That would be filter chips then right?

Btw, we do have a chips component https://github.com/home-assistant/frontend/blob/dev/src/components/ha-chips.ts

[SeanPM5]

Some quick mockups. Just realized I forgot the theme dropdown, but whatever, this should give a general idea.

Toggle switches

Chips

Multiselect checkboxes

I lean towards preferring toggle switches overall. They look the cleanest IMO and will be the most familiar for users as they're used in all of the other card editors. They can line up nicely and have adequate spacing, and they will probably scale down nicest on mobile.

Chips also look nice but they're not quite as clean IMO. The different colors sticks out a bit too much for my personal taste. And I don't think it's as immediately obvious how chips are supposed to be interacted with, so you'd need heading text unlike with the toggles. My main thing though, it feels a little weird having oval-shaped filled buttons and rectangular-shaped outlined buttons right next to each other. The styles clash too much. But perhaps that's being too nitpicky on my part. I'd be fine with chips, they're just not my personal preference.

Multiselect is my least favorite, doesn't feel like the most efficient use of space. There's lots of empty unused space on the right side if you display them vertically. They could be displayed horizontally I suppose, but that feels a bit weird with checkboxes.

[zsarnett]

Agreed. I was hoping to create an email like experience when adding contacts to the To field. But to do that with Material Design is not the easiest.

my suggestion would not be like filter chips. It would be like input chips.

This would help us in the future if an Alarm system had 10+ states to choose from. Showing them all may be too much for the editor

[bramkragten]

We should do the switch version Sean started with, as it only has 4 options