List

Summary:

List is a combinations of text, thumbnails and controls.
Controls can be:
- Check box, or
- radio button.
A list item can have multiple rows and multiple columns.
Automatically becomes scrollable if it contains more list items that can be fitted to the view.
Lists can be build from various Form components (for example, RadioButton, CheckBox, or TextArea).

LWUIT

Related design guidelines

Basics

Figure: Explicit choice list with "add" as primary action

Figure: Fancy list (custom solution)

Lists are used for:
- Presenting content items in list views.
- Enabling drill down navigation.
- Invoking actions, for example opening another app.
Standard list item layouts:
- One or multiple rows.
- Optional icon.
- Optional thumbnails.
- Optional controls..
Lists may be divided into sections with group headings; use group headings to index larger data sets (for example, different news categories on a "news" main page).
List item elements:
- Primary text:
  - First line of the item.
  - Shows the most primary and important content of the item.
- Subtext:
  - Additional information of the item , e.g. duration or price.
  - Discription of the primary text.
  - Timestamp.
  - Shows duration, price, or size for the item.
- Thumbnail:
  - Left aligned, for left-to-right languages.
  - Can also include informative icon instead of thumbnail image.
  - Can show a spinner.
- Progress bar:
  - Shown under the text .
  - Requires a "Cancel" button to dismiss the process.
Interaction:
- Full touch and touch and type:
  - With touch down, a highlight is shown to the list item.
  - With touch release, the highlight disappears and the action is triggered.
  - With check boxes, when the user taps on the box, it changes its state to On/Off.
  - With radio buttons, tapping the indicator selects the item and unselects the previous selection.
- Non-touch:
  - Requires:
    - Focus, and
    - "Select" in MSK for implicit choice and exclusive choice, or
    - "Mark" / "Unmark" in MSK for multiple choice.
  - "Select all", "Deselect all" recommended as items in Options menu for long lists.
Structure:
- List.
- Form can be used to build a list; for example:
  - Exclusive list with confirmation.
  - Multiselection list.
  - Wrapped list.

Formats

Simple list (implicit choice), single line, truncated, wrapped

Figure: List with single line items

Figure: List with truncated single line items

Figure: List with wrapped single line items

Single line:
- Each item text fits into one item line:
  - No wrapping.
  - No truncation.
Truncated:
- One or multiple items are too long for a single line.
- Text is truncated and truncation is indicated by "...".
- Requires drill down view which shows the entire text.
Wrapped:
- Used if no drill down view is available.
- Item must fit into the screen:
  - Since scrolling in non-touch always moves to top of the next item,
  - not possible to scroll the current item partially downwards,
  - there is no way to scroll within an item.
- Created with a Form.

List with controls; radion button, check box

Figure: List with radio buttons

Figure: List with check boxes

Radio button (group):
- Selects always exactly one item.
- View should include confirmation command if people have to scroll the list.
- Requires Button group.
- Created with a Form.
- More information about radio buttons from here.
Check box (list):
- View must include a confirmation command.
- Created with a Form.
- More information about check boxes from here.

Custom solutions: fancy list; list with icon, list with 2 line items and list with 2 line items and icon

Figure: Fancy list with icon (custom solution)

Figure: Fancy list with 2 line items (custom solution)

Figure: Fancy list with 2 line items and icon

List with icon:
- Icon is left aligned.
- Icon can be an image thumbnail or glyph.
List with 2 line items:
- Both lines share the same font and same font color.
- 1^st line 18-20 pt.
- 2^nd line (and following lines of the item) 14-16 pt.
List with 2 line items and icon.

Custom solution: List with download indicator

Figure: List with download indicator

Download indicator is progress bar or spinner.
Use determinate progress indicator, if possible.
Progress bar is shown under the item.
Spinner is:
- Right aligned in case it should not interfere with an already downloaded thumbnail.
- Left aligned in case it indicates that it currently downloads the thumbnail (spinner is replacing the thumbnail).
Must contain a button to terminate the ongoing process:
- Textual button recommended.
- "Cancel"; stop and delete everything done so far.
- "Quit"; stop and keep everything done so far.

Platform specific features

Full touch	Touch and type	Non-touch	Descriptions
Figure: View in full touch	Figure: View in touch and type	Figure: View in non-touch	Full touch: Ensure that "confirm" is shown as icon in action button 1 (where applicable). Touch and type: Less items visible than in full touch and partially than in non-touch. Non-touch: MSK: Select (implicit choice, exclusive choice), or Mark/Unmark (select multiple).