Sample Code

Intel's Mobile Internet Device (MID) is a new category of low-power computing device which may be a hand-held tablet or a device placed in another embedded environment such as a car. This document describes the UI guidelines for developing applications for MID.

The MID application architecture is based on the Hildon application architecture and shares some of the user interface and style characteristics. However, the MID user interface, navigation, and user experience is different in many ways from Nokia N-level hand-held devices.

This guide provides recommendations for developers creating new applications or porting existing applications to MIDs. It outlines the primary features of the MID user interface, including user interaction, system and application look-and-feel, common controls location, and navigation. The goal of this guide is to provide a consistent and integrated experience for MID users. For general Hildon application UI style recommendations, please see the Hildon UI Style Guide ².

MID hand-held devices are smaller than laptops with most user input and system navigation done using the touchscreen and limited hardware buttons and controls on the device. Understanding this fundamental paradigm is important in designing applications.

Hardware Device

MID hardware features vary from device to device, but share the following minimum characteristics.

Screen size

Minimum: 4.8" diagonal (most common)
Maximum: 7" diagonal

Screen resolution

Dimensions:

Applications should not be tied to a fixed resolution or width/height ratio. For example, some devices may be 800x480 or 800x600. A device may support multiple resolutions such as 800x480 and 1024x600. Applications should register for notifications to know when the screen resolution or orientation has changed.
Color depth: Minimum: 16bit (65536 colors). Default: 24bit (16M colors)
DPI: 225

Input Mechanism

Touch screen: System can be operated by human touch.
Stylus: Some devices will feature a stylus (optional) for more accurate operation.
Hardware controls: Buttons and controls on the device.
Soft keyboard: An on-screen keyboard provides a way for text/number input using a finger or stylus. A user can configure this keyboard to auto launch when an edit field gets focus.
Hardware Keyboard (optional): Devices may have a hardware keyboard.

Memory

Device specific. Minimum: 256 MB.

Storage

Device specific. Minimum: 1GB SSD. Maximum: Hard drive capacity (if present)

Hardware Controls

Aside from a power switch, no hardware controls are required for MID devices, including keyboard. The user interface is fully navigable with on-screen controls, and applications should be fully usable using touchscreen input only. The hardware controls listed in the following section can simplify and speed common user tasks.

Recommended (Expected)

• Power button: press and hold for off/on; momentary press to go in and out of standby
• A slide-lock device to preclude inadvertent input when the device is pocketed
• Full-screen toggle button
• Jump-to-Home screen button
• Camera shutter button next to lens on the back
• Up/Down/Left/Right arrows (capacitative on the display bezel)

Other Features

• Scrolling control (Up/Down/Left/Right can cover this)
• Brightness control (device may have ambient light sensor)
• Volume control
• Screen rotation
• Menu key to show current application menu

Picture of Sample Device

The following is a conceptual design for a MID.


Figure 2-1: Conceptual design for a MID.

Small Screen UI on Hand-held Device

The user interface should be clear and fully usable when running on a 4.5" screen at a distance of 12-18" from the eye and operated by the hands alone. Applications should consider:

• That the application layout looks correct at 800x480, 800x600, and 1024x600 resolutions. Applications should not be resolution-dependent
• That dialogs fit in the same screen dimensions (more on dialogs below)
• That the application works well when viewed in full-screen mode and operates cleanly when toggled back and forth repeatedly
• The need to minimize the requirement for horizontal scroll bars
• When the software keyboard is activated the application may be reduced in size to accommodate the soft keyboard. Some work may be needed to ensure that the edit field retains focus and is still visible after resizing.

Readability and Text Appearance

The user interface must be designed to work well on a small 4.5" screen. Choices regarding use of text are important to readability. Well-behaved applications use the system defaults for the majority of their font selection, thus allowing users to control the size and other characteristics of the font. If applications choose to render text with custom characteristics, it is important to pay close attention to font size, font type, leading, and contrast.

Finger First, then Stylus, then Keyboard

The MID UI should be fully navigable by providing input using the touchscreen. However, one of the objectives of the MID UI is the emphasis on using the finger instead of the stylus for most common tasks. A general rule-of-thumb is for touchable controls to be 1cm2 or larger (70x70 pixels at 800x480). Touch areas should be easily accessible, and layout should be oriented toward finger use.

Stylus

In some cases, a stylus may be necessary. Applications which are not 100% finger driven can still be considered MID-compliant. Using the stylus requires the user to remove it from the device, and then hold or replace when not being used. This slows the user, and should be considered in designing the interface.

