Ever notice that a cat will chase the mouse pointer on the screen but they won’t chase your finger while you use a touch device?
One of the first things to consider when designing something to be used (digital or not) is how it will be used, physically. In the case of digital, we will usually need some sort of input device like a mouse, or your fat fingers.
You heard me, fatty.
A mouse is a device you hold in your hand, and it moves the little arrow on the screen. It involves hand-eye coordination. It can select a single pixel, but 8-10 pixels is more comfortable. It can click, click-and-drag, drag-and-drop, select an area or list, and more!
Your fat finger is attached to your body and you feel whatever it touches. Positioning your fat finger or hand is handled by the most basic part of your brain. The smallest thing a finger can tap is about 30-50 pixels, depending on the finger. A fat finger can tap, tap-and-drag, drag-and-drop, and even navigate by drawing shapes on the screen (called gestures). Multiple fingers can pinch, re-position, gesture, scroll, etc.
Obviously these two things are different, and when we actually design something, we have think differently as well.
Real Metaphors
When you physically touch a screen there is no “device” between you and the button. You are literally pushing the button. The mouse pointer is metaphorically pushing a button. Keanu says: “There is no spoon.”
Clicking is a two-step cause-and-effect. Click the mouse = push the button = action. With your fat finger it’s only one step… push the button = action.
The cat is chasing the mouse pointer because it appears to move by itself, and in your brain, that means it is handled by something more advanced than moving your finger (but that is a whole other ProTip…).
Relative / Real Positioning
If we turn off the screen and move the mouse, where is the pointer? We have no idea. If we turn off the screen and move your hand, where is your finger? Duh. That is a subtle thing, but it makes a big difference mentally. If you want to see how unnatural a mouse actually is, turn it around and try to use it backwards.
MouseOver / Hover
The computer always knows where the mouse pointer is. When the pointer is over a button, the button often changes color. It’s the digital equivalent of “feeling” the button when you “touch” it with the mouse (but you feel it with your eyes).
However, the computer doesn’t know where your fat finger is until you tap. We don’t need feedback when our finger is “over” something because we already know we’re over it… it’s our finger. “Tappable” areas need to be more obvious, since they don’t have the “hover” or “mouseOver” feedback.
Visibility
Your fat fingers cover anything you tap while you tap it. If you tap-and-drag you can’t actually see what you’re dragging. When you click-and-drag with a mouse, you can still see exactly what you’re dragging and what is under it. Try typing on an iPhone and notice that the letter you tap is shown above the “key” as you tap it.
Threshold
It is easy to click something. It is even easier to touch it. Accidentally. I often touch the keypad with my face during iPhone calls, because I’m awesome like that. Functions like “delete” or “reset” or “donate all to charity” need to be confirmed (Are you sure?) on a touch device, even more than with a mouse-driven device.
The Device Itself!
Keep in mind that a screen has friction, and is slower than moving a mouse. Sometimes a finger sticks for a moment, and dragging all the way across the screen isn’t as convenient with a finger as it is with a mouse. Also, touch devices sometimes have to be used with the same hand that is holding them, so you might have to think thumb, not finger!
In real life your fingers probably aren’t fat. They’re beautiful, and perfect, and normal. But all fingers are much bigger than a mouse pointer. Little text links are great for a little mouse, and big fat buttons are great for “normal” fingers.
And that’s why fingers ≠ mouse.
Have a great week!
****
If you liked that ProTip, try ProTip Tuesday #5: Launching is an Experiment.