8 UI CONTROL GUIDELINES

This section describes some guidelines concerning when and how to use some of the UIQ controls.

Each control in the system is suitable for different things. Controls have captions that are placed above the control. Normally controls are left justified. However, mirroring of control layout, for the purpose of localization, is supported. Most controls make use of the full width are left justified and placed below the caption. The Labeled check box and the Labeled color selector control do not make use of a caption. The description text is added directly in the control. The effect is that the Labeled check box and the Labeled color selector control are left justified and placed on the same row as the text.

In a view, an inactive control is removed. In a dialog, the inactive control is dimmed. This is to prevent the dialog form changing its height depending on active/ inactive controls.

Controls that require input from the navigation keys are often impractical to use directly in views or dialogs. The navigation keys is used to navigate in the view/ dialog such as moving focus between controls or changing the active tab in a tabbed view/ dialog. To solve this, some of the controls make use of the Control stand-in and other controls have there own pop-ups to handle editable and non-editable states. The plain text editor is normally set to be resizable when it is used within the control stand-in.

If only one control is present in a non-tabbed view or dialog, there is no need for having the control in a Container Pop-out. The benefit is that the user does not have to activate the control before acting on it. No highlight is displayed when only one control is available.

In a view/ dialog with only two controls and where one control is less important, consider putting the less important control in the menu instead. The important control can then be displayed directly in the view/ dialog. For example, in a Find dialog the most important thing is to easily input the search string. Functionality like "Find where" is less frequently used and could be placed in the menu.

When a control is alone in a dialog it is preferable to not duplicate the title text in the caption.

Use the choice list control when one option is predefined and other controls are present in the dialog. This control is preferable over to the option button control when the number of choices can change. The choice list can also be used in a dialog when there is no predefined option and other controls are present. Avoid using the choice list control alone in a dialog. The choice list control requires several events to act upon and the benefit with having the control directly in the dialog is not great.

Use the option button control when a few options are available and one option is predefined. Avoid using the option button control together with other controls in a dialog. Use the option button control directly in the dialog instead where the user can select and close the dialog with one press.

The list box is frequently used in UIQ and also used in many different situations. The list box can display items in a vertical list or grid.

When the list box control is displayed directly in a view/ dialog it is impractical to move highlight to other controls and the list box control should therefore not be mixed with other controls.

The list box should, if possible, show an even number of rows. This is to prevent double row items, which are commonly used, being cut in half at the bottom of the screen.

Examples of different ways of using the list box control:

• Select and view

• Setting list

• Select and continue

• Select and return

UIQ provides a set of standard layouts. The combination of layout and data makes a list box item. An item can have a layout with columns and rows in any combination within the layout but it is recommended to use a standard layout.

Normal layout – The layout used for non-highlighted items.

Highlight layout (optional) – The layout used for a highlighted item.

Generally, the same Normal layout is used on all non-highlighted items in the list which makes the list look clear and simple.

The highlighted item can use a different layout, Highlight layout, which can contain different areas that can receive user input. This is used if the highlighted item is displayed differently than non-highlighted items. A Highlight layout is not used if the same layout is desired for both non-highlighted items and highlighted items. All items normally use the same Highlight layout for all items. It is important that the same number of rows is used for all highlighted items. This is to prevent the non-highlighted items in the list from changing position when the user moves the highlight.

Examples of commonly used list box layouts.

Content swapping is used for shifting data that is displayed in a defined set of slots in an item. The left and right navigation keys are used to shift data within the item. In Pen style it is also possible to tap on the arrows to shift data within the item.

If the highlighted layout uses content swapping but the currently highlighted item does not have any more data then what is displayed, the arrows are dimmed.

For each of the two content swapping arrows in the example below, the slot ID of the contact type (icon) and the contact contents (phone number) are defined.

The first item in a vertical list and the top left item in a grid normally have initial highlight by default. It is possible to display the initial highlight on other positions. For example, the initial highlight is displayed in the middle in the application launcher, which enables the user to fast access to several applications.

