Fall Creators Update Feature Focus: Fluent Design System

Posted on August 12, 2017 by Paul Thurrott in Windows 10 with 60 Comments

Fall Creators Update Feature Focus: Fluent Design System

With the Fall Creators Update, Microsoft is taking the first step towards overhauling the Windows 10 user experience. Key among the changes is the so-called Fluent Design System, a new design language that is being implemented over time and will change based on feedback.

This makes Fluent a bit hard to describe. But then the very notion of a design language is probably confusing to most.

A design language is used to define the overall visual design of a physical or digital product or product line. For example, a car maker like BMW or Chevy utilizes a design language that visually ties the exterior and interior designs of its various vehicles and makes them each a part of a cohesive family of offerings. On digital platforms like Android, iOS, or Windows 10, a design language is used to differentiate that system from its competitors and to provide a consistent set of user experience (UX) rules that are followed by system components and apps.

Microsoft has utilized various design languages over the years, and they have gotten more sophisticated over time. The most famous example, perhaps, was the Metro design language that Microsoft first began dabbling with in Media Center and related products like Zune, and then formalized with Windows Phone 7. Fluent Design System is Microsoft’s newest design language, and it will slowly replace the Metro and Metro-inspired designs that currently adorn Microsoft’s various digital offerings like Windows 10 and Xbox One.

Microsoft’s goals for Fluent are vast and nebulous, and while it’s possible that its impact on Windows 10 will eventually be dramatic, you will only see subtle changes with the Fall Creators Update. (As confusing, some Fluent design touches were added to various in-box Windows 10 apps before the release of the Fall Creators Update, and before Microsoft even explained its plans.)

So what new designs will we actually see in the Windows 10 Fall Creators Update?

Acrylic. Acrylic is the first of a coming series of transparency effects that are based on real-world materials. It adds a subtle blur effect to user interface elements to create a sense of visual hierarchy, both between elements in the same app window and between apps. You can see the Acrylic blur most obviously in Start and Action Center, in the Groove navigation pane, in the title bar of apps like Edge, and in the header areas of apps like Maps. It’s most easily seen when you use these apps over a contrasty background image.

Reveal highlight. This interesting and subtle effect also adds an element from the real-world—in this case, light—to help the user better understand the binary state of buttons and other UI controls. Windows has long supported a visual feature where controls highlight as you mouse over them, helping you understand that that thing can be selected. With Fluent, that highlighting is light-based, and it subtly impacts the controls that are closest to the moused-over item too. This helps you understand, visually, that they, too, can be selected. There are light-based visualizations for click and touch (a light pulse), long presses (a form of right-click), key presses, pen detection (a form of hover), and more. Here, for example, you can see that when you hover over a button in the Calculator app, the buttons to either side are semi-highlighted as well, indicating that they can also be selected.

Connected animations. Windows has long used animations to help the user understand the connection between an action and its impact. If you minimize a window, for example, there is a subtle animation indicating that the window is minimizing, and it points to the taskbar button where they can find that window again later. With Fluent, these animations are being formalized, and they will appear throughout the system. I’m not sure there’s a perfect example, but when you toggle tab previews in Microsoft Edge, there is a nice animation that helps you understand how the UI is adapting on the fly, and providing context to your actions.

Conscious controls. Windows has sported various standard UI widgets since its inception, and most major new versions of the product have introduced new or updated designs. With Fluent, Windows 10 controls like scroll bars, text boxes, and the like will be more intelligent—or “conscious,” according to Microsoft—so that they’re not in the way when not needed. For example, scrollbars became conscious in the Creators Update, so that they disappear when not in use, providing a cleaner look, but then appear as needed.

Perspective parallax. Fluent utilizes parallax scrolling effects—where UI items that are above other UI items visually can appear to move at different speeds when scrolled—to help create a sense of visual depth.

