Fall Creators Update Feature Focus: Fluent Design System
- Paul Thurrott
- Aug 12, 2017
-
64
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.
Windows Intelligence In Your Inbox
Sign up for our new free newsletter to get three time-saving tips each Friday — and get free copies of Paul Thurrott's Windows 11 and Windows 10 Field Guides (normally $9.99) as a special welcome gift!
"*" indicates required fields
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
Conversation 64 comments
-
skane2600
<p>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.</p>
-
skane2600
<blockquote><a href="#166338"><em>In reply to FalseAgent:</em></a></blockquote><p>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.</p>
-
skane2600
<blockquote><a href="#166649"><em>In reply to FalseAgent:</em></a></blockquote><p>Who really complained about UI "clutter"? And lIke I said, tool not art. Showing clickable regions is objectively more efficient, that they are less aesthetically pleasing is strictly subjective.</p>