2

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?

  • I'm not sure your original assumption is correct. As a general rule, I avoid using modals for touch interfaces, since they often don't respond as expected and are more difficult to close. – Ashley Richards Oct 1 '15 at 15:40
  • As someone who just clicks outside the modal to close it, I like it being perfectly centered as I never have to move my mouse far to close it. – thunderblaster Oct 1 '15 at 15:50
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.

0

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.

mockup

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.

mockup

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.