Where should the GUI light source come from?

Question

I know that historically the light source on GUIs is in the upper left, casting a shadow on the bottom-right of buttons and the upper left of fields. Now, I see some places (like Apple) use a top light source and others use no shadows. On this very site some fields (question field) use a top light and other fields (tags) have not shadows.

I want to be able to have an well-reasoned conversation with my Creative team about form design standards.

Is there a method that works best?

(Also, I don't like leaving out shadows, as one designer suggests, because it becomes less clear to me if it's really a text field; I wonder if others have the same experience.)

---

UPDATE

We decided to adopt a top-down light source with most of our designs, although it's not always as dimensional as Apple's 45º angled source.

Answer 1

The general practice of lighting from some modest angle left of completely overhead is old and practical. Renaissance painters for instance, as they became more scientific about depth perception, often chose this lighting technique.

There are a few reasons for the effectiveness of the "just-left-of-noon" light source, I think:

1. As others stated, and obviously, most of the time (in a daily and an evolutionary sense) humans see things lit from above.

2. In left-to-right reading cultures, we tend to consume all visuals from left-to-right, whether textual or graphic in nature. Lighting slightly to the left side favors left-to-right scanning, placing the well-lit details where you eye will naturally wander.

3. Head-on lighting (straight above, or in line with the viewer) obscures shadows behind the objects casting them, which reduces the ability of the viewer to quickly place the object in space. This is one of the problems with photographs taken with a flash that is directly mounted on the camera (and not bounced) - among other things, the results look flatter.

That said, these concerns may not be as important for the goals we often have with our flat screens. Our intended visual cues are often modest - to subtly show that one flat layer is just slightly higher than another, or that this part of the interface puffs out just a hair. Our context is not quite the same as Michaelangelo's!

I have also noticed a move away from left-of-noon to perfectly-noon I think there is good practical reasoning to do so.

In this Google Apps drop-down, the lighting is pure top-down, as shown on the top. In this case, the top-down approach has a key advantage - the drop-shadow can justifiably extend on both sides of the overlay.

My version on the bottom slides the light source to the tradition left-of-noon angle (good old 315° in Adobe products). Here, the left side of the overlay on it's own does not convey that it is above the page (except that is cuts off the text). It's fairly subtle, but personally, I can feel the difference (having just designed one of these myself).

Perhaps the more important perceptual rule in these cases is not about where the light is coming from per se, but rather more generally that when you have two relatively proximate objects, the object perceived as shaded will recede; the lit one will appear closer.

Answer 2

The standard is that the light source is at the top of an item, as this is where light sources are usually located in real life (the Sun, ceiling lighting). Items lit from below or on top appear unnatural.

Lighting and shadows help controls like buttons look like buttons, and that's what they should do. Whether the light comes from top or a little to the side is less important, however non-uniform light sources make an interface look unnatural. The main reason for the sorta to the left/right lighting and uneven shadows is visual flair. When your visual flair starts to make the interface look unnatural you've gone too far.

The important thing about shadowing and lighting is that they suggest what they are and nothing more.

The same applies to these toggles. Shadows and gradients help the user figure out what he’s looking at and how to interact with it. Adding too many details, however, ends up being confusing. The toggle switch is no longer just a toggle switch that is part of a user interface, it is clearly recognizable as a photograph of a specific toggle switch; it loses its meaning. It’s no longer a symbol, it has become a specific thing.

Shadows suggest that things can be clickable, as far as human computer interaction goes, that's all they should do. Lighting from the side or from 45 degrees doesn't have much to do with suggesting affordance at all. It's okay as a visual flair, but going too far can make your interface unnatural or odd, especially since most things on your computer are lit straight from the top (usually).

The problem with slightly skewing your lighting angle is that since there's no standard, it's very easy for your method of lighting to clash with other applications. Therefore the light source being at the exact top is the only logical "standard".

Answer 3

Your question highlights the grey area between "desktop" GUIs and "web" or "web app" GUIs. There is no real standard for showing web-app-like controls in a 3D space. Browser chrome controls, like radio buttons and pulldowns, have desktop-like properties, but links and tags and whatnot typically don't.

The old Apple Human Interface Guidelines (the basics of which everyone else copied) said that the light source on a desktop GUI came from the top left. There's not much shadow shown in this System 7.0 Control Panel example, but the darker edge is on the bottom right, for sure.

With Mac OS X and later iOS, Apple changed the conceptual light source position to directly above, so the shadow gradients are straight up and down.

Answer 4

We see in 3 dimensions, and a large part of our image processing (in our brains) is linked to the perceived depth of an item. Shadows make use of that to create a feel of depth, and differentiate an object from its surroundings. If you look at an object in real life with a left or right shadow, it's unlikely that for one shadow you recognise that it hads depth, while not for the other.

So it doesn't really matter much which you choose. What matters is that it looks like it has some depth difference relative to its surroundings. If you have a design reason to make it right, or top, then do that. But when in doubt, if there is even a tacit standard, I would keep to that.