Chapter 5. Designing Small UIs Driven by Large Finger

The intense popularity of touchscreen devices is nothing new to us—the web/mobile designers and developers. So we're not going to talk about market shares, statistics, or analytics numbers. Instead, we're going to talk about the things we need to consider to build a usable interface, such as target sizes, navigation patterns, navigation icons, best practices and mobile device ergonomics.

In this chapter, we're going to cover the following topics:

The ideal target sizes on small UIs.
The posture patterns and the touch zones.
The basic guidelines to consider for RWD.
The navigation patterns for RWD.

The ideal target sizes on small UIs

All vendors have different sets of rules and guidelines regarding the ideal size of targets on small screen devices. Some of them refer to these sizes in pixels, others in points, and others in units such as inches, millimeters, or centimeters.

Regardless of the units these vendors use, they all agree on one basic concept: make your target size big enough to avoid accidental taps. This goes in hand with Fitts's law, which states that the smaller the target, the longer the user will take to reach it.

Obviously, as web designers, we have to be mindful of what large means in the context of our designs, so we need to balance the target size recommendations with good design principles. Our aim is that the messages should reach the users and they should be able to comfortably use our interfaces.

One thing to keep in mind is that the guidelines for target sizes for RWD are mostly based on mobile apps design patterns. Let's get right to it.

The average width of an adult's index finger is about 16 mm to 20 mm. This is close to 45px to 57px.

According to Apple's iOS Human Interface Guidelines, the recommended minimum target size is 44pt x 44pt.

Tip

The reason some user interface guidelines use points and millimeters as their measuring units is to provide a consistent scale that is device independent. That's because 1px in one device may not necessarily mean exactly 1px in another device. Nonetheless, some vendors do provide guidelines on pixels, but mostly so we can get an idea of how an element's proportions relate to one another.

In the past, Apple did recommend their target sizes in pixels, 44px x 44px, but when retina displays were introduced, 1 pixel from the iPhone 3 turned into 4 pixels on the iPhone 4. There wasn't a 1:1 ratio anymore.

This means that 44pt x 44pt in non-retina devices is actually 44px x 44px, but on retina devices it is 88px x 88px. These pixel values change again every time Apple releases a new device with an even higher density screen.

Having a good understanding of the screen density of Apple's devices, or any device for that matter, is a must in the RWD world. This way, we can always account for these technicalities when creating our designs so we don't hinder the user experience and the usability of our websites and apps.

On the other hand, Microsoft's Windows 8 Touch Guidance documentation recommends an ideal target size of 7 mm x 7 mm (40px x 40px). If accuracy is crucial, because of serious consequences such as close or delete, the Windows 8 Touch Guidance guidelines recommend target sizes of 9 mm x 9 mm (50px x 50px). Also, when screen real estate is scarce and things need to fit, the minimum recommended target size is 5 mm x 5 mm (30px x 30px).

These dimensions are for non high-density screens.

The Windows 8 Touch Guidance guidelines go as far as recommending a minimum padding between elements: 2 mm (10px), regardless of the target size (and this is good).

The Android Developers guidelines recommend a minimum target size of 48dp, which is about 9 mm. The minimum and maximum recommended target sizes are 7 mm and 10 mm, respectively.

The Android Developers guidelines also recommend a minimum spacing between elements of 8dp.

Tip

Here, dp means density-independent pixels. This means that 1dp is the same as 1px in normal density screens. Just like Apple with the use of points (pt), they are trying to define a unit that is global and screen density independent.

There is also the Ubuntu documentation recommending that interface elements shouldn't be smaller than 1 cm (about 55px).

As we can see, the recommended minimum and maximum target sizes vary from vendor to vendor. However, they are not that far apart.

We can safely conclude from all the target sizes mentioned, that the proper dimensions are (in low density screens):

The recommended target size is 48dp × 48dp = 48px × 48px.
The minimum target size is 5 mm x 5 mm = 30px × 30px.
The maximum target size is 10 mm x 10 mm = 55px × 55px.
The padding between any element is 2 mm = 10px.

Previous Chapter

Summary

Next Chapter

The posture patterns and the touch zones

Table of Contents for Mastering Responsive Web Design

Chapter 5. Designing Small UIs Driven by Large Finger

The ideal target sizes on small UIs

Tip

Tip

Table of Contents for
Mastering Responsive Web Design