Text entry

Applications should reduce the amount of text entry required. If it is possible to accomplish a task using finger tapping instead of text entry, this should be investigated. Text input is the nemesis of small mobile devices.

Right-click

Right-click is supported by touch-and-hold. It is awkward, slow, not obvious, and should be avoided if there are other ways to do the same thing.

Simplified UI

The overall use of the system should be simple. This starts at the Mobile Desktop UI which should be designed for quick access to a few key applications targeted at a certain type of experience. The system should support adding additional software and have no limit on the number of applications that can be added. However, the intent is not for it to be a standard desktop system with hundreds of applications, but to provide a core set of well-integrated applications that focus on mobile "on the go" tasks such as browsing the web, viewing media, and communication (chat/messenger).

Application design should consider how to implement the most important features in a very simple, finger-navigable way. More advanced features can still be available, but typical use should be quickly understood.

Matchbox Window Manager

Matchbox Window Manager³ or an equivalent is used to provide simple, stack-based window management where each application runs full-screen. Modal dialogs can be displayed on top of the application window, but top-level windows cannot be shown side-by-side. New windows fill the screen and completely obscure the parent window. A marquee or task navigator panel is displayed above or to the side of the application window for navigation and system status indicators.

Menus and Toolbars

Menus and toolbars should be reduced to the minimum number of items that accomplish the most common tasks. Other items should be placed in sub-menus, advanced options dialogs, or removed. The menu is a drop-down list (not displayed horizontally). No menu should have one item (such as File -> Quit). Instead, place that action at the top level. The recommended organization of the menu is below. Bold items are strongly recommended.


Dialogs

All dialogs must fit within the 800x480 dimensions. Controls should be large enough to navigate using the finger. Dialogs should not require scrolling, but should put advanced features in sub-dialogs if necessary.

Limited Resources

MID processors will not have the same performance or resources as a standard modern PC. Applications should avoid using large amounts of memory, opening many files, or doing extensive processing whenever possible.

Power Savings

Intel's new generation of mobile processors (code names Menlow, Moorestown, and beyond) are designed for low power to markedly extend battery life. One of the primary ways this is achieved is by dynamically switching the CPU to a low power state when it is not being used. Applications must ensure that when idle, they do not cause CPU interrupts. This is different than low CPU utilization. The CPU can show 0% utilization but still be receiving interrupts from an application. For more information on this, see: http://www.lesswatts.org/projects/applications-power-management/

Orientation

MID supports rotating the screen to the left 90 degrees. This mode is accessible from a UI or hardware control. Applications must work well when toggled to portrait mode (landscape mode is the default). Applications should subscribe for notifications when the system switches to portrait mode.


Hardware interaction is device dependent.


MID system navigation and user interaction is done through the user interface with a finger (preferred), stylus, soft keyboard, hard keyboard (if present), or buttons/controls on the device.

Touch screen

• Single Tap: Most common action that clicks buttons and highlights list items.
• Highlight and activate: Double-touch where the first touch highlights an item in a list, and the second touch selects/loads/starts it. This helps reduce confusion when navigating a list, such as picking a song to play from a list.
• Finger down and hold: Right-click equivalent. The touch screen and hold displays the context menu.
• Drag and drop: Touch screen and slide across the screen to move an object (or reorder an item in a list).
• Panning: Touch the screen and drag to move contents of view. This is used in the browser and within documents to move the contents of the window around with the finger.
• Gestures: Sliding finger across the screen in a predefined pattern as a shortcut to start an action. Most common use is for scrolling.
• Touch, move, up: Navigate through menus by touching the menu to display it, then sliding the finger to the desired item, and lifting the finger to select ithe item. To prevent any menu item from being selected, the finger is dragged outside the menu area and the action is canceled.

Soft Keyboard

The user interface will have a touchable software keyboard built into the user interface. The user can configure some aspects of the keyboard. The keyboard can be used by a finger or a stylus. When the soft keyboard is displayed on the screen, the application is obscured or resized.

Hard Keyboard

The hardware keyboard may be part of MIDs, and could be in a number of form factors including sliding, expanding, detachable, or projection. Applications may not be able to detect the presence of a hardware keyboard.


MID Desktop UI

The MID Desktop UI represents the whole graphical environment in which applications run. It defines the overall layout of components which dictates navigation of the system and user experience. It contains the following primary components:

