Fluent 2 Design System | Hacker News Reader

Fluent 2 Design System

fluent2.microsoft.design

126 pointsvyrotek95 comments

It's too bad that Microsoft as an organization doesn't care about good design. I don't look at Satya Nadella and think of a man who has taste. And Microsoft doesn't have a Chief Design Officer, as far as I know.

Instead, Microsoft has VPs. So there's no one person at the helm saying, "This is the vision and where we're heading."

As a result, I suspect there are actual good designers at Microsoft trying to start movements from within, and those have bubbled up to what we see today as the progression of Microsoft's design through Fluent from Metro and prior.

But because there's no one at the helm, these efforts will always be isolated.

There will never be anyone saying, "Let's carry these efforts across products and down to the UI." "Let's deprecate and discontinue all of these fragmented UI frameworks. Moving forward, Microsoft will only create UI using Fluent UI."

Worse yet, even if someone tried, Microsoft has tried and failed again and again and again so why would you bother? It's clear Microsoft's UIs are shifting sand compared to Apple's platforms or even Linux desktops!

The ultimate indictment here is that Microsoft yielded the UI decisions for the one decisive creative advantage which they have, stylus computing, to Google so as to dumb down styluses to the lowest common denominator of Android styluses.

Why does my digital stylus function as an 11th touch input and scroll since Fall Creator Update?

I handed a stylus to a sales associate at Best Buy and challenged them to select text on a Windows 11 computer and they were unable to do so --- but were instantly successful on my Samsung Galaxy Book 12 running Windows build 1703 which allows this to function as it has since Windows for Pen Computing (and Go Corp.'s PenPoint before that).

I'd give my interest in Hell for someone to make a nice stylus computer running Linux, or for Apple to make a Mac which has touch and support for the Apple Pencil.

Is it possible to hack the Apple Pencil to run in Linux?

It’s not exactly what you asked for but Sidecar works very nicely with the Apple Pencil if you have both an iPad and a Mac.

I don't need an iPad --- there aren't any apps in the App Store I want to run.

I need a tablet computer w/ a file system.

My current setup is:

- Samsung Galaxy Book 3 Pro 360 w/ Wacom EMR stylus running Windows 11 --- I have to keep the Settings app open and constantly toggle the option for "Let me use my pen as a mouse when it's available" on and off depending on which app I need to use - Samsung Galaxy Note 10+ w/ Wacom EMR stylus --- on-the-go notetaking and sketching and reference to notebooks from... - Amazon Kindle Scribe w/ Wacom EMR stylus --- ebooks and full-fledged note-taking and free-form sketching - MacBook w/ Wacom One to afford a Wacom EMR stylus --- the screen on the Wacom One is dim and low-resolution, but workable and being able to seamlessly switch from working on the Mac to taking notes on the Kindle Scribe makes it worthwhile --- that said, I'd gladly update to a device w/ a better screen but the same stylus technology

The previous high-water mark of my technology usage was a NeXT Cube w/ a Wacom Arz tablet and NCR-3125 pen computer w/ a Wacom digitizer (unfortunately on/off only, not pressure sensitive), but again, being able to work on my Cube, and switch to note-taking was well worth it.

> "Let's deprecate and discontinue all of these fragmented UI frameworks. Moving forward, Microsoft will only create UI using Fluent UI."

But then, "Microsoft Bad" because they broke 30+ year old corporate apps many enterprises depend on. Or those same enterprises will then hold onto Windows 10 because "our stuff just works there" and you get even higher fragmentation.

The way to do it would be to redesign the controls in Win32/MFC drawing routines for them to be consistent with Fluent Design, not create yet another UI framework that would supposedly replace it.

> I don't look at Satya Nadella and think of a man who has taste.

While I generally agree with your point, this is unfair.

If you're trying to set-up a comparison with Steve Jobs then ok, Jobs did act as guardian of Apple's sense of style and taste. And while that kind of worked for Apple, during one period of its evolution, it's arguably not a necessary role for the CEO of a multi-billion dollar global business.

On the other hand, Apple became a multi-billion dollar global business because it had style and taste other companies didn't.

I don't understand your point. There are several multi-billion dollar global businesses, including Microsoft, that are successful without Apple's focus on style and taste.

Especially when they kinda target different markets. Jobs set up Apple to completely ignore the enterprise space.

I look forward to each redesign because it means one more style gets added onto the heap of inconsistent UI. You can have window dialogues with UI elements from most of the NT eras open at the same time.

Good time to repost this article, detailing the various UI inconsistencies that persist to this day in Windows: https://ntdotdev.wordpress.com/2021/02/06/state-of-the-windo...

A comment there says:

there is a windows 3.1 directory picker in “odbc data sources” utility

Found it (Win 10, 22H2):

https://i.imgur.com/JgWa0Wa.png

Microsoft’s attempts at Fluent over the years are a striking example of why engineering and design need to work hand-in-hand.

On Windows, concepts like acrylic and mica are nice, but are terrible for performance over Remote Desktop, RDP being a core strength and differentiator of Windows (especially with the push to sell cloud-based subscriptions and thin clients).

The other thing that drove me nuts is lack of care for low-res (aka full HD) displays, where rounding and thin borders leads to visible artifacts in common controls. A designer who uses high-end mac devices will never see these things. UI/UC Design isn’t meant for museums, it needs to be built in dialog with the real world application.

He'd see those things if he paid any attention to user feedback, those have screenshots (though admittedly it's still be a bit too late of a notice)

