
Fluent Design Is Microsoft's New Metro UI for Windows and More - MikusR
https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features
======
captainmuon
It's hard to see what this is actually going to look like, but if it gives
their UI back some more "definition" (or in UX jargon probably discoverability
of affordances) I'm looking forward to it.

I know skeuomorphism (as in: imitating physical materials, not in: using
metaphors from the physical world) is out, but considering we have these
awesome hidpi, high contrast screens (and cameras and light and motion
sensors), why can't we have convincing different materials in our UIs?

I was really disappointed that "Holo" didn't look like I imagined holograms,
and "Material" doesn't look more like paper or any other material. I'm
disappointed that the blur effect in macOS is so unphysical and illogical
(sometimes blurring the background, sometimes the titlebar, ...).

I wish MS or any future UI would have different types of (subtle!) material
effects. Frosted glass, thick refractive glass, reflective surfaces, matte
paper... not just "flat" or "blurred". And if pulled of correctly, it would
not look gaudy, it would be as convincing an illusion as force touch is on
MacBooks. Making me tilt my phone or laptop because I can't believe that there
is not actually a piece of paper beneath my screen!

Edit: Yay, it seems they are legitimizing the blur effect that is available as
an undocumented API now as "acrylic", and more materials are to come! But oh
no, it is the same as macOS vibrancy (also with potentially illogical
background and foreground modes) [https://docs.microsoft.com/de-
de/windows/uwp/style/acrylic](https://docs.microsoft.com/de-
de/windows/uwp/style/acrylic)

~~~
accountyaccount
Skeuomorphism is coming back in a measured way — originally it was kind of a
"this notepad app looks like a notepad" which ultimately seemed a bit absurd
because a yellow-ruled paper texture doesn't really mean anything in a non-
physical environment. It was more noise than signal.

...but now as you mentioned — these elements we're interacting with should
follow some sort of universal constants and are picking up associations of
physical reality that actually mean something. Elements move in from one
direction and out from another at set speeds, light sources are coming from
consistent places, animations radiate out from the source of interaction...

------
VA3FXP
Am I the only person who thinks that the UI peaked at Windows2000?

It seems to me that in Win2000 the entire 2D interface/look was perfect, it
refined the Win95/98 interface. Sharp lines allowing for easy visual
separation between elements. Excellent colour scheme. Buttons were buttons and
an obvious visual clue that they were 'clickable'.

(Disclaimer: I use i3 exclusively.)

~~~
mertd
"Clicking" on the little "x" to close the application window is near
impossible with anything other than the mouse. We can't​ pretend interfaces
like touch are gimmicks anymore. They're ​pushing a decade now in mass market.

~~~
Pica_soO
Yes, because one part of the demographics uses its fingers, we got to piss of
the other part of the demographic who doesen't. Man, i wish i could be that
lazy as a coder. Yes, boss - we kicked the ethernet support. Focus test shows
a near majority of our customers comes in via WiFi.

I would be so ashamed on this inability to combine form and function.

~~~
pas
Wifi uses Ethernet too :)

------
Animats
Fluent in what?

The video is all eye candy with quick cuts. It doesn't show anybody _doing_
anything. The discussion indicates that Microsoft wants to bring back pens,
since finger-pointing is so low-rez. They also have that new movable knob
input device. Both of those give tablets more desktop-like attributes.

Part of the idea is that you can write on anything. Didn't Apple try that once
about 20 years ago? I think it was called "Ink".

~~~
gavinpc
The video is amazingly inhumane. Things that presumably took many person-years
to create are shown for such a small fraction of a second, and in such rapid
succession, that it hurts my brain to watch.

I know that they are doing some fascinating work --- I own a Hololens, and I
think some of their research work is potentially game-changing.

But who is the audience for a spot like this? Do non-devs care about their
"design system"? Would devs not rather see something substantial,
instinctively dismissing this kind of razzle-dazzle?

~~~
FlorianRappl
Glad I am not the only one who only had "finally I get to see what they mean -
oops the 100ms timeslot is over" moments watching this video.

~~~
maxxxxx
That seems to be the trend in videos these days. It drives me crazy when they
show a car and it's 0.2s in a tunnel, 0.3s on a mountain and so on. You can
watch a whole video and still don't known it looks. But together with music
and sound effects it's cool.

~~~
Animats
Explanatory videos come in a few flavors, many of them bad:

\- Blipverts, like this one. Pretty, but useless. Typical use: Ads,
Kickstarter videos.

\- Talking heads with PowerPoint. Boring. Typical use: online courses, TED
talks.

\- Long single-shot videos of someone doing something complicated. Boring, but
useful. Typical use: how-to videos.

\- History Channel style. Video of important stuff with occasional
interpretive graphics and explanation. Tough to balance but can be done well.
Expensive to produce. Tends to oversimplify.

\- Classic industrial film. See anything from the Jam Handy Organization. The
Internet Archive has hundreds of these films. Good at getting concepts across.
Blah by modern standards. Narrated, but not much talking head time. Minimal
animation of details. Many stock shots.

