Hacker News Reader

Comment by noizejoy | Hacker News Reader

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)

View on HN

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.

"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.

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.

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.

Can confirm that this works on mac, had to run off to make a very wide page to test it :)

There is also two finger scrolling in both directions when using a touchpad.

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.

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.

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.

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.

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.

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.

Do you mean "right to left" or "left to right"?

Left to right. I’ve not had my morning coffee yet, clearly

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).

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

it's awesome. If only the tooling were more offline, cross platform friendly. TCL is no easy dependency no more.

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

[1]: https://github.com/stepan-mitkin/drakonhub

[2]: https://github.com/stepan-mitkin/drakon.tech

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.

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.

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.

"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.

So do you scroll by moving over to the scrollbar? Or you went completely the other direction and just use text programs.

on a trackpad, it's a two-finger gesture (see https://support.apple.com/en-gb/HT204895). On the mouseless system, it depends. For coding, I'd tend to search rather than scroll.

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

Reply on news.ycombinator.com