5 ms·

First of all, I really like the concept of grid based flow charting. It's one of the popular metaphors used in "wiring" software based musical instruments and e

First of all, I really like the concept of grid based flow charting. It's one of the popular metaphors used in "wiring" software based musical instruments and effects and works really well for a significant percentage of signal flows that don't have too many back looping or crossing virtual wires. However, would it be possible to make the flow go vertically rather than horizontally? I find that a vertical direction of flow is - more practical because of the ubiquity of mouse wheels for easy up/down navigation compared to the various less common ways of navigating horizontally - the much more common direction for sequential steps in programs or scripts - more culturally global, since there are quite a few right to left languages (as in addition to the left to right language used on this site :-) - distance between boxes is easier to keep constant vertically while still allowing different size boxes (due to longer or shorter labels)

mushbino 4y ago
It's interesting to see this perspective. My experience with canvas-based flow charting applications shows that users prefer the horizontal left-to-right flow. The ability to shift drag the canvas usually makes horizontal scrolling a lot easier. I believe it's mostly due to the fact that people find writing to be the closest metaphor. It is expected that adding a new node or step will appear to the right of the current one. However, I think more research and experimentation are needed.
- ReactiveJelly 4y ago
  But as the length of a written document goes toward infinity, whether the document is prose or code, it ends up going down. And phones are portrait and web browsers all naturally want to scroll up and down. The Git graph tools are vertical because terminals naturally scroll up and down. So all my hand-drawn graphs are vertical, too. Top to bottom, just like code or very narrow prose.
  - mushbino 4y ago
    For sure, what you're saying is true, but I suppose it depends on the content, layout, and how it's used. Vertical is typically better when first word type scanning is important, like data tables or anything similar. Horizontal scrolling in data tables is something I hate with a fiery passion and do everything I can to avoid, for example. When a workflow or series of interconnected elements are what's important than horizontal tends to work better for how people think about those things, imo, but there are exceptions to every rule. Basically, it just depends.
- DrewADesign 4y ago
  In designing similar interfaces, I noticed that our users who were more familiar with physical documents preferred horizontal, while those more familiar with digital interfaces preferred vertical. Tiny sample size though.
  - dagmx 4y ago
    If you look into the world of visual effects software, there's a lot of node graphs and it quickly becomes apparent where they fall into place. Horizontal is for data flow based graphs where nodes pass specific data blocks to each other. This is the norm in shader editors, Maya's node graph, blender geometry nodes, Unity shader graph, Unreal blueprints etc... Vertical is for pass the world or step based graphs. Each node represents a step, and nodes mutate a combined state that gets passed down. Nuke, Houdini and Katana are like this the vertical graph has a lot of familiarity with people because it's like a Todo list of steps. Horizontal graphs are better for data flow because they can have tons of labels that run vertically and get connected to each other. In some cases you even have hybrid graphs. Where data processing runs horizontally that feed into steps which run vertically. You'll see this in Pixar's Presto, and Unity's Visual Effects graph.
- iamacyborg 4y ago
  With a lot of marketing flow builders I’ve noticed that some if the older software has workflows that go right to left, whereas newer tools go from top to bottom. I’m not sure if anyone’s testing the UX of these or whether designers are just following convention from other tools, however.
  - xnorswap 4y ago
    Do you mean "right to left" or "left to right"?
    - iamacyborg 4y ago
      Left to right. I’ve not had my morning coffee yet, clearly
- bartread 4y ago
  I prefer vertical as well. Find it much easier to follow, possible because I'm used to working with code, which is also laid out vertically (and where I tend to break and indent long lines to make them easier to read).
zbrozek 4y ago
Count me in. I have a lot of the same feelings and would like to see it seriously tried. Speaking of signal flows, I've almost never managed to put together a flow graph in gnuradio companion that wasn't a visual nightmare.
escot 4y ago
I'd like to support vertical layout, I just found for most the initial use cases that horizontal was the most intuitive. I find that its nice to have child nodes be left aligned with the horizontal layout so you can quickly read them top to bottom. But I know a lot of interesting tools do vertical layout for the reasons you mention.
eurasiantiger 4y ago
Mermaid uses a grid layout and it sucks in practice, so you might want to adjust your expectations. There needs to be some kind of way to say ”these things are siblings so arrange them side by side”, and likely some other ways of grouping and placing constraints on node positions. Otherwise, the result will be essentially random placement. What would really be a game changer: abstraction levels, so you could have a nice top level diagram of things and then decrease level of abstraction to reveal more details.
erk__ 4y ago
A example of a vertical flowchart is DRAKON which imo is easy to read fast once you know it https://en.wikipedia.org/wiki/DRAKON https://en.wikipedia.org/wiki/DRAKON
- mro_name 4y ago
  it's awesome. If only the tooling were more offline, cross platform friendly. TCL is no easy dependency no more.
  - erk__ 4y ago
    Besides the Desktop TCL [0] implementations there is also two web implementations [1,2] that I assume would be possible to package with Electron or similar. [0]: https://github.com/stepan-mitkin/drakon_editor https://github.com/stepan-mitkin/drakon_editor [1]: https://github.com/stepan-mitkin/drakonhub https://github.com/stepan-mitkin/drakonhub [2]: https://github.com/stepan-mitkin/drakon.tech https://github.com/stepan-mitkin/drakon.tech
