Tap Targets Should Be Sized Appropriately

It seems so obvious that tap targets on mobile devices should be discreet tappable regions on the screen. But sadly that’s not always the case, even on mobile websites and apps from major content creators.

Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App
Font Size Controls for the CNN Mobile Website, the LA Times Mobile Website, the AP iPhone App, and the New York Times iPhone App

One of the main uses of handheld mobile devices is taking a quick look at the latest news. And often people’s eyesight is not as good as the young designer who created the app, so a mechanism often is (and should be) provided for people to increase the font size, especially since reading is the main reason people are using the mobile website or app in the first place. Sadly the mobile websites for the LA Times and CNN, and the Associated Press iPhone app all fail at this simple task.

In the accompanying image note the size and spacing of the font controls on the CNN mobile website (the first screen grab). In this image I positioned them adjacent to the Mobile Safari control bar for comparision. Note the difference in size and spacing between CNN’s mobile website and what Apple recommends in its iOS Human Interface Guidelines. It’s not even close, and this is a product from a major content producer that’s designed for mobile users.

The same problem exists on the LA Times mobile website (the second screen grab). The controls to increase or decrease font size are too close to one another and are too close to the Reset link. Imagine tapping the big A twice to increase the font size and then hitting the Reset link when you are trying to increase the font size one more time.

The Associated Press iPhone app is an even stranger creature (the third screen grab). Font controls are actually buried in a settings menu. So it’s not clear to someone that they can change the font size, and if they want to they have to hunt around to find the control. The controls themselves are sliders, which require a person to apply a bit of precision to their adjustments. Wouldn’t an up/down arrow construct work just as well? This smacks of a design in search of a problem to solve.

The New York Times takes a different approach with its iPhone app (the fourth screen grab). There is only a single control, which increases the font size until you cycle through all the options and return to the smallest size. It’s not clear at first how this works, but it’s very learnable. And the size of the tap target and the spacing around it are in line with Apple’s recommendations.

Most mobile device makers provide user interface guidelines to developers. More designer should read them. Here are the design guidelines for three mobile platforms: