Best Practices for Modals, Overlays, and Dialogs

Modals, Overlays, Dialogs – whatever you call them – it’s time to revisit this UI pattern.

When they first came on the scene, modal windows were an elegant solution to a UI problem. The first being that it simplifies the UI, the second, it saves screen real estate. Since then designers have readily adopted the modal window and some have taken it to the extreme. Modals have become the today’s version of the dreaded popup window. Users find modals annoying and have been trained to instinctively and automatically dismiss these windows.

Usage

You may consider using a modal window when you need to:

Grab the user’s attention

Use when you want to interrupt a user’s current task to catch the user’s full attention to something more important.

Need user input

Use when you want to get information from the user. Ex. sign up or login form.

Show additional information in context.

Use when you want to show additional information without losing the context of the parent page. Ex. showing larger images or videos.

Show additional information (not in context)

Use when you want to show information that is not directly related to the parent page or other options that are “independent” from other pages. Ex. notifications.

READ MORE @ UX PLANET