18

I am creating a modal window that will instruct a user to sign in a present a form to do so. I am debating between whether I should darken the screen behind the modal window as well, or if that effect will feel more like an "obstacle".

When is it good to darken the screen behind a modal window, and when is it bad?

NOTE ON ANSWERS:

For future readers, make sure you visit all the answers below - I have to select a single one, but there are many great answers down there. Don't stick to just the one I selected!

Improve this question
4
  • 1
    In the time that it took you to type this question, you would have had the time to implement a version with the darkened screen and one without, user test it and get an answer. We haven't seen your application, we have no clue what would be best. There's not a bible of UI design with rules as detailed as "you should darken your screen when presenting a modal window"- these are entirely dependent on the rest of your design.
    – Bitgarden
    Jun 22, 2011 at 22:50
  • 13
    It took me less than a minute to type the question - I wouldn't expect to get a quality user test with a definitive answer in less than a couple days. I came here to ask the opinions of others in the field. As far as my application, I'm a assuming that at least someone has a preference for when they prefer to use a darkened background or not - regardless of the application using it. It's too common of a practice for general rules for application to not have developed at least slightly.
    – johnnietheblack
    Jun 22, 2011 at 23:05
  • 5
    agreed - there's nothing wrong with this question. +1
    – Roger Attrill
    Jun 23, 2011 at 8:11
  • I'm wondering if it's not actually a lowered contrast effect that's wanted in this case, rather than a darkening one? Ie on a page that is mostly white with black text - decreasing contrast could be done by lightening everything instead. Just thinking.
    – Oskar Duveborn
    Jun 24, 2011 at 23:46

8 Answers 8

Reset to default
11

Darkening the parent window is essentially a visual indicator to the user that the window is inactive. If the parent window does not change visually when the modal is shown, the user will think that the screen behind is still active. If the user clicks on something on the they will become frustrated that for no apparent reason it does not work.

Think about what a modal dialogue is and it's purpose, by design modals are meant to take all focus from the parent window, the user is not meant to be doing anything else. Therefore it is good practice to change the state of the parent window to let them know this is the case. These days the most common practice it is to slightly grey out the parent window.

As a general point if your users do need to view the information on the parent window and use the modal window at the same then you should think about performing the interaction in a different way to make this easier for the user.

Improve this answer
3
  • 1
    If customers may need to view the information on the main page at the same time as they view the modal popup, remember to make the modal popup moveable for obvious reasons.
    – Henrik Ekblom
    Jun 23, 2011 at 8:03
  • 3
    If customers need to see the info on the main page, then I'd suggest that a modal is the wrong element to be using in this case.
    – DA01
    Jun 23, 2011 at 13:15
  • Modal --> forced interaction, other interactions are blocked. Inlays or overlays are generally the things that appear in a page and still allow you to see and interact with other parts of the page.
    – peteorpeter
    Jun 23, 2011 at 17:01
7

I think the darkened screen behind the modal window convention came from movie theaters. When the movie starts, the light is dimmed so you naturally pay more attention to the bright screen.

If the function in the modal is a key component (sign up, warning etc) then I think it's OK. I'd only reserve this treatment for important features and not over-do it. If you emphasize everything, then nothing is emphasized.

We currently use this treatment on this site for linking a url or image. You can test for yourself how it works.

The amount of opacity % is up to you. If the parent page's information is relevant to the modal, then don't darken too much, or at all. Also, it would be more user-friendly if the user could drag the modal around.

Improve this answer
1
  • Great, but shouldn't we have standards? Something like: if modal window then darkened bg. I feel narrowing down and specify more than 1 practice per element/function makes the app/site behave or look differently in many spots which breaks the consistency
    – Motaz Al-Thaher
    Nov 5, 2011 at 11:08
5

It's a mechanism halfway between an informational popup window and the sudden shift of showing a completely different screen.

Without darkening the screen you are saying 'this is a transient dialog within your workflow and you can get back to the main window any time'. This would be the norm.

By darkening the screen you are providing almost a separate environment for the form - saying 'hang on a moment - before you carry on we're just going to take you out of the workflow because you need to do this, but we'll pop you right back where you were when you're done'.