Up and down navigation keys are used to navigate within a list box that displays items in a vertical list, see section 4.3. As default, the list makes use of central scrolling, which means that the last/ first visible item is not highlighted until the list has reached the end/ beginning.

If the list has a highlight layout it can make use of the context swapping functionality. Left and right navigation keys are then used to navigate the arrows inside the highlight layout. Consequently, tabs can not be used together with the context swapping functionality.

When a highlight layout is used in a vertical list, the normal behavior is that the first pen tap moves the highlight to the tapped entry. Tapping on an already highlighted entry performs the action that the tapped area within the highlight layout has, for example opening the detail view of the entry. If a highlight layout is used in a list that displays entries in a grid, the normal behavior is to both move the highlight and perform the action it is intended for on the first pen tap.

The highlight remains on the same item when the list is scrolled by dragging the scrollbar (Pen style).

If the currently highlighted item is removed, the next item in the list will be highlighted. The highlight remains on the most recently highlighted item. For example, if a new item is created and then saved without any information, highlight remains on the previously highlighted item.

To be able to perform actions on multiple items in a list, for example deleting several items at once, a list box can display a check mark on the left of the item. If a grid layout with a large icon/ thumbnail is used, the checkbox should be displayed in front of the lower-left corner of the icon/ thumbnail.

Commands will only affect items that are marked. The highlighted item is not affected if it is not marked.

Marks are cleared as soon as a command has been successfully performed. They are even cleared when the user switches to another application using the Back option, selects the "Unmark all" option or selects another category. Marks in a list view are persisted if the user switches to another application from the list view via the application launcher. Marks in a list view are normally persisted if the user enters the detail view for an item and then returns to the list view.

When an item is dimmed, it shall not be possible to mark/unmark the dimmed item. The Mark and Unmark commands should not be available when a dimmed item is highlighted. Using the "Mark all" and "Unmark all" commands should not change the marking of a dimmed item.

The list box is a very flexible UI Control that can be used in various situations. Below are some typical examples of when and how to use a list box.

This type of list is used to display user data. It is possible to navigate to an item and view details for the highlighted item by pressing the Action key, see section 10.1 for commonly used labels. The item that was opened is highlighted in the list when the user returns. This implies that you view a single item at a time.

The highlighted item can also be acted on via a command. If the list makes use of multiple selections it is possible to select several items and then apply a command on all of the selected items.

An item can also be opened by tapping on it with the pen (Pen style).

A Select-and-view list is used in both views and dialogs. A Select-and-view list should normally make use of the CQik view dialog. When a Select-and-view list is used within a CEik dialog, the dialog should have maximum height. The list box will then share available height with, for example, a label.

An example of Select and view used in a view is the list view in the Contacts application. An example of Select and view used in a dialog is Internet accounts dialog.

This list category is used to display system options where the user can choose one or more options. A Settings list is only used in dialogs. The height of the list should normally be adjusted to the number of options available in the list, at most six rows. If more items are available the list grows, but not the height of the control space. A Settings list could make use of either the CQik view-dialog or the CEik dialog.

The Action key is named Done. Pressing the Action key will save the state for all selected options and close the dialog. Only selected options will be saved.

Mark/ Unmark are displayed on the Left softkey.

The Action key is named Done. Pressing the Action key will save the state for all selected options and close the dialog. Only selected options will be saved.

An example of Settings list is the Select category in the Contacts application edit view.

This list category is used to display system options where the user can select one option.

Use this list category when there is not any predefined option. The select-and-continue list category can handle both few and several options and is functional when the number of options can change from time to time.

The Action key has the label "Select". In Pen style the user can also tap on an item to make a selection.

Dialogs make use of this list category. The height of the list is adjusted to the number of options available in the list, at most 6 rows. If more items are available the list grows, but not the height of the control space. A Select-and-continue dialog could make use of the CQik dialog.

