Modal
UX Design
What is a Modal
A Modal (also known as modal window or dialog box) is a secondary window that appears on top of the main interface, temporarily interrupting the user's workflow. It creates a mode that disables the main window but keeps it visible, with the modal window as the active element.
When to use Modals
Implement modals when you need to:
- Focus Attention: Capture user focus for important decisions or actions
- Collect Information: Gather specific input without leaving the current context
- Display Critical Information: Show important notifications or confirmations
How to design effective Modals
Create user-friendly modals by providing clear exit options, maintaining appropriate sizing, ensuring keyboard accessibility, and implementing proper focus management. Include visual hierarchy that guides users through the intended action.
Best Practices for Modals
Design modals with purpose and restraint. Avoid using them for content that could be part of the main interface, ensure they're responsive, and maintain context with the underlying page. Always provide clear feedback and escape mechanisms.
Find your next job!
Avoid modals for complex workflows, lengthy content, critical error messages, or when users need to reference other content while completing a task.
On mobile, ensure modals are fully responsive, consider using full-screen modals for complex content, and make touch targets appropriately sized. Always test dismissal behaviors on touch devices.
Include proper ARIA labels, manage keyboard focus, ensure escape key dismissal, maintain proper contrast, and handle screen reader announcements. The modal should trap focus until dismissed.
UX Design Terms
See more UX Design terms
Parametric Searching
What is Parametric Searching Parametric Searching is a refine...
Inclusive Design
What is Inclusive Design Inclusive Design is a methodology th...
Call-To-Action
What is a Call-To-Action A Call-To-Action (CTA) is a design e...
Low Fidelity Design
What is Low Fidelity Design Low Fidelity Design (Lo-Fi) refer...
Closed Questions
What are Closed Questions Closed Questions are questions that...
Qualitative Insights
What are Qualitative Insights Qualitative Insights are descri...