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