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
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.
This is not my personal experience. It was very hard for me to read the text on vista glass.
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.
It has all the same problems in games as it has on a website, it's just more acceptable to sacrifice usability for 'looking cool' in a game.
In HUD you don’t want to occlude the background since that’s the main area a user is interacting.
Disagree; the action behind the glass will make using the HUD more difficult, and the glass will make seeing what's behind it almost impossible. It makes both parts of the experience worse. Although, on the surface, to an onlooker, it might look 'cool'.
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.
Forza is a game, the background being distracting or not isn't a real problem. On Windows 11 however there is some transparency effect here and there and it's indeed very annoying when a window change color because of what is behind it. Thankfully there's a setting to turn that down.
Blur is a form of information hiding while maintaining an adjustable amount of context.
If you need lots of context, blur is a poor choice. If you need no context, it is a poor choice.
Sometimes it is a great choice.
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.
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.
It may be entirely done within the GPU, making the energy cost insignificant. At least apple added an accessibility setting to reduce the blur.
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.
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.
I don't follow. What exactly has the brain been honed to do?
Every single article I've read on the matter says higher contrast is more readable. The debate is over how high is 'good enough'.
Do those articles use scientific evidence? Do they measure anything quantitative or is it just a bunch of opinion.
UX poses as a scientific field when really there is little evidence based research and it’s all just technical procedure and big words. Technical procedures are illusory they make you think it’s legit with a bunch of rules but to be scientific you need evidence. As technical as the rules are, a lot of it is made up bs.
UX design is one of those bs concepts that litter the world and poses as legitimate. It’s like the food pyramid from the USDA that says refined carbs are the most important part of every meal.
If the debate is on how much contrast then run some science. Instead UX just debates and as a result the entire field is made up conjecture.
Yes, the articles are scientific.
https://www.sciencedirect.com/science/article/abs/pii/S01698...
https://www.tandfonline.com/doi/abs/10.1080/0144929041000166...
https://jov.arvojournals.org/article.aspx?articleid=2121593
Though this lacks citations and evidence, it's by a generally accepted expert and authority in the field:
https://www.nngroup.com/articles/low-contrast/
I'm really struggling to understand the connections you're drawing to food.
It’s ok if you’re struggling. As long as you are humble enough to admit it.
The food pyramid is based off of cherry picked data and biased experiments influenced the food industry. This is similar to your cherry picked data.
Your data measures low contrast vs high contrast but really you need to measure high contrast vs. blurred background.
Blurred background is unpredictable contrast, sometimes low, sometimes high. Plus the motion behind it would be distracting. You can see the impact on the static screenshot in the OP where the text is harder to read over the light part of the blurred background than the dark part of the blurred background.
This holds true in 3D space to a _certain degree_, but here we’re looking at faux 3D projected onto a flat 2D surface where our eyes’ depth perception doesn’t work.
No we like photos with blur in the background. We prefer such photography. So who’s to say the faux surface fails?
Again we need evidence based measurements which the entire UX field lacks. It’s just a bunch of made up concepts strung together with little scientific research.
The blur is depth dependent, not an uniform filter.
And there’s a lot of research regarding UX, under the term Human-Computer Interaction. The thing is that it easily converge to something like Win 2000, macOS Leopard.
A photo isn’t an interactive interface so there’s entirely different perception tasks involved in parsing it. We like a lot of things in photos that are horrible for UI design — and vice versa.
But this also gets into another gray area where looking at a design for a UI != using said design to perform important tasks. Hence why prototyping and user tests often run counter to “pretty” interfaces.
Right but you got any science to back up what you say?
I can simply say you’re wrong and I disagree and you got nothing to move your argument forward.
Yes, our brain is good at this - but it still takes some capacity in processing to do this. I guess the point is: if you have a simple, high-contrast background - your brain needs less capacity to process it.
You got evidence to back that up?
The human body is designed to desire and consume the maximum amount of feel good tasty food for maximum energy but we are finding that the evolution of the human body is not designed to actually accept such massive consumption despite our desire for such food. Our bodies do not handle the highest capacity consumption instead they have narrowly evolved to fill a strangely specific niche.
Same with our eyes. It may seem easier to like high contrast designs but our eyes through millions of years of evolution are not optimized for high contrast signs since those things never existed in nature.