Of course, the issue with Fluent, for now, is that it is sporadically and inconsistently deployed throughout Windows 10. And that, when it can be seen, the effect is often subtle. These issues will likely improve in the coming months and years as Microsoft receives feedback and improves the design. Also, Fluent isn’t just relegated to Windows 10: Microsoft is implementing this design language in the Xbox One Dashboard, in its mobile apps, and even in its hardware products.

 

Tagged with

Join the discussion!

BECOME A THURROTT MEMBER:

Don't have a login but want to join the conversation? Become a Thurrott Premium or Basic User to participate

Register
Comments (64)

64 responses to “Fall Creators Update Feature Focus: Fluent Design System”

  1. timwakeling

    "Sporadically and inconsistently deployed", as, sadly, all Windows visual design changes always have been, and Microsoft doesn't seem to care. Ten years down the road, we will probably still have a mix of apps using Fluent, Metro, Win32 and about 37 different types of button, dialog and message box. :/

    • jimchamplin

      In reply to timwakeling:

      I can’t wait to see all this nice stuff... and Notepad’s 1995 blandness appears, completely shattering the illusion that it’s a modern, quality system.

    • rameshthanikodi

      In reply to timwakeling:

      yep. And Microsoft even now has a internal name for it: Zebra UI. And apparently one of Fluent Design's goals is to get rid of Zebra UI.

    • Darmok N Jalad

      In reply to timwakeling:

      So long as there is never a clean break in standards where old design languages are dropped from support, Windows will always be a mess of old and new by nature of its appeal of legacy support. MS is slowly setting the tone by doing this for their own bundled programs, but look at how long it even takes them to do things like replace the control panel. Then there's still power user apps like disk management and device manager--necessary tools that will likely never see an update to Metro, Modern, Fluent, etc. I don't think MS will ever be able to fix this, as once they make a move to throw out legacy support, the end user might as well start shopping elsewhere.

      • hrlngrv

        In reply to Darmok N Jalad:

        . . . how long it even takes them to do things like replace the control panel . . .

        Is it taking so long because it's Oh, so difficult to transform the remaining pieces to Settings (really & truly, Settings couldn't have handled Font Viewer nor Windows a Modern CharMap back in Windows 8?) or because this is a very low priority for MSFT?

        Actually it's an interesting question whether a UWP version of the Management Console is possible.

      • Stacey Luster

        In reply to Darmok N Jalad:

        Amen!


        If they move away from legacy support, I dunno where I'd go. Windows is the only operating system that keeps legacy support now a days. I have games from the early 2000s and 90s that REFUSE to run correctly in virtualized environments and I need power user tools like Disk Management and Device Manager for when I get new SSDs or HDDs that I partition for new systems or for Windows To Go (WinToUSB). If Microsoft kills this off, I'm done.


        No legacy application support


        No true power user apps.


        If they go the way Apple did when they dumbed down Disk Utility and made it impossible to create software RAIDs...I might be forced onto Linux...


        and I HATE Linux.

  2. nightmare99

    You should be able to toggle fluent on/off at the system level but that may perhaps be hassle for devs as they would have to test two types of ui style?

    • wright_is

      In reply to nightmare99:

      I certainly don't see any advantage to Acrylic, for example. Being able to turn off this "distraction" would be a good move.

      • evox81

        In reply to wright_is:

        I also don't really see any disadvantage to Acrylic. To claim it a "distraction" seems a bit overblown when it doesn't impact usage at all.

        • wright_is

          In reply to evox81:

          For me, it does impact usage. My eyes are very sensitive to things being out of focus - I have a hard time when TV programs blur out faces or logos, for example. My left eye tries to compensate for the out of focus part, leading to headaches and general blurred vision. Therefore I am worried that the blurred background image will cause me problems.

          • evox81

            In reply to wright_is:

            Legitimately curious: Did the Aero effects from Vista & 7 bother you?

            • wright_is

              In reply to evox81:

              Yes, they did. I switched to using a plain black background and using colour schemes that minimized the effects / used the basic theme without transparency. Probably one of the reasons why I found Windows 8 a huge step forward from WIndows 7.

              I visited friends and they had borrowed a projector for the evening to watch a film, which was projected on a wall in the lounge (they only had a 20" TV). The image was slightly out of focus and I was having real problems watching the film after about 10 minutes or so. After 20 minutes, I had to leave the room. It took about an hour before my vision had recovered.

  3. hrlngrv

    Visuals are mostly subjective. Subjectively, one of the few things I thought MSFT got right with Windows 8 was killing off transparency. Now the eyewash is back. Oh, rapture!

  4. Daniel D

    "Microsoft is taking the first step towards overhauling the Windows 10 user experience."


    FFS they haven't left it alone long enough for anyone to know what that is! 

  5. Win74ever

    They just changed a calculator and some other UWP apps. What a joke. Why not change the whole Windows shell?

  6. BigM72

    Microsoft keep making new things without cleaning up the old things.

    Can we get rid of Win2000 era tabbed dialog boxes?

    • hrlngrv

      In reply to BigM72:

      Replace tabbed dialogs with what?

      I'd compare Office 2003 tabbed dialogs to the latest Office 2016/365 dialogs with sections on the left. At least for Excel, the 2003 dialog fits everything within each dialog tab. For Excel 2016/365, the Advanced section needs a vertical scroll bar since that section is at least 4 times taller than the default vertical extent of the dialog. Can we expect the removal of dialog tabs in other Win32 software to bring about the need for vertical scroll bars in more and more dialogs?

      If you have a program with, say, 1,000 different settings, how would you present them in an efficient manner without tabbed dialogs? IMO, MSFT's Office team failed to improve on the old.

  7. glenn8878

    Apply Fluent Design to Windows Explorer. Overdue for an overhaul.

  8. Rob_Wade

    I hate Fluent just like I hated Aero before it, which I disabled right off. I LOVED Metro. If I could smack Satya Nadella upside the head right now, I'd do it without hesitation.

  9. plettza

    When you drag Groove around the screen, it looks so cool as the area underneath its window comes through the Acrylic.


  10. JaviAl

    Is simply, but no one is smart anymore at Microsoft.


    Microsoft not need to create a Windows Design. Just need to create a full Windows Theme Editor to allow all to create his own Themes designs. Something like UXThemes. Also designers can develop his own themes and share free or sell them. Microsoft is not a designer. All Microsoft desgins since 2010, with the development of Windows 8, are ugly, very ugly, flat and plain, bad colors selection, lack of contrast between areas, etc.


    Also remove the Windows customizations like change Windows borders, Windows colors, fonts, sizes, desktop icon spacing and more.


    With a Theme editor and a lot of Themes avaible all users can select what it want and like: Aero Glass 3D, Aero Lite, Metro (Ugly), Luna, Royale Blue, Zune, Fluent, Classic, Aqua, Flat and Plain, etc.

  11. Waethorn

    The "acrylic" effect looks amateurish and bad.

    • rameshthanikodi

      In reply to Waethorn:

      Lol. People will never be satisfied. People love/hate classic Windows Classic, love/hate Aero, love/hate Metro, love/hate Fluent.

      Anyway the Acrylic effect looks like a better Aero to me, I thought people were clamoring for this? It even looks similar to the ones Apple has been using in iOS/MacOS, and I don't see people complaining about that.

  12. rameshthanikodi

    I think Microsoft needs to take a year off or something from developing new features just to focus on the UI, because at this point, it's going to take a LOT to nix what is currently a mix of Aero, Metro, MDL 2, and now Fluent Design.

    Don't know they're going to do it, but it's honestly pretty needed, because the current UI is a mess, and even developers do not know how to design modern apps for Windows. What should a modern app for Windows look like? At least Metro had solid UI guidelines for hierarchy and whatnot, and Google's material design has guidelines on color matching and use of layers/shadows. Meanwhile, Fluent Design is just........what?

  13. Pedro Vieira

    Baffling how Microsoft, with so many resources, can move so slowly and in such a clumsy manner. Are they really trying to compete with Google and Apple? Because those companies have clear and consistent ways of updating their software. With MS, you just never know what's coming. You just know the UI design language will be implemented. You don't know when that's expected to happen, or how. Couple that with the ever-changing update schedules, the weird naming scheme, the overall inconsistency of it all, and you've got one weird company.

    • Winner

      In reply to PeteMiles:

      And their priorities!

      Let's revamp the interface of still-pretty-new Windows 10!

      Meanwhile where are those UWP applications? Have they cleaned out their settings/control panel mess yet?

      There are apparently NO major noteworthy features they can imagine to add to Windows to appeal to consumers as opposed to businesses? Something more significant than writing electronically on web pages perhaps?

  14. JustinMSalvato

    Just go back to Metro and be done with it.

  15. Lewk

    I'm curious to know if a lot of the fluent design Microsoft has planned for the OS side of things is tied to C-Shell. And with the Fall Creators Update, they've just semi implemented some of fluent design to hold over until C-Shell replaces the old Win32 junk. Maybe that explains why we mostly only see these changes in apps at the moment and not the OS itself..?

  16. mattbg

    Still don't really understand why we need to see heavily-blurred impressions of what is underneath a window in the window above. It just seems distracting to me, and I was glad when this Vista-era idea (Aero Glass, etc.) started to become less prominent.


    It doesn't bother me much for flyouts, but for static application windows it doesn't seem to have much utility nor does it look that good, IMO.


    Also, didn't Microsoft say that these effects were turned off to improve battery life at one point (Windows 8?).

    • ChristopherCollins

      In reply to mattbg:


      You are correct.


      On board graphics have come so far now and Intel has so many power save features, they must view it as a push now.


      I've noticed that newer Mac's don't choose doubled scaling for Retina... They use almost 1.5x scaling to give you more on screen resolution. I looked that up online and discovered all the things Intel has done. They've also come far enough that the scaling penalty on OS X doesn't matter anymore either.


    • hrlngrv

      In reply to mattbg:

      As always, what's new & appealing (late 2000s) becomes dated & cheesy (early 2010s) then apperently retro & cool again (late 2010s), but likely to become yesterday's UI in a few more years.

    • wright_is

      In reply to mattbg:

      Blurry images hurt my eyes, I hate it on TV when they blur out peoples faces or logos on t-shirts etc. My left eye is a little weak and it battles against the blurriness and tries to make it sharp, which quickly leads to headaches and general blurred vision.

      The first thing I'll need is a way to turn this feature off.

  17. harmjr

    Glass theme of Windows 7 2017 edition.

  18. skane2600

    The most important factor in UI design IMO, is making it obvious which elements are active (e.g. clickable). That's why so called "flat" designs are inferior. There should also always be enough contrast to easily read the text. Operating Systems are a tool not a work of art so anything that diminishes usability in favor of aesthetics is wrong IMO.

    • hrlngrv

      In reply to skane2600:

      Indeed. If there could be many ways visually to indicate what's important, shouldn't the specific approach be left up to application designers rather than OS designers?

    • rameshthanikodi

      In reply to skane2600:

      IMO pure "flat" design is dead. What we see everywhere today is an evolution of flat/modern design which is nice. Windows 8's pure flat Metro UI had it's issues for Mouse users, but they already fixed it in Windows 10 with MDL 2. Fluent Design actually learns from all this and builds on it so I think we have nothing to worry about.

      • skane2600

        In reply to FalseAgent:

        Reading Paul's description of the "Reveal highlight" feature suggests that you must hover with your mouse in order to determine if an element is active. That's an inferior approach to having a static visual cue indication of "activeness". You should be able to recognize active regions before moving the mouse.

  19. martinp17

    If you're interested in Microsoft's rational for Fluent, check out: https://medium.com/microsoft-design/the-science-in-the-system-fluent-design-and-light-94a17e0b3a4f

Leave a Reply