Use of modal windows within UI

Modal windows are windows that are shown on top of an application screen to convey information to, or collect information from, the user. These “popups” prevent the user from interacting with the application until the window is closed by the user. While this can have valuable purposes, it can also lead to end-user frustration. The key to using popups and overlays successfully is in knowing when and how they can assist in providing a satisfying user experience and when they are obstacles.

For starters, popups should never appear without being triggered by a user action. Overlays that appear suddenly without the user having done anything harms the workflow and can be an irritating experience. Any notices or warnings that might be used in this manner would be better served being included within the screen itself, with attention drawn to this information in some other less intrusive manner.

Additionally, when modal windows are used, it is good practice to use a dark shade beneath them. This darkens the screen and conveys to the user that the features beneath the popup are not accessible at the moment. For this reason, the option to close or cancel the popup should always be provided in a way that is obvious and immediate. There is sometimes nothing more frustrating to a user than having to search for the “close” button or icon in order to return to their tasks.

Keeping popups to a minimum will increase the likelihood of users actually paying attention to the information on them. Studies have shown that an overuse of popups and overlays can decrease the probability of users reading the information on them and instead just finding a way to close them quickly.

Lastly, popups and overlays are usually not needed on mobile devices. With the screen real estate being limited, popups will most likely take up the width of the screen to begin with. It is better to use the entire screen for the information or confirmation. Using popups in responsive design, however, can provide consistency in behavior over different platforms.

Posted in 2018