Greyed background for popups

10 Aug 2009 - 10:18am
5 years ago
17 replies
1238 reads
William Hudson
2009

Can anyone tell me where the convention of greying the background page
when showing a popup window came from? It seems to have become something
of a de facto standard - is it published as an actual standard or
guideline somewhere? (I could not find out on Google.)

Regards,

William Hudson
Syntagm Ltd
Design for Usability
UK 01235-522859
World +44-1235-522859
US Toll Free 1-866-SYNTAGM
mailto:william.hudson at syntagm.co.uk
<mailto:william.hudson at syntagm.co.uk>
http://www.syntagm.co.uk <http://www.syntagm.co.uk/>
skype:williamhudsonskype

Syntagm is a limited company registered in England and Wales (1985).
Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
OX14 2DS.

Comments

10 Aug 2009 - 10:46am
Paul Bryan
2008

Graying out backgrounds to change focus was very common in multimedia
training design, back in the days when the web was static and graying
out pages was challenging from a coding perspective.

Some high-traffic e-commerce sites have resurrected the practice in a
way that multiple browsers can understand, and is returning as a de
facto standard for indicating to users "you were in the middle of
doing x, but now you need to do y before proceeding."

Paul Bryan
Principal Consultant, Usography Corporation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

10 Aug 2009 - 10:53am
jpb
2009

> Can anyone tell me where the convention of greying the background page
> when showing a popup window came from?

It's generally called "lightbox"ing, you might want to search on that term.

http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

On Mon, Aug 10, 2009 at 5:18 AM, William
Hudson<william.hudson at syntagm.co.uk> wrote:
> Can anyone tell me where the convention of greying the background page
> when showing a popup window came from? It seems to have become something
> of a de facto standard - is it published as an actual standard or
> guideline somewhere? (I could not find out on Google.)
>
> Regards,
>
> William Hudson
> Syntagm Ltd
> Design for Usability
> UK 01235-522859
> World +44-1235-522859
> US Toll Free 1-866-SYNTAGM
> mailto:william.hudson at syntagm.co.uk
> <mailto:william.hudson at syntagm.co.uk>
> http://www.syntagm.co.uk <http://www.syntagm.co.uk/>
> skype:williamhudsonskype
>
> Syntagm is a limited company registered in England and Wales (1985).
> Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
> OX14 2DS.
>
>
> ________________________________________________________________
> Reply to this thread at ixda.org
> http://www.ixda.org/discuss?post=44487
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
_________________________
@jonathanpberger
http://www.marketpublique.com
http://www.jonathanpberger.com
718.930.2165
This email is: [*] bloggable [ ] ask first [ ] private

10 Aug 2009 - 10:58am
brendon.cornwel...
2009

You can also look at Modal Windows:

http://en.wikipedia.org/wiki/Modal_window

"many interface designers have recently taken steps to make modal
windows more obvious and user friendly by darkening the background
behind the window or allowing any mouse click outside of the modal
window to force the window to close"

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

10 Aug 2009 - 11:10am
jkarttunen
2009

I've always thought it comes from some human perception princible, but don't seem to find anything directly related. I think that darker areas are supposed to be perceived as being farther away, but i'm not sure about this. If someone has the book "Sensation & Perception" around, it would be nice to get confirmation for this..

10 Aug 2009 - 10:50am
Mark Canlas
2003

It's sometimes referred to as a "lightbox", if that helps your search at
all. It seems to have been made popular by an implementor named Lokesh
Dhakar in November 2008. I wouldn't say it's a standard as much as it is in
vogue, useful, and aesthetically pleasing. It's often attributed as one of
the hallmarks of what the Web 2.0 movement is about or looks like.
On Mon, Aug 10, 2009 at 12:18 PM, William Hudson <
william.hudson at syntagm.co.uk> wrote:

> Can anyone tell me where the convention of greying the background page
> when showing a popup window came from? It seems to have become something
> of a de facto standard - is it published as an actual standard or
> guideline somewhere? (I could not find out on Google.)
>
> Regards,
>
> William Hudson
> Syntagm Ltd
> Design for Usability
> UK 01235-522859
> World +44-1235-522859
> US Toll Free 1-866-SYNTAGM
> mailto:william.hudson at syntagm.co.uk
> <mailto:william.hudson at syntagm.co.uk>
> http://www.syntagm.co.uk <http://www.syntagm.co.uk/>
> skype:williamhudsonskype
>
> Syntagm is a limited company registered in England and Wales (1985).
> Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
> OX14 2DS.
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

10 Aug 2009 - 11:30am
Alex ONeal
2008

Technically, those are not pop-ups but pop-overs - at least, this was
language used when they first appeared. The gray-out is because of
lost functionality. Here are the differences:

Pop-ups set off browser pop-up warnings. They do not stop
functionality on the preceding window - they are simply another
window. These are deprecated in most situations, but on rare
occasions can be useful.

Pop-overs typically do not set off browser pop-up warnings. The
window beneath is grayed out because it is no longer functional.
These are typically used to force a behavior, such as agreeing to
TOS, or to carry someone through a process without leaving the
original page (though sometimes you do get dropped on another page).

