Why OS X's vibrancy effect doesn't quite work in Safari

[warden]

Apple treats Safari like it is a document-viewer, displaying documents of varying graphical and visual complexity. OS X's vibrancy effect typically helps you anticipate upcoming content, get a sense of context, smoothly transition between content and chrome etc. This is how the vibrancy effect appears:



But most popular webpages are more complex: they have fixed toolbars, search boxes, etc. at the top of the page. Think YouTube, for example. The vibrancy effect only appears above this, in the window chrome, after the relevant graphic has already scrolled out of view. Thus when the colours reappear, they are more of a distraction then anything. This is how the vibrancy effect appears when navigating YouTube:



Obviously, in practice, motion is a factor. This works in favour of simple webpages, where the content subtly bleeds away into the chrome and fades into the top of the display. However, motion probably increases the distracting nature of the vibrancy on complex webpages, where seemingly-random colourful patches will appear to speed up and down past the large, colour-free header fixed at the top of the page.

Apple’s view of webpages as colourful documents plausibly stems from its push towards apps as the houses of complex content, and its general lack of investment in pushing the ‘web’ forward. It’s interesting to see how they overcome this problem on their own website, which itself has a fixed menu bar at the top. This menu bar is weakly transparent, so content never disappears and then reappears in Safari’s chrome - it smoothly transitions from in-focus to partially hidden by the opacity of the menu bar to an abstracted splash of colour once behind Safari’s chrome.

Thoughts? Has anyone had the same experience with distracting vibrancy in Safari (versus elsewhere in the system)?

 

[leman]

Nice post and great analysis, something that is unfortunately lacking on these forums I can't really comment that much on your post though (because there is not much to say), except 1) you are of course right and 2) personally, I never though it was distracting, but I can imagine that some other people might.

 

[KALLT]

I find the effect purely cosmetic; no functional benefit. The main window is your view port and since you cannot actually see what is underneath the blur, it adds nothing. Even if it isn't distracting, it does generate unnecessary input for your eyes. I find the browser in Mavericks much more focussed and relaxing for that reason.

 

[mapleleafer]

I have no idea what a "vibrancy effect" is.

purely cosmetic; no functional benefit

Apple's new motto.

 

[KALLT]

I have no idea what a "vibrancy effect" is.

Vibrancy is what Apple calls this frosted-glass effect. It's a combination of a gaussian blur with added colour saturation; the colour blobs underneath the toolbars, sidebars and the Dock.

 

[leman]

@KALLT: the idea behind the translucent toolbar is to create the illusion of depth, so that the toolbar appears above the content. Safari is maybe not the best implementation of this, but the effect is really nice with Dock, Menu, the notification sidebar as well as all the UI popups. So yes, it has a function, even though I agree with you two that the utility in Sfari is questionable.

I have no idea what a "vibrancy effect" is.

Apple's new motto.

So what exactly is your contribution to this conversation?

 

[KALLT]

@KALLT: the idea behind the translucent toolbar is to create the illusion of depth, so that the toolbar appears above the content. Safari is maybe not the best implementation of this, but the effect is really nice with Dock, Menu, the notification sidebar as well as all the UI popups. So yes, it has a function, even though I agree with you two that the utility in Sfari is questionable.

Yet the scroll bars still suggest that the toolbar has a hard edge and that the content is still limited to the scrollable area. You can't actually move anything under the toolbar, but the vibrancy effect suggests that there is more to it when in fact there isn't. The illusion is in that sense conflicting: it presents a limited area to you in which you can see content, but pretends as if the toolbar is laying on top. It's thus an unnecessary layer that doesn't do anything.

Dock and menu bar have always had this illusion of depth through shadows and transparency. In fact, it was actually much clearer before, as you could see the (illusory) depth from a distance. The vibrancy effect is merely superficially 'deep' and more an aesthetic choice, rather than a functional one. I can understand that people like it, but it makes no functional sense in the way the OS X currently works.

 

[mapleleafer]

More than this:

So what exactly is your contribution to this conversation?

I doubt I was the only person reading this thread that did not know what a vibrancy effect was. Thanks for the explanation, KALLT.

 

[Cougarcat]