That field needs some design work. If the goal is to explain (not sell), the
industrial film model, modernized, has potential. It takes more production
effort than a blipvert or a PowerPoint video, but less than a History Channel
video.

Top of the line in explanatory videos: "Victory through Air Power" (1943) [1]
This was made by Disney for one purpose - to convince President Roosevelt to
go with heavy land-based bombers as the main weapon in the Pacific war.

[1]
[https://archive.org/details/VictoryThroughAirPower](https://archive.org/details/VictoryThroughAirPower)

~~~
Animats
Classic Jam Handy: "Around the Corner", which explains how an automobile
differential works.[1] (Skip the first three minutes.) If you watch this, you
_will_ understand how a differential works, and won't forget it. An
explanation of Microsoft's new UI with similar clarity would be helpful.

[1]
[https://archive.org/details/Aroundth1937](https://archive.org/details/Aroundth1937)

~~~
gavinpc
Thanks for that. I'm the opposite of a "car guy," but that was a highlight of
my day.

~~~
Animats
There's a whole series of those films, all done for Chevrolet.

\- "What Stops Them" \- hydraulic brakes

\- "Tough Friends" \- automotive steel alloys

\- "No Ghosts" \- auto frame design for stiffness

\- "Horsepower" \- shows exactly what one horsepower is

\- "Balance" \- system integration of the automobile

\- "Precisely so" \- measurement and manufacturing precision

\- "Streamlines" \- air resistance

\- "Down the gasoline trail" \- from fuel tank to exhaust

All these are in the Internet Archive in the Prelinger collection of
industrial films.

Chevrolet really wanted to explain how an automobile works. These films are
much better at explaining than most of what we see today.

------
jesseryoung
Consistent design guidelines coupled with cross platform libraries is what
Google did right about Material design. It seems like both Apple and Microsoft
have failed to properly build this before and I have always disliked iOS and
Metro designs for this reason.

~~~
Numberwang
I know I'm alone in the this but I find material design truly horrible and I'd
love for it to go away.

Still you are right though about the cross platform thing

~~~
noisem4ker
I also don't like its aesthetic, plus I find it lacking in discoverability and
one-handed usability on phones. But consistency of execution is the one thing
it gets right, as GP says.

------
kelvin0
They should simply call it the 'loosely-based-on-Minority-Report-But-Rehashed-
Design'.

Full disclosure: I am not a Designer.

~~~
vogt
I am a designer, and I am not sure what most of this on the surface level is.
I dug a little deeper and saw some pretty basic component library stuff. I'm
not sure if this is just weirdly presented, I am behind the times, or both.

------
tengbretson
So instead of a mix of 4 different ui kits, Windows will now be a mix of 5
different ui kits?

~~~
WorldMaker
Fluent is "Modern Design Language 3.0" (aka "Metro 3.0"). It seems to be an
evolution of UWP, not a brand new UI Kit, and the code demos shown show a very
easy crossover from existing UWP XAML to add Fluent tools/design.

------
accountforty
From a cursory search it looks like there are no new design documents yet,
just a site with a bunch of buzzwords for now
[http://fluent.microsoft.com/](http://fluent.microsoft.com/)

~~~
captainmuon
If you click on "Build" in the top-right corner, there is more. A bit hard to
find.

~~~
accountforty
I missed that thanks!

------
bschwindHN
[http://fluent.microsoft.com/](http://fluent.microsoft.com/)

I like the "Motion" section with a video showing the Xbox One guide menu.
Anyone who owns an Xbox One knows the guide menu is laggy garbage with
confusing menus. I don't trust a company to suddenly get this stuff right if
they can't even provide a smooth and intuitive menu on a game console with 8
CPU cores.

Granted, it got a _little_ better recently, but there's still so many
improvements needed.

------
nancyp
Microsoft has a history of screwing up every other OS releases. After being
slight successful with window 10, It's their chance now to screw up again.
[https://news.ycombinator.com/item?id=4415403](https://news.ycombinator.com/item?id=4415403)

UI Looks back to Aero/Glass effect of Windows Vista: I wish they had learnt
their lesson.

------
Kenji
Am I the only one who just wants their desktop to look like Windows 95 for the
next 50 years? Except maybe a bit more bit depth and DPI. This design is
simply unsurpassed and everything new that comes out is a step back. There is
one feature that I would like from modern Windows window manager though: I
really like Windows 10's full-text search for settings.

~~~
chongli
I would really like an OS as simple to use as MacOS 9 but with a modern
filesystem, full text search, and keyboard shortcuts for switching apps.
That's it. That would be fantastic.

What made Classic MacOS so nice was that it was persistent. Each folder
remembered where its window was, what size/shape, icon size settings, icon
layout, sort/list view, coloured labels, etc.

Human spatial memory is a fantastic thing. It's so frustrating that we've
decided to throw that all away with modern UIs that don't persist anything and
windows that get reused (browsers). It's no wonder non-technical users
struggle so much that they've more or less given up on desktop PCs.

~~~
JoBrad
I'm pretty sure Windows has had the ability to remember folder-specific
settings since Windows 95. I don't know when window-sizing and location memory
came into play, but it definitely worked in Windows 7+. Until Windows 7, if I
remember correctly, folder-specific customization was all or nothing: every
folder had individualized settings, or all folders were treated the same. The
file-specific libraries (Documents, Videos, Pictures, etc) let you strike a
balance between those two extremes (among other things).

~~~
chongli
It does, but it's not the default. The default in Windows is that you have a
browser and opening folders reuses the same window. Classic Mac OS is not like
this. Every folder has a 1 to 1 relationship with the window showing its
contents. A folder cannot be open twice, and a window cannot change what
folder is displayed inside it. Applications worked like this too. An
application could only be open once. Trying to open it again would switch to
it.

The goal of all this is to help the user build spatial memory for everything
on the computer. By not having applications, documents, or folders move around
the screen of their own volition the user is better able to keep track of
them.

This mirrors a real-life desk where objects like papers, pens, folders, and
your calculator can be found right where you left them. If every time you sat
down at your desk those objects were rearranged you'd probably complain to the
cleaning staff.

------
douche
From TFA:

> Most of the changes include subtle additions like blur effects, which is a
> type of design we saw back with Windows Vista

And so the wheel turns...

------
slinkyavenger
This seemed like overkill until I remembered their hololens work. Now it makes
perfect sense and seems like a smart play.

------
marsrover
When I first heard about this a few months ago, I was excited. I don't know
why. Microsoft is cursed with terrible design and always will be. If they ever
designed something nice I'm pretty sure the universe would have to unbalance
itself to compensate.

~~~
Rapzid
I feel that's rather subjective.

I personally prefer the Windows 7 and Windows 10 interface to OSX. I really
liked metro; I also prefer the windowing system in general with the snapping
and other features. The designs of the surface studio, the surface book, and
surface pro are much more compelling than anything I've seen out of Apple in
recent memory. My goodness, that surface studio..

IMHO MS is a MUCH more exciting company ATM from a design standpoint; or from
just about any other point I would stand.

------
andy318
[http://fluent.microsoft.com](http://fluent.microsoft.com) doesn't render in
Safari properly

~~~
kyriakos
Tried and works fine in: Windows/Chrome Windows/Edge

------
pbarnes_1
Yeah these design documents always look nicer than the actual implementation.
In practice Windows 10 looks... lifeless.

------
ehosca
does it fix the scrolling with WPF?

------
0xFFC
Did they fix font rendering? if they did I will go back to windows. If they
didn't. No thank you.

Just fix fucking font rendering, I did use Windows machine as my workstation
for 4 years, But I had to switch to Ubuntu, because of ridiculous font
rendering they introduced in DirectWrite. I don't have money to pay for new
monitor every 2 years, and I am quite happy with my dual monitor 27 inch 1080p
until windows 10 changed font rendering to DirectWrite. It is fucking disaster
in low dpi monitor. As always Microsoft ignored their current users in pursue
of new users. I haven't seen this attitude from any other company. I haven't
seen apple make font rendering on old MacBook worse to force people to switch
to new MacBooks. Or I haven't seen something similar from Google. This is
fucking total disaster. As someone who reads text for whole day (programmer) I
care about my eyes and it fucking hurts my eye to see font rendering in new UI
(UWP) and Edge.

p.s. Old/win32 application do use old rendering engine and are acceptable.

~~~
gizmo385
I don't think I've ever noticed anything too strange with font rendering in
Windows. Can you (calmly) explain what you're talking about?

~~~
captainmuon
Not the parent poster, but basically, they dropped RGB subpixel rendering, and
now use plain anti-aliasing for all font sizes. They may have changed hinting
and anti-aliasing parameters, too. No difference on a HiDPI screen, since you
don't need subpixels there, but on standard definition screens many find it
looks a bit blurrier (me included).

Supposed benefits are that it is easier to render text on colored backgrounds
(you can just render with alpha to a buffer and combine it with the
background, with RGB subpixel rendering you have to consider the background
while drawing), and you can scale text without color artifacts.

To be honest, we have plenty of computing power today, and our GPUs are
underutilized most of the time anyway. I wonder why we can't just have RGB
subpixel aware rendering of everything (not just text, but also lines and
polygons) implemented as a kind of shader pass. Render everything at 3x
horizontal resolution, and merge using an appropriate shader. And if you have
a HiDPI screen, just drop the shader.

~~~
Jasper_
It's actually not possible to accurately composite subpixel AA using the GPU
since you can't configure blends per-channel. To do it accurately, you need
three different alpha channels.

~~~
hrydgard
It is actually possible to do using a feature called dual source blending,
which unfortunately is so rarely used that drivers tend to fail to implement
it properly. But it does give you the possibility to use 3+ alpha channels
with full hardware acceleration, at some memory cost.

Though since DPIs are going up and 3 alpha channels is such an unusual thing,
I guess they just figured it wasn't worth the trouble.

