Print

Design Considerations for Microsoft Smartphone Applications

by Wei-Meng Lee
01/07/2004

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.


Figure 1. Toshiba E805, O2 XDA, Motorola MPx200.

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.


Figure 2. Controls supported in Pocket PC versus Smartphone.

Table 1 lists the controls supported in the Smartphone 2003 SDK:

Table 1. Controls Supported in the Smartphone 2003 SDK
Controls Description
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
HScrollBar Horizontal Scrollbar
VScrollBar Vertical Scrollbar
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.

Navigational Controls

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:


Figure 3. The navigational buttons of 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:


Figure 4. Grouping options together and assigning to a softkey.

Screen Estate

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.


Figure 5. The Start screen of a Pocket PC device versus that of Smartphone 2003.

Dropdown Menus

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.


Figure 6. Implementation of dropdown menu in Pocket PC versus Smartphone 2003.

User Inputs

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.


Figure 7. User input on the Pocket PC versus user input in Smartphone 2003.

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).


Figure 8. Providing visual cues to indicate the input mode.

Context Menus

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).


Figure 9. Context menus are not supported in Smartphone 2003.

Text Input

For a single line of text input, the TextBox control in Smartphone looks similar to that of the Pocket PC (see Figure 10).


Figure 10. Single line text input.

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).


Figure 11. Multiple line text input.

ComboBox

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).


Figure 12. Selecting an item from a ComboBox control.


Session by Wei-Meng Lee
Developing Smartphone Applications with the Microsoft .NET Compact Framework

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.

ETech 2004 Conference

O'Reilly Emerging Technology Conference
February 9-12, 2004
San Diego, CA


Tab Control

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.


Figure 13. Using the Tab control to contain multiple controls in the Pocket PC versus scrolling forms in the Smartphone 2003.

Summary

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.