There’s the same lack of care for high dpi screens too. High dpi laptops will often have random controls at double size with external 1x displays. Looks ridiculous and is difficult to use.

> The other thing that drove me nuts is lack of care for low-res (aka full HD) displays, where rounding and thin borders leads to visible artifacts in common controls. A designer who uses high-end mac devices will never see these things. UI/UC Design isn’t meant for museums, it needs to be built in dialog with the real world application.

I can't quite picture what you're describing, but I'm curious. Do you have any references to this somewhere?

https://github.com/microsoft/microsoft-ui-xaml/issues/2751#i...

For those that don't know, the recommended way to get Fluent UI styled controls natively is to use WinUI 3.

The fun part is that WinUI 3 is not bundled with the OS, meaning that whenever they make updates to the controls (say... Fluent 3) any apps built with an older version of WinUI 3 will still use the old look.

Enjoy an even worse hodgepodge of UI styles everyone!

I guess you can't have it both ways. I think (and this is perhaps controversial even though it shouldn't be) apps looking "consistent" on desktop is a ship that sailed long ago.

I use a handful of apps on desktop and they don't look consistent anywhere. Spotify, VSCode, Rider, etc. Desktop design has entered the same space as web design now. Not just for the Spotify-ish apps that are basically web like, but also for everything else. The Win32/Qt/etc era is gone. Dead. It's not coming back.

The OS should provide services though for security and UX consistency in a few cases. One example could be permission dialogs, file dialogs and so on. That does mean that it's a jarring UI jump to go from the app to a dialog opened by the app, but that's fine and unavoidable.

But in the end it comes down to this: do I want my app to look the same to everyone, or do I want my app to look the same to the user as the other apps on the user's desktop? And my answer 20 years ago was "desktop consistency!" while my answer to day is the opposite. Consistency within the app is important for usability though (here is where Windows itself fails with its hodgepodge, since you can argue it's a single "app"). But consistency between N apps running on the same desktop? Not happening. Given that, I'd consider it quite a nice feature to be able to "freeze" my app, and not risk a future update of it sucking in newer OS libraries. The trend is towards more and more self contained apps with vendered everything.

You aren't wrong, but this is mainly due to OS vendors (specially microsoft) dropping the ball. Mobile apps, even when they have highly customized looks, use native controls. It's not just the looks but also the behavior that native controls provide.

Nice to see Microsoft trying to unify the look and feel of their products. I hope it also comes with desire to improve performance (cough Teams).

I get the feeling that Fluent 2 is not really meant for open use by others as it is extremely opinionated even in the way one is to install it? For example, the web target only has a React variant (e.g. no vanilla html/css/js). Also the iOS/macOS library is called “fluent Apple” which is not a good name for a package in that ecosystem.

I'm very pessimistic; MS tried this back in 2012 with Windows 8. Everything from Windows to SharePoint to Office and Visual Studio tried to adopt the whole Metro design stuff, but they ended up creating many inconsistencies. They made some minor changes when they refreshed it again with Windows 10 in 2015 and from then until 2022 (Windows 11), they had settled on Windows 10's design language, but now this attempt to refresh will just introduce more inconsistencies.

Microsoft has even more user-facing products in 2023 than they did in 2012, so it's probably going to be even worse.

It is worse than you describe. Windows 10’s design language was a moving target, with acrylic (later replaced by mica in Windows 11) introduced in 2017, and a move to rounded elements coming out way before Windows 12 in ~2019 (or maybe 2018) with WinUI2.

For much of Windows 10’s life, even the built-in apps like Maps were visibly inconsistent internally on things like corner rounding and hover effects.

https://techcommunity.microsoft.com/t5/microsoft-teams-blog/...

