Confusing UI when creating OH3 pages - very hard to interpret the hierarchy

Setup, Configuration and Use Beginners
1
  • Platform information:
    • Hardware: RaspberryPi 3B+/1G RAM/128GB SD card
    • OS: Raspbian Buster
    • Java Runtime Environment: Zulu11.58+25-CA (build 11.0.16.1+1-LTS)
    • openHAB version: 3.4.4

So I’ve found configuring UI pages to be extremely confusing, both visually and conceptually. One part is the unfamiliar and/or similar-sounding terminology (cells/cards/widgets/blocks/masonry, etc.), but I assume I’ll get a handle on those as I continue to fiddle around with things.

The way the page layout editor works makes it much harder to understand what you’re doing when you add/remove different types of elements.

image
image3805×2103 125 KB

The above is just the raw appearance. Below, I’ve annotated it.
image
image3514×2038 398 KB

Notes:

  • The opposite action of “add column” is currently “remove widget”.
  • The “add ___” buttons aren’t always near the location where they impact the UI. The worst offenders of this are the “add rows” and “add cells” buttons, which I think should be at the bottom of their Block, since that’s where the new components spawn. “Add Block” is a good example of intuitive positioning. Ideally, the “Add Column” button would also be off to the right of any existing columns.
  • the white separator lines don’t do a good job of conveying the nesting structure/hierarchy of the blocks and other components.
  • It would be helpful if rows and cell array sections were labeled as such within the editor. clicking “add row” spawns a section that’s only marked with an “add column” button, and “add cells” results in a row with no text at all. Particularly since they spawn farther down the page, it’s hard to locate what you just created, unless you already know exactly what you’re looking for. Labels would also help with reverse engineering, i.e. “I want to add more of these elements right below this one”.
  • A slight visual distinction between the rectangular cell placeholder and the rectangular widget/card placeholder might help a bit, but the confusion comes more from “I want this type of widget; do I need to create rows/columns, or ‘cells’”.
3 Likes
2

+1 from my side. I’ve been working with the main UI since over a year and it is still just so hard to create pages. Add a row, and then spend 2 minutes to look for it because it is lost between all other rows. And then you don’t know which button controls which row.
Also, there are different widget types for each block or masonry or whatever element. Just make a rollershutter control as a cell, oh wait then it doesn’t have the buttons. But in masonry it will.
I still appreciate all the effort that went into this, especially being free! And I can see there was a challenge bending css and vue.js into a non programmer space. But I do feel the pain and I think your points are very valid.