Introduction

Glossary

Dialog	A dialog is an element used to present information to the user or ask the user for information in a separate window. Thereby the information is highlighted against the other parts of the system.
Modal dialog	A modal dialog is an element used to present information to the user or ask the user for information in a separate window. Unlike a regular dialog, a modal dialog forces the acting user to interact with the system (e.g., confirm a message, fill in data, ..) before the user can return to the system main window.
Wizard	A wizard is an assistance system used to guide a user through a workflow consisting of multiple tasks. Therefore, a wizard usually consists of multiple dialogs in an ordered sequence. In contrast to simple dialogs, wizards often provide special functionality on top, e.g.: Navigation from one step to another, forward and/or backward Maybe temporary storage of entered data Request confirmation of the user before a window will be closed ("Do you really want to close that window, your entered data ...")
Light box	A light box is a technical artifact that can display web content to realize dialogs in the Intershop Commerce Management application.

References

ISML Javascript Control - ISLightBox

Dialog

Usage

Dialogs should be used for one action on one or more objects.
As dialogs are modal, no other option can be performed when the dialog is open. The user has no access to data laying behind the dialog (except of viewing).
A dialog can be used for:
- Selection
- Confirmation
- Atomic actions, e.g.:
  - Add a widget to a dashboard
  - Delete a promotion
  - Assign a product to a category
A dialog should not be used for:
- Wizards (multi-step actions or processes)
- Complex actions consisting of several tabs

In some cases where you would use a wizard, it is alternatively possible to use a dialog and offer the contents using expandable sections (accordion effect).

Long running processes should not run in a dialog, but they can be configured and triggered there.

Attributes

From a business perspective a dialog has at least the following attributes:

Attribute	Description	Sample
title	title of the dialog (regularly: action on object)	Assign Product Add Dashboard Delete Promotion
content	all elements used in the back office can be included as content in dialog

From a technical perspective there exist some more (e.g., z-index, modal), but these are not in focus of this list.

Behavior

From a business perspective a dialog has the following methods:

Method	Description	Comment
close	The dialog always can be closed via [ESC] key [x] icon in upper right corner [Cancel] button
move	The dialog optionally can be moved via Dragging the title bar Moving the dialog Drop the dialog
scroll	The dialog usually has no scroll bars (neither horizontal nor vertical). The dialog optionally can have scroll bars (horizontal and/or vertical).	Mostly it is not recommended to fill up the dialog with masses of data, it would be hard for the user to recognize the relevant information. Therefore, a dialog that has scroll bars directly after opening must be checked regarding user experience. There are some exceptional cases possible: Widget library - in this case (select one or more widgets out of a library) scroll bars can be used - because of the size of the library (containing thumbnails of widgets in upcoming versions)

Method

Description

Comment

The dialog always can be closed via

[ESC] key
[x] icon in upper right corner
[Cancel] button

move

The dialog optionally can be moved via

Dragging the title bar
Moving the dialog
Drop the dialog

scroll

The dialog usually has no scroll bars (neither horizontal nor vertical).

The dialog optionally can have scroll bars (horizontal and/or vertical).

Mostly it is not recommended to fill up the dialog with masses of data, it would be hard for the user to recognize the relevant information.

Therefore, a dialog that has scroll bars directly after opening must be checked regarding user experience.

There are some exceptional cases possible:

Widget library - in this case (select one or more widgets out of a library) scroll bars can be used - because of the size of the library (containing thumbnails of widgets in upcoming versions)

From a technical perspective there exist some more, but these are not in focus of this list.

Buttons

There are two types of buttons that a dialog generally offers:

OK
- Dialog is closed after clicking the button
- Possible usages:
  - Either selection of data and adding them to the form below (without storing the information) - APPLY is necessary to store the data
  - Or: Storing of data - no APPLY is necessary
CANCEL
- Dialog is closed after clicking the button
- Entered data is discarded
More buttons and their custom actions can be defined

Model

The following figure illustrates the attributes and behavior. This is no confirmed interaction design or visual design, but just a model.

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Table of Contents