Home · All Classes · Annotated · Functions

Qtopia Style Guide: Application Design

• Application Styles
• Item-based Applications
• List of Lists
• List of Items
• Viewing a Single Item
• Editing a Single Item
• Deleting a Single Item
• Navigational Flow
• Form Layout
• Task-based applications

Application Styles

There are two basic styles of application:

• item-based - applications used to view and possibly edit a specific item type
• task-based - applications allowing a specific task to be performed such as view the time in the case of the Clock application.

Item-based Applications

The main window of an item-based application will present a list of items, or in some cases a list of sub-lists.

Note: The items may or may not be associated with files. The entries in an Address Book, or photos from a camera are equally considered as items.

Item-based applications follow a standard navigational flow:

• List of Lists (if required)
• List of Items
• View of a Single Item
• Edit Single Item
• Deleting a Single Item.

List of Lists

This is rarely needed. It is used when there are a number of lists that behave differently or have some incompatible properties. An example application is the Qtopia Messaging application. This application shows folders that have specific functions. The Outbox, Trash, Inbox etc, have specific properties that preclude grouping their items into one list.

The context menu must contain entries that act on all of the lists, and optionally a New entry.

Highlighting a list and pressing Select displays the List of Items. Pressing Back or Done must close the application.

List of Items

This is the screen most applications will display when started via the launcher. It lists the items that the application may view and/or edit. It is recommended that the menu contains a View Category... option to display only the items in the selected category.

The context menu should contain entries that act on all of the items, and optionally a New entry.

Highlighting an item and pressing Select should display a more detailed view of the highlighted item. Pressing Back or Done must return to the previous list of items or lists (if present), otherwise close the application.

When an item in the list is used to group or store information; selecting that list item should present the information about that item.

Viewing a Single Item

This screen displays a single item, and may allow navigation and activation of data within the view. The context menu must contain entries that act only on the viewed item. If the application can edit the item, it should contain an Edit menu entry. If the view contains elements that can be activated, then the Select key must activate the highlighted element. Pressing Back or Done must return to the list of items.

Editing a Single Item

This screen allows a single item to be modified. Edit screens must be able to be canceled via the Cancel option found in the context menu. When creating or editing an item, the first tab must be displayed with the first input widget focused.

The context menu must be limited to those entries that act on the item being edited. Phones that do not offer a No button may automatically have a Cancel entry added to the end of the menu.

Pressing Back or Done must accept the changes and return to the view. Pressing Cancel must discard the changes and return to the view.

Note: When a user selects the Done or Back option and nothing has been altered the button acts as the Cancel option otherwise the item will be stored.

Deleting a Single Item

An application that can create or edit an item needs to provide the ability to remove an item of the same type. Items are only able to be deleted when viewing details hence can only deleted one at a time.

Navigational Flow

In order to maintain a consistent navigational flow, the following rules must be adhered to:

• When moving forward (e.g. by pressing Select or selecting Edit from the menu), the displayed screen must be in its initial state. For example, in a list of items the top-most item must be highlighted.
• When moving back (e.g. by pressing Back or Done), the previously viewed screen must be displayed in the same state that it was in when left. For example, if item D was highlighted then viewed, pressing Back in the view must return to the list with item D still highlighted.
• The left and right buttons are used for moving between tabs in a tabbed dialog although in some cases they may be used to select widgets that are horizontally aligned.
• The up and down buttons are used for moving between fields in a dialog.
• To edit a field you first have to focus it using the up/down buttons then select it by pressing Select.
• The Select button is also used to move through tabs when the tab has focus.

Note: In case there is no tabbed dialog it is very tempting to give the left and right buttons the same functionality as up and down. We have explicitly chosen NOT to do so in order to keep the user interface as consistent as possible, i.e. maintaining one way of doing things.

Form Layout

An input form provides a simple and familiar way for the user to input data. The basic layout of an input form is a two-columned table:

• column 1: provides a label for the field found in the same row
• column 2: the input field.

The layout of an input form should remain consistent between all applications an it is recommended that the same input form be used when creating and editing an item.

Note: Ensure that input forms provide sufficient sizing for large and small font sizes.

Task-based applications

These applications allow a specific task to be performed. They do not operate on items, though they may generate items that are then accessed in other applications. Examples of task based applications are Clock and Calculator.