Checklist
Modals
1. Where do we need to use any dialog prompts?
2. Can we prevent critical errors with inline validation rather than a modal?
3. When do we need to warn the user or prevent critical errors (modal)?
4. When do we absolutely need user input to continue (modal)?
5. When do we want to support or inform the user (overlays, pop-overs)?
6. When are we legally obliged to ask for consent (cookie prompts, age verification) (overlays, pop-over)?
7. When do we want to advertise to the user (ads, surveys, etc.) (no modal, inline box)?
8. When do we absolutely need to interrupt the user (modal)?
27. Do we avoid modals that try to keep users from leaving the page?
28. When do we want to dim the background (modal, lightbox)?
29. When can the main content coexist with the dialog (overlay)?
30. On opening, is a modal always in sight and does it fit the screen (desktop/mobile)?
31. How much space do the modals take up on mobile/desktop (<75% / <30%)?
32. On mobile, do we show lengthier modals as full-page overlays or large pop-overs?
33. Do we avoid scrollbars or scrollable areas within the modal (if not, is a separate page a better option)?
34. On opening, is it visually clear that a modal is separate from the rest of the UI?
35. On opening, does a modal receive keyboard focus?
36. Is tabbing through links and controls in the modal window possible?
37. Do we have a focus-trapping mechanism built in?
38. Does the title of the modal match the call to action on the button that triggers it?
39. Can we use an icon and color to indicate the nature and purpose of the modal?
40. How do we arrange the buttons: [primary] (secondary), or the other way around?
41. Do we have actionable labels on buttons?
42. Is it always possible to dismiss a modal, or are some modals blocking?
43. Do we have a high-contrast 'Close' button in the top-right corner?
44. Do we want to add an additional 'Dismiss' link at the bottom of the modal?
45. Can users escape every modal with the Esc key?
46. Can users escape every modal with 'Close' or 'Dismiss' links?
47. Can users escape every modal by clicking outside of the modal?
48. Do we confirm the user's intent to leave the modal if they've already entered data in it?
49. Do we provide an option to undo the action or restore the previous state quickly?
50. Do we avoid nested modals?
51. Do we avoid multiple modals appearing consecutively?
52. Do we avoid lengthy multistep modals (more than 5 steps)?
53. If we do use a multistep modal, do we provide navigation between the steps?
54. Do we group critical notifications in one prompt, rather than showing multiple ones consecutively?
55. What exactly happens if the user doesn't act on the modal but chooses to close it?
56. What happens if a modal is fully blocked by the browser or a browser extension?
57. Do we measure how many people act on the modal, and how many dismiss it immediately?
58. What would the experience be with alternatives: separate page, injected content, or accordions?