18

What could be done to improve the ability to trace the outline of items on a touch screen, without requiring the user to use a stylus or other additional physical tool?

The 'fatness' of fingers makes it difficult to touch the exact spot you would like, and the finger itself obscures your view of a proportion of the image you are trying to trace.

An example would be a tracing of a skin wound (in order to measure area etc.) where accuracy is crucial as you can imagine.

Edit: I have removed the example photo due to it's gore-factor

  • 3
    You could do what Apple did on the iPhone and add a magnifier lens above the touch point. – John Deters Feb 27 '15 at 1:10
  • 2
    I agree with @tohster. I'm having a very hard time determining what that photo is. Can you explain? – BDD Feb 27 '15 at 1:10
  • 1
    Apologies, it is a wound on the heel of a foot – Kyle Wilson Feb 27 '15 at 1:11
  • 2
    Funny how your brain tries to make sense of things in the most ridiculous ways. Mine was trying to figure out why you posted a pressure-map of someone operating a tablet with the heel of their feet. And then it was trying to work out how the red area fit in there, and why it looked so much like a wound. Go brain. (I've had a long week) – Dirk v B Feb 27 '15 at 2:45
  • 2
    @kylewilson please share when you're ready, this was a really interesting question so it'll be nice to see what you guys came up with – tohster Mar 19 '15 at 17:44
20

Here are 3 ways to accomplish a high-precision, trace-style outline without the fat-finger effect.

3 approaches

Approach 1: Similar to Kit Grose's excellent answer. A mask gets applied, and you can use brush and eraser to adjust the boundary. The only difference here is, if you need to see the detailed interior of the wound, then the mask works in reverse, i.e. the mask gets applied and you selectively erase the area you need to focus on. This way the selection gets more, and not less visible.

Approach 2: Use a proxy trace pad. This allows you to use arbitrarily small pointers to accomplish the trace, and the user draws using the trace pad. Very fine precision can be made by adjusting the movement ratio between the trace pad and the screen, as well as allowing the user to pinch zoom.

You may wish to add a slider for 'sensitivity' to adjust the tracking ratio. Since you are tracing a continuous boundary, the user can lift his finger at any time from the trace and once he sets it back down, the trace just continues from its existing position. So you don't run into issues "running offscreen" with the drawing line.

Approach 3: Drag and drop pen to place it, then push and pull the pen around the screen to keep drawing. This allows the user to decide where she wants to place her finger, and the contact point is separated from the tip of the pen so you can see where you're drawing. This approach also has the benefit of allowing the user to lift his finger and rezoom/pan the image before continuing the trace. You will need to work out how to remove the pin once it's placed... A remove button can do the job easily.

The wireframes are just a really rough sketch and you'll have to add some refinements. But it's enough that conceptually you can get it.

I really like this question because it's about how to push the boundaries of a ubiquitous touch interface while retaining all of the natural swipe/pinch/drag movements that users have become accustomed to.

  • 2
    Awesome answer +1. – JonH Feb 27 '15 at 16:42
  • That's a fantastic answer, I could see all three approaches being very effective. To find which one would actually be the pick of the bunch may come down to a few basic prototypes. Do you know of any touchscreen apps which demonstrate any of these approaches? – Kyle Wilson Feb 28 '15 at 1:39
  • 1
    Hi @KyleWilson I designed these variants based on some recollection from apps and also some physical analogs (e.g. Wacom tablets, photographer's loupe, and micro-surgical tools). So I don't have a set of apps to point you to, but to save design time these are approaches where a low-fi prototype (e.g. pen, paper and scissors) can help quite a bit with figuring out issues and pros/cons. Good luck! – tohster Mar 2 '15 at 22:18
16

I would flip the problem on its head: instead of tracing around the wound, have the user paint a colour over the wound. Give them two tools; a paintbrush and an eraser.

This behaviour is similar to the Quick Mask mode in Photoshop and it works great because you can use a very large brush size at first and then come at the sides with a large eraser to clarify the edges.

Adobe has a similar feature in Photoshop Touch called Scribble Select that is worth looking at for reference.

4

You can use an offset pointer/cross-hairs above the center of the touchpoint with an appropriate width. This will make allow you to see where the line is being drawn, not being obscured by your finger or hand.

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.