Iceberg Tip

Problem

Sometimes you need to design a TOUCH FRIENDLY TARGET, but you do not want to have enormous and inelegant buttons to clutter the interface.

Solution

Design the visible part of your object with whatever size you planned, but make the real target invisible and large enough so it can be easily touched.

This pattern is inspired on the idea described by Dan Saffer1 in Designing Gestural Interfaces, which, like the name suggests, uses the metaphor of an iceberg for describing a target that is larger than what is visible.

When designing touch friendly interfaces, touchable elements must be large enough so users can easily interact with them. However, it is not always practical, or visually pleasing to design big buttons through the entire interface, in fact, touch friendly buttons may sometimes look clumsy. This situation mainly occurs when we have any element, either text or image, that by itself is not large enough to be triggered without effort; or when designing big buttons may go against what was envisioned for the visible design of the interface.

The solution involves having the visible part of the element surrounded by an invisible padding area that also works as a target, i.e., only a portion of the target is visible, the rest is hidden.

One limitation of this pattern is that it cannot be used when we have several touchable elements side by side, without creating white space between them.

We should always try to provide the correct affordances for the interface, but because of the small scale that the visible component can reach, the simpler design, or just because users were not expecting that elements that small would work as buttons, it may happen that these elements are not be perceived as touchable. Microsoft recognizes this downside and recommends that the graphic component should be at least 4.2mm. 2

Web Design Patterns for Mobile Devices
Figure 1. ICEBERG TIP, the color overlay represents the real target.

Starbucks — figure 1 — uses small circles with a diameter of 16px as buttons for navigating through a SLIDESHOW. Those buttons do not look large enough for being easily touched; however, the real target is a 36px square, which improves considerably its efficacy, though, it is still below what is usually recommended by TOUCH FRIENDLY TARGET.

Web Design Patterns for Mobile Devices
Figure 2 Comparison of targets on Starbucks (left) and BBC (right).

On the first image from Starbucks website we have a menu with links that could be improved by using this pattern. The text is too small, which by itself is not necessarily a problem, but the target occupies the same space as the text, in this case, as low as 8px height; and there is not adequate space between links, which makes it almost impossible to hit the intended target on the first try. On the contrary, the BBC website has a comparable menu, but here, while the visible part is still small, links have plenty of space between them, and the real target occupies the maximum space possible.

***

Web Design Patterns for Mobile Devices
Starbucks, 04/2012
Web Design Patterns for Mobile Devices
BBC mobile, 04/2012
Web Design Patterns for Mobile Devices
Pepato Studio, 04/2012

  1. Saffer, Dan. Designing Gestural Interfaces: Touchscreens and Interactive Devices, 2008. 

  2. User Experience Design Guidelines for Windows Phone