Rearrange items in Card editor so it matches people's expectations

[laupalombi]

Problem statement

Research is showing the order of actions in the Edit Card interface is not ideal - people require several jumps to get to add something as easy as Brightness. But the features themselves are good - we have a big opportunity just reordering the items.

Community signals

Research ongoing (80%) on Dashboard editor sees that all candidates interviewed get lost into the Card editor, and take a lot of scroll into finding what they need - although happy when they find it. Hence the ordering is the issue, not the items.

Scope & Boundaries

In scope

• Rearrange of elements
• Small changes in UX
• Changes in copy

Not in scope

• New features
• Changes in preview
• Changes in content

Foreseen solution

We are testing 3 different concepts for rearranging in this PR. All naming is TBD, using some naming for the purpose of the concepts.

• Concept A rearranges items by context - what is Setup, what is Appearance.
• Concept B rearranges item by perceived complexity - what is Basic, what is Fine tunning
• Concept C doesn't add any groups, but rearranges items individually so they are closer together by meaning without creating the toggles.

The best way to test this is test the PR and use it with real life devices and configurations.

Initial Design here: OpenHomeFoundation/ux-design#28 More specifically here https://www.figma.com/design/xurRwpZBycqAjMDocJODJ3/Suggested-cards---dashboards?node-id=190-454

Decision log

Date	Decision	Outcome
6/8	This UX is too important and we need to explore more than just rearranging the existing items in the vertical axis.	Broaden the scope pf rearrange and explore more with design, keeping this opportunity in Shaping more time and be able to use Interviews to Validate.
8/3	Matt did 3 concepts in a PR so we can test them internally and within the community before picking candidates for no-context users.	Adding some early feedback + community testing

[BBE-FR]

Foreword: I think the current interface is perfectible, and it is a good idea to renew it a little, and the solution proposed are already better on many aspects.

But I have a few small comment here:

First: I fear the "extended " label is very difficult to discover / understand (it sound a bit like "advanced setting"), I have the impression that the current interface with collapsed tabs (or drop-down, unsure of the name) is better because it is obvious you have to open tabs, whereas it is less obvious you have to clic on "extended".

Second: looking to it I immediately missed the state content next to the name in the proposal.
I understand the aim, find it efficient, but I miss the "cohesive" grouping of the current state.

Previous interface, once extended was very coherent with the tile elements positions :

• icon
• colour
• name
• states
  which are all set at the same place and in the same order as in the tile card itself => all the "information" part were grouped except the features. For me the only thing really needing improvement was the feature buried in the botom in their own tab, not very discoverable...

In the new extended version, those parameters are scattered. I personally found it less efficient.
I think the main reason is because some layout parameters (which are also very space consuming) are in the middle of content.

---

Proposal:

Maybe it could be worth to change the tabs (or drop-down, not sure of the name) and their "content" to reorder all options :

• "content" or "information" (what info is used: icon, colour, picture, name, state and feature choices => because icon and color are information and features are also content indeed)
• layout (how it is displayed, organised : show picture; hide state; card horizontal/vertical and features below/inline choices => this is how it is displayed or what is hidden, not the choice of the information used)
• interactions (how it behave => unchanged)

note: where to put the "show picture / hide state" line between content or layout is unclear for me and thus fully open to discussion

Moreover, the layout part could be simplified, with only 3 "boxes":
horizontal with features below , horizontal with 1 inline feature, vertical => only one line of choices as inline + vertical is impossible.

---

Then, back to first point, If you want to extend something by default for discoverability (which I am not sure is needed if everything is collapsed), it could be this new "content" tab/drop-down only, that could be opened by default, while the other are collapsed.
This would be far more efficient IMHO : I prefer to have icon, color and state directly accessible (information related) rather than the below/inline option in your proposal (layout related), useless for "featurless" tiles.

My cents

[BBE-FR]

Another important general comment:

There is a very nice assets in the last cards created in the similarity between the editor interfaces:

• Heading card editor:

• 

• Area card Editor:

• 

• Tile card editor:

• 

• heading card entity badge editor:

• 

In my opinion, this should be kept:
Both Tile, Area and Heading cards, heading badges interface are very similar and coherent, could we keep that coherency ? This was a nice asset of Tile + Area + Heading interface, you learn one, you know all !

This similarity could be kept with the 3 tabs (or dropdown, not sure of the name) proposed above to reorder the option of the interface inside (content / layout / interactions) if all editors are changed using the same re-ordering:

• For Area, same features => same solution as for Tile above (feature choice move to "content" and feature layout move to "layout")

• For Heading card:

  • content ( icon, heading text, "+ add badges or buttons" button and badge/button list same principle as for features)
  • layout (here only title / subtitle choice... does it deserve a dropdown? There is spare room for any future badge styling options (centered, aligned left or right for example) ?)
  • interactions (unchanged)

• For heading badge:

  • content (same content but remove the "displayed element" tick-boxes)
  • layout (current visibility drop-down + the removed tick boxes above)
  • interactions (unchanged)

Same design could (should?) be re-used for all future cards or renewal of legacy cards to create consistency and thus familiarity for users

• content or info (what is in)
• layout (how it is arranged)
• interractions (how it behave)

---

As improvement (although as for tile card above I am personally not sure it is needed):
Having initially the "content" dropdown opened and the other collapsed could be a display option (but still possibility to collapse it and open layout for example), or even, for cards with little option more than one dropdown opened by default (example for heading cards)...
That would provide consistancy (3 dropdowns / tabs) and flexibility (open by default the relevant ones, collapse by default the other).

---

Having similar interfaces for all cards editor is for me a key asset for home assistant cards that should not be underestimated.

Exactly the same way the 3 tabs below are consistent accros all cards in sections: Config / Visibility / Layout. You can pick any card in your dashboard, the way to adjust size and visibility is always exactly the same, no hesitation, no search of option.

The risk of confusion between the two "layout" references could also be addressed:

• layout tab (what size inside section - part of config/visibility/layout common interface just above) => could be renamed sizing for clarity (in ALL cards interface) as it is just about size and the real layout is done by drag & drop at section level.
• layout drop-down (what is the internal arrangement of the card layout - part of above proposition of content layout interactions interface) => could keep "layout" or switch to "arrangement" wording or even "layout and visibility" as it can also state what is visible and what is hidden inside the card)

---

Again my 2 cents to bring feedback to the discussion before implementation...
As writen on the initial post:

There is already a pretty good proposal that will help us for sure - but open for discussion