capableweb 4y ago
I agree with all of your points, I just wanted to highlight I just learned about a few months ago, that maybe others don't know about as well :) > - more practical because of the ubiquity of mouse wheels for easy up/down navigation compared to the various less common ways of navigating horizontally You can actually do horizontal scroll by holding shift and scrolling the wheel. Learning this was a revelation.
- hutzlibu 4y ago
  "You can actually do horizontal scroll by holding shift and scrolling the wheel." Yep, that is helpful. But note that this is no universal standard. But most mainstream applications and browsers have it indeed implemented. Useful for big pictures etc.
  - capableweb 4y ago
    I thought this was implemented on the OS level or something like that, as I've never not been able to use it for horizontal scrolling. I'm mostly on Linux but worked everywhere on Windows as well as far as I can remember. Maybe on macOS it's different.
    - chownie 4y ago
      Can confirm that this works on mac, had to run off to make a very wide page to test it :)
    - aasasd 4y ago
      It's likely possible to force that mapping via some configuration tools. On Mac and Windows, such tools are usually rather visible, but on Linux it's probably just config files for some components of X or the input layer.
- eddd-ddde 4y ago
  There is also two finger scrolling in both directions when using a touchpad.
jcelerier 4y ago
interesting, ossia.io's dataflow features started as top-to-bottom but the users overwhelmingly preferred left-to-right. Now it's hybrid.
bazzargh 4y ago
"the ubiquity of mouse wheels for easy up/down navigation" I have maybe used a mouse once in the last decade (I use a trackpad)...and that mouse didn't have a mousewheel. And before that I used trackballs for a decade (again, no mousewheel). And before that, my laptop had a nubbin. I recently set up a keyboard with mousekeys (on that computer, I have no mouse-ish-thing at all), and since I saw there was mouse wheel emulation, I attached that to a couple of keys out of curiosity, but I had literally no idea what those would do when pressed in any program since a mouse wheel is completely foreign to me. Not saying you're wrong, just that the assertion of ubiquity struck me as strange.
- eddd-ddde 4y ago
  So do you scroll by moving over to the scrollbar? Or you went completely the other direction and just use text programs.
  - bazzargh 4y ago
    on a trackpad, it's a two-finger gesture (see https://support.apple.com/en-gb/HT204895 https://support.apple.com/en-gb/HT204895). On the mouseless system, it depends. For coding, I'd tend to search rather than scroll.

mushbino 4y ago

It's interesting to see this perspective. My experience with canvas-based flow charting applications shows that users prefer the horizontal left-to-right flow. The ability to shift drag the canvas usually makes horizontal scrolling a lot easier. I believe it's mostly due to the fact that people find writing to be the closest metaphor. It is expected that adding a new node or step will appear to the right of the current one. However, I think more research and experimentation are needed.

ReactiveJelly 4y ago
But as the length of a written document goes toward infinity, whether the document is prose or code, it ends up going down. And phones are portrait and web browsers all naturally want to scroll up and down. The Git graph tools are vertical because terminals naturally scroll up and down. So all my hand-drawn graphs are vertical, too. Top to bottom, just like code or very narrow prose.
- mushbino 4y ago
  For sure, what you're saying is true, but I suppose it depends on the content, layout, and how it's used. Vertical is typically better when first word type scanning is important, like data tables or anything similar. Horizontal scrolling in data tables is something I hate with a fiery passion and do everything I can to avoid, for example. When a workflow or series of interconnected elements are what's important than horizontal tends to work better for how people think about those things, imo, but there are exceptions to every rule. Basically, it just depends.
DrewADesign 4y ago
In designing similar interfaces, I noticed that our users who were more familiar with physical documents preferred horizontal, while those more familiar with digital interfaces preferred vertical. Tiny sample size though.
- dagmx 4y ago
  If you look into the world of visual effects software, there's a lot of node graphs and it quickly becomes apparent where they fall into place. Horizontal is for data flow based graphs where nodes pass specific data blocks to each other. This is the norm in shader editors, Maya's node graph, blender geometry nodes, Unity shader graph, Unreal blueprints etc... Vertical is for pass the world or step based graphs. Each node represents a step, and nodes mutate a combined state that gets passed down. Nuke, Houdini and Katana are like this the vertical graph has a lot of familiarity with people because it's like a Todo list of steps. Horizontal graphs are better for data flow because they can have tons of labels that run vertically and get connected to each other. In some cases you even have hybrid graphs. Where data processing runs horizontally that feed into steps which run vertically. You'll see this in Pixar's Presto, and Unity's Visual Effects graph.
