1

I am building a doodling app and I would like the user to be able to scroll the page and doodling with their finger.

I presume I must use buttons for the user to be able to switch between doodling and scrolling, however, I would be interested to know if there are any other solutions that may be better.

enter image description here

a. My solution was to simply have the pen and eraser tool be available to use, but by default the scrolling would be the primary interaction. Which is not ideal as I would like the user to interact with the page first by doodling on the page (not scrolling).

b. I run into the issue that if the user has pen tool (doodling) as their primary interaction, they won't realize that there is a way to scroll as well (unless they tap on the pen tool to clear the selection)

Any thoughts on this.. Is there a better solution?

Thank you.

2
  • Just have a "hand" tool which lets the user "grab" the page to scroll around. As one of 3 tools, it would be more obvious that scrolling is a feature than if it happened in the "no tools selected" state, and lets you select the pen tool by default.
    – Wolfie
    Mar 3 at 8:43
  • Don't forget to implement an undo/redo button too, this allows to play around a bit to figure things out.
    – jazZRo
    Mar 4 at 9:25
3

Consider this pattern: use one finger for doodling, use two fingers to move the canvas around. A lot of drawing programs work this way, which would make it a familiar pattern to those who have used similar apps.

1

I guess both your point a and b make sense. My suggested workflow

I would suggest to add another pointer tool to indicate that the user can go into no-tool-selected mode and scroll down if he want.

Additionally, it might be a good idea to use double tap to toggle between the pen and the eraser tool since most of the drawing softwares provide that option.

1

It can be a selection between 3 modes: pencil, eraser and hand. Hand would be used for scrolling.

Possible shortcut for power-users: Scroll with two fingers in pencil/eraser mode.

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.