Fluent Design System | Hacker News Reader

Fluent Design System

fluent.microsoft.com

56 pointswiradikusuma44 comments

Previous discussion: https://news.ycombinator.com/item?id=14317171

Interface design is very, very important at this stage of evolution of computing, and I am disappointed in the overall direction taken by the industry in this regard. What we (desperately) need is work similar to the one that was done by Douglas Engelbart and still done by people like Alan Kay and Bret Victor. Instead we get things like Bootstrap, Metro, Material Design and now Fluent. (I am aware they are very different in scope, but their overall influence on real applications is quite similar: establishing certain wide-spread normative patterns.) Shallow and reactive things. They don't invent and define new ways of UI interactions and information presentation (examples from the past: clipping window, icon, hyperlink) and concentrate mostly on how things look.

You might counter that this is the domain of MIT Media Lab rather than Microsoft and Google, but at this stage new UI concepts have to be adopted by entities with significant influence to be adopted at all.

Fluent targets AR/VR too. Seems like it qualifies as inventive.

I agree. To me the three most powerful pieces of software on a computer are a function, a string, and an array. You can do almost anything with these three applications, but the UIs for them is still utterly atrocious.

Whoever designs the first easy-to-use version of this trip will unlock a massive amount of creative potential.

It probably wouldn't register on your radar for "creativity" but the first killer app for PCs was an application of the "list" or "table": spreadsheets (https://www.joelonsoftware.com/2012/01/06/how-trello-is-diff...).

The spreadsheet was a major move forward for unlocking creative potential. A part of that probably brought us the financial crysis of 2007-2008, but nobody can complain that it wasn't creative :p

Columns are nice but without functions they don't really rise to the level of arrays. And the UI for Excel functions is probably one of the worst interfaces for functions we have.

Also Excel clouds the ergonomics of the lists and functions by duplicating common functionality in bespoke UI and littering it everywhere so it's not a very natural path from using a function through the UI to using it in another function.

Also Excel columns add weird semantics by putting every column in the same rowspace.

Also arrays have names. Columns are usually just numbered.

In other words: yes, spreadsheets are the most useful end-user programming tool we have, but it has so much extra junk layered on top of it it's nigh unlearnable. And it's not a starting point, it's a dead end. An EUP environment built on a spreadsheet is a car built from horse parts.

A well designed array UI would have the semantics of an actual modern array. Push, pop, each, etc. A well designed function UI the same. And both need to be presented clearly without distraction to count as a "good UI" in my book.

I have a very ambiguous opinion on that.

Wild experimentation always washes off after some standard gets any big adoption. So, it's very natural that our interfaces are evolving slowly and iteratively. It's expected as otherwise things would break a lot.

Yet, it's unimaginable how far we are from every concept in a interface being free to interact with every other concept on the ways that make sense. Current GUIs are incredibly brittle and underpowered. Why are we not getting a big revolution there?

Counter point: if you're a giant software company, your focus is good looking UI and new UI concepts. Not just one. Making things shiny and instantly useable is good for your product. Implementing new UI for the sake of progress is silly. I'd argue that these software companies move forward when it makes sense for them and it will always be that way.

I completely agree with you.

I came to the conclusion that we need a completely new language, a new communication paradigm. We can't continue to build single-purpose apps for every single thing. We need a single interface that's general-purpose enough to let people communicate what would today take 1000 different apps (or 1 natural language).

I believe that the future of UI will be a mix of task management concepts (to-dos, task dependencies, task delegation, timelines) and binary interaction (Akinator, Tinder, Mechanical Turk). Add a graph knowledge base, a blockchain, a network of trust, smart contracts and you're set.

I've been trying to start a discussion about this for years, without success. If anyone is interested in discussing this space, I encourage you to let me know.

What connection does a blockchain has with interface design?

None. That's an implementation detail.

What you're describing sounds like the Apple, Google, or Facebook ecosystem. How is it different from any of those?

Aren't those things voice/language processing aim to solve? That is to liberate the user from the device/interface and let ask for - as we typically do human to human - what then want and need? And voice to VR and many things change. Some, perhaps, not for the better. Welcome to The Matrix?

Natural language interfaces are horrible. I don't know what people doing voice recognition and language processing are thinking. This is extremely short-sighted, and doomed to fail.

I'm thinking about a completely new communication paradigm, one that's short of a brain interface.

Perhaps. Which I think is why brain interface is the Holy Grail. No typing/touch. No vox. Just think it.

p.s. Natural language is still in it's early stages. Think of the early (non UI) PCs. That is, over time voice as an interface will get better, and better. It will get there. Just not yet.

Link to a channel 9 recording of yesterday's talk about Microsoft Fluent Design System: https://channel9.msdn.com/Events/Build/2017/B8066

It has a bit more content than the landing page IMHO.

