Tip: When to Use a Modal, When to Use a Page

A question that comes up often when I'm designing the architecture for an app is "should this be a modal or a page?"

There's a simple test that I use to make the decision:

1. Does (or will) the content being displayed need to be accessible as part of a URL redirect later (e.g., account pages)?
2. Is there a lot of content that will be difficult or overwhelming to display inside of a modal (especially when that modal is displayed on a small device screen)?
3. Is there a limited amount of interaction (e.g., not a lot of data refetching or state changes)?

In the event that the answer to #1 is "yes," without a doubt, use a page. Redirecting to a modal (only technically possible by rendering that modal in another page) is a nightmare and extremely error prone.

For #2, if the answer is "yes," be very cautious about using a modal. It's easy to be optimistic and favor form over function in these cases, but it more often-than-not ends up burning you.

For #3, while you can get away with a modal in these cases, the amount of engineering you have to do to make it bulletproof ends up not being worth it.

Another thing to consider is SEO needs. Typically, modals are reserved for apps but are useful on non-app websites for things like email marketing sign ups or setting cookie preferences. If, however, you're rendering something that should be picked up by a search engine crawler, the easiest route to take is to render it on a page.

When in doubt about any of the above: use a page. Pages are the bread-and-butter of the internet and while modals can look cool, if the content they're rendering doesn't fit well, they can be a real nightmare to manage.