5 ms·

My project is a fast flowchart editor with a UX optimized for keyboard shortcuts. Go to https://www.knotend.com https://www.knotend.com and try making a flowch

by escot 5y ago

My project is a fast flowchart editor with a UX optimized for keyboard shortcuts. Go to https://www.knotend.com 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 https://news.ycombinator.com/item?id=27707521 . Please let me know what you think of this project exchange format.

throwaway123xxx 5y ago
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.
- escot 5y ago
  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.
  - throwaway123xxx 5y ago
    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/ https://react-joyride.com/ would be perfect here.
XCSme 5y ago
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).
- escot 5y ago
  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.
  - XCSme 5y ago
    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.
    - escot 5y ago
      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.
      - XCSme 5y ago
        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.
theflyinghorse 5y ago
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
- escot 5y ago
  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?
alek_m 5y ago
I'm probably not your target user, but here are few things that were intuitive to me: I tried clicking on the shortcuts, your whole idea is to use the shortcuts but for a new user someone might want to click on them. Also the lines are confusing, maybe arrows will work better.

by escot 5y ago

throwaway123xxx 5y ago

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.

escot 5y ago
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.
- throwaway123xxx 5y ago
  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/ https://react-joyride.com/ would be perfect here.

XCSme 5y ago

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

escot 5y ago
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.
- XCSme 5y ago
  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.
  - escot 5y ago
    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.
    - XCSme 5y ago
      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.

theflyinghorse 5y ago

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

escot 5y ago
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?

alek_m 5y ago

I'm probably not your target user, but here are few things that were intuitive to me: I tried clicking on the shortcuts, your whole idea is to use the shortcuts but for a new user someone might want to click on them. Also the lines are confusing, maybe arrows will work better.