2

The user is drawing lines on a canvas using a set of different tools. All of these are entered by touch. There is a button to undo the last drawn path and another to clear the entire canvas. What would be the best way to allow the user to remove specific paths that were previously drawn?

  • Double tap the path in question. Problematic if the user does not known about this behaviour and accidentally deletes paths. Also with overlapping paths, where the path is no longer clearly identifiable. (The user taps one path, another one is deleted).
  • Do not provide a "Delete Path" option at all. Instead provide an eraser tool similar to other drawing apps. Needs considerable more work from the user to remove long path, but a known metaphor.
  • Combine both options to have a tool that deletes paths that were tapped, or when dragging, removes the immediate pixels under the users finger. This way the tapping behaviour is activated through a switch and should not be activated without the user knowing.

What do you think would be the best option for removing whole paths that were previously drawn in a drawing app?

Note that there is not enough room in the UI to provide a layers list, to let the user choose which objects/paths to delete.

  • Can you estimate how often the user would need this tool? Are you expecting that 1-in-4 lines that they draw will need to be removed, or is it more like 1-in-50? – JonW Nov 14 '16 at 10:05
  • 1
    Since the user is outlining real world steps and not just drawing random lines for beauty's sake, there will be quite a lot of erasing. The 1:4 ratio seems like a good estimation. – sqwk Nov 14 '16 at 10:09
  • This is a suggestion rather than an answer: I've seen a lot of apps (although not drawing apps) that use the touch-and-hold gesture to bring up a sort of contextual menu for that one item. The menu often contains basic clipboard actions ('copy', 'cut', and 'paste') as well as a 'delete' option. This may or may not be useful depending on the view-scale the user is working at. – Andrew Martin Nov 14 '16 at 10:26
  • Do you want the user to be able to delete all the path at once or parts of the path (like an eraser would do)? – Alvaro Nov 14 '16 at 10:31
  • Unfortunately, it might be both, so at the moment I am leaning towards the rubber option. – sqwk Nov 14 '16 at 15:15
1

Will the user want to erase a certain path or a mass of ink? Think of the way pencil and rubber work in the real world. When you have several pencil paths and you erase with a rubber not just a path is erased but several entire paths or parts of paths.

If the way your app is used is a mass of ink, then your Rubber option sounds good.

If the way your app is used is with paths (like a vector drawing app) the user needs to be able to select an specific path to remove.

In this case your double tap option doesn't sound like it gives much accuracy to the selection. Is the path wide enough that the user can select the desired path without problem? Can the user zoom in to be more precise? What happens if paths are overlapped?

An edit mode that lets the user tap which paths he wants to remove sounds like a good idea: click the delete button; tap paths to be removed (avoid double tap as its less accurate), tap the path again if it was wrongly selected; once all paths to be removed are selected confirm the action with a button. It could be a good option but it depends on the complexity of the drawing.

If you are accepting proposals I thought about something in these terms: When in errase mode each path is assigned a color and a reference on the top, the user clicks the color on the top to select the exact path/s. In the same way I commented the former paragraph but trying to approach complex selections of drawings with overlapping paths. (Path selection could be made with color,numbers,etc.)

enter image description here

0

It seems like your problem can be generalized to "how to select drawn objects" and the ability to select drawn objects could be useful for things other than deleting (e.g. specifying z-indexes).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This introduces a new mode or view into the work subject, the "Elements" view. This Elements view accomplishes what a layers panel does in a big screen app (but conceptually it's not layers it's elements). Although this 2nd view adds a fair amount of complexity, sometimes theres no way around adding complexity, and a second screen (or view) is the best way to accommodate the added complexity.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.