An example of Select and continue is the "Send as" dialog.

This list category is used to display user data. It is possible to navigate to and select one or several items at the time depending on if the list makes use of multiple select.

A Select-and-return list should make use of the view dialog which occupies the full screen.

An example of Select and return is the shared UI in the Contacts application.

Single select

In a Single-select dialog the label "Select" is displayed on the Action key. The dialog is closed and the highlighted item is returned to the calling application when the Action key is pressed.

Multiple select

There are four different behaviors for select dialogs in Pen style.

Tabs can hold text or icons to summarize the content of the tab page. Tabs are used to divide information when there is much information to display. The data does not have to be equally divided between the tabs. Keep in mind that data that is not displayed on the initial tab is more concealed. The most common use cases or the most important data should always be accessible on the initial tab. Less important use cases and data are placed on another tab.

If more tabs are placed on the screen than can be displayed at once, two navigation arrows are displayed allowing the user to scroll among available tabs. Scrollable tabs should be avoided, if possible, because of the lack of overview.

View tabs are used in Application Views and in View-dialogs.

To save space in views, icons are most commonly used. There are system-wide icons for the most common ways of breaking up information. Applications should use these icons if possible:

• Main information

• User notes

• Attachments

If there is no data on a page for a particular item in, for example a detail view, the tab is normally not removed. It should be shown and when selected, opened to an empty area.

When saving information in a view with tabs, all information in the view is saved.

In dialogs, text is most commonly used on tabs to be as descriptive as possible. However, it is important to choose a short text to avoid scrollable tabs as much as possible.

When saving information in a dialog with tabs, all information in the dialog is saved.

An Infoprint is a message that appears for about three seconds in the top-right corner of the UIQ screen (or optionally another corner). This gives the user plenty of time to read it, but the user does not have to tap any button to dismiss it. Infoprints are sometimes referred to in Symbian OS literature as info-messages.

Do use Infoprints:

• To confirm that something expected has happened when there is no other visual feedback. For example, an entry was copied to the clipboard.

• To report that something that was expected happened has not happened when there is no other visual feedback.

• To give instant error responses to something the user just did, for example, if the user pressed Save in a dialog without entering all the required information, or if some information is invalid.

Do not use Infoprints:

• To notify the user of something that is not really obvious, for example, an unexpected system error that the user should know about and then confirm. Use an information dialog for this.

• To say that something has happened if there is already some other obvious visual feedback on the screen, for example, when the user has just selected a menu command which launched a dialog.

General advice when using Infoprints:

• Make it obvious whether an Infoprint is conveying good news or bad news.

• An Infoprint can be displayed on several lines but it is a good rule to make Infoprints short. They are only displayed for three seconds and the user must have time to read the information. As a general rule, not more then 15 characters should be used.

• Avoid pleasantries: "Enter a number" is better than "Please enter a number".

• Use "Not available - <reason>" if a feature is not available because the application is busy doing something else, or "Not available at this time" if the reason is too wordy or complicated.

A busy message is a flashing message. It appears in the middle of the screen, aligned to the right-hand side of the screen. It informs the user that the application cannot process user input at the moment.

• Always give a reason. Use, for example, "Loading...", rather than "Please wait" or "Busy".

• An ellipsis, "...", at the end implies that the user has to wait, without saying so specifically.

• Use a progress dialog to indicate a long-running action, and supply a Cancel or Stop button so the user can interrupt the busy process if necessary.

• Scroll bars should only appear when scrolling in either direction is possible. They should be removed when not needed.

• The thumb control is proportional to the amount of the content that can fit on the screen, that is, it has a dynamic size.

• Dragging the thumb control, or pressing the arrow on the scroll bar scrolls text line by line.

• Tapping the line above or below the thumb control on the scroll bar scrolls the content page by page minus one row, that is, the last row of text on one page will appear on the very top of the next page to increase the readability.

Scroll bar