EOX-A / EOxElements

A Web Component collection of geospatial UI elements, crafted by EOX.
https://eox-a.github.io/EOxElements/
MIT License
12 stars 2 forks source link

Review and discuss layer-control design #1201

Open santilland opened 1 month ago

santilland commented 1 month ago

There are some considerations that would be great to discuss for potential UI/UX improvements. Some points that pop into my head:

1) With the left margin for layers within groups we loose a lot of precious space image

2) Sometimes it would be great to show more then 1 tool at the same time instead of "hiding" them inside a small tab menu, for example a date selection option and a color legend or the opacity slider. I would propose to introduce an option to either show all available tools one under another, or to have something like in stac-info where we can define the "highlighted" tools

santilland commented 1 month ago

As an example, this is the current tool grouping for opacity and time selection image I think the time selection is quite hidden, for me it would make sense to have it all displayed at once. Also the shift to the right is quite strong, taking into account the separation lines, etc, i think having them on the same indentation level as the parent would be ok. This could look something like this image

miskovica commented 3 weeks ago

@santilland Here is the draft/suggestion to reduce the margins and to show tools in a more integrated way.

The gear icon located before the label can be an access point to the global settings, where users can choose with toggle which controls should be visible. Having again checkboxes with labels in the settings dropdown feels more crowded and checkboxes-heavy, particularly on the screen with a lot of layers and controls. This is why toggle can play a slightly better role here.

To reduce the indentation, we can even reduce margins and move the child element more to the left, where the checkbox aligns vertically with the middle of the chevron arrow above. If this is going to be approved, it s good to ensure that this indentation style is consistent applied across elements.

example01 example02 example03

Anyway, aligning the child element with the parent would also be ok.

example04
santilland commented 1 week ago

Hello @miskovica , thank you for the design concepts! the idea of having a "global" toggle setting is very interesting. I also like the idea of keeping the icons in the "list" mode variant. I think having an option for tabbed or list mode plays very nicely together like that. If the list mode is used additionally this global settings could be added for users to be able to only show things they are interested in. As for the alignment i think both variants look good to me, not sure how we decide on what options works best. @spectrachrome did you start looking into this? Could you look into having this list mode also showing the icons as in the renderings? We could then test out what indentation level looks best and also discuss how to implement the global settings menu.