Dialog

Interaction:

• Dialog opens in the foreground.

• Parental screen stays in the background, but is partially occluded by a layer with 60% opacity.

• Dialogs are typically dismissed by pressing a dedicated button, for example:

  • 'OK', when alert is purely informative.

  • 'Cancel', when there is an ongoing operation.

• Buttons can be used for short commands only (for example: Yes, No, Cancel, Back, etc.)

  • Use "Cancel" to stop the process and discard all changes made by the process.

  • Use "Quit" to stop the process but to keep all the changes made by the process.

• Title is recommended; if title is not defined, the title zone is shown but is empty.

• In case the text is dynamic, split it up into title and body; for example:

  • "Delete contact?" (title).

  • "Anna Smith" (body).

• Body text is limited and cannot be scrolled by default.

  • If long body text is necessary, open a new text view instead.

  • New view might require additional buttons like "OK" and "Cancel", icons might not be sufficient (i.e., Back arrow and checkmark in action button 1).

• Dialog sound is by default the phone alert sound, but can be changed to:

  • Alarm.

  • Confirmation.

  • Error.

  • Info.

  • Warning.

• Fully supported:

  • 0 buttons, timed dialog.

  • 1 button.

  • 2 buttons.

• Custom solutions:

  • 3 buttons.

  • Additional icon.

  • Determinate progress indicator (modified slider).

  • Indeterminate progress indicator (busy indicator, UI component itself requires a custom solution).

Structure:

• Dialog is a subclass of Form.

• Form is a subclass of Container.

The UI style is based on dialogs with up to 3 buttons.

In LWUIT, only up to 2 buttons directly supported.

If 0 buttons are used:

• Timed dialog.

• Pressing outside the dialog dismisses it in touch phones.

If 1 button is used (confirmation):

• This is the default dialog.

• Stays on the screen until user taps the button.

• Ensures that user has had time to read the text because:

  • Text is long, and /or

  • note appears after a delay during which the user's attention to screen is likely lost.

If 2 buttons are used (confirmation query):

• Buttons are placed :

  • On the same line (full touch).

  • In the softkey zone (touch and type and non touch).

• Left button has positive command.

• Right button has negative command.

3 button dialog (confirmation query):

• Requires additional button:

  • For positive command.

  • Centred on top of the existing buttons (full touch).

  • MSK in the soft key zone (touch and type and non-touch), Positive action.

• Bottom-right button must be Back/Quit/Cancel.

Icon in dialog:

• Top left aligned for full touch .

• Top right for touch and type and non-touch phones.

• Size:

  • 52 x 52 px bounding box.

  • 36 x 36 px canvas.

• UI component is for display only, no function assigned.

Progress indicator in dialog:

• Modified slider.

• Determinate progress indicator.

• Use whenever possible .

• One of the following needs to be known:

  • Process duration, or

  • work estimates (for example, file size), or

  • timeout.

Busy indicator in dialog:

• UI component not part of LWUIT, requires custom solution.

• Indeterminate progress indicator.

• Only suitable for processes which take less than 10 seconds.

• Visualisation can be:

  • A spinner in the icon position.

  • A barbershop roll in the progress indicator position.