Packing Lite: A mobile media interface design primer

Adjusting your mindset

Let's take a moment to discuss what's different about creating mobile user interfaces.

Designing an interface for a mobile device requires significant rethinking about navigation mechanics. Since devices do not include a mouse or track-pad input device, there usually isn't an arrow pointer. Instead, mobile devices rely on a selector, moved by pressing a directional pad, or offer a touch-screen interface. The interface of a device more closely resembles a DVD menu or an ATM machine. In either case, the region of the interface that triggers an action must be larger and indicate its response differently. Rollovers are used extensively on desktop interfaces to indicate to the user that the cursor has touched a particular element. In selector-based interfaces, the rollover serves a slightly different, but important purpose; it indicates that the current element is selected. Clicking only occurs on a selected element, so the behavior to perform an action requires multiple steps that could potentially involve multiple clicks:

1. Tap the direction pad to highlight the desired interface element.
2. Then, press the select button to trigger the selected action.

On the desktop, we're accustomed to the immediacy of point-and-click. However, our actions are still mediated by the location of the cursor. On touch-screen interfaces, we enjoy tremendous immediacy and can manipulate the interfaces directly.

These subtleties will conspire to prevent you from simply resizing your desktop projects into a mobile screen dimension. Instead, you'll also need to consider how your menus, for example, will adapt to the selector or touch-based interactions. Luckily, Flash button symbols are well equipped to adapt their use across platforms. The Over state of a Flash button symbol acts as the selector in Flash Lite. In the following example, we'll look carefully at how the button states, their positioning, and their pre-selected states affect the user experience on a mobile device.

There are many more crucial aspects to mobile media design. Josh Ulm's excellent whitepaper on the subject articulates other important considerations, such as adapting information design and interfaces together to maximize information density and functionality within the minimum screen dimensions. Pay special attention to how he illustrates the use of a carousel-like menu, which effectively focuses the users' attention by animating the size of the selected element, and uses motion to suggest the act of selection. This technique is ideal for directional-pad devices, but the same approach may not translate well to touch or pointer-based devices (see Figure 18).

• View Larger (+)

Figure 18. As Josh Ulm correctly points out, "When everything is equal, nothing is important. Use techniques like animation and expanding-focus to draw emphasis to the item of attention." This epitomizes how a pointer-less interface on a tiny screen requires serious design reconsideration.

Let's take a look at how to make a very simple main menu interface that adapts well across many types of user input scenarios. We'll take an example from the Flash Lite Content Development Kit (CDK) and develop it further to illustrate these interface concerns. By testing the interface in both the integrated virtual device emulators and actual physical devices, you will begin to develop an intrinsic sensitivity to mobile media design.

Page 8 of 9

Previous Page

Next Page