Martin Heller at Infoworld has put together an article that describes why and how ISVs can support Touch and Multi-Touch in Windows 7 applications and Silverlight 3 applications.
The article is entitled, Targeting Windows 7? Support touch. He says, “Many Microsoft Windows developers have ignored touch support; it's time for that to change.”
In fact, all Windows programs should be touchable. Supporting Touch will get your applications noticed in the marketplace. Just as accessible software benefits all users, providing a great touch experience benefits all users because everyone benefits when basic interactions are easy to perform, efficient, responsive, and forgiving.
So the good news is that you can start now to get your application ready, even before you dive deeper into supporting Touch. You can do some simple things in your user experience now, like making your controls big enough and spaced far enough apart to touch. (See the following section, Six Things You can Do Now.) And you can begin looking at your user experience from how you will enable Touch in your next version.
Touch-Enable then Touch-Optimize
A program is considered touchable when it has only the touch support provided by Windows and the controls for the most important tasks are easy to touch. To support touch, there’s two levels to consider with your application. And you take take them in phases:
- Touch-enable your application
- Then touch-optimize your application.
A program is considered touch-enabled when it has been designed for touch for its primary tasks, which usually means:
- The most frequently used controls are at least 40x40 pixels (23x22 DLUs).
- Relevant gestures are supported (including panning, zoom, rotate, two-finger tap, press and tap), and the effect occurs at the point of contact.
- The program provides smooth, responsive visual feedback while panning, zooming, and rotating so that it feels highly interactive.
A program is considered touch-optimized when it has been specifically designed for touch, which usually means:
- Tasks are designed for easy touch by placing the most frequently performed commands directly on the UI or content instead of in drop-down menus.
- The program's special experiences are designed to have an immersive touch experience (possibly using raw touch input data), with multi-touch manipulations and details like having feedback with real-world physical properties, such as momentum and friction.
- Tasks are forgiving, allowing users to correct mistakes easily and handle inaccuracy with touching and dragging.
- Tasks are designed to avoid or reduce the need for heavy text input or precise selection.
Guidelines for Your User Experience
You want your controls to be big enough to touch and far enough to tell which one the user is touching. A good example is the Office ribbon.
As a general rule, you want control size of 23x23 pixels (13x13 DLUs) is a good minimum interactive control size for any input device. The goal isn't to have giant controls—just easily touchable controls.
System gestures are defined and handled by Windows. As a result, all Windows programs have access to them.
Here are a few more guidelines:
- Prefer constrained selections (such as drop-down boxes) to interfaces that require text input.
- You can make users more productive by automatically zooming input UI up to 150 percent by default when touch is used for text editing
- Don't assume that if a UI works well for a mouse, it also works well for touch.
- Do assume that if a UI works well for a finger, it also works well for a pen.
- Don't depend on hover; it works for a mouse and a pen, but not for a finger.
- Don't depend on the touch pointer to fix touch UI problems.
If you are trying it out, you can make buttons and controls bigger and easier to touch by telling Windows to display everything larger – this has really improved in Windows 7. Go to the Start menu and type display, and then open the Display Control Panel (which should be at the top of the Start menu). Choose the Medium (that’s what I use) or Larger size and you will find that everything is easier to target with your finger.
Six Things You Can Do Now
The new multi-touch APIs support rich gestures, such as pan, zoom, and rotate. All gestures provide direct visual feedback, and interact with underlying content in a natural and intuitive manner.
If you do only six things...
- Make your Windows programs have a great touch experience! Users should be able to perform your program's most important tasks efficiently using a finger (at least the tasks that don't involve a lot of typing or detailed pixel manipulation).
- For common controls, use the standard control sizing. For other controls, make sure they have at least a 23x23 pixel (13x13 DLU) click target, even if their static appearance is much smaller.
- Make use of hover, but don't make it the only way to perform an action. Hover isn't supported by most touchscreen technologies.
- To create a direct and engaging experience, have gestures take effect immediately, keep contact points under the user's fingers smoothly throughout the gesture, and have the effect of the gesture map directly to the user's motion.
- To create a natural and intuitive experience, support appropriate standard gestures and assign them their standard meanings. Use custom gestures for interactions unique to your program.
- Make sure your program provides the ability to reverse or correct any undesired actions—especially for destructive commands. Accidental actions are more likely when using touch.
How To Get Started
To get started, see Touch on MSDN.
Heller explains, “One of the easiest ways to get yourself ready for touch support is to add an inexpensive tablet to your development computer. … When I want to use flicks and ink, I move the mouse to the back of my desk and grab the tablet's pen from its holder. I do not use the menu template software that came with the tablet, because it disables flicks.”
An even better but more expensive way would be to buy a Tablet PC with multi-touch. Both HP and Dell offer multi-touch tablets.
The current API is native (unmanaged code) and in the near future Windows Presentation Foundation (WPF) 4 will include full support of Multi-Touch in Windows 7.
For an overview, see Enabling Multi-Touch in the Windows 7 Beta. For code samples and hands on labs, see Windows Touch: Developer Resources on MSDN. You can get a good idea of how powerful the features are for Touch in a video Windows Media Center on Windows 7 with Touch.
You can get started today seeing more about the possibilities. The Windows 7 SDK includes a few demos for reference, including detailed samples showcasing Multi-Touch gestures support, manipulation, and inertia for both WinForms and WPF.
To get the latest download, see Windows SDK development center on MSDN. You can expect an update soon for the RTM version of Windows 7.
The current Windows SDK includes examples:
|Multi-touch Gestures Application (C++)||Demonstrates how to configure and handle multi-touch gesture messages in a Win32 application.|
|Multi-touch Gestures Application (C#)||Demonstrates how to configure and handle multi-touch gesture messages in a managed application.|
|Multi-touch Manipulation Application||Demonstrates how to setup and handle manipulation multi-touch events in a Win32 application.|
Please note if you are running a 64-bit version of Windows and Visual Studio 2008, please upgrade to Visual Studio 2008 SP1 before installing the Windows 7 SDK.
Beta 1 of .NET Framework 4.0 supports multi-touch. That version added support in Windows Presentation Foundation (WPF) for Windows 7 multi-touch, ribbon controls, and taskbar extensibility features.
You can get .NET Framework 4.0 and Visual Studio 2010 Beta 1 from Visual Studio 2010 and .NET Framework 4 Beta 1. The latest preview of the developer training kit provides a PowerPoint presentation that includes code that will give you an overview. And you’ll find a hands on lab that walks you step by step in supporting multitouch. You can get it from Microsoft download, Windows 7 RC Training Kit for Developers.
In the lab you build a Multi-Touch Picture-Handling Application beginning with a XAML project, then
Task 1 – Test the existence and readiness of multi-touch hardware
Task 2 – Replace mouse events with touch events
Task 3 – Handling more than one picture simultaneously
Task 4 – Handling pictures with multi-touch manipulation
Task 5 – Add a PictureTracker cache
Task 6 – Add Inertia
One of the new features to Silverlight 3 is the ability to add multi-touch capabilities to your application. So when your user hardware support multi-touch Silverlight 3 supports it. Tim Heuer describes the steps and what you can do in Silverlight to enable multi-touch in his blog posting Silverlight 3 Multi-touch: The Basics.
You tap into the touch events from the hardware to Silverlight. He also has a video that demonstrates what your applications could do using multi-touch.
Bruce D. Kyle
ISV Architect Evangelist | Microsoft Corporation