Designing for Touch Input

If your users will use touch as a primary way of interacting with your application, consider implementing a user interface that's optimized for that input method. Users face three difficulties with touch input that you can address in your touch-enabled interface:

• Due to the large surface area of the fingertip, users may find it difficult to target small screen elements and precisely tap controls that are spaced closely together.
• Touch digitizers cannot detect a hovering finger, so the system cannot display hover feedback for touch users. This limitation further affects the user's ability to precisely target screen elements.
• Unintentional touching of the screen can cause unexpected events, such as switching to a different application.

The touch screens in your application can provide more efficient interaction if you take these issues into account.

Consider a full-screen interface

With a full-screen interface, you can reduce the possibility that the user will inadvertently touch outside the client area of your application and cause your application to lose input focus. Consider the following suggestions when you design a full-screen touch interface:

• Avoid placing commit buttons on the left and right sides of the screen. Users are most likely to touch these areas accidentally.
• Use full-screen forms. This practice reduces the likelihood of users accidentally clicking an underlying window and switching to a different application.
• Provide a back button to make it easy for users to return to a previous screen. Consider saving settings on each form automatically, rather than require users to tap the OK button.

Use appropriate sizing.

Provide controls that are appropriately sized for a touch interface. Enable users to confidently target buttons and other controls. The minimum targeting area for a touch interface is approximately 9 millimeters (mm).

Minimize the need for text entry

Minimize the need for text entry in your touch applications. Make it possible for users to fill out screens without needing to switch to pen or keyboard input. The following controls provide alternatives to text boxes:

• Combo boxes or list boxes
• Sliders, which can be tied to a numeric field or a set of ranked choices
• Option buttons
• Check boxes

Example

The following example shows a form that's designed for touch, with elements sized and spaced appropriately.

Send comments about this topic to Microsoft

Build date: 2/8/2011