MODALZMODALZMODALZ.COM

We use too many damn modals.

Let's just not.

Help
The bad news

Modals are the crutch of the inarticulate designer and developer.

While there are genuine, good uses for them, many modals are…

  • disruptive, invasive, and confusing
  • used as an interaction junk drawer
  • used too often :)
  • hard to escape
  • poorly accessible
  • a frustrating user experience on small screens
  • blocking the user's interaction with the “parent window”
  • adding to cognitive load with non-essential content or interactions
  • easily replaced with other patterns that are less jarring
The good news

It doesn’t have to be a modal!

Have you considered using the following?

  • Non-modal dialogs

    Use them for non-critical interactions that don't block the user (like toasters).

  • Go inline

    Present your content inline to be less disruptive.

  • Expanding elements

    Use expanding elements such as accordions, toolbars, tooltips, or sliding sidebars (or other modeless elements).

  • New page

    Lead the user to a different page to isolate the interaction without losing access to functionality such as navigation.

  • Undo patterns

    Instead of for instance confirmation modals, consider using inline “Undo” option to speed up the user's interactions.

When all else fails

Getting modalz right

If you absolutely have to use one, make sure your modal is a good one!

  • Do:Easy to close

    Make it simple to get rid of ‐ by escape key, clicking outside the modal window, and a clearly labelled close button.

  • Do:Single purpose

    Limit the interaction to one, straightforward task.

  • Do:Keep it short

    Be brief and concise in your content

  • Do:Accessible accessible accessible

    This is fairly selfexplanatory — if you can't make it accessible, don't use a modal.

  • Don't:Modal inception

    Avoid opening a modal from a modal.

  • Don't:Fullscreen modals

    You might as well navigate to a new page then.

  • Don't:Multi-step modals

    Never create a multi-step modal. That way madness lies.

  • Don't:Self-spawning modals

    Never present modals unless prompted by the user.

  • Don't:Marketing modals

    Seriously, nobody wants that shit — especially not your newsletter.

And remember to always ask, kids:

“Why does this have
to be a modal?”