Dialogs
Dialogs are modal windows that appear on top of the main interface to prompt users for information or confirmation before proceeding with an action. They are particularly useful for preventing errors in critical or irreversible operations.
Benefits and Use Cases
Prevents accidental actions. Dialogs can stop users from unintentionally performing irreversible or significant actions.
Example
In Cluster, use a confirmation dialog when a user attempts to delete an entire project, ensuring they understand the consequences.
Provides additional context. Dialogs can offer more information about an action before it's taken.
Example
When a user tries to leave a Cluster content editor with unsaved changes, show a dialog explaining the consequences and offering options to save or discard.
Captures user attention. Dialogs temporarily block interaction with the main interface, ensuring important messages are seen.
Example
Use a dialog in Cluster when inviting new team members, to confirm permissions and send a customized invitation message.
Simplifies complex decisions. Dialogs can break down complex choices into simpler, focused interactions.
Example
When applying bulk actions to multiple pieces of content in Cluster, use a dialog to confirm the action and allow users to refine their selection.
Psychological Principles Supported
Attention Focus. Dialogs direct user attention to a specific task or decision, reducing distractions.
Example
In Cluster's AI settings, use a dialog to focus user attention on important configuration choices that affect multiple features.
Error Prevention. By requiring confirmation for critical actions, dialogs support the principle of error prevention.
Example
In Cluster's content publishing workflow, use a dialog to provide a summary of the content to be published and any potential conflicts or issues.
Information Scent. Dialogs can provide additional information, improving the user's understanding of available actions and their consequences.
Example
In Cluster's content publishing workflow, use a dialog to provide a summary of the content to be published and any potential conflicts or issues.
Implementation Guidelines
DON'T
Overuse dialogs for minor or frequent actions
Present too many options or complex information in a single dialog
Use dialogs for actions that can be easily undone
Forget to provide a way to cancel or go back in every dialog
Rely on dialogs as a substitute for good overall interface design
DO
Use dialogs sparingly for important or irreversible actions
Keep dialog content concise and focused on a single task or decision
Provide clear, action-oriented button labels (e.g., "Delete Project" instead of "OK")
Ensure dialogs are keyboard accessible and can be dismissed easily
Consider using progressive disclosure within dialogs for complex decisions