Darkened screens for images are slightly different because mechanisms like a lightbox also serve to frame a picture nicely without the clutter of the screen behind.

Improve this answer
4

We recently had the same discussion: Our old websites uses the darkened background, we wanted to get rid of it to achieve a friendlier, cleaner look but one problem popped up immediately: The button on the dialog was competing for attention with the buttons of the page. And that's why we got back to using a darkened background again.

Improve this answer
2
  • 2
    Is "hero button" jargon/terminology or something specific to the projects you work on? What does it mean? Searching didn't produce a meaning for the term, so I figured I'd ask.
    – Joel B Fant
    Jun 26, 2011 at 0:39
  • Oops sorry, yep that's jargon: That's how we call the primary button on a page. I think the term comes from advertising and is used to describe the most known or popular product (e.g. Office and Windows are Microsoft's hero products). I'll change the text to make it jargon free. Thanks for the hint.
    – Phil
    Jun 26, 2011 at 20:18
3

To my knowledge, there is no study that indicates why one situation would be preferable to the other from a perceptual/cognitive point of view.

However, after conversation with a colleague, it intuitively feels that:

  • It would be good to darken the screen behind the modal window if your modal window directly affects data that is displayed in the parent window, and the parent window isn't updated dynamically.

  • If the user needs to be able to quickly read data from the parent window, then naturally not shading is the right thing to do.

  • In most other cases, not shading would probably be the better option as a default.

Improve this answer
3

if that effect will feel more like an "obstacle".

Darkening the screen behind modal windows/popups/alerts (whatever you want to call them!) is almost ubiquitous on websites in my experience. Ask yourself - have you ever found it an "obstacle"? Personally, I haven't.

There are larger discussions around the usability of "lightbox"-type features, and loads of points here already. For me, darkening the background achieves one thing, the importance of which depends on your context - focus. The user is visually driven to look at the popup and focus on what's contained in it - whether it's information or an action or whatever. That may or may not be the right thing for you (for sign-in, I'd reckon it would be).

I'd leave this kind of lightbox feature for something that the user definitely has to pay attention to, although you seem to be doing that anyway.

Improve this answer
3

that effect will feel more like an "obstacle".

If at all, the modal dialog is the obstacle, not the effect.

I don't even agree it's an obstacle. For the average geek, choice is good. For the average user, guidance is more important.

The dark background gives a clear signal: I want your attention here. A big friendly cancel button is the only thing you need for your users that don't want to log in to be happy.

let me shoot down the two arguments I can construct against the dark background:

1. There are use cases: User A clicks "Login" and continues to do so. User B clicks "Login", but then realizes he'd rather click the "What's hot" link.

For user B, the dark background is good: he knows he needs to click Cancel before he can click "What's new". If you are modal, the background isn't interactive anyway.

User A would never notice the restriction. However, even for her, you lead her focus to the login controls (the "guidance" argument above).

2. Seeing what's behind. There are modal dialogs for which, to complete them, you need to see what's in the main window / below them. But that's bad usability: the application data the user requires to fill out a modal form should be available from the form. If you need to see e.g. a graph, a side-by-side arrangement is usually better.

Improve this answer
3
  • This is a great analysis :)
    – johnnietheblack
    Jun 24, 2011 at 18:56
  • Why couldn't the "What's hot" link (and anything else) be available, too, and automatically cancel the login?
    – Paŭlo Ebermann
    Jun 26, 2011 at 18:44
  • @Paŭlo: Of course it could - is usually not as easy, but that's nto the point. It's choice vs. holding hands, and geeks usually err on the side of choice.
    – peterchen
    Jun 27, 2011 at 7:28
2

It is a great help to change the background behind a modal window.

But darkening the background always feels threatening to me: why the storm clouds all of a sudden? Instead, you might want to consider lightening the background by changing the text color from, say, 0x333333 (not quite black) to 0xd0d0d0 (very light gray). That way, the modal is clearly visible and the user knows what to do. And it's not so dreary as a darkened background.

It's a bit simpler to lighten the text than to fool around with opacity: a matter of changing the class of certain elements on the main page:

.text {
  color: 0x333333;
}
.text-faded {
  color: 0xd0d0d0;
}

Just my opinion but to me it looks more attractive.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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