Day 44 - User Interface - 10 Modal Window Best Practices

A modal window is a pop up window that displays content while temporarily blocking the main page behind it.  The modal window requires users to interact with it before it can be dismissed. Modal windows prompt users to take action and provide fast, focused, contextual interaction.

Logging in to a website is one example where you could have a modal interaction. From any page you could sign in, complete the form, then get back to your task.

1. Make sure that modal windows are accessible to users with disabilities.
2. Can be used to draw attention to vital pieces of information and calls to action.
3. Can be used to block the application flow until the user enters the required information to continue.
4. The can serve as a notice or warning that the effects of the current action are not reversible, e.g. "..the files will be permanently deleted".
5. Include a clear visible title on the modal window that matches the button text on the main application window they clicked.
6. Offer a high contrast close button in the top corner.
7. On desktop computers allow users to cancel the modal window with the esc (escape) key.
8. Avoid scrolling in modal windows.
9. Don't make the modal too wide or tall so that it's partially obstructed to the viewer.
10. Modal windows can be effective but can also frustrate users when done wrong or over used.