UI Elements

UI Elements

A dialog box is a window that pops up in response to user action to inform the user about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process.

A dialog box is a window that pops up in response to user action to inform the user about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process.

4.9.1 Types

There are mainly two types of it.

  • Modal

When a modal dialog is open one cannot interact with anything else than this modal dialog inside the program, as long as the modal dialog is open.

Modal type dialog
Fig 4.9.1a Modal type dialog.
  • Non-Modal

A modeless dialog box is just the reverse of modal. It allows the user complete control of the application which owns it and the user can continue his work without closing the dialog. There may be many dialogs opened at a time still user can do anything in the application without closing all these dialog boxes.

Non-Modal Dialog
Fig 4.9.1b Non-Modal type dialog.

4.9.2 Guideline

Below are the list of guidelines.

  • Each type of dialog box consists of sections: Message heading, Description of Message & Call to action.
  • Their sudden appearance forces users to stop their current task and refocus on the dialog content, so is the reason, use dialogs sparingly because they are interruptive in nature.
  • Dialog box can be appered to show the validation messages.
  • Dialog box design consideration will be same as panel.
  • In case of validation message in the Dialog box, border & icon color will turn into respective color of type of Validation message as defined in Validation section.
  • Unlike modals, non-modals will have the same design guideline except the transparent overlay.
  • Modal dialog can be one at a time while there may be multiple non-dialog can occur at a time. In that case user can drag the dialog by selecting drag icon placed at the right corner of the non-modal dialog.
  • In major cases the dialog box come’s with an action to be performed and the call to actions will be flat buttons.
  • In non-modal in case of multiple dialog, by cliking anywhere on the dialog that dialog will come above all other layered dialog and will act as an active dialog.
  • Modal & non-modal both dialog will have shadow with 60% opacity of color Black(#000000)  .
Parameter of Dialog Popup
Fig 4.9.2 Parameter of Dialog Popup

4.9.3 Behaviour

For any type of dialog, its behaviour will be intact across the application.

  • Modal
  • It will have behaviour as listed below and shown in the Fig 4.9.1a

  • When the modal dialog box appears – the current screen goes transparent (50%) with Black(#000000)   color overlay and the dialog box will have a shadow effect. It will always open in the center of the screen.
  • By clicking on any place outside the dialog or clicking the close button will close the dialog box. Or it will disappear once the action performed if the dialog is associated with any actions.
  • Non-Modal
  • It will have behaviour as listed below and shown in the Fig 4.9.1b.

  • Multiple non-dialog can occur at a time. In that case user can drag the dialog by selecting drag icon placed at the right corner of the non-modal dialog.
  • User can minimize by clicking the minimize icon placed at the right corner of the non-modal dialog. When its minimized it will appear at the bottom of the screen. In a minimizes state, its design specifications will change. Background will be either DarkGray(#5c5c5c)   or if validation dialog it will have background in respective color. Icon and font color will be White(#ffffff)   and font size of the message title will be 12PX with styled normal.
  • Clicking anywhere on the minimized panel, it will open the dialog popup. User can close it by clicking the close icon placed at the right corner of the non-modal dialog.
  • In mobile device there will not be any non-modal dialog popup. There will only be a modal dialog.

4.9.4 Usage

Listed below are usages of Dialog popup.

  • When its required to block the application flow until information required to continue is entered, as for example a password in a login process. Modal dialog is used.
  • Warning/message that the effects of the current action are not reversible, in such case modal dialog can be used.
  • Any message/warning/alert for which it doesn’t require to block the application flow, non-modal dialog can be used.