Is there such thing as "touchscreen-friendly" user interface?

Question

My understanding about touchscreen-friendly is that the controls are not too small so that they can be tapped by the finger. Are there "touchscreen-friendly" user interface standards? Or is there even a word (touchscreen-friendly)?

Answer 1

Yes, and it's called finger-friendly.

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

Small touch targets are very hard to hit, and users sometimes need to zoom in (if possible) to press the correct target. Not particularly useful and an issue one need to address. Also hitting a target is difficult. You could touch the target with your finger and at the same time hide the object to press. Alternatively, you could use your fingertip making the object to push visible – but you have to rearrange your finger to get it to work.

If one don’t implement enough white space between buttons or links, the effect may be that the user accidentally push the other non-intended button, and end up somewhere else. Imagine the frustration when that happens.

The concept of “Finger friendly” may not be as big yet, but it will probably grow fast.

---

Images from Smashing Magazine: Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

Answer 2

This is a pretty broad question, but if you're looking for some resources, here are a few I would suggest:

• Apple iOS UI Design Dos & Don'ts
• Apple: Designing for iOS7
• Android Design Guidelines
• Designing Mobile Interfaces by Steven Hoober and Eric Berkman
• Mobile Design Pattern Gallery: UI Patterns for Mobile Applications by Theresa Neil
• Microinteractons: Designing with Details by Dan Saffer
• Mobile Usability by Jakob Neilsen and Raluca Budiu

Answer 3

The difference between touch and mouse is much deeper than just the size of the controls. It requires another way of thinking:

• Swipe rather than scroll (which requires you to rethink the role of scrollbars)

• Pinch rather than click to zoom.

• Cursor remains invisible (because under your finger). This makes operations much more direct but also less precise.

• No hovering (where does that leave tooltips?)

• Less room for chrome on smaller devices.

Etc.

Answer 4

I've seen the term finger-friendly used before, which is pretty succinct. An interface may be fine for a mouse and keyboard, but may not suit finger taps, slides, etc. Either create a dedicated interface for the purpose (such as a smartphone or tablet app) or adapt the one design to suit both use cases.

There's also more to finger-friendly interfaces than control sizing...There's also spacing between controls, and careful use of hover effects, which work best with a mouse.

Consider Fitts' Law, which is thusly described:

Fitts's law (often cited as Fitts' law) is a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. It was proposed by Paul Fitts in 1954.

It comes down to there being a trade-off between speed and accuracy, where targets are smaller and/or further away.

Answer 5

We developed some very early touch screen apps starting back in the 1970s and 1980s, and have learned a lot of lessons and developed our own set of guidelines over the years.

(Please note that we did our work with full screen size terminals, long before the existence of handheld devices like tablets and phones.)

First, we had to understand our users. Will they be members of the general public, or trained employees? Will they be using this for 4 hour shifts, or just occasionally? Will they always be in a controlled environment, might the system be used out of doors, or might the users be standing next to exterior doors where wintry winds can chill them, tempting them to put on gloves? Will the users be in a food service area where constant cleaning of the equipment with cleaning solutions is required, or where they may be wearing plastic gloves? These questions helped us determine the choice of touch screen technologies.

Next, is the application constantly changing the positions and types of the buttons? Or are the buttons fairly consistent, and located in a relatively static area? Restricting the buttons to a set of fixed locations on the screen helps users who perform repeat activities. Making buttons appear everywhere slows them down. We usually set up a kind of frame, with navigation buttons consistently located in certain positions.

We required our touchable buttons to encompass a minimum of 1/2" on each side, with the guidance that the larger the touchable area, the better.

We required immediate responsiveness to the user that their touch was accepted, although the processing didn't have to complete immediately. We did it by inverting the entire touch area for that button, causing it to be highlighted beneath their finger while they were touching it. This also teaches the user the full extent of the areas as they touched them.

We used large fonts, and advised that the button labels should convey only a few words at most.

We never provided for drag and drop, draggable selection boxes, multi-touch, or gestures. (Again, this was 20-30 years ago, before such things were even invented, let alone as common as they are today.) If a user touched an unwanted area, they could drag their finger out of the area. We triggered on the release of the finger, not the initial touch point. They learned that on a mistake they could drag their finger to a non-touch area of the screen to release.

I don't know how many of these lessons still apply to today's iPad literate population. With touch capabilities native in the operating systems and the GUI frameworks, the applications no longer need to manage nearly so many details. And our goals were "easy but very limited", not "fine motor control required for the details and full capabilites."

Answer 6

Besides the other answers, any functionality that relies on being able to hover the mouse cursor over an area is inherently finger-unfriendly. Right clicks are not impossible but they're annoying since they require a tap-and-hold, and there's no standard way to indicate visually that an area is right-clickable.

Answer 7

It's important to note that the size of tapable areas alone doesn't make a interface touch-friendly. In this piece by Josh Clark, the writer focuses on the placement of important elements on various touch-devices (Smartphones,Tablets,Hybrids).

Rule of Thumb Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. On every handheld touchscreen, from phones to tablets to hybrids, the thumbs call the shots. Here’s why.

Phones:

On phones, the best interfaces optimize for a one-handed grip, because it’s at once the most freeing and the most limiting. It’s freeing because it lets you do things with the other hand-write, sip coffee, hold a baby-a fact that makes it the most common grip. But it’s limiting because working a phone one-handed means working it with your thumb. Thumbs separate us from the beasts, but alas, when it comes to driving software, thumbs lack both reach and dexterity.

Tablets:

Tablets are trickier because we hold them so many different ways. We grab, tilt, lean, cradle, and clench in a whole variety of embraces, many of which depend upon stance. The rule of thumb still applies to these guys, except that the thumb zone changes. The special headache here is that the thumb zone isn’t consistent even for individual devices; it changes depending on posture.

Hybrids:

Here again, the rule of thumb calls the shots. You’ll recall that hybrid users frequently adopt a bottom-corner grip, resting their arms alongside the keyboard. Placing primary controls and navigation in easy reach of bottom-corner thumbs means you avoid gorilla arms. The result is a vertically flipped version of the thumb zone we saw for standalone tablets.

Answer 8

It looks like the other answers have touched on many of the interface considerations you might need to consider, but since you asked about "touchscreen" instead of "mobile", I'm going to make an educated guess that you're designing for something other than a standard mobile device.

If that's the case, you need to be aware that not all touch screen hardware devices are made equal (or even close to equivalent). Modern mobile touch-screens are designed around very high quality, mutual-capacitance project capacitive touch (PCT) panels, and often are multitouch (support more than a single point at once). Many large form-factor touch panels (as used in kiosks) use infrared touch (a vastly simpler technology than capacitive touch, but generally limited to single-point touch or multitouch with significant "ghosting" issues) or inferior self-capacitance PCT.

You can read all about how PCT works in detail in this rather academic paper by Gary Barrett and Ryomei Omote (PDF link).

I've also written at length about some of the main design considerations of large-format touch screens (especially on kiosks) on the following questions:

• Are there any special design guidelines for big touch screens (30–50 inch)?
• Is there any difference in element minimal sizes on 10 and 24 inch touch screens?