Action Dialog Design Principles

 _
USER INTERFACE PRINCIPLES
-------------------------

* Action dialog - single mode

This text describes a single action in a dialog. It is not surrounded
by other actions: the dialog is used for a single purpose.

** Title bar
   The title of the current step should display in the dialog title.

   When a process consists of a significant amount of steps, and the
   number of steps is known (more or less), an indication of the
   number of steps is shown in the title, like this:
   "Action title - (1/5)"  (where the - is an emdash).

** Instruction text

   The first element of an action dialog is a paragraph of text, in
   bold. This text should function as a brief instruction for the
   current step.

   This text should be a single paragraph and be at most 3 lines of
   text.

** Notification area

   Below the instruction text is an (initially invisible) area for
   notifications. There are three kinds of notifications: warning, error and
   notice. All notices which occur within the current action are displayed
   in this area.  If there are more than one, they are displayed
   simultaneously, one at a time.

** Main area

   In the main area of the dialog should go a form. It can contain other
   elements, but these elements cannot be interactive: all interactivity in
   an action dialog has to go through a form and the buttons area.

   See the section "Forms" below for a description of how forms should function.

** Button area

   Below the form elements (if any) go the buttons.

   The most "default" button is always the most left. It is also the
   default action for the form (e.g. pressing 'enter' should activate
   the leftmost button). It is preferably called "OK". If clicking the
   button causes the actiondialog to close, it may show "Close" or
   "Finish". 

   Less commonly used buttons come after this "ok" button. For
   instance there might be a "Skip" button (dutch: "Overslaan").

   The last button (rightmost) is the "Cancel" button. (dutch: "Annuleer")

** Explanation area

   Below the button there may be

** Dynamic height of the action dialog.

   Basically we distinguish two different areas in the action
   dialog. The "action area" and the "explanation area".

   The explanation area is the optional grey area at the bottom of the
   dialog, which can provide more information on the current step.
   The action area is everything above it: all the "white" in the
   dialog.

   There is one simple rule regarding the sizing of the dialog: the
   action area may never *shrink* in height. (the explanation area,
   however, may).

* Forms

** Form elements

   Elements are input fields that can be seen as a logical unit, in terms of
   data.

   Every element may have a label, which is a small text describing the type
   of input that is expected.

   To save space, in text fields, the label can be included as the initial
   value of the element. In this case, the label should be of a ligher gray,
   and should disappear as soon as the element gets the input focus.

   Regular labels are displayed directly above the input element. In HTML,
   they should be linked to the corresponding input element using a <label> _
   tag.

   When the element contains an error, the label should be colored red.
   When the element is required (e.g. cannot be left empty), The label
   should have an asterisk appended to it.

*** Text-like fields

*** Groups of checkboxes

    Large groups of checkboxes should be divided over multiple columns. The
    number of columns is depending on the content.

*** File uploads

    A simple "browse" element (<input type="file">). The "onchange" event
    will upload the image directly, displaying a progress bar in place of
    the "browse" element.

    When the upload is done, the element will emit an event which indicates
    this. The event data should include a URL where a preview image ("icon")
    of the file can be found.

*** Date pickers

    A date field consists of three input fields plus a jQuery UI datepicker
    widget.

*** Auto-completion lookups

    Some elements are used to link to different things in the site.

    An autocompleting widget helps finding already existing things on the
    site, gathering them in a list.

    The autocomplete may present a list of default options to choose from,
    e.g. a set or listpublish of default items, to help the user select an
    interesting thing.

    When a thing was not found, e.g. the user typed a string which was
    yielded no lookup results, it may be possible that a "create new" button
    is shown in the place where the autocomplete dropdown ususally appears.

*** Choosing between different parts of the form

    Some parts of the form are mutually exclusive.