Modal Windows on Large Screen: Align dead center or from the top of the screen?

Question

We all know that we should use modal windows when there are steps the user needs to do before the task can be completed. Using a modal window instead of a full page allows users to maintain the context of their task.

On small screens (mobile) a modal windows should covers the entire screen. Presenting a potentially complex task that people can complete within the context of the modal view.

But on desktop, the width/height will fit the content. But should it be vertically align in the center of the screen or from the top of the screen (with a big margin)?

or the question could be:

Are we aligning modal windows in the middle because there's a reason or just because it feels right?

Answer 1

Basic pattern for desktop experience I've seen is as follows:

1. Slide from a side: usually used for contextual complex sub flows. User will have to take a series of actions within a sub flow and at the end return to a page they started from. Example: filtering options for a list, sequential configuration wizard, etc.
2. Centered: Used to display additional/alternate information (non complex flows w/o particular sequence). Example: gallery slider, teasers, enlarged images, etc.

However in most cases, many non-complex websites tend to use a single centered modal pattern as most common libraries like Shadowbox, Lightbox and others have implemented such standard awhile back.

Answer 2

Aside from aesthetic reason, vertically aligned modals are usually used when vertical scrolling of the page is disallowed, such as Facebook lightbox. A good implementation of vertically aligned modal window should resize proportionally to the device screen.

^{download bmml source – Wireframes created with Balsamiq Mockups}

A modal window that offsets from the top of the screen are commonly used when the content in the modal is likely to exceed the height of the device screen. Meaning you have to scroll vertically to see the rest of the content.

^{download bmml source}

Alternatively you could fixed the height of the modal window and introduce a vertical scrollbar in the window for long content. Although this is not commonly used.