UX discussion

From Axel's review

Editable table:

• When editing a list or an object the editableTable pops the DraggableDialog but when cancel is pressed it gets back to the non-editing mode for the specific row so the user cannot change the type. The whole row should be deleted if a change in type is needed.
• Also there is no cancel when you edit a row in the table if you want your changes not to be applied.

Sidebar

• Split “Add Nodes” section into a separate sidebar to avoid nesting accordions and to avoid mixing UIs meant for different needs (creating vs editing nodes). The sidebar for editing nodes/links is contextual – it changes based on the current selection, so it needs to be dedicated to this behaviour.
  1. “Add Nodes” sidebar on the left (floating, toggleable somehow)
  2. Contextual editing sidebar on the right (pinned), which then might not need an accordion at all
• Darker sidebar bg so accordion sections stand out !340 (merged)
• Bold headings
• Sentence case for accordion headings
• Simple chevron icons to match what a typical accordion UI looks like
• Use icons (graph vs node vs link)
• Show delete/clone/burger buttons only when relevant and prefer “contained” and “text” variants (but “text” button must be used together with at least one “contained” button)
• Rename “Node/Link Details” to “Edit Node/Link”
• In “Node/Link Details” sections, remove extra blue outline/bg
• Add min-width to sidebar to avoid cropping/wrapping
• Improve design of form inputs (less padding on text fields, maybe use fill variant so fields stand out more and to avoid having too many lines)
• Turn color picker popups into modals - i.e. with backdrop (same with other popups if applicable)
• Sidebar needs internal scrollbar

Top bar

• MUI’s floating action buttons are not appropriate as toolbar buttons (and in other places as well, like in the workflow/task management panel)

• Buttons that are not obvious should have labels, and icons should be reviewed (“plus” for creating a new workflow, “cross” for leaving the app, etc.) – maybe some icons can be simply removed (e.g. “open from server”, which currently looks like a download button)

• Allow editing title of workflow by clicking on title (with the right affordance on hover)

• Hover color must pop instead of blend with top bar background

• Need contextualisation: new workflow (“Untitled workflow”, save to, etc.) vs. local workflow vs. remote workflow? – enable/disable icons accordingly

• “Save to Server” turns into check mark even when canceling/closing modal

• Need more insight into workflow/tasks management panel – seems like two unrelated things: one for browsing/opening remote workflows; the other to configure the tasks catalog that are avialble to the user on their current browser.

  1. If so, then tasks management belongs to the “Add nodes” sidebar (maybe renamed to “Tasks”?)
  2. … and browsing/opening remote workflows belongs to a new left-hand floating toolbar?

• The quick open drop-down feels like a temporary solution that will not scale well. It also duplicates the “Workflows” panel. A dedicated “Open workflow” sidebar would make browsing/searching for remote workflows easier and would open the door to more features, like “Quick open”

• Another idea would be to have tabs in the top bar to be able to open multiple workflows at the same time. A “+” button would open a tab with a UI to browse remote workflows, open the example workflow, create a blank workflow, create a workflow from a template, etc. One could also imagine persisting opened workflows to localStorage (or to the back-end for logged-in users).

Graph

• Selecting a node doesn’t always work
• Allow deselecting a node when clicking on it again
• Make links more easily selectable (i.e. increase clickable zone) – allow deselecting by clicking on the link again as well
• Make selected state stand out more (outline for nodes? thicker line and different color for links?)
• Scrollbar when window is short and white space at bottom when window is tall

Architecture review

• Global icons management seems flawed, as one can delete an icon used in other workflows and, in doing so, break its appearance. Icons must be stored as SVG in each workflow’s JSON file (as a dictionnary with IDs to avoid duplication, and compressed/encoded somehow).
• Task management has the same problem. Tasks should perhaps be versioned.