Design Considerations for Microsoft Smartphone Applicationsby Wei-Meng Lee
Editor's note: Wei-Meng Lee will be discussing Smartphones in his tutorial, Developing Smartphone Applications with the Microsoft .NET Compact Framework, at O'Reilly's 2004 Emerging Technology Conference. ETech begins February 9 in San Diego, California.
If you're a .NET Compact Framework developer, you should be delighted that Microsoft recently announced support for the .NET CF in the new Smartphone 2003. To start developing .NET CF Smartphone applications, you simply need to download and install the Smartphone 2003 SDK. Visual Studio .NET 2003 will then automatically include the template for developing Smartphone applications.
Despite the same development environment and the familiarity of the .NET Compact Framework class libraries, developing for the Smartphone is not entirely the same thing as developing for the Pocket PC. New Smartphone developers need to understand and appreciate the design constraints of the new platform.
The main difference between a Smartphone and a device running the Pocket PC platform is its form-factor. Pocket PC devices use a stylus and a touch-sensitive screen for user input. In contrast, Smartphones do not have touch-sensitive screens; instead they have to depend on softkeys mapped to fixed buttons on the keypad. Figure 1 shows the three different versions of Windows Mobile 2003 deployed on different devices Pocket PC, Pocket PC Phone Edition, and the Smartphone.
The form-factor for Pocket PC and the Pocket PC Phone Edition are almost identical (the real difference is the added phone functionality in the Pocket PC Phone Edition), but differs substantially from the Smartphone.
In this article, I will focus the discussion on the UI differences between a Pocket PC and a Smartphone. I won't be delving into the details of .NET CF programming on the Smartphone, but to give you an idea of the controls supported in the Smartphone platform, I have listed the controls in the next section.
Controls Supported in the Smartphone SDK
The Smartphone 2003 SDK has further shrunk the number of controls you can use in a Smartphone application. In the current version of the Smartphone SDK, only 14 controls are supported (the DataGrid control is listed in the ToolBox but not supported in the Smartphone SDK). Figure 2 shows the list of controls supported in Pocket PC development versus Smartphone development.
Table 1 lists the controls supported in the Smartphone 2003 SDK:Table 1. Controls Supported in the Smartphone 2003 SDK
|Label||To display text|
|TextBox||To capture user alphanumeric input|
|MainMenu||To display menus on the screen and map to the two softkeys|
|CheckBox||Checkbox can be selected, not-selected, or disabled|
|PictureBox||To display images|
|Panel||Act as a container for other controls|
|DataGrid||This control is not supported; even though it is listed in the ToolBox|
|ComboBox||Contains a list of options for users to choose|
|ListView||To display a list of items; available in a variety of views|
|Treeview||To display data hierarchically|
|Timer||To raise events at certain intervals|
|ProgressBar||To update user on the progress of a certain task using a filling-bar|
|ImageList||For storing images used by other controls, such as the TreeView control|
Let's now focus on the UI aspects of a Smartphone.
Since a Smartphone does not come with a touch-sensitive screen, familiarizing yourself with all the navigational buttons in a Smartphone is very important, if not essential. Figure 3 shows the typical layout of the navigational buttons in a Smartphone:
Your application mainly interacts with the user through the two softkeys. So instead of using Buttons control to let a user tap on in a Pocket PC application, they are now replaced by these two softkeys.
You scroll through the various controls on the screen using the Up/Down arrows. The Left/Right arrows are usually used for selecting options in controls such as the ComboBox. The Action key is used to select a control, somewhat equivalent to a "tap" in the Pocket PC.
Because there are only two softkeys, if you have more than two options to let a user select, they need to be grouped together (see Figure 4). In this case, it would be better to name one of the two softkeys as "Menu" to let the user know that there are more than two options available:
A Pocket PC has a much larger screen estate as compared to a Smartphone. A Pocket PC screen size is typically 240 by 320 pixels whereas a Smartphone screen size is 176 x 180 pixels (minus the title and menubar). Figure 5 shows a comparison in screen size between the two platforms.
Because you can tap on the screen in a Pocket PC, the items in a dropdown menu "drop" downwards when clicked (as its name correctly implies). In a Smartphone, however, there is no such control. To achieve the same effect, you need to customize the ListView control (see Figure 6). To select the item in a dropdown menu, you can use the Up/Down buttons or press the shortcut key. For example, pressing "7" is equivalent to navigating to the MSN Messenger item and pressing the Action key.
Correct handling of text inputs in a Smartphone application can make a difference between success and failure for your application. Unlike the Pocket PC, which has a built-in SIP (Software-based Input Panel), the Smartphone does not have one. Instead, the user has to rely on the numeric keypad to enter both text and numbers (see Figure 7).
When designing applications that require user input, be sure to minimize the number of keys the user has to press. Also, be sure to turn on numeric mode for fields that expect numbers (such as telephone numbers) and T9 input for alphanumeric fields.
Note that if you turn on numeric mode for text input, the title bar actually displays a "123" symbol to provide visual cues (see Figure 8).
Context menus are useful for displaying options related to a particular piece of information. However, context menus are not supported in the Smartphone. Instead, you have to make use of the softkeys to display menus related to a particular item (see Figure 9).
For a single line of text input, the TextBox control in Smartphone looks similar to that of the Pocket PC (see Figure 10).
For multiple lines of text-input, you will see a right arrow at the right-end of the textbox. Press the Action key to bring you to a full screen (see Figure 11).
For ComboBoxes, you will not see a dropdown list of items (as in the Pocket PC); instead you can see two arrows at the right-end of the textbox. To scroll through the list of items, use the Left/Right arrow keys. Alternately, you can also press the Action key to view the list of items available for selection (see Figure 12).
Session by Wei-Meng Lee
Wei-Meng Lee will be delivering a tutorial on "Developing Smartphone Applications with the Microsoft .NET Compact Framework" at O'Reilly's 2004 Emerging Technology Conference.
O'Reilly Emerging Technology Conference
In the Pocket PC, you use a Tab control when you have more controls than you have space to put them in (see Figure 13, left). However, in a Smartphone you do not have the Tab control.
When you have to display a large number of controls, there are two options available:
- Make the form scrollable to accommodate all the controls (see Figure 13, right).
- Use multiple Panel controls (to contain the other controls) and overlay them. Hide and display each Panel as your user walks through your application.
Programming Smartphone applications is much more challenging than programming Pocket PC applications, given the tighter constraints of a phone. However, with an understanding of the design limitations of the platform, you too can build compelling Smartphone applications that are really, well, smart!
Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.
Return to the Wireless DevCenter.