Designing for finger-driven UIs:

Fingers

The minimum size of buttons and other interface elements is determined by the size of an adult finger. Adult fingers generally have a diameter of 16mm to 20mm (0.6" to 0.8") http://touchlab.mit.edu/publications/2003_009.pdf

When interacting with a touchscreen, users will prefer to use the pad of their finger rather than the very tip (the finger will be at an acute angle to the touchscreen, rather than at a right angle). The pad of the finger is slightly narrower than the full width of the finger: 10-14mm (0.4-0.55"). The fingertip is smaller still - 8-10mm wide - but more awkward to use than the pad of the finger.

In general, interface elements should be no smaller than 1cm (0.4").

Factors affecting ease of use:

  • Young users have smaller fingers
  • Older or heavier users may have larger fingers
  • Older, distracted, or disabled users may not have the motor control necessary to hit a small target
  • Unlike a mouse cursor, the finger will obscure part of the screen while being used to interact with the device

Buttons

Buttons may be smaller than a finger if they're spaced appropriately, and if the touchscreen driver is smart enough to determine the center point of the finger.

  • On Pepper Pad 3, program flags are 24px x 24px. At 133ppi, this works out to ~0.18" x 0.18". However each button is padded, for a total width of 52px (0.4")
  • On Pad 3, the text-only page bar is 24px high (0.18"). Users often have trouble hitting page bar buttons with their fingers, instead hitting the tab directly above the target button.

Minimum button size for a finger-driven UI is a function of pixel density, not screen resolution.

  • Given proper hardware, xdpyinfo will accurately report pixel density. This can be used at runtime to determine a proper scale factor or icon size for the current screen.

Onscreen keyboards

Onscreen keyboards are a special case of buttons. Text entry via keyboard is almost always an operation in which the user can correct mistakes before the text is submitted (usually via the 'Enter' key). Because the user can correct the mistakes introduced by too-small buttons, onscreen keyboards can get away with smaller buttons than would otherwise be acceptable.

iPhone's onscreen keyboard displays 10 buttons ('qwertyuiop') in 320px, for 0.2" per button. The keyboard buttons are too small for accurate typing, so iPhone's keyboard is 'intelligent', providing the following:

  • Visual confirmation of each letter as it's typed
  • Built-in dictionary for autocorrection of mistyped words
  • Pattern recognition to detect mistyped sequences of letters ('ouzza' is recognized as 'pizza')
  • Adaptive button sizes - each button's hit area is determined by predicting the next letter to be typed (after typing 'tim', the hit area for the 'e' key is increased, and the hit area for the 'w' and 'r' keys is decreased)

Lists

List rows need to be at least the same height as a button, so that they can be manipulated. There are several primary options for increasing the size of list entries:

  • Use a larger font
  • Add a second row of text
  • Add an image, such as an avatar

These options can be combined. A contact list might include the contact's name in large text on one list, the primary contact number/address in smaller text on the second line, and an avatar off to the side.

Mail's message list could use the first line of text for header information (date/from/subject) and the second line for an excerpt from the message itself.

Screen real estate by device

Screen size

Resolution

Aspect ratio

Screen dimensions

Pixels/Inch

Size of 1/4" button (px)

Size of 1/3" button (px)

Size of 0.4" button (px)

Size of 1/2" button (px)

N800

4.1"

800x480

5:3

~3.5" x 2.1"

225

56

75

90

112

MID

4.8"

800x480

5:3

~4.1" x 2.46"

195

48

65

78

97

MID

5"

800x480

5:3

~4.28" x 2.57"

187

46

62

74

92

Q1

7"

1024x600

5.12:3

~6.0" x 3.54"

170

42

56

68

85

8.9"

1280x768

5:3

~7.63" x 4.58"

168

42

56

67

84

iPhone

3.5"

320x480

2:3

~1.94" x 2.91"

160

40

53

64

80

Pad 3

7"

800x480

5:3

~6" x 3.5"

133

33

44

53

66

15.4" Laptop

15.4"

1440x900

8:5

13" x 9.2"

110

27

36

44

55

15" LCD

15"

1024x768

4:3

12" x 9"

85

21

28

34

42

Note that a 90px button - sized to be 0.4" on the N800 - is more than 1" wide on a 15" LCD!

UMEGuide/DesigningForFingerUIs (last edited 2008-06-27 10:15:13 by localhost)