December 2011
Volume 26 Number 12
Windows Phone - A Mobile Phone Is Not Just a Small Computer
By Marshal Datkowitz | December 2011
Developers creating PC applications are usually familiar with the relevant environmental, technological and human factors involved. When creating mobile phone applications, however, developers need to change their thinking about these factors. They need to consider where people will be using the device, what strengths and limitations the device has, and how to account for the different physical and cognitive needs people have. The mobile phone is a much different device than a PC. In this article, I describe some of the key differences and how explain how developers can adjust their frame of reference to create outstanding user experiences on mobile phones.
Display Size
The most obvious difference between a PC and a mobile phone is display size. The average size of a PC monitor is 21 inches, with a display resolution no less than 1024 × 768. The typical smart phone has a display of 3.9 inches and a resolution of 800 × 480. Clearly, a mobile phone doesn’t give you much space to work with. Your screens must be concise, and you can’t show as many options. The paths through your application have to be super clear, so you need to spend more time on the functional design than you do for a PC application. You need to use less text and better icons. The Yelp screen in Figure 1 illustrates an effective way of presenting clear icons that represent key functions.
.png "Example of Effective Icon Use")
Figure 1 Example of Effective Icon Use
If you rely heavily on icons to convey your features, functions and contents, your icons need to be more concrete and less complex than for a PC, and they must accurately represent the concept you’re trying to express. For example, say you want to depict the concept of a note. To make your icon concrete, design it to look as much like a note as possible, perhaps a small piece of paper with a paperclip. You also want your icon to be simple, so don’t include much detail—you don’t need lines on the paper or a texture on the clip. Finally, to avoid confusion, depict your icon as a paper-and-pencil note, a physical concept just about everyone has experience with. Be sure to stay away from using something clever, such as a musical note, to represent your note icon—you’ll just baffle your users.
Your text should be as legible and readable as possible. Legibility refers to how easy characters and words can be identified. To make your text more legible, use a font size of at least 10 points and turn up the contrast. Watch for chromatic aberration, which happens when you place red on dark blue (or dark blue on red), causing the colors to vibrate. Readability is how easy text is to read and understand. Keep your content simple and to the point—restrain yourself from waxing poetic or being too technical. Get your point across as succinctly as you can. Always remember your users’ needs and try to address them without being simplistic.
Here’s what you need to remember about display size: You don’t have much room to work with, so minimize the number of screens and options, and minimize the amount of text. The text you use should be legible and readable. Replace text with icons when you can. Your icons should look as realistic as possible. The visuals should match the tasks, and the design should be straightforward.
Input: How It’s Used
The standard PC has several ways of inputting, but basically a keyboard and a mouse are used most often. A mobile device relies mostly on fingers, whether they are used to type on the screen keyboard, tap icons or buttons, or make gestures, such as swiping or pinching. The downside to the touch screen is that there is no tactile feedback as there is on a physical keyboard, so inputting is a lot slower and mistakes are frequent. To compensate for these drawbacks, you can provide sound or vibration for key presses and minimize text entry. Fingers comes in all sizes, so make your buttons large enough (35 pixels square) and visually separated from other buttons or objects to reduce error.
Find innovative ways to input data, such as using photographs. For example, the Meal Snap application uses photography to add food to its calorie counter, Quick Response codes (links, text and other data), an accelerometer that lets users select items by tilting the phone to indicate a choice, a use-detected location (GPS) so users don’t have to manually enter a current address, and voice to input text into fields (Bing search).
You should also take advantage of the hardware. Windows Phone has three dedicated buttons (Back, Start and Search), and you can use them to reduce clutter on the interface and to minimize error.
Context: Where It’s Used
PCs are used mostly in homes and offices—fairly predictable and stable places, with good lighting, limited distractions and a relatively focused user. When developing for mobile users, throw out everything you know about PC users. Mobile users are a different breed.
Mobile device users (for the most part) are on the move, and many are in a rush. They have a limited amount of time and have come to your application for a specific reason. They come with questions that need to be answered. If your application is to succeed, it must help users get those answers quickly. If users are consistently helped by your application, they will spend more time using it.
Environmental and cognitive issues that rarely occur at the desktop often appear in a mobile environment. Distractions such as noise can draw the user’s attention away from the device, or at least interfere with the detection of sounds from your application. Sun glare can obliterate the screen and make it difficult even to see your application much less use it. The overload of information can make it difficult for users to concentrate on your application, which can affect their cognitive processing. They can look at the screen, look up at something else, and then go back to the screen. You can help users by paring down your application to the bare minimum so that they can quickly understand what the application is doing and easily find their place on the screen when the distraction is over.
One final note: Developers who simply miniaturize the PC experience for the mobile device are missing the point. We need to focus our attention on giving users what they want most from our applications— simply but elegantly.
Marshal Datkowitz is a Senior User Experience Architect in the User Experience Group at Infragistics. Marshal has over 15 years of experience in Web and software UX design for business services, financial services and telecommunications. Marshal can be contacted via email at mdatkowitz@infragistics.com.