User Experience question (edit 2D curve)
-
This is an app question But no programming is involved, I am wondering about best behavior... and tentatively put my question in the lounge. Please let me know if another forum that is more appropriate I am working at home on a personal app (that I hope to publish) which is sort of, but not quite, a vector drawing program. I just reached the part where I got curves and shapes and I want to provide some selection / node editing functionality. I want to implement a bunch of operations (below) that I hope to have one 1 tool (many tools might also be confusing, I think), here they are: - split a segment in the middle (1 segment becomes 2) - add a point in the middle (a segment become a spline, a spline become a quadratic bezier... name might be wrong but, basically going up in the 2,3,4 number of control points of bezier segment) - move selected (control?) points - delete point (control point or endpoint, i.e. merging 2 bezier) now the user experience part (the tricky part) - moving is easy: click on point / handle, move all that is selected - split point vs increase order: I was think to use normal vs CTRL click in the middle - CTRL delete on segment (outside middle) delete - toggle point selection: CTRL click - delete point: CTRL click (Remark: I am edging toward ALT for point to curve increase order, and delete.. all sounds very different but there is UI feedback) see.. CTRL does too much, particularly when clicking on a point it does selection toggle and delete. so I thought maybe I use CTRL and ALT (or SHIFT).. but that become rather complicated... doesn't it? also if deleting a point between 2 bezier segment (4 and 4 control point), what to do? Bezier segment have a maximum of 4 control point (all my home made math tool stops 4 control points, and UI primitive do as well)? Anyway if anyone has any idea about smooth user editing experience, let me know! :D EDIT: I think I got it, what do you think? operations grouped by target: empty area: - normal click + drag: selection rect - SHFT + click + drag => union selection rect - CTRL + click + drag => toggle selection rect - ALT + click + drag => un-selection rect unselected control point: - click: select and move selection on drag - CTRL/SHIFT + click: select (and move selection on drag?) - ALT + click: delete selected control point: - click: drag/move - CTRL: unselect - ALT + click: delete (only on inside control point, not on start/end)(on /start/end merge 2 consecutive bezier cur
-
This is an app question But no programming is involved, I am wondering about best behavior... and tentatively put my question in the lounge. Please let me know if another forum that is more appropriate I am working at home on a personal app (that I hope to publish) which is sort of, but not quite, a vector drawing program. I just reached the part where I got curves and shapes and I want to provide some selection / node editing functionality. I want to implement a bunch of operations (below) that I hope to have one 1 tool (many tools might also be confusing, I think), here they are: - split a segment in the middle (1 segment becomes 2) - add a point in the middle (a segment become a spline, a spline become a quadratic bezier... name might be wrong but, basically going up in the 2,3,4 number of control points of bezier segment) - move selected (control?) points - delete point (control point or endpoint, i.e. merging 2 bezier) now the user experience part (the tricky part) - moving is easy: click on point / handle, move all that is selected - split point vs increase order: I was think to use normal vs CTRL click in the middle - CTRL delete on segment (outside middle) delete - toggle point selection: CTRL click - delete point: CTRL click (Remark: I am edging toward ALT for point to curve increase order, and delete.. all sounds very different but there is UI feedback) see.. CTRL does too much, particularly when clicking on a point it does selection toggle and delete. so I thought maybe I use CTRL and ALT (or SHIFT).. but that become rather complicated... doesn't it? also if deleting a point between 2 bezier segment (4 and 4 control point), what to do? Bezier segment have a maximum of 4 control point (all my home made math tool stops 4 control points, and UI primitive do as well)? Anyway if anyone has any idea about smooth user editing experience, let me know! :D EDIT: I think I got it, what do you think? operations grouped by target: empty area: - normal click + drag: selection rect - SHFT + click + drag => union selection rect - CTRL + click + drag => toggle selection rect - ALT + click + drag => un-selection rect unselected control point: - click: select and move selection on drag - CTRL/SHIFT + click: select (and move selection on drag?) - ALT + click: delete selected control point: - click: drag/move - CTRL: unselect - ALT + click: delete (only on inside control point, not on start/end)(on /start/end merge 2 consecutive bezier cur
I wouldn't use Alt+Click to delete (unless you're happy with a lot of wear and tear on the Ctrl and Z keys). I'd either leave it unset, or set it as unselect. Always be very specific with deletion, because it's a destructive action -- use the Delete key, every time.
I wanna be a eunuchs developer! Pass me a bread knife!
-
I wouldn't use Alt+Click to delete (unless you're happy with a lot of wear and tear on the Ctrl and Z keys). I'd either leave it unset, or set it as unselect. Always be very specific with deletion, because it's a destructive action -- use the Delete key, every time.
I wanna be a eunuchs developer! Pass me a bread knife!
Mmm... you have a good point here.. btw CTRL+Z work quite well so I am not to worry... But... I can't delete segment that well... :sigh: For example if I delete /\ below, I don't delete the line in between, I just create 1 large segment, as shown below
Before
_____
_____/ \____After
_________________so I need a way to delete a segment. arguable I can with the erase tool (I got a vector graphic erasing tool :D ) but you have to change tool, cumbersome... :sigh: right hand on the keyboard, left hand close to CTRL/ALT/SHIT.. DELETE is far away! What would you suggest to delete a segment. Clarification: I can select point node. When selection is satisfactory I can click Delete. But I can't select a segment, hence I can't delete it.... (other than by clicking on it, or using erase tool)
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
-
This is an app question But no programming is involved, I am wondering about best behavior... and tentatively put my question in the lounge. Please let me know if another forum that is more appropriate I am working at home on a personal app (that I hope to publish) which is sort of, but not quite, a vector drawing program. I just reached the part where I got curves and shapes and I want to provide some selection / node editing functionality. I want to implement a bunch of operations (below) that I hope to have one 1 tool (many tools might also be confusing, I think), here they are: - split a segment in the middle (1 segment becomes 2) - add a point in the middle (a segment become a spline, a spline become a quadratic bezier... name might be wrong but, basically going up in the 2,3,4 number of control points of bezier segment) - move selected (control?) points - delete point (control point or endpoint, i.e. merging 2 bezier) now the user experience part (the tricky part) - moving is easy: click on point / handle, move all that is selected - split point vs increase order: I was think to use normal vs CTRL click in the middle - CTRL delete on segment (outside middle) delete - toggle point selection: CTRL click - delete point: CTRL click (Remark: I am edging toward ALT for point to curve increase order, and delete.. all sounds very different but there is UI feedback) see.. CTRL does too much, particularly when clicking on a point it does selection toggle and delete. so I thought maybe I use CTRL and ALT (or SHIFT).. but that become rather complicated... doesn't it? also if deleting a point between 2 bezier segment (4 and 4 control point), what to do? Bezier segment have a maximum of 4 control point (all my home made math tool stops 4 control points, and UI primitive do as well)? Anyway if anyone has any idea about smooth user editing experience, let me know! :D EDIT: I think I got it, what do you think? operations grouped by target: empty area: - normal click + drag: selection rect - SHFT + click + drag => union selection rect - CTRL + click + drag => toggle selection rect - ALT + click + drag => un-selection rect unselected control point: - click: select and move selection on drag - CTRL/SHIFT + click: select (and move selection on drag?) - ALT + click: delete selected control point: - click: drag/move - CTRL: unselect - ALT + click: delete (only on inside control point, not on start/end)(on /start/end merge 2 consecutive bezier cur
One thing to consider is using a right-click to pop up a menu where they can select all of these options, so the application is usable without using the keyboard, or at least minimal keyboard use. Bezier curves can have as many control points as you want, if you draw them yourself (let me know if you need help with this.) As you say Windows limits you to 4 control points.
-
Mmm... you have a good point here.. btw CTRL+Z work quite well so I am not to worry... But... I can't delete segment that well... :sigh: For example if I delete /\ below, I don't delete the line in between, I just create 1 large segment, as shown below
Before
_____
_____/ \____After
_________________so I need a way to delete a segment. arguable I can with the erase tool (I got a vector graphic erasing tool :D ) but you have to change tool, cumbersome... :sigh: right hand on the keyboard, left hand close to CTRL/ALT/SHIT.. DELETE is far away! What would you suggest to delete a segment. Clarification: I can select point node. When selection is satisfactory I can click Delete. But I can't select a segment, hence I can't delete it.... (other than by clicking on it, or using erase tool)
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
You could maybe put it in a context menu, as long as the word "Delete" ("Delete Segment", maybe?) makes it very clear what the user is about to do. Preventing unwanted destructive actions makes customers swear less -- and when they swear, they blame you.
I wanna be a eunuchs developer! Pass me a bread knife!
-
One thing to consider is using a right-click to pop up a menu where they can select all of these options, so the application is usable without using the keyboard, or at least minimal keyboard use. Bezier curves can have as many control points as you want, if you draw them yourself (let me know if you need help with this.) As you say Windows limits you to 4 control points.
1. About context menu idea: I find right click context menu a but less straight forward.. But I find my click option (so far) confusing though... mm.. who knows... You remind me I was tempted (at one stage) to have something like Word, the floating format panel that appears after select. But I forgot about it as I realised the panel disappear when you go away to never come back... Mmm.. maybe I should do just that.. a context menu.. that automatically appear when mouse is close to line. It should just fade in though.. context menu animation seem a bit slow and.. intrusive. It would be small since it would be 3 short image that describe: split in 2, delete segment, add bezier control point 2. About Bezier Curve: I am using WPF PathGeometry for drawing here. It only goes to Bezier fragment with 4 control point (start, ctrl pt1, ctrl pt2, end). At any rate it would add little benefit, I am not interested in perfectly fitting and accurate curve but in quick and dirty editing. The idea is to create table top pen and paper RPG map as quickly as possible. Faster that with real pen and paper.
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
-
You could maybe put it in a context menu, as long as the word "Delete" ("Delete Segment", maybe?) makes it very clear what the user is about to do. Preventing unwanted destructive actions makes customers swear less -- and when they swear, they blame you.
I wanna be a eunuchs developer! Pass me a bread knife!
Mark_Wallace wrote:
Preventing unwanted destructive actions makes customers swear less -- and when they swear, they blame you.
:laugh: :laugh: :thumbsup::thumbsup::thumbsup::thumbsup::thumbsup::thumbsup::thumbsup::thumbsup: Where is the +100 when one need it?
M.D.V. ;) If something has a solution... Why do we have to worry about?. If it has no solution... For what reason do we have to worry about? Help me to understand what I'm saying, and I'll explain it better to you Rating helpful answers is nice, but saying thanks can be even nicer.
-
You could maybe put it in a context menu, as long as the word "Delete" ("Delete Segment", maybe?) makes it very clear what the user is about to do. Preventing unwanted destructive actions makes customers swear less -- and when they swear, they blame you.
I wanna be a eunuchs developer! Pass me a bread knife!
Well.. one will have to ALT+click. One will easily learn the power of ALT! And also... CTRL+Z always works well. This is the best working functionality so far! ^_^ But yeah.. context menu seems to a be winner... Though a "custom context menu". Default context menu animation is slow and intrusive (probably gonna use a fast fade in) and the general UI not friend to edit a segment. It will be more like a "context something tool"
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
-
Mmm... you have a good point here.. btw CTRL+Z work quite well so I am not to worry... But... I can't delete segment that well... :sigh: For example if I delete /\ below, I don't delete the line in between, I just create 1 large segment, as shown below
Before
_____
_____/ \____After
_________________so I need a way to delete a segment. arguable I can with the erase tool (I got a vector graphic erasing tool :D ) but you have to change tool, cumbersome... :sigh: right hand on the keyboard, left hand close to CTRL/ALT/SHIT.. DELETE is far away! What would you suggest to delete a segment. Clarification: I can select point node. When selection is satisfactory I can click Delete. But I can't select a segment, hence I can't delete it.... (other than by clicking on it, or using erase tool)
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
In your example you are deleting four nodes leaving only the start and end nodes, so I would expect to select the four nodes (left click) and then delete. You can't delete a single segment without some mechanism for re-connecting the remaining segments (or leaving 2 unconnected lines), but you can delete a single node to merge 2 segments, hence selecting nodes is more functional than selecting segments. Only use delete key or right click context menu. Don't invent new ways of interacting when the existing ways work just fine. If you have to explain your UI then the UI isn't right.