Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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!

share|improve this question
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 '11 at 22:50
11  
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 '11 at 23:05
5  
agreed - there's nothing wrong with this question. +1 –  Roger Attrill Jun 23 '11 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 '11 at 23:46
add comment

8 Answers 8

up vote 11 down vote accepted

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.

share|improve this answer
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 '11 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 '11 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 '11 at 17:01
add comment

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.

share|improve this answer
    
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 '11 at 11:08
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
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 '11 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 '11 at 20:18
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
This is a great analysis :) –  johnnietheblack Jun 24 '11 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 '11 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 '11 at 7:28
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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