The debut of the Fluent Design System was perhaps one of the more interesting announcements at Build 2017 this past week. As you may have heard, Fluent will be rolled out in waves, and will not be completed in time for the Windows 10 Fall Creators Update. So here’s a quick peek at the Fluent user experiences we’ll see first, throughout 2017.

Note: The information in this article is derived from the Build 2017 session “Introducing Fluent Design.” You can watch a video of this session on-demand at the Channel 9 website.

I will say that the notion that niche form factors like mixed reality headsets should inform or influence user experience design in the 2D world of traditional Windows is, perhaps, off-putting. (It is to me, for sure.) But as I watched the session video, I began to realize that this design effort is well-intentioned and appears to really modernize what now seems like a very bland visual style in the current versions of Windows 10.

Microsoft was very clear that Fluent is evolutionary and not revolutionary. But that said, I suspect the result of this change, over time, will be to make some future version of Windows 10 look as different from today’s versions as the original version of Windows 10 looked compared to the original version of Windows 8. In short, this looks like a good move.

Anyway, here are the initial Fluent user experiences we can expect to see throughout 2017 in various Windows 10 Insider Preview builds, first, and then in the Fall Creators Update.

Reveal highlight. Described as a fundamentally more natural interaction visualization, reveal highlight uses light to improve on the binary state model (on/off, hover/not hover, and so on) that’s been used with UI controls and other interactive elements since the dawn of Windows. For example, when you hover over a button in Calculator, that button will highlight as before. But with Fluent, light is used to emphasize the button underneath, and even the nearby buttons are subtly highlighted to better reveal themselves. “Reveal highlight is about revealing hidden borders and UI elements, and using light to help people learn how to use a UI,” Microsoft’s Paul Gusmorino said during the session. And to be clear, it’s not just about hover: There are light-based visualizations for click and touch (where a light may pulse, for example), long presses (a form of right-click), key presses, pen detection (a form of hover), and more.

Material. Material design (yes, like the Google design language) is about using light and colors to illuminate from behind. But it’s not just transparency or blur, Gusmorino said, but rather a way to create more natural experiences by designing user experiences to emulate real world materials. In this first wave, we’re getting one material, called acrylic. But there will be more, and these material designs provide the sorts of effects that were previously only seen in gaming and video production. They work well for creating visual hierarchy, and for navigation chromes with different levels of opacity. For example, the Maps app utilizes almost the full app window area to display its map, but the top toolbar area—the “chrome”—can allow the map to subtly blur as it moves underneath it.

Connected animations Aimed at easing the jarring effect that often accompanies navigating between different UIs—for example, clicking a hyperlink to load a new web page or selecting an album in Groove to display the album view for that content—connected animations are all about motion. They’re cinematic, choreographed animations, where on-screen elements move, resize, and fade as you move from one screen to another. “Connected animations are useful when you’re drilling in (to an app), and when you’re drilling out, to recontextualize you,” Gusmorino noted.

Conscious controls. This category of design investments is the next step in responsive design, Microsoft claims. That is, it’s not enough for a design to be responsive to form factor changes (like rotating a screen from portrait to landscape) or app resizing and positioning. It should also understand your intent, or what you are trying to do. This is a vague area, so some examples will probably help. In the Windows 10 Creators Update, Microsoft debuted a new UWP scrollbar that has three states instead of the previous two: Hidden, partially visible (when you mouse over the window; this is the new state), and visible (when you mouse over the scrollbar itself). “It only shows up when you need it,” Gusmorino explained. “When you have multiple panes in an app, you don’t want scrollbars everywhere.” Microsoft showed off another example in the Build 2017 day two key: The new Edge address bar that opens up a text writing area when you tap on it with a pen (as opposed to clicking it with a mouse). “The UI is conscious of what you’re trying to do with it,” Gusmorino added. “And not retroactively, but proactively.”

Perspective parallax. You might be familiar with this effect from video games—for me, Shadow of the Beast will always be the best example—but the idea is to create a sense of depth with parallax, where different on-screen elements scroll at a different speed, creating a more engaging, immersive, and natural experience. This one debuted a long time ago, actually, in the Groove app, where you scroll in certain views (like an album view) and the various on-screen elements move and then resize and then ultimately hide as move down the page. (That effect occurs via a conscious control, a header, as well.) But Microsoft will be expanding it to other apps, like Store, Photos, and more.

Of course, Fluent will be evolved further in subsequent waves, where other new user experiences will be rolled out over time. And while wave one was initially designed in secret, essentially, Gusmorino noted that users and developers will still be able to impact this design via the Windows 10 Insider Preview. And will be able to continue doing so with subsequent waves, which will be developed openly with the community.

Gusmorino also provided a very quick look at some Fluent user experiences we might see appear in wave two, which I assume is post-Fall Creators Update. These include speech, z-depth layering, spatial sound, and more.

But even in the first wave, the Fluent Design System actually looks pretty great. The only questions are how quickly this happens, and how it will change over time based on feedback.

You can learn more about the Fluent Design System at the Windows Dev Center.

Tagged with Fluent Design System