Designing Pocket PC Application for Stylus-Free Usage (one-handed)
.NET Compact Framework MVP
Neoteric Software Development Company
www.neotericsdc.com
Applies to:
.NET Compact Framework 2.0
Windows Mobile 5.0 Pocket PC
Visual Studio .NET 2005 Beta 2
Contents
Changing the Developer Mindset
New Features in Windows Mobile 5
Pocket PC
New Features in .NET Compact
Framework V2.0
Implementing One-Handed Operation
Introduction
Windows Mobile 5.0 (WM5) Pocket PC introduces many features and enhancements from prior versions of the operating system. These enhancements benefit both the regular user and the mobile developer. One major addition to the WM5 Pocket PC platform is Stylus-Free usage or one-handed operation. This new enhancement introduces a great usability feature to the everyday user but also introduces a whole set of new challenges to the developer. This white paper will focus on how to overcome these challenges when developing a mobile application for Windows Mobile 5.0 Pocket PC using Visual Studio .NET 2005 and .NET Compact Framework 2.0. We will go through creating a sample application to track kilometers for automobiles, since stylus-free usage is especially critical when driving a car!
Stylus-Free Usage Overview
Compared to the WM5 SmartPhone, one major area that the Pocket PC was lacking was stylus-free usage or one-handed operation. One-Handed operation allowed the user to do exactly what it says, operate the device with one hand. Unfortunately, Pocket PC was not designed for one-handed use, although if forced, you could use a Pocket PC with one-hand but required a lot of effort.
With the introduction of Windows Mobile 5.0, stylus-free usage was a top usability feature for the new Windows Mobile 5.0 OS. Pocket PC did borrow some of the SmartPhone features to provide one-handed operation. Below are two images from a SmartPhone and a Pocket PC Phone Edition running Windows Mobile 5.0.
|
Figure 1 - Windows |
Figure 2 - Pocket PC Phone Edition |
As you can see from the images there is unification of the OS which for the user, creates a more standardized feel but for the developer introduces some new challenges if they have never developed for SmartPhone.
Changing the Developer Mindset
Usually when developing for a Pocket PC application, the developer has in their mind that the user of the application will be either using a stylus or a finger to click around the application. Now with one-handed operation, there has to be a mindset change and almost try to eliminate the stylus when designing a mobile application. It is very similar to writing a data entry application for the desktop. You don’t want the user of the data entry application to move their hands from the keyboard and reach for the mouse; instead you want to support features like the arrow keys and tabbing. With one-handed operation on a pocket pc, it’s the same idea; you don’t want the user to pull out the stylus which requires two hands. Realistically, you may never write an application that will never require a stylus or two hands, but you can try to make some parts of your application stylus-free.
New Features in Windows Mobile
One of the major features added to WM5 Pocket PC to accommodate one handed usage is the introduction of ‘soft buttons’ borrowed from the SmartPhone design. Figure 3 shows examples of soft buttons. The major difference with SmartPhone is that SmartPhone provides hardware buttons to invoke the ‘soft buttons’ whereas Pocket PC can either have hardware buttons or tap on the screen to invoke the buttons. To the developer this is not a big concern, but it’s always good to know how your users will use your application.
New Features in .NET Compact Framework V2.0
.NET Compact Framework Version 2 has added many new features compared to Version 1. Covering all the new features is beyond the scope of this article, but this article will cover some new features to accommodate one-handed operation.
To help describe some of the new features we will be walking through some of the code included in the sample application; Kilometer Tracking.
Soft Buttons
From a developer’s perspective ‘soft buttons’ will now act as your menu for your application. Now you will have two menus; one on the left and one on the right. Through out your application you should dynamically change your menu as you display different forms in your application.
Below are some sample screen shots from the Kilometer Tracking application showing two different screens.
|
Figure 3 – Sample Soft Buttons |
Figure 4 – Sample Soft Buttons |
Navigation Enhancements
Many controls now support navigation by using the direction hardware key. This is a great usability feature for the user and simplifies some coding for the developer but there are still some controls that do not navigate to the next control but only navigate within itself. Take for example a TextBox control, when using the hardware navigation keys on the device the cursor will move left, right and up, down (if it’s multiline). This is not ideal for one handed operation. How will the user navigate to the next control without tapping the screen or using the second hand? Here is a sample screen shot from the Kilometer Tracking application showing different types of controls.
Figure 5 – Sample Screens
System.Windows.Forms.Control Enhancements
The .NET Compact Framework V2 has many new controls added to the toolbox. The base System.Windows.Forms.Control class (which all controls inherit from) has some added functionality like the full .NET Framework which for the developer is helpful when designing a stylus free application. Some properties of interest in the control class are
- Control.TabStop – Gets or sets a value indicating whether the user can give the focus to this control using the TAB key.
- Control.TabIndex – Gets or sets the tab order of the control within its container
One method of interest in the Control class is
- SelectNextControl()–Activates the next control. Note: Although the documentation does not show Compact Framework V2 as supported it does work in the Visual Studio 2005 July CTP.
These, of course; are already available in the full .NET Framework but are a recent and welcomed addition to the .NET Compact Framework. These methods and properties will simplify our development when designing one-handed applications.
Most controls support these properties and methods; one drawback is not all controls will navigate to the next control when using the directional pad. One design goal when creating a stylus free application is to use the directional pad extensively for navigation.
Kilometer Tracking Sample Application Overview
For the Kilometer Tracking sample application we needed to display a collection of cars the user may own, and be able to enter kilometers to track the usage. Below is a simple overview of what’s included. For simplicity, the sample application does not save any data entered.
Fig 6 – Kilometer Tracking Overview
The class diagrams look like this for the main Car, Cars and KMItem classes are defined below.
Fig 7 – Main Classes
We for One-Handed Operation we also have to extend some controls. We will get into that below, but for now here are the classes. The classes of interest, which we will focus on, are towards the bottom of the image.
Fig 8 – Extended controls
Implementing One-Handed Operation
Now that there is an idea of what the sample application does and how it is structured we can go through implementing One-Handed operation. There are a few things that have to be done to support one-handed operation. We will look at using TabIndex and some new features in designer, directional hardware keypad, what’s supported for navigation within .NET Compact Framework controls and finally extend some controls to support one-handed operation.
TabIndex
First, with the new properties and methods available in the Control class, we will have to make sure the TabIndex properties in all controls are set properly. This property will allow a user to navigate in a logical manner which should be left to right and top to down. Some controls, for example the LinkLabel, does not expose the TabIndex property. One way to overcome this is to use the Bring To Front in the Visual Studio Form Designer.
Fig 9 – Bring to Front in Form Designer
When using this method be sure to start from the last control to show and work your way up. This way navigation will be supported in a logical manner and bring the user all over the form.
For controls that do support the TabIndex property there is a new “Tab Order” menu item in the Form Designer.
Fig 10- Tab Order Menu Item
When the developer selects this while designing their form, the user will have a visual representation of the controls that have the TabIndex property. This will help visualize how the user of the application will move within the application. Of course, this should always be tested either on the emulator or a real device.
Fig 11 – Form with Tab Order turned on
Direction Pad
Some of the .NET Compact Framework controls support navigating to the next control by using the directional pad.
Figure 12 – Directional keypad on the emulator
The directional pad will generate a keyboard event to the
application. Notice the button in the
middle of the directional pad; this is the equivalent of the ‘Enter’
button. This knowledge is needed for our
stylus-free implementation.
.NET Compact Framework V2.0 Controls
As mention previously, some controls in the .NET Compact Framework automatically navigate to the next control in the tab order when using the navigation key. These include:
- LinkLabel
- Button
- CheckBox
- RadioButton
There are other controls that support the navigation pad but only internally. This breaks the stylus free design because the user cannot navigate to the next control. These controls include (but are not limited to):
- TextBox
- ListBox
- ComboBox
- NumericUPDown
- DateTimePicker
Since the above controls prevent the user from using the application with one hand, we can extend the controls to add specific functionality for one-handed operation.
Extending Controls
Visual Studio 2005 has added an enormous amount of support for custom controls for .NET Compact Framework V2. If you have been using V1 of the Compact Framework then you may be familiar with the pain and challenges of creating a custom control. This has all been eliminated in Visual Studio 2005 and Compact Framework V2. If you recall the Control Class diagram above, there are some new controls we extended to support stylus free usage. These are:
- ListBoxEx
- ComboBoxEx
- TextBoxEx
- NumericUpDownEx
- DateTimePickerEx
The base controls of the above are not too friendly for one handed navigation, but by extending the controls we can add this needed functionality. Visual Studio 2005 makes it extremely simple to create controls.
Here is the class definition for ComboBoxEx
public class
ComboBoxEx : System.Windows.Forms.ComboBox
{
public
ComboBoxEx()
{
}
protected override void
OnKeyDown(KeyEventArgs e)
{
}
}
When the class compiles all you have to do is drag your control file under the Solution Explorer and drop it in the Toolbox. Then you can use the control in the Form Designer without having to make two separate assemblies as was required in .NET Compact Framework V1.
Fig 13 – Adding custom control
Since these controls do not support navigating to the next control in the tab order, a method was implemented to select the next control. The assumption was, when the user clicked the ‘Enter’ hardware button on the directional pad the next control would be focused on.
For example, the following delegate will be run when one of the directional keys are pressed on a form. There are if statements for every possible scenario.
...
this.KeyDown += new
System.Windows.Forms.KeyEventHandler(this.frmMain_KeyDown);
...
private void
frmMain_KeyDown(object sender, KeyEventArgs e)
{
if
((e.KeyCode == System.Windows.Forms.Keys.Up))
{
// Up
}
if
((e.KeyCode == System.Windows.Forms.Keys.Down))
{
// Down
}
if
((e.KeyCode == System.Windows.Forms.Keys.Left))
{
// Left
}
if
((e.KeyCode == System.Windows.Forms.Keys.Right))
{
// Right
}
if
((e.KeyCode == System.Windows.Forms.Keys.Enter))
{
// Enter
}
}
This will allow us to trap any key events to support navigation or one-handed operation. For the extended custom controls the only item of interest is the System.Windows.Forms.Keys.Enter value. Here is the implementation for the ComboBoxEx
public class
ComboBoxEx : System.Windows.Forms.ComboBox
{
public
ComboBoxEx()
{
}
protected override void
OnKeyDown(KeyEventArgs e)
{
//When the user clicks the enter button
just go to the next control
if
(e.KeyValue == (int)System.Windows.Forms.Keys.Enter)
{
this.Parent.SelectNextControl(this, true, true, true, true);
e.Handled = true;
}
}
}
Basically, all extended
controls override the OnKeyDown method.
If the ‘Enter’ key was pressed navagation to the next control is
automatically handled. This fulfills our
design goal of one-handed or stylus free operation of a Pocket PC
application. Of course in the sample
application, the only place you need two hands or a stylus is when you are
setting up a new car, you will have to type in the Car Model. Other than that, when entering a kilometer
entry you will only need one hand to add an item.
Conclusion
One-Handed operation or stylus-free usage for a Windows Mobile 5.0 Pocket PC application is a fairly new concept but not very difficult to implement with Visual Studio 2005 and .NET Compact Framework 2.0. We can borrow some of the design decisions that are made on the desktop to make a ‘mouse free’ application or some of the ideas from a Windows Mobile SmartPhone. Windows Mobile 5.0, Visual Studio 2005 and .NET Compact Framework 2.0 open up a whole world of new possibilities in the mobile world. Explore what is available; I am positive there are more techniques to stylus-free usage, and also a wealth of new classes to play with.
About the Author
Mark Arteaga is Software Development Consultant/President of Neoteric Software Development Company (http://www.neotericsdc.com). Mark has been in the computer industry for the past six years designing, architecting, and developing software for various projects. During the past four years his focus has been primarily on mobile projects utilizing Windows CE, PocketPC, SmartPhone, and .NET Compact Framework. He is also actively involved in the OpenNETCF.org project, which specifically targets improving the Microsoft .NET Compact Framework through open source projects.
If you have any comments or questions you can contact Mark at marteaga@neotericsdc.com. You can also check out his personal blog for more .NET Compact Framework tips and libraries and happenings in the mobile world at http://blog.markarteaga.com.