I recently asked some former UX students of mine what they would like to learn more about. The most common answer was touch screens.

I like this topic for two reasons: 1) it shows that even the most talked-about subjects are worth discussing in practical terms, and 2) while even a cat can use a touch screen device, they are easily deceived by a mouse (see what I did there?).

The easiest way to think about designing for mouse-controlled or touch-controlled stuff is to think of the mouse cursor (the little arrow) as an extension of your hand. Your finger and the mouse cursor are equal, but different. However, you will notice that there is a significant distance between the screen and your mouse-hand.

That distance makes a difference.

Using a mouse actually requires two interfaces. The physical interface in your hand (the mouse itself) — which controls the cursor — and the digital interface on the screen, which you “touch” with the cursor.

Meanwhile, a touch screen is a single interface that you touch directly.

The Mouse

The key to understanding a mouse and a touch screen is not to think about which is better. The key is to remember the strengths and weaknesses of each, and design appropriately. A mouse provides certain advantages over a finger, which are listed below:

SMALL & ACCURATE

Since a mouse cursor isn’t a physical “thing” it can be any size we want (in theory). In this case, smaller means more accurate. A mouse can actually select a single pixel, although one-pixel buttons are not recommended. But if you want to do something that requires fine control or lots of detail, a mouse will perform better.

CAN HOVER

Unlike a finger, the mouse cursor is always on the screen. And the computer knows where it is. That means that a mouse can trigger changes on screen without a commitment (click), which might be the best advantage of a mouse. When it is “over” a button or a menu (i.e. “hovering”) the interface can change color or reveal options without having to actively ask for them. This makes it possible to have complex interfaces without letting the complexity destroy the design.

SELECTS EASILY

A mouse can click small areas, between individual letters, or “click-and-drag” to select a specific area. This is also a big advantage over fingers, which block our view and scroll the screen when we “touch and drag”. The mouse cursor, therefore, is much better when it comes to working with text and image editing, which require careful content selections, or games that require precision.

HAS HIDDEN OPTIONS / NAVIGATION

Using the right mouse button (or a CMD+click on Mac) most software and some websites will display a menu or options. This can allow you to design common shortcuts into the mouse cursor itself instead of showing them on the screen. And everything on the screen can have a different right-click menu. Some touch-based apps have a touch-and-hold concept that is similar, but it is slower and less expected.

CAN CHANGE SHAPE

Unlike a finger, the mouse cursor can look like anything you want! An arrow, a hand, an icon, cross-hairs, etc. When the cursor changes it tells the user what will happen if the user clicks, like when the cursor becomes a pointer-hand over a link (a touch metaphor!). A lot of software takes advantage of this to provide rich visual feedback.

A few of the strengths of a mouse also come with weaknesses, and like most digital technologies, the fact that your cursor lives on the screen means certain things must be sacrificed:

HARD TO SEE

That fine-tuned selection ability comes with a weakness, and that is that the cursor is small. This is also to prevent it from covering everything as you use it. Anyone who has used detailed tools in Photoshop can tell you that sometimes you just can’t find the damn thing! And when you’re using two or three screens the cursor is easy to lose.

GESTURES FEEL UNNATURAL

Using mouse gestures, for most people, feels a little awkward. Some sites, like www.dontclick.it did some cool experiments with non-click methods of selecting and activating buttons. But the reason it was experimental was this weakness. Try it!

DISAPPEARS WHEN YOU’RE TYPING

This is a feature that a lot of people have never noticed, which is good, but you can only use the keyboard OR the mouse, not both at the same time. When you start typing, it disappears. It’s a big weakness if you have your mouse in your hand, but having to move it to find the cursor can sometimes be a bit disorienting.

REQUIRES VISUAL FEEDBACK

The advantage of being able to “hover” comes with a weakness, and that is: we have to show people that the hover means something. It is so common to have a “hover state” on a button, that if the button doesn’t change when we go over it with the mouse, many people assume it isn’t clickable. Visual feedback is a crucial part of usability on the web.

Your Finger

Most people have ten of these bad boys, and they have been designed by a natural process called Evolution, which tends to be rather good at designing tools:

BUILT-IN FEEDBACK

Your fingers have nerves in them, which tell your brain when they touch something. When your finger is touching the screen, you don’t need visual feedback to confirm it. That being said, visual feedback is still a good idea. This strength will probably get even better in the future, when touch screens eventually have interfaces you can feel. Then we could theoretically have devices that we don’t have to look at while we use them.

DIRECT-TO-INTERFACE

Instead of reaching for the mouse when you want to click the button, you reach for the button. That might sound small, but cognitively it makes it much easier for your brain.

CREATES A PHYSICAL ORIENTATION

The direct connection to your interface means people start assuming that a lot of real-world physical properties apply. Want to make something bigger? Stretch it. Smaller? Pinch it. Move it up? Put your finger on it and slide it up. You may not have realized that scrolling “down” with a mouse means moving “up” in the real world. Touch devices change this, making “up” mean up and “down” mean down.

ALWAYS AVAILABLE

On a touch screen you type and click and select with the same thing, your finger! You also know where your finger is when you’re not using it, so it never gets lost. Hopefully.

GESTURES & MULTI-TOUCH

Gesturing with your hands is part of every conversation ever (assuming you have functional hands), so when we have to do a swipe or pinch, it’s no problem. Sometimes we have to teach people what gesture to use though, so be careful about using crazy or complicated ones. If you need to do something a little more complex, a better choice might be a multi-touch gesture, which is when you use more than one finger. While a mouse is always a single cursor, you have five fingers on that hand, and some devices let you use all of them!

FULLY TRAINED RIGHT OUT OF THE BOX!

By the time you’re about 2 years old you have conquered the basics of fine motor skills, and that is proven by the fact that little kids can use an iPhone just as well as some adults. If you watch those same kids use a mouse you will notice that it is less comfortable, and they might look at the mouse sometimes to stay oriented.

Ok, so touch devices sound pretty good! But they’re not perfect. Physical objects always come with physical limitations, and fingers have some too:

DIFFICULT WITH SMALL AREAS

The biggest weakness of your fingers is that they’re too fat. Yeah you, fatty. Apple recommends a minimum button size of 44px x 44px. A mouse cursor could dance around in that space, but your finger will take it all. If you’re a big man you still might find that difficult. Also, your finger will cover whatever it touches, so if you’re typing, for example, you can’t see what letter you’re touching, and since the letters feel the same as the rest of the screen… the designers have to come up with visual feedback solutions.

YOU’RE TOUCHING OR YOU AIN’T

Your finger can’t be on the screen when you’re not using it, which means we don’t get the hover ability. That means we’re either touching or we’re not, and that limits some of our options as designers. When a touch screen device is viewing a website that isn’t mobile friendly, it means users might see the “hover state” when they touch things, and have to tap again to get the “click” action. This can be corrected by having a mobile version of your site.

HARD TO WORK WITH TEXT

Anything more than reading text on a touch screen is still sub-optimal overall, as of this article. Selecting, copy/pasting, editing, and typing are all kind of crappy and have big flaws. Most apps just avoid those types of features if they can, but apps that require them, like programming and word-processing, tend to be much less popular and less feature-rich than their mouse-driven counterparts.

IT’S ALWAYS YOUR FINGER

While the mouse can give you lots of information as you move it around the screen, your finger won’t. You’re touching or you’re not.

That’s it! Did I forget your favorite difference between a mouse and a finger? Tell me on Twitter!

J.