Progressive disclosure

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Progressive disclosure

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Progressive disclosure

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Profile

Link 9

Link 10

Modals

Modals are containers that appear on top of the main interface, dimming the background content. They are used to display important information, request user input, or confirm an action before proceeding. Modals grab the user's full attention by disabling interactions with the main interface until the modal is closed.

For Cluster, modals can be particularly useful for focused tasks like confirming important actions or displaying preview content without leaving the main view.

Benefits and Use Cases
  • Demands attention. Modals ensure that critical information or actions are noticed by the user and not overlooked.

Example

Use a modal in Cluster to confirm the deletion of a project or important content piece, ensuring the user doesn't accidentally perform an irreversible action.

  • Reduces errors. By requiring confirmation for potentially destructive actions, modals can prevent users from making unintended mistakes.

Example

When a user attempts to remove a team member from a Cluster project, use a modal to confirm the action and explain its consequences.

  • Editing information. Modals provide a focused space to edit information without losing the context of the original page.

Example

Use a modal in Cluster for quick edits to content metadata, allowing users to make changes without navigating away from their current view.

  • Displaying media. Modals can be used to show larger versions of images, videos, or other media without navigating away from the current page.

Example

When a user clicks on a thumbnail in Cluster's content library, use a modal to display a larger preview of the content along with key metadata.

Psychological Principles Supported
  • Filtering. Modals temporarily hide the main interface, helping users focus solely on the modal's content without distractions.

Example

When reviewing an AI-generated summary in Cluster, use a modal to display the summary, allowing users to focus entirely on the content without the distraction of the main interface.

  • Recall. By keeping modals concise and focused on a single task, users don't have to remember as much information at once.

Example

In Cluster's content tagging modal, display only the necessary fields for adding or editing tags, reducing the cognitive load on the user.

  • Efficiency. Modals allow users to complete self-contained tasks like editing data or confirming deletions without losing their place in the main interface.

Example

Use a modal in Cluster for quick content creation, allowing users to add new items efficiently without navigating to a separate page.

Implementation Guidelines

DON'T

Use modals for nonessential information that could be displayed inline

Include more than one main action or too many secondary actions

Make the modal so large that it takes up most of the viewport

Nest modals by opening a second one on top of the first

Use vague button labels like "OK" that don't clearly describe the action

Forget to test that keyboard users can navigate and close the modal

DO

Use modals sparingly for only the most important information or actions

Provide a clear way to close the modal, such as a visible close button

Ensure the modal is properly sized and centered on the screen

Darken the background content to keep attention on the modal

Use clear, action-oriented button labels like "Save" or "Delete"

Allow closing the modal by clicking outside of it or pressing Esc