Windows Phone: Designing Touch Targets

source: blogs.msdn

A common problem in Windows Phone app design is the poor use of touch targets, i.e. the area of the screen which responds to user interaction (usually a tap). When designing on the emulator, this is easy to overlook as the mouse gives a very precise 'touch'. However, when the application is run on a device the user's finger or thumb is normally used to tap on the screen. This is the 'fat finger' problem and can mean that items are difficult to hit accurately (user accidentally taps the item next to the desired one) or items that can be tapped on don't always respond.

SIZE AND SPACING

When touch targets are very small and close together, the user has to take care when tapping to make sure that they accurately hit the item they want. This can be very frustrating and slows down the interaction with the app.

For more detailed guidance for designing touch targets, visit Interactions and Usability with Windows Phone.
However, here is a simple walk-through you can try out yourself for an idea of how this works in practice.

Let's use the ListPicker control from the Silverlight Toolkit for Windows Phone as an example.
On the left is the full screen view where the list uses default TextBlocks to display the items. On the right is the same list, but this time with the FontSize set to "40" and the Margin set to "0,12".

...Read more

You can also follow us on Twitter @winphonegeek

Comments