Hope this helps!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

10 Aug 2009 - 11:47am
Mark Young
2008

I'm a former perceptual psychologist but I don't see the need for
this method. A simple fat border with a drop shadow would make it
clear enough that the popup is in front the main window -
interposition is a very powerful depth cue. I've also heard
rationale along the lines that it focuses attention, but I don't see
a need for that either since the spatial extent of our attentional
focus is rarely bigger than a popup and the motion cues that occur
when the popup appears should be sufficient to draw attention to it.
Perhaps designers want to make it clear that the underlying window is
not interactive - I can see some value to that. Personally, I feel it
is overkill that masks the context too much. However, the convention
seems very appealing to designers - I think I am failing to talk my
fellow mobile designers out of it.

-Mark

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

10 Aug 2009 - 12:10pm
David Drucker
2008

It's true that the 'lightbox' pattern is probably a bit of design
overkill, but there is another benefit to the greying out of the rest
of the page, which is that it gives more of an impression that the
underlying window is disabled. I think that's a good thing, since
earlier attempts at doing a truly modal dialog box on the web (where
clicking out side the box either did nothing or beeped) involved a ton
hackery and inelegant code. Users have not gotten used to the concept
of a 'modal popover window', which is what I guess this technique
would support.

that I'm curious if anyone has come across a variant on this with a
visual effect that doesn't simply darken the surrounding window, but
actually de-saturates the content (including both text and graphics)
under it. That would be an even more true 'disabled' cue.

10 Aug 2009 - 12:30pm
Jack L. Moffett
2005

David,

I have lightened the background, rather than darkened it, which is
closer to what you are suggesting. I prefer this to darkening the
background because it is a subtler change (if the app has a white
background), while still getting the "disabled" point across.

Best,
Jack

On Aug 10, 2009, at 2:10 PM, David Drucker wrote:

> that I'm curious if anyone has come across a variant on this with a
> visual effect that doesn't simply darken the surrounding window, but
> actually de-saturates the content (including both text and graphics)
> under it. That would be an even more true 'disabled' cue.

Jack L. Moffett
Senior Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

It's not about the world of design;
it's about the design of the world.

- Bruce Mau

10 Aug 2009 - 6:46pm
Will Hacker
2009

One advantage of this pattern is not having to write client-side logic
for what happens when a user navigates away from an input form after
making changes but not indicating to save or cancel. Since some
users may assume that clicking another link is a safe way to get out
of a form without saving anything, I think logic to handle this in a
traditional in-page form is helpful if the form in question requires
a bit of work and the user might accidentally click another link. By
having an X to close the flyout in a corner of the layer set away
from where the user is working, the user still has a way to
explicitly escape from what they are doing without doing so by
accident, and you don't have to write the code to trap for that.

I also think this technique helps remove distractions when
concentration is essential to completing a task.

I prefer a slightly grayed out background (the disabled look) to the
blacked out backgrounds used on many sights but don't think black is
a problem if the user can still complete their task.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

10 Aug 2009 - 1:38pm
David Drucker
2008

That would be an interesting thing to see in a demo!

On 10-Aug-09, at 11:30 AM, Jack Moffett wrote:

> David,
>
> I have lightened the background, rather than darkened it, which is
> closer to what you are suggesting. I prefer this to darkening the
> background because it is a subtler change (if the app has a white
> background), while still getting the "disabled" point across.
>
> Best,
> Jack
>
> On Aug 10, 2009, at 2:10 PM, David Drucker wrote:
>
>> that I'm curious if anyone has come across a variant on this with a
>> visual effect that doesn't simply darken the surrounding window,
>> but actually de-saturates the content (including both text and
>> graphics) under it. That would be an even more true 'disabled' cue.
>
>

11 Aug 2009 - 12:50am
Anonymous

Depending on the app, lightening the bg could be akin to greying-out
the controls. For me, the lightbox, or darkening of the bg indicates
an important change. I hate using it for modal pop-overs (I hate modal
pop-overs anyway), but I LOVE to use it for videos, images etc. - the
purpose of the lightbox anyway. One of the instances I enjoyed its use
the most was on Hulu - they had a the video player pop-up, or sitting
in its frame, then there was a button called 'dim the lights' - all it
did was darken the background/surrounding area, but it made a strong
statement - the user is dimming the lights 'cause they're about to
watch a flick. It's the same thing, but given a real-world analogy
that made perfect sense for/to the user. Plus it wasn't automatic -
the user chose to dim, or raise the 'lights' as they preferred. I
can't remember if it disabled the underlying controls - in Hulu's case
I don't think so.

Brandon E. B. Ward
UI • UX • Ix Design
Flex • Flash Development
http://www.uxd.me
brandonebward at gmail.com

A human being should be able to change a diaper, plan an invasion,
butcher a hog, conn a ship, design a building, write a sonnet, balance
accounts, build a wall, set a bone, comfort the dying, take orders,
give orders, cooperate, act alone, solve equations, analyze a new
problem, pitch manure, program a computer, cook a tasty meal, fight
efficiently, die gallantly. Specialization is for insects.
-Robert A. Heinlein

