3

My app lets the user take a picture of a sheet of paper, then select a block of 2-3 words, then another block.

The user must be able to clearly read the (potentially tiny) written words, so she will zoom. The image must be scrollable to find the block, then go to the second block.

With dragging already dedicated to image scrolling, How to implement rectangle selection?

Maybe tap on first corner, then tap on opposite corner? But it does not sound very user friendly, because the rectangle is not seen during selection.

Maybe tap to "switch to selection mode", then drag rectangle? This would work well for a small selection, but it becomes unusable if the selection is larger than the screen.

What would be a user-friendly way to implement this?

Context if needed: I am writing a flashcard app for Android, the user can take a picture of her paper notebook after a foreign language lesson, and quickly select word+definition to generate flashcards. Must support Android all the way back to 1.6, including devices without multi-touch.

Improve this question

2 Answers 2

Reset to default
3

On Android, long-press is a common gesture for triggering selection:

Enters data selection mode. Allows you to select one or more items in a view and act upon the data using a contextual action bar. Avoid using long press for showing contextual menus.

Thus, I'd agree with @Sherpanaut's answer (edit 2) and consider using long-press to begin drawing the selection rectangle, and then drag and lift your finger to complete the rectangle. A side benefit of using long-press versus simple touch and drag is that you'll likely minimize accidental rectangle drawing, since those gestures are fairly universally used for exploration and navigation in the context of images.

You may also want to use a help overlay to teach the user how to do this the first time around, since this gestures may not be discoverable for all users.

Improve this answer
9
  • 1
    Great idea! In this scenario, when selecting a rectangle larger than the screen, would the app scroll the image when the user's finger reaches the screen's edge? Or should I refrain from implementing scroll-while-selecting?
    – Nicolas Raoul
    Jan 31, 2013 at 7:09
  • 1
    That is a tricky scenario as it is often quite difficult for the user to control the drag while the viewport is also panning. You could limit them to only dragging within a fixed area and requiring a zoom out to make a larger selection. If you have the time/resources try out both and see which works best for your users.
    – Oisin Lavery
    Jan 31, 2013 at 9:00
  • 1
    @Roman Most definitely, a help overlay delivered at the right time is essential. Users are still learning when it comes to touchscreen interactions :)
    – Oisin Lavery
    Jan 31, 2013 at 9:05
  • @NicolasRaoul I would say the app should scroll when the user's finger reaches the edge.
    – Roman Nurik
    Jan 31, 2013 at 15:56
  • @Sherpanaut one alternative is you could support scroll-during-selection using multi-finger touch gestures. That is, one finger is selecting, and the other could be scrolling/zooming.
    – Roman Nurik
    Jan 31, 2013 at 15:56
3

Is the touchscreen multitouch or single touch?

Multi-touch - I would use a two finger drag to pan up/down/left/right with a pinch to zoom. Then use a single finger to draw your selections

Single-touch - In this case, you will need a button to switch between navigation mode and selection mode.

Edit - I just saw your context so assuming multi-touch as Android.

Edit 2 - I thought about this a little more and wondered what the convention actually is. Take Google Maps, that uses single finger scrolling with a long press to drop a marker. I don't think you can draw shapes on the mobile app though.

Improve this answer
4
  • We must support single-touch devices too. Sorry I should have mentioned it earlier.
    – Nicolas Raoul
    Jan 31, 2013 at 3:01
  • About the single-touch case: Just to make sure I understand, what would be written on the button? Something like "Switch to selection mode"/"Switch to zoom mode"?
    – Nicolas Raoul
    Jan 31, 2013 at 7:12
  • 1
    I mean you can do this lots of ways. You could have the button switch so when in selection mode it says "zoom mode" and vice versa. You could also have a toggle switch so the user can see that there are two distinct modes and see which one is active - this would mean you don't need the words "switch to...".
    – Oisin Lavery
    Jan 31, 2013 at 12:35
  • @NicolasRaoul Check out this toggle switch - if you replaced Lorem with Zoom and Ipsum with Select then you would have a very clear mode switcher. What you think?
    – Oisin Lavery
    Feb 1, 2013 at 10:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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