: Glossy buttons: what optical phenomena are they supposed to imitate? What are these effects supposed to replicate ? Is it a reflection, a refraction, caustics ?

@Sent7350415

When you do photography you often reflect a Softbox (a square diffuser that makes the light more even) or an umbrella (also diffusing the light but gives a round reflection). When taking pictures of shiny objects these are often placed so they reflect in the object, together with white and black sheets of papers around setup to give a good 3D feel representing the true shape.

These glass buttons simulate that effect, the Softbox reflecting in the surface from top. As the even light isn't perfectly even the light is typical represented as a gradient where the edge of the softbbox is not so bright as the center of it.

The inner light in those button simulate both refraction and caustics.

Here's a walk-through how real-world shiny objects are photographed, the principle applies with glass (I add it here to show the principle):

Vote Up Vote Down

@Kaufman565

Almost entirely the reflection from glass, or, shiny clear plastic. Imagine a smooth, curved physical glass/plastic button.

Sometimes, people go to town and simulate caustics and refraction as well, but usually reflection, and a gradient and optional counter reflection (like at the bottom of the first image) suggesting light from the underside therefore implying translucency, is usually enough.

Edit after rethinking from Horatio's comment -- When it implies a spherical or convex shape, as in the top example, much of the gradient will be simulating refraction, as would any added effect that implies the inverse of the background. Most real glass shapes have complex refraction that depends on the background, the angle of light, the material used and size and depth of any convex or concave curves; most examples of this effect keep it very simple with just a gradient going from dark at the top to light at the bottom.

This styling adds plenty of noise to a design already, so skipping refraction and caustics can be a legitimate design decision instead of (or, as well as...) laziness :)



As for the effect in general, glass effects in web UIs were very popular the mid/late 2000s, presumably using a mix of associations with shiny technology leaning on the concurrent trend for shiny, highly visible interaction points in gadgets of the time, and familiarity, due to the use of glass effects in the Windows 'Aero' UI theme which was popular at the time. It's an example of skeuomorphism - simulating properties of something from the physical world to suggest characteristics in something digital. Glass effects were also particularly popular in corporate websites (I imagine because shiny glass is associated with modern glass office buildings and so was used to set a modern corporate tone).

They are still quite widely used, but decreasingly so, presumably because:


...of association with a trend that is now passing:


gadgets tend to be more minimalist with unobtrusive interaction points
corporate websites tend to be more keen on presenting warmth and approachability than corporate seriousness
in general skeumorphism, when it is used (and there's a strong argument that, as a reaction to sometimes obtrusive and excessive over-use by Apple in some software, the idea itself is in the process of going out of fashion in UI design in favour of 100% form-follows-function elements), tends to use low-key low-technology high-approachability tactile metaphors like furniture and fabrics or simple mechanical processes,
Windows - therefore the everyday experience of technology for the vast majority of white-collar corporate workers, therefore, familiarity for corporate things - is in the process of moving on to flat shiny tiles.

...and also, because they add quite a lot of distracting noise to a design. Lots of different shades, and when used with text labels, the highlights or shading compete with the text

Vote Up Vote Down