On Aug 11, 2009, at 3:38 AM, David Drucker wrote:

> That would be an interesting thing to see in a demo!
>
> On 10-Aug-09, at 11:30 AM, Jack Moffett wrote:
>
>> David,
>>
>> I have lightened the background, rather than darkened it, which is
>> closer to what you are suggesting. I prefer this to darkening the
>> background because it is a subtler change (if the app has a white
>> background), while still getting the "disabled" point across.
>>
>> Best,
>> Jack
>>
>> On Aug 10, 2009, at 2:10 PM, David Drucker wrote:
>>
>>> that I'm curious if anyone has come across a variant on this with
>>> a visual effect that doesn't simply darken the surrounding window,
>>> but actually de-saturates the content (including both text and
>>> graphics) under it. That would be an even more true 'disabled' cue.
>>
>>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

11 Aug 2009 - 9:53am
Oleh Kovalchuke
2006

Launching videos from the side bar at Facebook utilizes this semitransparent
"white screen" effect. It is indeed much less jarring than semitransparent
black.

Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Mon, Aug 10, 2009 at 2:38 PM, David Drucker <david at drucker.ca> wrote:

> That would be an interesting thing to see in a demo!
>
> On 10-Aug-09, at 11:30 AM, Jack Moffett wrote:
>
> David,
>>
>> I have lightened the background, rather than darkened it, which is closer
>> to what you are suggesting. I prefer this to darkening the background
>> because it is a subtler change (if the app has a white background), while
>> still getting the "disabled" point across.
>>
>> Best,
>> Jack
>>
>> On Aug 10, 2009, at 2:10 PM, David Drucker wrote:
>>
>> that I'm curious if anyone has come across a variant on this with a
>>> visual effect that doesn't simply darken the surrounding window, but
>>> actually de-saturates the content (including both text and graphics) under
>>> it. That would be an even more true 'disabled' cue.
>>>
>>
>>
>>
>

11 Aug 2009 - 12:27pm
Meredith Noble
2010

Brandon, would love to hear why you hate modal popovers... can you
elaborate?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

12 Aug 2009 - 11:49pm
martinpolley
2007

Do you think the change to semi-transparent black would be more acceptable
(less jarring) if it happened gradually? That's what happens when you
activate the dashboard in Mac OS X (though the background is not darkened
very much).

Cheers,

Martin Polley
Technical writer, interaction designer
+972 52 3864280
Twitter: martinpolley
<http://capcloud.com/>

On Tue, Aug 11, 2009 at 6:53 PM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> Launching videos from the side bar at Facebook utilizes this
> semitransparent
> "white screen" effect. It is indeed much less jarring than semitransparent
> black.
>
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
>

13 Aug 2009 - 10:58am
Brian Mclaughlin
2008

Perhaps everyone understands this already, but just in case ...
The way a 'lightbox' works is to set a percent of transparency on a color swatch that repeats to fill the viewport.
So you can have opaque or transparent (dark or light) of whatever color you want. So it can white (which would desaturate the background colors) or black (which "grays" out the color background) or you can have blue (which creates a blue tinted background) etc.
You can also use patterns. So you could have a transparent plaid overlaid on the background if you felt the need.

Brian McLaughlin

----- Original Message -----
From: "Martin" <martin.polley at gmail.com>
To: "Oleh Kovalchuke" <tangospring at gmail.com>
Cc: discuss at ixda.org
Sent: Thursday, August 13, 2009 1:49:12 AM GMT -05:00 US/Canada Eastern
Subject: Re: [IxDA Discuss] Greyed background for popups

Do you think the change to semi-transparent black would be more acceptable
(less jarring) if it happened gradually? That's what happens when you
activate the dashboard in Mac OS X (though the background is not darkened
very much).

Cheers,

Martin Polley
Technical writer, interaction designer
+972 52 3864280
Twitter: martinpolley
<http://capcloud.com/>

On Tue, Aug 11, 2009 at 6:53 PM, Oleh Kovalchuke <tangospring at gmail.com>wrote:

> Launching videos from the side bar at Facebook utilizes this
> semitransparent
> "white screen" effect. It is indeed much less jarring than semitransparent
> black.
>
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
>
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

14 Aug 2009 - 4:49am
Uidude
2009

Way back sometime in 2004, SONY were making Palm OS based PDAs. The
UX50 model's screen were small and packed the maximum pixels then
and due to their mini size they designed the outer shell that
supported the screen border - black in colour while the whole device
was in a metal shade. This helped reading the small screen easier.
(Google images: SONY PEG UX50)

Apple's macbook pro also followed this design with black screen
bezel.
(Google images: Apple MacBook Pro 2.53GHz)

A look into the study behind this design shift that went on then
could help find how the 'lightbox' convention started. My guess is
that, following the above darkening of background elements to help
the user focus on a given area of the screen, portions starting from
the screen bezel were extended (darkened). This sort of may be seen
as an extended concept of what SONY and Apple researched about much
earlier.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=44487

Syndicate content Get the feed