Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make blueprint tree more scannable, and the concepts clearer by distinguishing containers, space views, and entities. #4743

Open
kpreid opened this issue Jan 8, 2024 · 3 comments
Labels
🧑‍🎨 Design Requires UX/UI designer input enhancement New feature or request ui concerns graphical user interface

Comments

@kpreid
Copy link
Collaborator

kpreid commented Jan 8, 2024

Is your feature request related to a problem? Please describe.
The blueprint tree is potentially quite visually noisy (depending on the application's number of space views and entities, and especially if they've been named haphazardly), and contains fundamentally different kinds of things all displayed using identical visual style, in an arbitrarily-deep hierarchy, which makes it difficult to comprehend what is even going on, especially as a newcomer.

Screenshot from dev version:

Screenshot 2024-01-08 at 13 01 36

"What is this? Why are image, depth, rgb repeated twice? Where are the controls I saw previously — oh I need to click on the other thing named image.”

Describe the solution you'd like
Rerun 0.11 actually did a little better than the later version: it displayed layout containers dimmed and without icons, making that partition of the hierarchy clearly evident and deemphasizing the parts that aren't the data.

Screenshot 2024-01-08 at 13 00 46

However, I think we can do even better than that. In the following mockup, each Space View has been given a box surrounding its children in the tree view (in addition to dimming the Grid label again, and making the Group icon smaller):

image

This addition should increase legibility and discoverability in a variety of ways:

  • All UI containers are outside the boxes and all entities are inside them, thus teaching the fundamental 3 kinds of things in this list. (And note that there will never be a box nested inside another box.)
  • The box hints at the fact that a Space View is also a box in the actual visualization UI.
  • A cue besides icons indicates that space views are a different kind of thing than entities, despite often sharing names with them.

Further possibilities:

  • (As pictured) Make the icon for Groups smaller than the icon for Space View, to make them more like the small dot for leaf entities, rather than being slightly bigger than space view icons as they are now.

  • Moderate use of color might be good too; for example, if space views all had colored icons, layout containers were all gray, and entities were all white and small.

  • There could be a “view only” mode (as opposed to "editing the blueprint") where layout containers are entirely hidden.

Alternatives
Space views could be marked in some other way that's not a box.

@kpreid kpreid added enhancement New feature or request 👀 needs triage This issue needs to be triaged by the Rerun team labels Jan 8, 2024
@emilk emilk added ui concerns graphical user interface and removed 👀 needs triage This issue needs to be triaged by the Rerun team labels Jan 9, 2024
@martenbjork
Copy link
Contributor

Good suggestions! I think, as a great first step, we should:

  1. Make Containers subdued (icon + text)
  2. Add vertical lines below each expandable item (similar to VSCode) to enhance the sense of hierarchy

subdued-and-lines (1)

@kpreid
Copy link
Collaborator Author

kpreid commented Jan 10, 2024

I strongly disagree with

Add vertical lines below each expandable item

being a good direction. The nesting is already clear enough for most purposes (in my opinion); the goal I set out in this issue is to convey the types of the items more strongly. Additionally, multiple parallel lines of identical style are generally hard to follow by eye to see what an individual one attaches to. That is why I suggested adding lines around only the space views, to highlight their unique role in the nesting and to ensure that there are never parallel lines.

@nikolausWest
Copy link
Member

I hear you @kpreid on the need to distinguish the types of items. We are somewhat wary on going deep on these distinctions right now as there is still some active design work going on on the conceptual side on what these types actually are / what the best conceptual frame is for them. This design is meant as a small step in the direction of improving clarity while we wait for the concepts to solidify.

We are also a bit wary of using color to indicate differences since the visualized data is likely to have color and it's easy to distract or accidentally imply false connections to data.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍🎨 Design Requires UX/UI designer input enhancement New feature or request ui concerns graphical user interface
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants