MOBILE APPLICATION

Aus DPWiki - The Design Pattern Wiki

Illustration

Handheld devices come in very different shapes. Thus designing applications for those devices differs widely from designing for desktop computers.

Context

…you want to design an application that should run on a handheld device.

Problem statement

Handheld devices have special characteristics compared to desktop computers. They look different and are used for different reasons. What possibilities do these characteristics involve and what are the limitations that result from the characteristics?

What must be considered when designing an application for handheld devices?

Problem description with forces

Handheld devices are extremely portable, self-contained information management and communication devices. They break down into the categories phones, pagers, PDAs and a combination of these categories, communicators.

Compared to desktop computers handheld devices have special characteristics that involve some possibilities but also some limitations [1].

• They are used for different reasons: as personal information managers, as portable compressed document viewers, as in-the-field data entry devices and also for voice communication. The devices and applications are mostly used for short-timed episodes. So they require fast access to the relevant information.
• They have a different form factor: handheld devices are easily held in one hand and operated with the other.
• Handheld devices define mobility: they are small, light weighted and very portable as they are all-in-one units that typically do not need cables (except the power cable when they are recharging).
• They feature connectivity: to desktop computers, to other handheld devices or to the internet. However, they make and break the connection based on needs and the connections are, compared to desktop computers, mostly very slow and unstable, since they rely on an overburdened, problematic networking infrastructure.
• Handheld devices provide only suboptimal input mechanisms: keypad input options, stylus input methods like handwriting recognition or on-screen keyboards and additional keyboards. However, each method involves some tradeoffs and none is ideal.
• Maybe the most constraining characteristic of handheld devices concerning user interface design is the small display size: the resolution is mostly limited as well as the number of colors. This implies that controls to interact with and information to be presented on screen need to be well designed.
• Limited memory and little or no storage capabilities additionally restrict the information that can be displayed and handled.

All these characteristics and differences to desktop computers require different design strategies for handheld devices and offer unique challenges - and opportunities - for design.

Examples

User interface guidelines for mobile devices like Palm OS User Interface Guidelines [2], Symbian UIQ style guide [3] or Nokia Series 60 UI StyleGuide [4] are all adapted to the special characteristics and requirements the different devices imply.

The interfaces described in those guidelines are designed for devices with small screens, limited memory and storage capacities and relatively poor input means. They all try to make applications for those devices easily usable.

Solution

Therefore:

When designing applications for handheld devices, adapt user interface design, information architecture and interaction design [5] to the special characteristics that those devices involve.

User interface design: the constraints of the screen's size imply particular attention in:

• Layout: try to save screen real estate by hiding controls and information that are not always needed. However, provide a standard way to bring them back when they are required. Organize and present information in a way that is appropriate for small screens. Also let users customize what they want to see on the screen.
• Colors: apply only a limited number of colors in order to keep the interface simple and the screen easily scannable. Colors can be efficiently applied in order to highlight relevant information
• Icons: icons and symbols should be simplified in order to be clearly legible on small screens. Good icon design can minimize the use of text, thus saving screen space.
• Typography: legibility and readability are main issues in mobile devices. Use only a limited number of typefaces of suitable distinction to enhance distinguishing between different classes of information.
• Instant alerts and personalized agents: in order to deliver real time relevant content, provide instant alert to help attract the user's attention. Apply human-like agents to deliver the content in a friendly, personalized manner.

Information architecture: when considering the user's input difficulties, the UI design should aim to enable users to find relevant information using only a few clicks. That implies a rather horizontal architecture, enhancing the searching function, instead of a hierarchical one, meant for a browsing navigation. Because of the aim of satisfying a specific information need with precise information, a semantic content organization is also preferable to a hierarchical one.

Interaction design: in mobile context the physical features of the device and the interaction techniques should enhance a seamless environment, thus keeping the situation of use in consideration. In this direction the wearable technology is trying to solve some issues such as freedom of hands, while speech and handwriting recognition techniques aim to enhance the user's input activity.

Diagram

References

An answer to the question "How many applications should be displayed on a handheld device at once?" is given in ONE TRUE WINDOW.

How small screen real estate can be used best is described in SAVING SCREEN SPACE and its referring patterns.

Ways to organize information and how this information can be searched and navigated best is explained in INFORMATION ARCHITECTURE AND NAVIGATION.

FLEXIBILITY describes how the system can be adapted best to either the user's requirements, to special tasks or the environment it is used in.

CUP OF TEA TEST shows how you can ensure that when users go for a cup of tea or climb onto a bus they will not advertently destroy their data [6].

A PICTURE IS SMALLER THAN A THOUSAND WORDS describes how interaction controls should be designed.

Literature and Links

1. Weiss, S. (2002): Handheld Usability. John Wiley & Sons
2. Ostrem, J. (2002): Palm Os User Interface Guidelines, Document Number 3101-001, http://www.palmos.com/dev/support/docs/ui/uiguide_front.html
3. Symbian Ltd. (2002): Symbian UIQ style guide, http://www.ericsson.com/mobilityworld/sub/open/technologies/epoc/docs/uiq_style_guide
4. Nokia Corporation (2002): Nokia Series 60 UI StyleGuide v4.0, http://www.forum.nokia.com/main/
5. Oppermann, R. (2003). Software-Ergonomie (course slides). University of Koblenz-Landau, Institute for Computational Visualistics.
6. Weir, C. and Noble, J. (2001): A window in your pocket - Some small patterns for user interfaces. In Proceedings of the European Conference on Pattern Languages of Program Design, EuroPloP 2001. The Hillside Group, Inc.