Vibrancy is what Apple calls this frosted-glass effect. It's a combination of a gaussian blur with added colour saturation; the colour blobs underneath the toolbars, sidebars and the Dock.

Where do they call it this? I had no idea what you were talking about either. You get rid of it by turning on "Reduce Transparency," which I've done. (Although it's actually translucency, but never mind.)

Safari is probably the worst offender, but I hate it almost as much in any window chrome for similar reasons. Though if there were a middle-of-the-road option--turn off window chrome transparency, leave it alone everywhere else--I'd probably take it.

 

[Cougarcat]

Please delete

 

[KALLT]

Where do they call it this? I had no idea what you were talking about either. You get rid of it by turning on "Reduce Transparency," which I've done. (Although it's actually translucency, but never mind.)

Safari is probably the worst offender, but I hate it almost as much in any window chrome for similar reasons. Though if there were a middle-of-the-road option--turn off window chrome transparency, leave it alone everywhere else--I'd probably take it.

For example here: https://developer.apple.com/library...erience/Conceptual/OSXHIGuidelines/index.html. They called it like that in the developer sessions too. Turning on Reduce Transparency reduces everything to a dull grey. That's even worse, in my opinion. I have returned to Mavericks anyway, so it doesn't concern me anymore for the time being. I still think that it is simply superior in terms of design affordances and contrast. It just looks a bit too glossy and clumsy here and there, but it's just nicer to work with.

 

[Cougarcat]

For example here: . That's even worse, in my opinion. I have returned to Mavericks anyway, so it doesn't concern me anymore for the time being.

Ah, so that's its technical name. But it's not the user-facing one.

Mavericks's windows are a "dull gray," you know Though I can understand why you'd think it looks better. It's not as plain.

The thing about translucency is that the looks vary. Sometimes it looks better, other times it looks like absolutely horrible, like pink mold is growing underneath the UI. Reduce Transparency may look a little plain, but at least it's consistent and, most importantly for me, always perfectly readable.

 

[KALLT]

Mavericks's windows are a "dull gray," you know Though I can understand why you'd think it looks better. It's not as plain.

Dock and menu bar look terrible with Reduce Transparency on. The toolbars look indeed much better, like they used to look before. It's unfortunate that you can't pick and choose. I also think the problem with the grey colour is that text isn't that more legible like on Mavericks, where the typeface is also thicker and spacier. Applications like 1Password have become really annoying to use as a result. When I switched back to Mavericks and loaded an older version of 1Password I found it instantly more pleasant to use and likeable, with its dark sidebar and darker and bigger text.

The interesting thing for me is that I didn't need to adjust to Mavericks again. It looked a little weird, but nothing else. Whereas if you use Mavericks and go back to Yosemite or El Capitan again after a week or so, the experience is more negative at first. It needs a bit more adjustment, even though I've used the new style since the public beta of Yosemite.

 

[Cougarcat]

Dock and menu bar look terrible with Reduce Transparency on. The toolbars look indeed much better, like they used to look before. It's unfortunate that you can't pick and choose.

I never found the dock and menu bar that bad, but I would give $5 to anyone who found terminal commands to pick and choose. But I suppose they would have already been found if they existed.

What does look terrible to me with Reduce Transparency is new in El Cap: the multiple desktops bar in Mission Control. It used to be a simple transparency effect which remained intact, but then they switched to the vibrancy so it's a massive gray bar. But at least I don't have to look at it that much.

Not to switch the topic to iOS UI, but I find it strange that I don't mind transparency there. It probably has to do with the fact that there's less chrome, but you can still get a mold effect with Notification Center.

 

[KALLT]

Not to switch the topic to iOS UI, but I find it strange that I don't mind transparency there. It probably has to do with the fact that there's less chrome, but you can still get a mold effect with Notification Center.

I think it's probably more acceptable because there isn't the same need for depth as on a desktop OS. Moreover, the effect does give the optical illusion that the usable screen surface is larger than it actually is. You can see this clearly when you compare apps that use white navigation and tab bars and third-party apps that user coloured versions. The former look spacier, whereas the latter look a bit crowded. I am not sure whether that is because of the colour or the vibrancy effect though.