Ugh. This looks like MS trying to one-up Material Design (itself already on the rich side), and in so doing I think they've gone a step too far.

It does look good, in a sci-fi movie UI kind of way. But it would be a nightmare if many of the apps I use day to day started to look this way. All the animation, depth, texture - it's too attention grabbing, self conscious, and annoyingly, deeply, branded.

Software is not supposed to be a high-design object, taste is very individual and any object with so much aesthetic weight imposes on our consciousness. While highly designed things can bring us a lot of pleasure, we should be free to judiciously choose them for ourselves.

Many pieces of software are non-negotiable high-use tools. They should be, first and foremost, highly usable - and if there's an insistence on imposing an aesthetic experience on the user, it should be acknowledged that the user likely has no choice but to use the software, and may be temperamentally or socioeconomically unlikely to appreciate the aesthetic experience being thrust upon them. (I wonder what my 75 year old Russian mom would make of all the depth effects, Windows 10 already confuses her and hurts her eyes.) So if we're going to insist on infusing our software with some particular design aesthetic, it should at the very least be light, minimal, and easy to ignore for those who aren't interested and just need to get their work done.

They don't say it at all, but perhaps the biggest change here is that they're making headings big and bold now. For quite a few years, Apple, Microsoft, and Google (even pre-material) all seemed to be competing on thinnest, smallest, ultralight-est headings.

edit: I stand corrected. Their marketing site and all their videos are (apparently) inconsistent with their guidelines: https://docs.microsoft.com/en-us/windows/uwp/style/typograph...

Also: https://docs.microsoft.com/en-us/windows/uwp/style/ for examples and code.

The calculator example for Acrylic[0] looks atrocious: https://docs.microsoft.com/en-us/windows/uwp/style/images/ac...

What is that trying to convey? Large spaces with no division? Looks broken.

0: https://docs.microsoft.com/en-us/windows/uwp/style/acrylic

I think the trend towards more animation is fine on a micro-scale – buttons and so forth — but I predict there will eventually be a big backlash against these huge, complex parallax transformations. They are just too exhausting to watch.

Agreed, but I imagine that the parallax/animation aspect will be used sparingly, or very discretely, and only within a few applications. I would be towards the shading, transparency, and having the content cut off flush to the bottom of the window being the most common use of their fluent design principles.

I will be very upset/nauseous if they overuse the parallax effect. The settings will need an off switch.

Just an FYI, click 'Build' in the upper right for actual information.

That video was essentially useless seeing as the clips never lasted for more than a split second (maybe I'm just bad at focusing this morning?). Other than that, this looks pretty good. I really like the white/monochromatic stuff I've seen floating around on Twitter lately. (I'm a Mac guy that hasn't used Windows since 7.)

What is it exactly?

It uses ML and AI in the cloud to identify people who don't read the linked article before commenting. It is working brilliantly.

I read the article, and I still have no idea what "Fluent Design" actually entails.

It's literally the first sentence

> An eloquent design system for a complex world

It is a set of design guidelines described with flowery language.

Right, but what makes a design fluent? Are there guidelines? Other than using "light", "depth", etc.?

flowery language

The next time your read about a tech or new startup that uses really unnecessary words, come back and visit this thread

I had read it fully, I didn't come away understanding what it was exactly or how I go about using whatever it is though. I realise now that it's Microsofts answer to material design.

Microsoft upgaming Google Material Design

For now it's a few things that are available out of the box for XAML apps that target the Fall Creators Update SDK:

1. "Acrylic". It's the blur/color-blend/noise effect that you can see on the Edge tab bar or top of Photos app in the Fall Creators Update.

2. Mouse over lighting effects. You can see that briefly in the video when the mouse over a ListView and tiles.

3. Lots of small animations

4. "Depth", meaning 3D transforms and shadows used for emphasis

Lens flares on everything! To the future!

The video wasn't very good at explaining the system, and the website itself didn't even use the same effects that were used. For instance, there was heavy use of parallax scrolling in the video, but the website didn't have it at all. Seems like a missed opportunity.

The website has plenty of parallax scrolling, especially with the background. Maybe it just isn't on mobile? It is subtle.

Strange, it is working now. Chrome Mac.

But yes, it is subtle.

If you're on the fast track for Windows 10 insider builds, you can see a preview of this by opening your calculator. I expect you'll be thoroughly disappointed.

I like it enough to be curious. It's still a bit fluffy (scale wasn't clear). Still something there.

With Firefox on Xubuntu the site is unusable -- zooming down to 30% you can see most, but not all, of the text.

Maybe it's my system, but Microsoft doesn't deserve the benefit of the doubt.

It's broken with my up-to-date Chrome on MacOS. I could see the site properly with Firefox Aurora.

Aside from the sketchy web page, though, the site is very vague. Yeah, I see there are elements to design but what is the "Fluent Design System" and how does it champion the use of those elements?

Reply on news.ycombinator.com