Modal windows

Some guidance on using modal windows:

  • Use Overlays very sparingly - for important actions only
  • Ask yourself: can the information in the overlay be shown within the page instead?
  • Overlays should open due to a users action - for instance selecting a button (timeout the only exception to the rule)
  • When an overlay comes up make sure the page behind is darkened. Not too dark you can’t see the page or too light that they think the page is still active
  • Users should be allowed to click or tap outside the overlay to close it (unless the user has to confirm they will wish to do something drastic like delete their account)
  • But also include a close option on top right (and maybe elsewhere in the overlay)
  • Don’t try to cram in too much. If you are, maybe an overlay isn’t the best solution
  • If something has multiple steps it should have a page of its own rather than be an overlay Make sure important information is included in the overlay - if you are asking the user to confirm they want to delete something, the things to be deleted should show in the overlay
  • Avoid overlays on mobile. If you have to use it make sure it has close options at both the top and bottom to avoid too much scroll
  • Make sure they are accessible - for instance screen readers need to be able to see them

Example