Using contextual information

Too much information on a screen at any given time can overwhelm users. However, users may need additional information to understand how to complete an uncommon process, create contextual work, or identify a piece of functionality that has limited display space.

To meet these needs, Constellation often displays contextual information by using a family of components known as Overlays. Overlays include:

• Modal dialogs
• Confirm dialogs
• Popovers
• Toasts
• Tooltips

In addition to Overlays, there are other ways an application can display contextual information, such as through the Preview panel.

These components provide just-in-time, contextual information to end users as they work. However, each has a distinct purpose.

Users work in modal dialogs when creating or editing complex cases or work items. This keeps users focused on the task at hand.

Confirm dialogs are displayed when users take an action that will result in a significant change, such as loss of data. Confirm dialogs explain any consequences of the action and ask the user to confirm or cancel the action.

The Preview panel allows a user to quickly reference a case, or work item, and view its details within their current context. To open a case’s Preview panel, users can hover or focus on a link to the case and select “Preview”. The Preview will then open on the right side of the application. This is useful when a user needs to compare one work item against another.

Popovers are used to convey simple pieces of information, or let the user update a field or two of information on non-critical work (such as in a utility widget). For example, in the followers utility widget, adding a follower is done in a popover. This keeps users informed of their surroundings in the UI and provides a way for them to quickly review content or act.

Toasts are text pop-ups used to inform users of critical updates that occur offscreen. They explain the update or action that took place in the application, so the user is aware of the change.

Use tooltips on buttons when it is difficult to display text for each button due to limited space (such as on small screens). Constellation tooltips display the name of the action that the button will initiate, when users hover over the button or focus on it with their keyboard. This helps users understand the action they are about to take.