Blur background with semi-translucent pop-up, or clear background with blurred pop-up

Question

I have seen it done both ways:

1. The background content is blurred, and the pop-up is semi-translucent.
2. The background content remains clear (no overlay) and the pop-up itself has a blur.

For the left image, with a blurred background, the focus is drawn to the pop-up, and I could be wrong, but it feels that this more accurately mirrors what our eyes do, focusing in and out of foreground and background.

For the right image, this is sort of going in more the "frosted glass" direction, perhaps more a of a modern / sci-fi feel to it as well. I should add that the left image needs a bit of work with shading etc so it pops a bit more.

Is this down to personal designer preference, or is there some solid thinking behind choosing one over the other? This would be for software use.

Answer 1

The idea behind having the page content visible in the background is to keep the user connected to the overall task flow. Pop-ups have the inherent fault that they interrupt the current task flow with something that demands all of the user's attention. In cases where the user goes AFK, returning to the pop-up and without any memory of the actual objective or the stage of the process, having the background visible lets the user know where the pop up came from.

So pop-ups have a translucent overlay to create emphasis on the pop-up content but the background should not be completely opaque or blurred to hide everything. If it is something like a carousel of reels and does not have a strong reference to either the scroll position or other page content, then perhaps the background can be blurred.