• "Home Screen": The primary screen displayed when the system starts, and the place from which applications are launched.
• Navigation buttons, toolbars, or controls: All the features that allow the user to start applications and navigate around the system.
• Status bar: Location that contains the status icons for battery/power, network connectivity, volume, and other services.
• Configuration tools: All the configuration applications needed to configure system settings, including network, power, and supported user preferences.

The exact design and layout of the MID Desktop UI components listed above will vary by operating system vendor(OSV), and possibly further by manufacturers shipping devices. Applications built upon the MID Standard Base with user interfaces designed according to the recommendations should work elegantly within any MID Desktop UI.

Currently there are two known MID Desktop UI implementation efforts. Red Flag has created one as part of MIDINUX* and another reference UI implementation is being created that may be used by any OSV. The Ubuntu* community is currently defining their MID Desktop UI for the upcoming Ubuntu-mobile release.

Home Screen Examples

The following pictures show what the Home Screens of MID Desktop UIs may look like. These are not intended to represent final screenshots, but are included to set expectations regarding simplified user experience and finger-touch navigation.


Figure 6-1: Reference UI Home Screen.


Figure 6-2: Red Flag Home Screen.

Application Launch / Activation

The Home Screen is the first screen shown when the system boots, and has indicators (such as the large icons in the illustration above) for the user to start applications. When an application icon is clicked, the application launches and fills the application area which is below the marquee described in the next section.

The user can access the home screen at any time by using the Task Switching controls to navigate back to the home screen, or by clicking a dedicated hardware "Home Screen" button.

Application UI Layout

There will be a lot of variety in the different MID Desktop UIs. All of them, however, if built using the Hildon application framework, will have an application layout similar to the one shown below containing a panel at the top (marquee) and an application area.


Figure 6-3: Application UI Layout.

Marquee

A sample marquee from the Reference MID Desktop UI appears below:

Figure 6-4: A sample marquee from the Reference MID Desktop UI.

The marquee may contain multiple components, including buttons to navigate, and system status indicators. (A detailed description of the components in the reference marquee are in Appendix 1). The marquee can be hidden by toggling to full screen mode.

Application Menu

An application menu is visible on the marquee. The application menu has a label displaying the name of the current application. Here are sample application menus from the reference UI and Red Flag marquees:


Figure 6-5: Sample application menus from the reference UI and Red Flag marquees.

This menu is usually in the top-left corner, but may be elsewhere on the marquee. The contents of this menu are application specific and loaded by the application when it is launched. Each application porting effort should identify what the most important menu items are for the mobile environment to reduce the size of this menu as much as possible.

A user accesses the menu by touching the application menu title. The menu drops down and the user then selects the desired menu item.

Close/Minimize buttons

Other common, but not required, elements of the marquee are minimize and close buttons. These are usually in the top-right corner, and will close or hide the current application.

Application Area

In normal mode, the application area is all the screen real estate below the marquee. In full-screen mode, the marquee is hidden, and the application window fills the whole screen.

Toolbar

Within the application area are the application toolbars. These should contain the minimum features possible to allow the user to accomplish the most common tasks in the easiest way. The toolbar should be designed for finger touch navigation. When using the Hildon framework, toolbars are placed at the bottom of the screen.

Scrolling / Panning

MID applications should all use panning for scrolling (finger touch and drag). We strongly discourage use of the standard window scrollbar; instead use the "moko" scrolling component (available for C and Python) to enable panning for lists.

Application Navigation

Navigation within an application is application-specific and is not discussed in this guide. Navigation to other applications is determined by the MID Desktop UI, and is custom for each OSV. An application may automatically launch another application on the MID. For example, if a user clicks an online radio link inside the browser, the media viewer application is launched with this URL. If a user includes a link to a URL in a chat application, the user can click this link and auto-launch the browser.

Hildon UI Style Recommendations

The Hildon User Interface Style Guide² contains recommendations for developing Hildon-based applications. Chapters 8-14 contain many concepts which apply to MID applications and are recommended reading. These chapters are:



The process of porting an existing application to MIDs is two-fold. One step is to get the application to build and run on the MID-embedded software stack. Details of accomplishing this task are provided on the Moblin.org website in the "SDK" section.

The other step is to modify the user interface and interaction to be consistent with this MID UI style guide (see section 3). Without the second step, an application can still launch and run on MIDs, but look out of place, be difficult to use, and not meet users' expectations.

1 Hildon application framework developed by Nokia. More information at www.maemo.org
2 Hildon UI Style Guide can be found at www.maemo.org
3 Matchbox Window Manager details at http://matchbox-project.org/
4 MIDINUX is the name of Red Flag's Linux distribution targeted for Mobile Internet Devices