Modal Window

Learn more about modal windows

What is a modal window?

In web and application design, a modal window is a user experience pattern that is often employed to interrupt a user’s activity, drawing their attention to something more important. Sometimes also known as a modal box, a modal dialog, or simply a modal, typically a modal window takes the form of a graphic element that appears in front of all other page content.

A modal window gets its name from the fact that triggering of the window is accompanied by a change in mode. When this happens, areas outside the modal window are deactivated until users either react to instructions that appear within the modal box itself, or close the window.

Modals are usually triggered when a user clicks on a specific element or takes a certain action. However, unlike many other methods of prompting users to respond to alerts, the advantage of a modal window is that the user does not lose their place on the page.

With that said, although the rest of the page remains visible when a modal box appears, typically the background becomes darker – indicating that other page areas have been deactivated. It’s a technique that draws further attention to the modal box, yet offers the advantage that users can still see what is behind the window. This helps to reassure users that they haven’t lost whatever it is they were working on before the modal window appeared.

The opposite of a modal window is a modeless one; in which case a window or box would appear without blocking the main window. While a modeless window will likely be much less invasive for users, it is unlikely to prove as effective as a modal window in attracting user attention.

When to use modal windows?

A modal window is a powerful way of alerting users about important information or prompting them to take a specific action. For example, modal windows are often used in responsive design for delivering warnings, confirmations, drawing the user’s attention to vital information that they may otherwise have overlooked, or for making them aware of any secondary effects their actions may have. Similarly, modals can be used when further information is required before a certain task can be completed - such as when prompting a user to enter their password or other login information.

Shortcomings and best practices

As useful as modal windows can be in grabbing the user’s undivided attention, they are not without their shortcomings. The most obvious of which being the unwelcome interruption of user experience.

Here, though, it’s important to consider what the alternative might be. If the same information or user prompt could be communicated in a less invasive manner, then invariably it would indeed be better to take this other course of action. However, if the only alternative to a modal window would involve the user carrying out an action that is against their own best interests – permanently deleting files, for example – then clearly a modal window would be entirely justified, irrespective of the interruption.

Meanwhile, some argue that due to over-use modal windows are now of only limited effectiveness in getting the user’s attention. To be sure, most users have become accustomed to dismissing annoying popups with little thought. To the degree that many people now automatically click “OK,” “close, or “cancel” without even reading any important information the modal may contain.

Again, the solution here is to not unnecessarily “cry wolf” by using modal windows too frequently - as this will only further desensitize the user to them. Instead try to only employ a modal window when the alternative would cause the user far greater inconvenience.

What’s more, once a modal is activated, it is important to ensure that users are able exit the modal quickly, so as not to disrupt their experience of using your website or app. For this reason most modals have a close button. But it is also good practice to have modals close when the user clicks anywhere outside of the window, as this helps users to feel less “trapped” by the app or page.

How to create a modal window in Framer

In Framer, creating a modal interaction is quick and easy thanks to the built-in Modal interaction. To set this up, all you need to do is design your modal and modal content, design your home frame, then take the element you want to use to trigger the modal, and connect this to the modal window.

Once this done, go to the interactions section of the properties panel and set the transition type to modal. Now that your transition is set, you can edit the animation of your transition and change the backdrop color. Your modal window is ready to go!