Brainstorm ideas for improving UX of the Panes, Headers, Toolbars

[keyserj]

Describe your issue

The panes, headers, and toolbars don't seem as intuitive and sleek as they could be (related #298). Let's consider what can be improved.

Known concerns:

• Quick Views are not blatant but should be
• Filters are somewhat of a waste of space for new viewers who probably won't use them
• two headers take up a lot of space from the height of the diagram
• not obvious which Topic we're on if not viewing Topic Details
• hard to tell which toolbar buttons I should care about
• textboxes in the topic details don't line up (watch, description)
• read-only textboxes don't really look readonly (probably should be "show more"/"show less")

Questions:

• how should these relate to a Simplified View like Ideas - how to simplify view for new users? #541 (comment)?

Ideas:

• check out for ideas: Miro, draw.io, vscode
• could put Quick Views in a separate, simpler pane, maybe accessible via a views button in the toolbar
• maybe the toolbar should have more menu buttons, rather than putting every extra thing in one "extra things" menu
• maybe nodes in Details pane can fit in one line (not only take up less space, but distinguish from selected node)

Solution you'd like

No response

Alternatives you've considered

No response

Additional context

No response

Technical ideas and questions

No response

[keyserj]

Initial design idea (main inspiration: https://miro.com/ and https://www.tldraw.com/):

Notes:

• potentially the Quick Views dropdown could go in the bottom toolbar too
• top toolbar should include user profile icon probably? so users know if they're logged in

Questions:

• how would the table look like with this UX? seems like it would be awkward to overlap the toolbar, blocking the first row of the table
• should there be a quick button for switching between table and diagram? can be annoying if switch to table and not sure how to get back
• should the panes have shadow/elevation to help distinguish from the canvas? check out other diagram tools
• should Quick Views dropdown have numbers and/or left-right arrows to signify & navigate the intended order?
• what should details pane look like with no selected part?
• how do headers (e.g. left: toolbar, right: profile icon) look, being above the View/Details pane?
  • want pane to share space w/diagram (so diagram doesn't lay nodes behind it) but headers not to go across the whole top of screen (so diagram can be taller)
  • figma puts headers within the top of the panes if they're open, but that seems a little gross
  • miro/tldraw float the headers and panes, they don't really care about pane sharing space w/diagram
  • kialo/lucidchart/draw.io keep the header around, they don't really care about vertical space I guess
  • maybe headers could be overlayed on diagram corners, so they shift inwards if pane is open?
  • maybe also panes could slide downwards from the headers

[keyserj]

Made a Figma prototype for this - it's much easier to modify than a ShareX screenshot 😄, plus you can click around a little and easily see the different smaller-screen views.

• prototype: https://www.figma.com/proto/iSM88wgFYeiQA35oAPoOgF/Interface-redesign
• design (probably shouldn't need to see this outside of maintaining the prototype): https://www.figma.com/design/iSM88wgFYeiQA35oAPoOgF/Interface-redesign

I think the work involved here is much smaller than I originally anticipated. Not planning on moving the contents of the Topic Views pane nor of the More Actions Drawer; potentially putting into a text-based file menu could make things easier to find & discover, but that's another chunk of effort that seems lower priority right now. Also not going to change the Topic Details/Settings right now.

Expected work chunks:

• Create workspace overlay for headers & quick views
  • overlay Topic author/title & Quick Views Select onto workspace
  • move Site Header & Workspace Header into workspace overlay
  • split toolbar into overlayed Side Toolbar and Main Toolbar
• Make Topic Pane take up full screen for small screens
• Add "Show Scores" button
  • with menu for perspectives
  • remove scores from being included in "Show Indicators"
  • update tutorials?

[keyserj]

Design seems done, separate tickets for implementing: #602 #617 #618