Hacker News new | ask | show | jobs
by rob74 2152 days ago
Looks nice, but the shadows on the buttons are wrong: the top and left edges should be white, the other two black. This way, the buttons look more like elements of a status bar, those had the borders reversed to produce an "inset" effect (like in this screenshot: http://173.255.209.242/chhtml/toolkit/demos/Windows/gifs/gad...)
3 comments

I was always slightly perplexed as to how that difference in orientation of colors leads to the out/in effect. I guess it's not so much the left/right but the top/bottom that really achieves this phenomenon, given how most daily light sources come from above (sun, ceiling fixtures, floor lamps) and there are relatively few instances of uplighting (landscaping, ...) around us.
The up–down orientation unquestionably comes from the near-universality of light sources being above you. You'll notice that intense up-lighting is almost never found in the natural or artificial world.

(It's true that upwards-firing lights are often used in interior decoration, but these are almost always to illuminate walls and ceilings above us which then bounce light down to the contents of a room. Also, some techniques in photographic and studio lighting do use some up-firing lights, but these act as shadow fill, never as the primary light source—except when an unusual look is intended.)

To the extent that we expect a certain left–right orientation, this will almost certainly be predominantly a matter of consistency with prior graphical user interfaces. The near-universal standard of a top/left lighting metaphor goes at least as far back as the original Apple Lisa/Macintosh which cast its 1-bit, 1 pixel shadows to the bottom/right.

The fact that people of near-identical cultures can natively integrate either left-hand driving or right-hand driving suggests to me that there's no inherent reason why it needed to be one way or the other. Had the first interfaces begun with a top/right lighting metaphor, we'd probably be all as native to that as British people are with right-hand-drive vehicles.

Upward-firing lights are aimed at the roof to spread the light and create more ambient light. So is primarily used as a down-light by reflection anyway.

I'm not sure the left/right shadows are a learned thing from user interfaces. As a kid, long before I got my first computer I was drawing 3D forms. Shadows always was drawn as light came from the upper left.

Maybe this is because I draw with right hand so prefer light to come from the left so I don't shadow my hand?

Now you've got me wondering if the left/right shadow preference might actually be rooted in other natural phenomena besides human dominant handedness, like something with the rotation of the earth a.k.a. sun setting in the west.
You're over thinking things there. More likely it's just an artefact of those interfaces being designed in the countries who read left to right.

Off topic but I like how you've referenced that infamous IRC meme in your HN handle.

What? The username just shows as *_ for me?
Our brains are hard-wired to assume light comes from above, and 3D "pop out" from shading even means we can identify the shapes faster. More info and references in this section from Mind Hacks (I was a co-author):

#20 Fool Yourself into Seeing 3D -https://books.google.co.uk/books?id=K6bjvFUcedgC&pg=PA57&dq=...

(It briefly mentions Susan Kare's work who designed the first 3D buttons in Windows 3.0 -- 1990!)

There's another effect going on here which is visual affordances: not only does the button "pop out" but we immediately see it as something we can push. That's from the psychologist James Gibson in 1977.

There are a ton of cognitive quirks that are useful to know when designing interfaces. The pop-out effect is one of my favourites.

It is an artefact of how we scan things visually. Most of us read top-to-bottom/left-to-right and habitually look at pictures with that bias, so when the brain fills in the missing height detail for a 2D display using the light/shadow indicators it defaults to assuming the light source is in the top left. The affect designed for us doesn't work as well for those whose primary written forms follow a right-to-left structure. Obviously, as you mention, the light source being assumed to be high comes from a much older source as our main natural lights are up high.
I agree it's bonkers. It's a direct corollary, but still a wild experience: turn your phone (/monitor/head) upside down.
The illusion of left/right is driven by which hemisphere you are on. On northern hemisphere the sun moves from left to right and the morning being brighter than afternoon. So top/left would be on average the brightest source.
Since it's my lunch break, I put together a PR: https://github.com/chowderman/Hacker95/pull/4

My CSS-fu is very basic, so it might need further tweaks to make button presses look right.

Or make them actual tabs.