4 ms·

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 o

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.

JKCalhoun 2y ago
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.
- cosmotic 2y ago
  It may be entirely done within the GPU, making the energy cost insignificant. At least apple added an accessibility setting to reduce the blur.
tyleo 2y ago
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.
- cosmotic 2y ago
  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.
  - yetanotherjosh 2y ago
    "Looking cool" IS a component of UX. UX includes the user's emotional experience of using the product. It is 100% acceptable to do something for UX that is otherwise bad "UI". While you talk about UX here, you really mean UI, because the UX is arguably improved at least for some audiences, who are more positively affected by the dimensionality and light-conscious design the effect brings than negatively affected by the readability downside. In the bigger picture, people use products to perform a function that often includes how they feel in and about themselves while using it. People buy cars to tell a story about who they are. People buy coffee and sit at a cafe in order to get a moment of peace or some internet access. People wear shoes that are a little less comfortable in order to get compliments on them. This is not bad UX. This is literally the meaning of good UX - paying attention to what people actually want versus the minutia of objective functionality.
  - cubefox 2y ago
    In HUD you don’t want to occlude the background since that’s the main area a user is interacting.
    - cosmotic 2y ago
      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'.
ninetyninenine 2y ago
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.
- simianparrot 2y ago
  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.
  - ninetyninenine 2y ago
    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.
    - skydhash 2y ago
      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.
    - simianparrot 2y ago
      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.
imiric 2y ago
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.
- gwervc 2y ago
  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.
cubefox 2y ago
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.
- cosmotic 2y ago
  This is not my personal experience. It was very hard for me to read the text on vista glass.
carlosjobim 2y ago
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.
krsdcbl 2y ago
"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
kfarr 2y ago
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.
xbar 2y ago
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.

JKCalhoun 2y ago

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.

cosmotic 2y ago
It may be entirely done within the GPU, making the energy cost insignificant. At least apple added an accessibility setting to reduce the blur.

tyleo 2y ago

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.

cosmotic 2y ago
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.
- yetanotherjosh 2y ago
  "Looking cool" IS a component of UX. UX includes the user's emotional experience of using the product. It is 100% acceptable to do something for UX that is otherwise bad "UI". While you talk about UX here, you really mean UI, because the UX is arguably improved at least for some audiences, who are more positively affected by the dimensionality and light-conscious design the effect brings than negatively affected by the readability downside. In the bigger picture, people use products to perform a function that often includes how they feel in and about themselves while using it. People buy cars to tell a story about who they are. People buy coffee and sit at a cafe in order to get a moment of peace or some internet access. People wear shoes that are a little less comfortable in order to get compliments on them. This is not bad UX. This is literally the meaning of good UX - paying attention to what people actually want versus the minutia of objective functionality.
- cubefox 2y ago
  In HUD you don’t want to occlude the background since that’s the main area a user is interacting.
  - cosmotic 2y ago
    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'.

ninetyninenine 2y ago

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.

simianparrot 2y ago
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.
- ninetyninenine 2y ago
  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.
  - skydhash 2y ago
    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.
  - simianparrot 2y ago
    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.

imiric 2y ago

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.

gwervc 2y ago
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.

cubefox 2y ago

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.

cosmotic 2y ago
This is not my personal experience. It was very hard for me to read the text on vista glass.

carlosjobim 2y ago

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.

krsdcbl 2y ago

"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

kfarr 2y ago

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.

xbar 2y ago

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.