Appendix
Common Components
MeeGo is designed for finger usage and is fully scalable for different screen sizes and resolutions. For example, if a common component has a 8mm height, it will have that same height, regardless of the screen physical size or resolution.
Sizes and final specification for each component will be presented in upcoming versions of this document.
| Component | Description |
 |
Push buttons Use a push button to start an action, for example to call a contact selecting a call button in a contact card. Add a descriptive text label for a push button, and align it to left, right, or center. |
 |
Switch Use switches for functions that the user can set on and off. Place a descriptive text label next to the switch button. A switch should never be used as a link. Switches only do one function within a list and if there are some actions needed for that switch, they should be displayed alongside the asset. |
 |
Check box A check box permits the user to make multiple selections from a number of options. A caption describing the meaning of the check box is shown adjacent to the check box. Inverting the state of a check box is done by tapping the box. |
 |
Icon button Icon button consists of an icon and, optionally, a text label. Unlike push buttons, the icon buttons do not have button-style edges, so they look like icons. An example of an icon button could be used in the toolbar or tab bar. |
 |
Slider bar Use a slider for continuous set of values. Define a descriptive title for the slider. Displaying thumb value (value box shown once user slides), minimum and maximum values is optional. |
 |
Seekbar Seekbar is a special type of slider used for displaying the playing status of a multimedia item. If you want to display gradual steps, define slider steps. Displaying minimum and maximum values is optional. |
 |
Progress bar - Known Data Use the progress bar to indicate actions, such as uploading and downloading, when there is enough space available and the duration of the process is known. You can also place the progress bar on top of other UI components. Use the progress indicator to show the user the current status of a process, when the process may take longer than two seconds. |
 |
Progress bar - Unknown Data When duration is not immediately known, the progress bar can be temporarily in the unknown duration state, until the duration becomes known. Do not indicate automated updates. Progress indicator has two variants, spinner and progress bar. Avoid using both variants in the same view. |
 |
Spinner Use spinner to indicate actions such as scanning or refreshing, when the available space is limited and the duration is unknown. It is also possible to use the spinner for known duration if the available space is very limited. You can also place the spinner on top of other UI components in the header row of a dialogue, container, or view menu. |
 |
Single Selection Dialog Use dialogues when you want an immediate response from the user. Dialogues block and dim the background of the view, giving focus to the dialogue. Unlike notifications, dialogues do not disappear from the UI without user interaction. Keep the dialogue text short and simple. |
 |
Query Dialog The difference between the single and the query dialogue is that the user can close the single and multiple selection dialogues without selecting an option, but not the query dialogue. Query dialogs should be used when deleting files, recovering from errors, and for operations that can be harmful to the user. If the dialogue has action buttons, include a button for canceling, as well. In order, from left to right, top to bottom, place the confirming action button as the first option and the canceling button as the last. |
 |
Multiple Action Dialogue Box An Extended Query Dialog should be used when the platform requires information along with displaying images or warning icons. The Dialog box requires some form of action before the user can continue. |
 |
List A list is a container of objects displayed vertically. The list is the most common UI component. When you have an undefined number of items to be shown on the UI, consider using a list. The number of items in a list can change while the list is being displayed. If there are more items than what fits the current view, the list automatically becomes pannable. A list occupies the full width of the area in which it is being displayed. Sometimes lists can support list dividers, which help break up the long list of content. These dividers can be used to help speed up the user experience when searching for something in a long list. |
 |
Object Menu An object menu is a list of related actions users can perform with objects. Although the object menu is scalable, do not include more than eight menu items to avoid panning. Note that when the user installs other applications that have plugins, new options may be added to the object menu. |
  |
Toolbar/Nav Bar Use the toolbar for actions that are relevant to the content in focus. In landscape mode, the toolbar remains in a fixed position on top of the UI and in portrait mode, it is on the bottom of the UI. Include the two to four most important commands in the toolbar. Negative actions always sit on the right side of the toolbar. |
 |
View Menu The view menu consists of a list of commands related to the current view (or application). The list has no limit and will scroll if items do not fit the screen. Overloading the View menu is discouraged. |
 |
Information Banner There are two variants of the Notification Banner, ‘Non-interactive’ and ‘Interactive’. Use non-interactive information banners to display feedback and notifications, if you cannot display the information on other parts of the foreground UI. Use interactive information banners, for notifications in error cases and exceptions, when you want the user to react to them. |
  |
ComboBoxes Open ComboBoxes consist of a sub-component button and Dialog assets. A ComboBox Dialog inherits attributes and interactions from the Single Selection Dialog. For example, if the height is greater than the screen, this becomes pannable and a position indicator is displayed. A closed Combobox can take the form of 3 different layouts. |
