Usability and Touch

With the additions of the Windows Touch API into Windows 7, a developer now how has a brand new way of soliciting input into his or her application. However, there are usability considerations which are needed. Some UI designs which make sense in a keyboard / mouse world will need to be adjusted for touch scenarios, and I’ll attempt to address some of them below.

Are the controls big enough?
When putting controls on your form or canvas, remember that your user’s fingers have to be able to touch it without accidently activating the wrong control. Consider the following screenshots of a music player.

(the height of the picture was altered to fit better in the post).

Notice how the buttons are too close together. I can say first-hand that touching the pause button often misses and accidently skips to the next track. A better approach for touch would be make the buttons larger and perhaps space them out a little more. Also notice the scroll bar width. It is not really wide enough for a user to easily scroll through options.

Is there too much ‘stuff’ on the screen?
It is very easy to fall into the trap of trying to make an application have a tremendous amount of functionality and putting it in as little space as possible. Many times, this is done to minimize the number of ‘clicks’ a user needs to do. In doing this, we tend to forget is that the purpose of minimizing clicks is to make an application easier to use. Users will often be more than happy to perform another click (or touch in our case) if it makes the application more intuitive. Make sure that the screens in your touch application don’t have too much ‘stuff’ on each one and to present information in a way readable to your average user.

Are extra visual clues needed?
One technique designers use to follow the “less is more” principle is to hide functionality until it is needed. In the screenshot below, the column resizing markers are hidden until the mouse pointer is hovering over the column resizing row.

In a touch screen, hardware might not be present to simulate “hover” functionality. This leaves the user to use trial-and-error in order to find where to resize the column. That is, if they’re aware they can resize it in the first place! (See the little lines between the heart and the MP3 player icon? That's the column resizing area. Now imagine trying to touch a screen to resize it!) This issue can be minimized in touch programs by not using hover-based (mouse over) functionality. Alternatively, provide an alternative means to do the same thing.

Can less traditional controls be used?
Maybe there are better ways of handling application function by using less of the traditional controls. Here are some examples of this technique.

Note how the application allows for buttons at the bottom (stylized like a DVR remote control), but also has touchable album art which yields more information. Although it is hard to see from the image, there is plenty of space for someone to touch the desired action, with much less chance of accidently touching the wrong area.

Can the user touch where they need to?
A user often can’t touch areas right at the edge of the screen. With the TouchSmart tablet I use, there is an area of plastic around the screen which makes it difficult to touch the Close Window icon (X in the upper right hand of a window) along with any vertical scroll bars usually placed on the right hand side of a window. Make sure to provide extra space to compensate for physical limitations.

These are just some basic questions that should be considered when making an application which uses touch functionality. Additionally, be sure to review the Windows User Experience Interaction Guidelines when designing your application as well. By following these steps and using common sense, you can provide a pleasant, enjoyable, and above all, usable application for your end users.