iamacyborg 4y ago
With a lot of marketing flow builders I’ve noticed that some if the older software has workflows that go right to left, whereas newer tools go from top to bottom. I’m not sure if anyone’s testing the UX of these or whether designers are just following convention from other tools, however.
- xnorswap 4y ago
  Do you mean "right to left" or "left to right"?
  - iamacyborg 4y ago
    Left to right. I’ve not had my morning coffee yet, clearly
bartread 4y ago
I prefer vertical as well. Find it much easier to follow, possible because I'm used to working with code, which is also laid out vertically (and where I tend to break and indent long lines to make them easier to read).

zbrozek 4y ago

Count me in. I have a lot of the same feelings and would like to see it seriously tried. Speaking of signal flows, I've almost never managed to put together a flow graph in gnuradio companion that wasn't a visual nightmare.

escot 4y ago

I'd like to support vertical layout, I just found for most the initial use cases that horizontal was the most intuitive. I find that its nice to have child nodes be left aligned with the horizontal layout so you can quickly read them top to bottom. But I know a lot of interesting tools do vertical layout for the reasons you mention.

eurasiantiger 4y ago

Mermaid uses a grid layout and it sucks in practice, so you might want to adjust your expectations. There needs to be some kind of way to say ”these things are siblings so arrange them side by side”, and likely some other ways of grouping and placing constraints on node positions. Otherwise, the result will be essentially random placement. What would really be a game changer: abstraction levels, so you could have a nice top level diagram of things and then decrease level of abstraction to reveal more details.

erk__ 4y ago

A example of a vertical flowchart is DRAKON which imo is easy to read fast once you know it https://en.wikipedia.org/wiki/DRAKON https://en.wikipedia.org/wiki/DRAKON

mro_name 4y ago
it's awesome. If only the tooling were more offline, cross platform friendly. TCL is no easy dependency no more.
- erk__ 4y ago
  Besides the Desktop TCL [0] implementations there is also two web implementations [1,2] that I assume would be possible to package with Electron or similar. [0]: https://github.com/stepan-mitkin/drakon_editor https://github.com/stepan-mitkin/drakon_editor [1]: https://github.com/stepan-mitkin/drakonhub https://github.com/stepan-mitkin/drakonhub [2]: https://github.com/stepan-mitkin/drakon.tech https://github.com/stepan-mitkin/drakon.tech

capableweb 4y ago

I agree with all of your points, I just wanted to highlight I just learned about a few months ago, that maybe others don't know about as well :) > - more practical because of the ubiquity of mouse wheels for easy up/down navigation compared to the various less common ways of navigating horizontally You can actually do horizontal scroll by holding shift and scrolling the wheel. Learning this was a revelation.

hutzlibu 4y ago
"You can actually do horizontal scroll by holding shift and scrolling the wheel." Yep, that is helpful. But note that this is no universal standard. But most mainstream applications and browsers have it indeed implemented. Useful for big pictures etc.
- capableweb 4y ago
  I thought this was implemented on the OS level or something like that, as I've never not been able to use it for horizontal scrolling. I'm mostly on Linux but worked everywhere on Windows as well as far as I can remember. Maybe on macOS it's different.
  - chownie 4y ago
    Can confirm that this works on mac, had to run off to make a very wide page to test it :)
  - aasasd 4y ago
    It's likely possible to force that mapping via some configuration tools. On Mac and Windows, such tools are usually rather visible, but on Linux it's probably just config files for some components of X or the input layer.
eddd-ddde 4y ago
There is also two finger scrolling in both directions when using a touchpad.

jcelerier 4y ago

interesting, ossia.io's dataflow features started as top-to-bottom but the users overwhelmingly preferred left-to-right. Now it's hybrid.

bazzargh 4y ago

"the ubiquity of mouse wheels for easy up/down navigation" I have maybe used a mouse once in the last decade (I use a trackpad)...and that mouse didn't have a mousewheel. And before that I used trackballs for a decade (again, no mousewheel). And before that, my laptop had a nubbin. I recently set up a keyboard with mousekeys (on that computer, I have no mouse-ish-thing at all), and since I saw there was mouse wheel emulation, I attached that to a couple of keys out of curiosity, but I had literally no idea what those would do when pressed in any program since a mouse wheel is completely foreign to me. Not saying you're wrong, just that the assertion of ubiquity struck me as strange.

eddd-ddde 4y ago
So do you scroll by moving over to the scrollbar? Or you went completely the other direction and just use text programs.
- bazzargh 4y ago
  on a trackpad, it's a two-finger gesture (see https://support.apple.com/en-gb/HT204895 https://support.apple.com/en-gb/HT204895). On the mouseless system, it depends. For coding, I'd tend to search rather than scroll.