Cool technical achievement; Bad UX. It's harder to read or understand anything inside a translucent panel than one with a consistent, solid background because of lower and inconsistent contrast with the background. Additionally, things potentially happening underneath will be distracting and disorienting.

"Bad UX" can't be generalized that easily for a simple visual effect, that's highly dependent on the integration.

A good integration would:

- consider how heavily to use the effect to not overload the ui

- query for feature support to avoid adding all additional decorations if blur isn't available

- query for display & video features to avoid rendering the effect on devices that likely don't have a capable gpu

- query for user preferences and serve solid colors with good contrasts to users who might struggle with the busier background

- limit the extent of the effects and shadows depending on available space

- tweak the blurring and opacities to ensure good readability in the specific UI, regarding how complex or contrasted the background under blurred areas will be

- ensure blurs and shadows scale adaptively with the typography to ensure consistent visuals

UX is by definition the design of how a user experiences the complete app and interaction, it's not made or broken by individual stylistic choices

Eh, if lower contrast is an issue, make the background or glass tint darker, and the foreground content lighter, or viceversa. Good contrast is a challenge with any design element, regardless if it's using a solid color or this glass effect.

Things happening in the background being distracting and disorienting is also very subjective. You can lower the translucency of the glass just as you would lower the opacity of a solid color.

My point is that your criticism is far from being objectively true. There are ways of integrating this design element without running into those issues. The screenshot from the Forza game looks fine, for example, and having seen it in action, the background is not distracting. And what you gain is a more interesting and visually pleasing UI than if you were using a solid background. This may be more important in a video game, but it can also be done tastefully in OS and web design.

Yeah, I don’t use this effect across my site because it’s harder to get a good UX with it.

That being said, it has more of a place in games. Especially in HUD where you don’t want to occlude the background since that’s the main area a user is interacting.

Windows Vista solved this by giving black text on top of the frosted glass a white shadow-like outline. This guarantees the text is readable even in the extreme case where the background is black. In CSS this effect can be replicated with the text-shadow property.

Agree. And when iOS started doing it years ago I was disappointed for that reason — loss of contrast. But also you just know there's a (significant?) battery cost to the effect.

Yeah the variable contrast issue (contrast dependent on background content) is a real problem for accessibility guidelines. For enterprise apps if you want to pass the various accessibility reviews it needs to be a user preference at least.

You have to combine translucent panels with a 80-90% opaque background color if you want to have text on it. Then it's a subtle effect and the text is readable.

False. The human brain and eye is built to recognize foreground and background and shift focus and attention based off of blur.

Thousands of years of adaptation has honed the brain and the eye to be optimized for this type of view much moreso then the simple UX you see here on HN.

Not only does the blurred/frosted glass background look better but it should be clearer because that's what we've been designed to do.