As an avid listener of Windows Weekly I often hear discussions between Paul Thurrott, Mary Joe Foley and Leo Laporte about Microsoft’s Fluent Design. Microsoft continues to evolve the visual language of Windows and thus it’s a regular topic on one of my favorite podcasts. I’ve been noticing it here and there myself, mainly in system dialogs, but I’ve never really paid any attention because none of the applications I use on a regular basis make use of it – and currently I’m rather happy about that fact. Just recently though, I was struck by one effect in particular and that was the spark that got this blog post going. To be honest, in most cases where I notice these Fluent Design elements I think of them as rendering bugs. Like sometimes in games, when the graphics driver is not yet optimized, or a badly programmed game engine draws odd pictures sometimes, flaws in an otherwise normal picture. I have a few examples to show to you.

The first occasion where I noticed Fluent Design was Microsoft’s Firefox downloader Edge browser. I don’t recall the exact version in which I saw it first, but after every update I check Edge just for the sake of curiosity and at one point I wondered about the highlighted edges (no pun intended) that sometimes occurred in the browser’s URL bar.

I mean, it makes for interesting screenshots, that I must admit, but seeing it in action looks wrong. The other thing about Edge, it doesn’t seem to work all the time. A more extreme example is that this “light” around the mouse that highlights things users can interact with bleeds into other elements. It’s not local to one widget.

Here you can see how it highlights the two buttons in addition to just a part of the address bar. The further away an object is, the less light shines on it. Just like in the real world. It makes sense “philosophically”. Let’s look at another example (sorry for the fake cursor in the images, but I have no clue how to record a screenshot with one in it).

This is part of the calendar that pops up when you click the date and time section in the system tray. Do you notice how far out the light spreads? In motion this is so incredibly distracting. And when something is distracting it is not helpful. This was the first time where I found this kind of design rather ugly and annoying.

The issue that made me write this little piece is rather hard to convey as it was a spur-of-the-moment thing. I don’t recall the exact circumstances so it’s hard to reproduce exactly, but I think the next picture shows at least a little bit of what I mean.

There are a few elements where the background is blurred and shines through. The old Aero Glass effect from Windows Vista, only on a bigger scale.

This isn’t new to me, since I occasionally work on a Mac with the latest macOS software. They’ve been doing this sort of thing for a while now and Microsoft has adopted this design element as well. It is way too pronounced and should be more subtle. What I’m trying to show in the image above it how the dark background is making it harder to read the text. The situation where I encountered this was much more severe, maybe because of a different background image (mine change regularly) or some additional content in the terminal (or whatever was open then).

As a comparison, I tried to stage the same scene on macOS and this is what I was able to come up with. I searched for an image of the Windows terminal, made a screenshot of it and opened it in Preview. Then I loaded a project in XCode, because that’s an application where the side panel implements this milky glass effect.

Initially, I laughed at Apple when they first announced these kinds of effects in macOS, basically copying elements of the failed Windows Vista. But they have evolved nicely, and I like them. Much more than the Windows equivalent. But that’s quite easy because I don’t like the Windows version of it, not in its current state.

(Btw: only Apple seems to know how to make a good-looking UI with the color Gray…)

What I’m saying: in my opinion this kind of design goes too far. In that situation I was taken aback, and the looks of Windows distracted me, even for just a little bit, from what I wanted to achieve. This is not making me more productive and I thought that is exactly Microsoft’s goal.

I do want to end this on a positive note, so I also have an example of something that I think is good.

Hovering over an item in the list highlights it just like one would expect.

(Well, almost. Much unlike the address bar example I showed earlier, the whole area is colored evenly. No light effects here. I wonder why…)

Clicking it darkens the whole item except where the mouse is, like physically putting pressure on the pixels so they lighten up a bit. It’s pretty similar to how Android’s Material Design handles tapping on things. A small circle expanding around the area of “contact”. This is a subtle effect that gives a nice feedback.