The small screen on mobile devices and the requirement to support touch input present a challenge when designing UIs. Windows Phone 7 requires touch input and will not respond to pen-based or pointer input. In addition, the UI should be designed to work in both portrait and landscape modes. Some devices with a hardware keyboard will require the phone to be used in landscape mode for data entry tasks, as shown in Figure 3.
The following are some of the things you should consider when designing the UI for a mobile phone application:
- Do not try to adapt an existing UI design directly from a web or desktop application. Start afresh by thinking about the flow of user interaction and how you can maintain simplicity and make the application intuitive for use in the phone environment.
- Consider the fact that the design must work in both portrait and landscape mode.
- Choose the appropriate types of controls for display and input. Special controls designed to work well on Windows Phone 7, and used in the Metro theme, include the Pivot and Panorama controls.
- Place menus and other option boxes at the bottom of the page so that the user’s hand does not obstruct the rest of the page content. However, remember that the on-screen keyboard will obstruct a large proportion of the screen when the user selects a text control.
- Follow the Windows Phone 7 application design guidelines by ensuring that buttons and other controls that the user must interact with are large enough, and that they have enough separation to prevent accidental activation of the wrong one.
- Provide feedback when an action is initiated so that the user is not tempted to retry the operation. Use a visual or other indication to signify that the program has recognized the gesture and is responding to it.
- Validate input where appropriate, especially before initiating communication with the server or starting a resource-intensive process. This prevents invalid input from causing additional data transfers and unnecessary communication costs; it also prevents wasting processor time and increasing drain on the battery.
- Consider setting the InputScope property of text controls to simplify user interaction. This property determines the type of on-screen keyboard displayed for the text control. For example, setting InputScope=”Text” displays a simple predictive textenabled keyboard, while setting InputScope=”Url” displays a keyboard containing the characters most used in URLs. For a list of supported values, see “InputScopeNameValue Enumeration”
on MSDN (http://msdn.microsoft.com/en-us/library/system. windows.input.inputscopenamevalue(VS.95).aspx).