The new version consumes hundreds of megabytes less memory. It consumes as much memory conducting a video call as the old version does when idle.

> Microsoft trying to unify the look and feel of their products.

No, they aren't. They are adding another voice to the existing cacophony.

I am not impressed when the homepage lags badly on my Samsung S10e. I would imagine this is due to the transparent background blurring Fluent design loves, which stops after the "newsworthy" header. At least the docs are smooth

I'm on a 12th gen Intel i5 4 p-cores and 8 e-cores, 16-thread, 16GB RAM Lenovo laptop and it's lagging. Poor showing on MS's part that their flashy new design system is this slow.

Also lags on an M1 macbook pro.

The image / banner at the top of the page also has tearing when you scroll.

Also who thought the "change the layout on hover" giant text ('Web React', 'iOS', and 'Windows') was a good idea?

Lags on my Ryzen 9 3900x desktop with a respectable cooling solution and no other programs running.

I'm surprised they had the audacity to post this.

Unbelievable that it lags so much. I can't trust that this design system is any good, if even their main page has such terrible UX.

This is not a design system, this is just a UI library and an incomplete one at that. A design system would define semantic colors and fonts, a navigation hierarchy, and a far more exhaustive list of custom components that can represent all the possible types of data that an application ever needs to present.

Many of the things you mentioned seem to be present under the "Design Language" menu.

Oh wow, what a terrible design. Viewing from mobile and I did not know that the upper left icon is a hamburger menu.

Indeed. It cannot be your mistake.

Indeed! Fickle designers, always reinventing the wheel!

Remember HIGs? Pepperidge farm remembers.

> This design guide was created for Windows 7 and has not been updated for newer versions of Windows.

Apple still has one but ignores it all the time. It's a sad shell of what it used to be.

Huh? Apple’s apps are consistent with their design system to a large and tangible extent. The typography styles, semantic colors, and UI components all exist in their SDKs for both UIKit and Swift. And when something changes (typically every WWDC), the HIG website gets updated. What do you mean they ignore it all the time?

The types in the Code section of the documentation are definitely some of the documentation of all time:

    WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<AvatarSlots, "root">, "color"> 
    & { active?: "active" | "inactive" | "unset"; activeAppearance?: "ring" | ... 2 more ...; ... 4 
    more ...; size?: AvatarSize | undefined; } & RefAttributes<...>>> | null | undefined

Enterprise-ready Typescript

Uff.The active one is optional, but also allows "unset" as a string, and does not allow null or undefined.

Why not just have it optional and lack of it means it is unset?

https://www.typescriptlang.org/docs/handbook/advanced-types....

I'm somewhat happy to see this as a reasonable alternative to Google's Material Design for (for lack of a better word) serious applications.

I am still hoping that someone could come out with a design system that could get us a bit more information density. Screens are big but the line spacing on these designs alone means that on larger screens you end up paying a lot for whitespace in between

Things look aesthetically nicer than Win98/XP days, but I would love for some more options for information dense UIs other than just "copy what Thunderbird does"

Another alternative to Material Design would be IBM's Carbon [0], as far as boring enterprisey design systems go I find it criminally underused right now.

[0]: https://carbondesignsystem.com/

I'm not sure that this is any better for information density. The buttons are weird, the modal takes up extra space.

Not sure what you mean with extra space, but many components have xs, sm, md, lg, xl, and 2xl sizes, e.g. you can use Modal components with small (sm) size; this is also shown in the live demo on the Modal component page.

I used IBM Carbon Design for a backoffice module in a team without UI/UX designers/engineers. We built all components based on React-aria hooks and used the guidelines but also existing react, vue, and svelte components for reference.

