vSphere Client Design Guidelines

Modals

You can implement a UI action that displays a modal in response to user input.

 

 

Guidelines

  • Follow the Clarity guidelines for designing your modal.
    Note the placement of buttons on the right.

  • Place all content required to complete the task into the modal.
    Don't force users to look at information through the modal backdrop or drag the modal to see what's behind it.

  • Choose a size that best fits the content.
    Users should not need to resize the modal. See the Clarity guidelines for recommended sizes.

  • Use action-specific labels for buttons.
    Although OK and Cancel were once a standard convention, a better approach is to explain what the button does.

  • In most cases, block the entire vSphere Client, and not just the main workspace.
    This forces users to interact with the modal before they can continue.

  • Smaller modals, such as a confirmation modal, can be local to the workspace.
    Keep the interaction minimal and make sure that the modal fits in the workspace. Otherwise, the modal will be clipped. If users navigate elsewhere, they will lose any data they entered in the modal.

  • If the modal represents an action on an object, include the object name to the right of the title.
    Here is the rename modal for Plug-in Object.