Developing an Effective Smartphone User Interface

  • Article

 

Chris Muench
Microsoft MVP

October 2002

Applies to:
   Microsoft® Windows® Powered Smartphone 2002
   Microsoft eMbedded Visual C++®
   Microsoft eMbedded Visual tools

Summary: Learn how to devlop an effective user interface for the Smartphone's compact form factor. (5 printed pages)

Contents

Introduction
What You Need
Background Information for Pocket PC Developers
Controls Optimized for Smartphone
New Controls Available
General Guidelines
Conclusion

Introduction

The Smartphone is a very powerful platform for developers, and with an accompanying form factor that is very compact, you should be mindful when designing your user interface (UI). The Smartphone UI is optimized for easy one-hand operations and therefore does not support a touch screen. If you are working on your application user interface you should always have this one-hand scenario in mind.

What You Need

  • eMbedded Visual Tools 3.0
  • eMbedded Visual C++ 3.0
  • Smartphone 2002 SDK (in Beta at time of writing)

Background Information for Pocket PC Developers

The Smartphone screen size is 176x220 pixels—smaller than the screen of the Pocket PC. Also the Smartphone is optimized for one-hand operations, rendering some of the common windows controls unusable. The Smartphone also does not support a touch screen or any similar mouse activity, limiting all interaction to keystrokes and cursor movements. As a result Microsoft has provided some new powerful controls that are more appropriate for one-hand operations.

Controls Optimized for Smartphone

Listview

The Listview is now always full screen instead of being a control that's part of a larger dialog. There is no possibility to select an item in a list view because the cursor keys move between the controls, not inside a control. If the user hits the Action Button while the list view has focus, List View always fills the screen.

Combo and List Boxes

List and Combo Boxes are not supported on Smartphone.

OpenDialog/SaveDialog and Everything Defined in "Commdlg.h" Not Supported

These common dialogs are built for large-screen environments. Additionally, on Smartphone, users are not exposed directly to the file system, but rather select files through their application. Instead of showing an OpenDialog you can fill a list-view with all the files available for your application and have the user select one.

Tabs and Property Boxes

Using the new SoftKeys, you can build a UI that looks very similar to the tabs on Pocket PC. You are limited to two keys, though, and the Smartphone UI design style guide specifies using SoftKey 1 for "OK" (or any other positive selection, i.e. "Yes", "Done" or "New") and SoftKey 2 for "Cancel" (or any negative selection, i.e. "No," or further actions). Most Microsoft applications use it for the main menu of the application.

Sliders and Horizontal Scrollbars

There is no input method to move a slider or scrollbar, because that would require pushing down a button and moving it at the same time. However, setting the dialog style to "Vertical Scroll" will work. Also, if you move with your cursor below the screen and there are still controls on the dialog, the screen scrolls automatically. The vertical scroll bar is more a visual indicator of the visible screen space then a user-operable control.

Treeview

The Treeview requires a lot of screen real estate and should be used as a structured selector for hierarchical data. For example, a full-screen treeview can be used to select a folder of a messaging application. Once a folder is selected you should dismiss the full-screen treeview and show the folder content.

New Controls Available

Spinner Control

The spinner control is intended to replace all combo boxes, list boxes and list views. It is basically a normal edit box with a left-right toggle on the side.

The user can move the cursor left or right to choose a different entry in the spinner edit box. If the user presses the Action button, a full-screen list of all items shows up and the user can select an item again using the Action button. Nearly all applications on Smartphone use this control.

The Resource Editor of EVC does not recognize this new control, so you have to edit the source of your RC file in text mode. Here is a sample how the control can be inserted:

LISTBOX  IDC_YOURNAME,5,30,90,10,NOT LBS_NOTIFY | LBS_SORT |
         LBS_NOINTEGRALHEIGHT | NOT WS_BORDER | WS_TABSTOP

CONTROL  "",IDS_UPDOWN,"msctls_updown32",UDS_SETBUDDYINT |
         UDS_ALIGNRIGHT | UDS_AUTOBUDDY | UDS_ARROWKEYS |
         UDS_HORZ | 0x200,0,0,0,0

Figure 1. Red circle shows the Spinner control

Full screen Multi Line Edit

This control is an edit control that activates a full screen "notepad" if the user hits the Action button when it is selected. Use this controls for longer texts, such as email body or notes.

General Guidelines

To design an effective UI, here is a procedure you should follow to optimize your results:

Step 1: Review your current User Interface for the Desktop version of your application or Pocket PC.

  • Locate all unnecessary interface elements and remove them.
  • Locate all elements that are not supported and remove them or replace them with Smartphone elements.
  • Try to avoid dialogs that pop up dialogs that pop up dialogs… and so on.

Step 2: Put all interface elements under each other instead of having them side-by-side

  • Use descriptive labels on top of elements instead of to the right or left (See Figure 2 and Figure 3).
  • You can have longer dialogs since they scroll automatically.

Picture 2: Pocket PC user interface

Picture 3: Smartphone UI

Step 3: Locate all Common Dialogs and remove them. If your application requires the user to select a file, do the following:

  • Store such files in "/My Documents."
  • Load the list of all those files into a Spinner control.
  • Show the Spinner control instead of the Common Dialog.

Step 4: Reduce the number of menus to one and menu items to 4-8.

Step 5: Define your SoftKeys. If you have a menu, use SoftKey 2. Otherwise follow this guideline: use SoftKey 1 for "OK" or any other positive selection (i.e. "Yes", "Done" or "New") and SoftKey 2 for "Cancel", negative selection (i.e. "No") or any further actions.

Step 6: Test your application user interface with one hand.

Force yourself to operate even the emulator with just one hand to ensure it will work to the satisfaction of the user.

Conclusion

Always test your UI in the emulator. Since the emulator supports touch, you might be tempted to develop an application for it, but on the final device there won't be touch-screen support. If you optimize your application UI for Smartphone, your application will be widely accepted among even unskilled users. Focus on ease of use when designing and building your user interface.

There is excellent background information about the Smartphone UI in the Smartphone Help under "Designing User Interfaces for Smartphone 2002."