Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite
3

It seems to me like the light source direction in most UI designs comes from the top or top-left. This is like the de facto standard, but I'm curious as to if anyone has ever successfully made designed where the light source comes from the bottom or bottom-right, without confusion.

If you have ever seen those optical illusions where you can switch from seeing a convexed object to seeing a concaved object. If most users expect the light source to come from the top-left they will choose to see everything as "inverted" in a design which the light source direction is bottom-right.

Thoughts on this would be very much appreciated. If you have ever seen a bottom-right lighted design, please share. Let me know if it's a bad idea to venture out into this area, and if it's best to stick with the de facto standard.

share|improve this question

3 Answers

up vote 3 down vote

It depends on whether you want to do bevel or emboss.

So first button shows the light coming from top left and cast a shadow down in the right corner.

Next to that the light comes from the bottom right and cast a shadow back in top left.

You can do both of them but top left is going to look more natura because most other things are also that perspective.

One thing though you can do is to change the shadow from outer to inner shadow. This will case the shadow inside the button and give you the idea of it being embossed.

You can also do a completely different but very subtle thing which you can find in this pdf

http://000fff.org/uploads/LMG_Visual_Final.pdf

Here i am going much more subtle on the drop shadows having them either come down directly from the top or from the bottom depending on whether I want to give the illusion of the text going into to bottom or sitting on top of it.

No matter what though. Most important thing is that you are consistent.

Hope it helps.

alt text

share|improve this answer
1  
When you add a shadow to the equation it's easier to determine what it is (embossed or beveled). However, when the shadow conflicts with the lighting on the actual button (such as the case with the first button) it looks odd; why is it darker at the top when the shadow is cast on the bottom? The shadow does help determine the direction of light when combined with the gradient, lick with the second button; darker at the top, lighter on bottom, but shadow cast on top (all the elements play well with each other). But what if you didn't have the shadow? You've lost that extra dimension. – Sam Dec 13 '10 at 12:19
In other words, without the shadow, there is no extra aid it defining the direction of light. So how is the user going to define it? I'd think they use the fact that most UI is top-left lighting, such as their OS's UI. If you go against that you'll need to make it pretty clear that you are. You'll need something extra. Thanks for making that clear to me. ;) – Sam Dec 13 '10 at 12:22
There is a gradient to the buttons that is why they are darker in the top. I am just trying to show you how different shadows affect the overall look. Think about it as casting light to the shapes rather than the entire asset. If I was to do that then I would have to make every single button different since they would all be in relative distance and angle from the sun. – ThomPete Dec 13 '10 at 12:56
@Sam: exactly: if you have just one column of these, you can't tell which one is pressed and which one is not. It would help if the background - as it's gradiented too - would use the same directionality. – peterchen Dec 14 '10 at 7:16
The gradient on a button is usually there to indicated a raised surface reflecting light. As such, the top left example is a bit of a paradox...the shadow is opposite the light reflection. That can be OK, but be aware of it. – DA01 Dec 15 '10 at 16:41
up vote 2 down vote

What's the reason you want to venture there?

Does it complement something on your website? Or just to be different?

In any case, I think there ought to be a good reason to deviate from what the user expects in this case.

If you do go there, I would suggest a visual aid, for example a lamp on the bottom right pointed towards the page's content. This can "explain" the different design to the user and make them feel it's more "natural".

share|improve this answer
up vote 1 down vote

I would speculate that a top light source is more natural and familiar than a bottom light source because most of us are used to the sun being above us :-)

share|improve this answer
1  
I remember seeing a program years ago which included a segment about making a map of Mount Everest. In this they stated that they added shadowing as if the sun was to the north because that was what people expected, even though in reality the sun shines from the south. – ChrisF Dec 13 '10 at 13:51

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.