Hacker News Reader

Comment by escot | Hacker News Reader

My project is a fast flowchart editor with a UX optimized for keyboard shortcuts.

Go to https://www.knotend.com and try making a flowchart or pick from one of the examples and try to edit it. In particular I'm looking for feedback on if this mode of interaction is intuitive to you and a productive way to make flowcharts.

I also manage this account 'wantfeedback' which made this post. It was inspired by a previous Ask HN I did to get feedback on knotend: https://news.ycombinator.com/item?id=27707521 . Please let me know what you think of this project exchange format.

View on HN

What I tried doing right away was 1) navigate to a cell using keyaboard 2) start typing hoping that would generate a green node (it didnt, which surprised me)

- I wish there was a tutorial or a walk through

- Alt-n Creates green node in the first column only instead of at selected cell

- I want this but in discord

Thanks. Did you in the end figure out how to add nodes and dependencies. Alt-arrow will add a new node as dependency of the currently selected one(s). I agree its confusing that you cant edit an empty cell, the reason is that it wouldnt mean much. You cant chose where nodes go - they get laid out automatically based on their dependencies.

I dont use discord. Do you mean you want a flowchart editor thats collaborative within your chat? Does discord have plugin ecosystem like that?

I saw this in another thread, opened the link, tried clicking around, nothing happened so I closed it. I also tried dragging elements but it didn't work, or double clicking a cell to add new content.

If it is optimized for keyboard shortcuts you should clearly show those shortcuts at all times by default.

Overall the UX is really poor, very hard to find out how to achieve your desired result. You should look at people using the interface, if you are used to it, it will be hard for you to understand what works and what doesn't. Maybe session recordings can help understand what people are trying to do (see my top level comment for a possible tool to help you).

Thanks. Ive updated the UI since I last posted in the thread you mention. You can know click on nodes to add new ones, and drag nodes to connect them. Did you try the most recent version? Hopefully its more intuitive, but youre right its probably time I made a tutorial.

I checked it at the time of posting the above comment, so I could still not intuitively use the interface (for example the dragging feels strange, there is no preview of the dragging and I would expect drag to move cells not to connect them, for connection I would expect to drag a "connect" handle or something like that).

I don't think the tutorial is the way to go, I would focus more on improving the UI/UX so it's more intuitive and doesn't need a complex tutorial.

People are conditioned to want to rearrange the layout because thats how most flowchart editors work, but its a feature of knotend that the layout is automatic. So theres a mismatch in expectations and Im trying to find the right ux to communicate that you should just add and connect nodes, not rearrange.

I wouldn't try to rearrange the layout if I liked the default one. If you can not change I think it should be improved, it feels a bit crammed with not a lot of spacing and also having the lines connecting cells.

One big UX issue with not being able to rearrange stuff is that I can not order the items in a column by dragging.

I can see this becoming an intuitive way to chart out a process that's in your head.

However, I'd really like an interactive tutorial or walkthrough to see what this provides over something like google sheets.

Thanks. Ive been trying to make it intuitive without leaning on tutorials because most people dont do them. The advantage over sheets is that knotend lays out the flowchart for you and is purpose built to be a flowchart editor.

It doesn't have to be a full tutorial of every feature. If I'm going to use the product, I'm going to have to learn the controls. Going through each of the instructions and learning it myself is a bit too much overhead for me. A simple interactive walkthrough of 4-5 of the key shortcuts would really shorten the learning curve.

Something like https://react-joyride.com/ would be perfect here.

Reply on news.ycombinator.com