It's a great design system and implementing the visual design from scratch based in the guidelines helps a lot to understand the concepts behind it. At first it might look like overkill to implement six color schemes for the two light and two dark themes, but once you have this it's very useful to implement a visual hierarchy (using Carbon's layering model [1]) for the pages.

There are so many B2B enterprisey webapplications that do not have a good visual hierarchy, no hover and focus states, and no keyboard navigation. Instead they make buttons look like text, i.e. it does not look like you can interact with it.

[1] https://carbondesignsystem.com/guidelines/color/overview#lay...

*Update:* It's six not only five color schemes.

Serious applications should use the design system of the platform they’re running on.

I am willing to accept that proposition in principle (though it basically rules out certain classes of apps from being nice on Android IMO).

For sake of argument, let's say that these design systems serve as proving grounds for new platforms. In that case I think there's some interesting discussion to be had!

The upteen complaints about things like Gnome 3 or Android's material design. Hell, lots of complaints about iOS 7 at that transition. If there are strong alternative design systems out there, those can be pushed forward

I like the documentation and there is nothing wrong with the design per se. But I miss the days of stupidly shiny glassy Apple buttons. Now everything is boring and flat. The icons have no detail or art to them. If you have a mac zoom in really far on the scroll emoji on a and you'll see an easter egg which is just amazing. Every icon has so much detail in it yet also looks recognisable at small sizes. (msft employee, opinions are my own obviously.)

> there is nothing wrong with the design per se

Only in a limited functional sense. But it looks ugly, and the actual content consists of a bunch of standard components without any clue as to how to make them work together visually, while the guidelines is just a handful of one-liners, with some bad grammar advice thrown in. It focuses on minutiae, while handwaiving the larger picture.

Looks cool but like no UI engineers at Microsoft have ever implemented anything the design team have ever proposed

The reason for this is probably because the UI team uses Mac. If you look at the cruiser icon on this Fluent 2 introduction page, it's clearly a macOS one with vertical lines on the gloves.

Pretty sure a lot of the web Office, Outlook, and Teams stuff uses this design. It would make sense too since Teams is built with React.

Teams' UI is schizophrenic garbage. It's the Calvinball of UX. There's no consistency or rules. There's only laughably awful performance and text boxes that don't automatically take focus when the application is brought forward.

The only thing that can improve Teams is for it to be deleted and all backups of the source code thrown into an acid bath.

This is what strikes me the most about all Microsoft promotional material. For a long time now they have been showcasing beautiful applications and interfaces in promotional videos and demos, but then the final products end up looking or feeling nothing like them, always feeling simplified and cheapened.

I am not interested in anything Microsoft has to say about design.

They haven't had a consistent OS UI since at least 2009. and they seem hell bent on removing all vertical scroll bars, or reducing the size until they are pointless. why do you need to hide the vertical scrollbars, and even on hover they are 4 pixels wide? I have dual 27 inch monitors, I HAVE THE SCREEN SPACE. stop fucking up my shit.

Smartphones don’t have screen space and modern desktop UI design is influenced by phone UI (I don’t like it but probably someone does).

its not a matter of liking it. at least on desktop, its objectively, scientifically bad:

https://youtube.com/watch?v=E3gS9tjACwU

The small width on user trying to use it is inexcusable, but hiding is a nice option as in too many cases the scroll indicator is not very important to be that visible (it's cleaner UI, though that shouldn't be mandatory either)

this doesn't hold water. on the exact website you are on right now, the frame has a maximum width, which my monitor is wider than. so the bars could easily be as wide or wider than they are on Windows 10:

http://0x0.st/Hqxw.png

Windows 11 is about 1/3 the width of the above picture

it does, you just misunderstood the point. It doesn't matter if it fits, in your screenshot it serves no purpose as the page is not tall enough for me to ever use the scrollbar (and those tiny buttons at the top/bottom are another UI misfeature), so removing a useless UI element makes for a cleaner UI

> and those tiny buttons at the top/bottom are another UI misfeature

They're mostly a relic from back when mice didn't have a scroll wheel (think Windows 3.1-era times). Nowadays, some people use them on trackpads because they either don't know how to do a two-finger scroll or a specific trackpad's just too shitty to handle it.

To see if designers care about their work or even know what they are doing, I always check their text input fields. Almost invariably the so-called designers make them as inaccessible and indistinguishable from background as possible.

As a very nice surprise, Fluent 2's text fields are good.

But then you click their popover in the menu on the left: https://i.imgur.com/zzQjscX.png I mean, how?!

  backdrop-filter: blur(5px)

WebKit/Safari currently needs -webkit- prefix for it, that's why you don't see the blurred background.

Probably some autoprefixer in their publishing pipeline is broken :)

Or only tested on Chrome :)

I just look at some of their design for Teams [1], which is something I am forced to used everyday along with Outlook. They are finally ( at least I hope those are final design ) not taking away my vertical space with endless layers / rows of buttons. The absolute maximum I could take is three layers, as shown in the Excel screen shots.

I also cant remember the last time I was excited about design from Microsoft. May be it was Windows XP.

My only concern is Microsoft has a tradition of messing it up when they ship it. And in typical Microsoft tradition you are likely getting Fluent 2 on top of Fluent 1 and then Metro, Aero or even Win 95 design All in one. I just wish they could release a more coherent system at the expense of backward computability. May be targeting Chromebook OS market, where backward compatibility isn't as much as a concern.

[1] https://medium.com/microsoft-design/designing-the-new-era-of...

They could start with a more coherent system period

The fact that I struggled with navigation and spent time trying to find non-existing content on the “What’s new?” page tells a lot about quality of this design system. If its own website that is supposed to be a showcase of it has discoverability issues, shouldn’t we expect these problems to exist in products that adopted it?

What a terrible website. The components are not interactive. They have screenshots instead. And in the left panel when you click on an item you lose the scroll position, and you have to scroll down all over again. The controls and their design are boring as well.

Switch to the "Code" tab. https://fluent2.microsoft.design/components/web/react/button...

Why aren't any of the components in the docs interactive like every other framework? That doesn't fill me with confidence.

Switch to the "Code" tab.

https://fluent2.microsoft.design/components/web/react/button...

I took a 15 second review of this "Design System" and was woefully under-impressed. They are still using far too small of fonts and half serif/sans serif typefaces that are way too Optima-esque.

I just get the same old feeling that MS has no idea what good looks and feels like.

I am sad mostly because there is probably someone in the org saying "We cannot go too far away from what is established here or else how would we be different?!!!?!"

You don't have to be different, you have to be usable.

What's the use of releasing new version of component library, that has less components than previous one and probably is buggier? At least Microsoft (almost) completed Web components (even if they are React only). Google still doesn't have decent Material implementation for web: they keep releasing new version before completing full component set.

The first one still hasn’t been meaningfully rolled out.

The disconnect between the design team at Microsoft who do the talk and make the mock-ups and the design of the shipping products is ridiculous.

If they truly think this stuff matters they need to embed design into their teams with power to actually make change.

Overall, quite nice. Strangely I like their documentation site more than the actual components - it's a shame those rounded cards on the homepage aren't a component (unless I miss that somewhere?). Also - the new Teams now look exactly like Skype?

I haven't used Windows in over a decade but I don't get all the negativity around fluent design here. I always thought it looked nice. Can someone list the biggest flaws?

The first things I looked for were date and ticker picker: nope. It's the same case with Material UI library as well. Why are these so hard to come by, first hand?

I wish companies would at least have a jargon free sentence of the page describing what the product/thing is.

Like we are all supposed to know what Fluent is?

I clicked on the link, tried looking for actual examples and not tiny screenshots. Couldn't find any. Promising start for a design website.

I don't see the need for all these constant redesigns. Is it really just to keep the designers busy? Or is there an actual need for this?

It's a perpetuating cycle. Apple, Google and Microsoft all need to be seen to be iterating on the freshness of their designs, otherwise people will assume their products are stale next to their competitors.

I got excited a little thinking the components are 3D like their pics, it would be a change from all that flat boring design.

Instead of spending time on this, Microsoft should be focused on creating a theming system so that older classic themes like win 2000 can be natively supported.

But no, they will close it down like apple. I swear companies are such sheep.

Interestingly they've gone for a UIKit approach on iOS. I would have thought for future proofing they would have gone straight to SwiftUI. In my experience so far the transition has already started.

Likewise I’d go straight to Svelte on the web side. React is still incredibly popular but it’s worth skating to where the puck is moving.

What’s with the crazy high line-height on the headings?

Its a shame that this does not have Blazor components.

Agreed, especially as the old Fluent UI Blazor components [0] were the only ones in my testing without atrocious performance.

[0]: https://www.fluentui-blazor.net/

> without atrocious performance

I don't know about you, but this site pinned my CPU while loading. The UI does not look complicated; a navigation tree and a view pane with text. I have never heard of Blazor before, but this is a very poor first impression.

Blazor is a bit special in that as a full front-end framework, it’s (for now) more for heavy apps or internal ones, as it includes essentially the whole .NET framework in webassembly :D There’s an alternative called server-side Blazor, that uses websockets to provide interactivity. It’s a front-end framework that you can write in C# without touching Javascript, the current preview brings further performance improvements, but in general it’s not "eh whatever, let’s use blazor for our new site" the same way one might use Vue or React.

All other components I’ve seen so far were pretty bad, one takes about a second for datagrid paging, another 100-300ms to open a drop-down.

Microsoft peaked at Windows Metro UI. The balls they had to deliver something so fresh and vibrant! It's a god damn shame Windows Phone died and dragged down Metro with it.

https://assets.sbnation.com/assets/1195944/winphone_3.png

In comparison, this looks about the same as every other corp. system. Maybe that's the goal. :(

Shh, the lawyers said you can't say "Metro". It's Modern.

And yes, it was amazing. And so was the phone.

I found Metr...Modern looked alright in staged screenshots but most apps were terrible in their actual UX. It was maximum mystery meat UI and no one could seem to decide how that UI should behave. UX is not just looks but behavior.

Reply on news.ycombinator.com