Here are the Fluent User Experiences We Can Expect to See First

Posted on May 14, 2017 by Paul Thurrott in Windows 10 with 24 Comments

Here are the Fluent User Experiences We Can Expect to See First

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

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 (24)

24 responses to “Here are the Fluent User Experiences We Can Expect to See First”

  1. RobertJasiek

    A simple, plain GUI works as well as a well designed modern style but one thing causes allergic reactions: time wasted by having to watch ugly, distracting animations. It must always be possible to deactivate them.

  2. John Scott

    Funny how what comes around goes around. Windows Vista was the start of a visually appealing OS and improved on that with Windows 7. Then came well Windows 8 and Windows 10 and we went from flat to flatter. Now maybe Microsoft has sort of come full circle and realized the importance of visuals. Sadly, Windows 7 was the most enjoyable to look at, and I doubt Windows 10 will ever be that good. Mainly because we keep pushing Win 10 on ridiculously weak hardware just to prove it can run on it.

  3. Ian Gilham

    I'm still waiting for the Windows 95 style apps to be updated/replaced. There is still a big pile ancient, clunky garbage UIs in the control panel and properties windows throughout the OS.

    • NazmusLabs

      In reply to Ian Gilham:

      Love the comment and that you mentioned ancient. There are old UIs in Windows...but you, once in a while, end up with something that is truely ancient, such as the phone dialer.

      • hrlngrv

        In reply to NazmusLabs:

        How would you improve the phone dialer?

        For that matter, how would you improve on CharMap or some of the other older bits of Windows?

        Some would call the UWP Calculator applet an improvement over its predecessors, but to me that misses the point that the PowerToy Calculator back in XP days allowed one to add functions and graph equations over a range.

        Sometimes effort to update simple things which already worked is wasted effort.

        • Ian Gilham

          In reply to hrlngrv:

          Sometimes it is wasted effort, especially when there are more important issues to address.

          Nonetheless, I'd appreciate a more consistent experience. Having to navigate a few decades of diverse UIs feels unnecessarily cumbersome to me. The gradual improvement in the Settings app demonstrates that Microsoft is trying, but it has taken a long time to only cover a relatively small subset of the control panel functionality. There's plenty of room to improve on system UIs like the Device Manager, Event Viewer, System information and Properties sheets. Some have already been redesigned to a fashion, but they still ship multiple UIs for the same information.

  4. wright_is

    One thing I would say, the "bland" look of Windows 10 is, for me, what an interface should be. It should be in the background, it shouldn't stand out and take attention away from what you are doing.

  5. Rickard Eriksson

    Well good now we just need to wait out the current fad of 2D and 16 bit color deapth for everything.


    Mayby in 2020 we will have a functional UI that actually have a meaningful design that show if icons can be clicked or not. Becasue this current lets turn everything into ugly 2D paradigm is getting annoying.

  6. Tsang Man Fai

    While I think Windows 7 GUI is old-fashioned, I think Windows 10 GUI is too plain.  A little bit more use of colours would be better.

  7. Waethorn

    So any takers on how long they think Microsoft is going to do this before giving up? MDL didn't make it to version 3. Neither did Surface. It's like they're taking cues from Valve or something. It used to be that version was "the good one" for Microsoft. Lately they can't even get there.

  8. glenn8878

    The jarring transitions were in Windows 8. Too many weird approaches. Metro's color choices of primary colors for tiles and limited themes with loud colors is just idiotic. I am most interested in how they finally resolve how we interact with various controls. Too much competing interfaces.

  9. Nyghtfall

    I miss Aero... Flat is boring... Nevertheless, I've been grudgingly using Windows 10 since it went live... My company still uses Win7Ent, and switching between them every day reminds me how much more visually pleasing Aero was. Fluent looks like several bold steps in entirely different direction that I think will be visually distracting. I want an OS that's functional and aesthetically pleasing, but I don't want to turn my PC into a virtual art gallery.

    After watching the Fluent presentation on YouTube earlier this week, I rolled my eyes, facepalmed, and found myself watching Ubuntu videos again...

    • rameshthanikodi

      In reply to Nyghtfall:

      Really now? IMO Aero is an eyesore, even more on high DPI screens. Even if Windows 10 is boring, I think boring doesn't count as an insult to the UI. I like a pedestrian UI that isn't overdone like Windows 7.

      • Nyghtfall

        In reply to rameshthanikodi:

        I'm not saying I think Aero is functionally better than Metro, just that it's more aesthetically pleasing to look at.

        What I would love even more than Aero is an OS X-style UI. X's design language is drop-dead gorgeous, and the only thing about Macs that still makes me extremely envious of Mac users.

  10. Maelstrom

    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.)

    One of the main advantages of UWP is that you code once for all devices. So applying that to the UI does make sense too.

    • skane2600

      In reply to Maelstrom:

      Well, you can code once if you are matching the requirements to the least capable device or if you are willing to do the extra work to make it work on multiple devices. And of course, sometimes it isn't possible at all. There's a big difference between being able to create a subset of apps that can be coded once and being able to create ANY app by coding once.

  11. Jorge Garcia

    Lipstick on a pig until they fix their abusive updating process. The end user should ALWAYS know how long ANY given update is going to take, how much of it has downloaded, how far along it is in the installation process, how many times it will need to restart....and especially when it is ACTUALLY done. I can't stand when I think it is over and then when I go to reboot, there it is again, updating some more. Until MS fixes those core problems, it doesn't matter how pretty they try and make Windows 10. I've been FULLY with MS since the MS-DOS days, so I feel I have a right to criticize/warn them.

    • navarac

      In reply to Jorge Garcia:
      I suggest you just knuckle down to timely updates, rather than wait around.. Either that or succumb to Ransomware. You surely cannot be that ignorant of Friday's events.


      • Jorge Garcia

        In reply to navarac: Some of my windows 10 PCs are off for many days at a time, due to my schedule and travel. I shouldn't be bitch-slapped by MS just because my PC was off for a while. It is 2017, if any consumer runs into any hardship trying to USE their PC for what they bought it for, then it is now fully the manufacturer's fault.


    • GarethB

      In reply to Jorge Garcia:

      Sounds like you're interested in Linux.

      Sorry but most people just don't care. MS is more interested in 'most people' who want to get something done than control freaks who want switches for everything and be told what is going on in extreme detail.

      • Jorge Garcia

        In reply to GarethB:

        Well, I feel like I actually am giving the normal person's perspective on this matter. It's really not asking for anything that didn't exist before. I am someone, like most people on this page, probably, who suffered through the era of command line computing...so if I find MS's current updating unacceptable, imagine what someone who has been raised on happy-go-lucky Chromebooks is going to think about Windows when they get a taste of how disgusting it has become. Do you find it acceptable to have Windows use (sometimes valuable) resources to download GIGABYTES of update data in the background??? (I have some PCs that do not have enough space to even complete the update, yet it STILL chooses to forcibly download the whole enchilada update, until even my google drive and everything else chokes on the lack of storage!!!) How is that OK??? Do you find it acceptable to go to turn on/off a PC and it says "getting Windows ready, do not turn off your PC"???? That might be OK if they gave ample warning, and told you maybe HOW LONG it would take....should I sit there like an idiot and wait, or go make myself a sandwich???? I don't know which to do, of course, because there's no freaking status bar or timer, or anything to tell me what is happening to my PC!!!!! I'm sorry, but in the old days, when I felt good and ready to add a service pack, I knew what it entailed, and I would set aside to time to do it. I really don't want to be slapped with a HUGE update I never asked for. don't get me wrong, I do want them, just on my schedule, not MS's. So if I feel that way, imagine what a "normal" person would feel. They would say screw you PC and just turn it off mid-update. I know this happens all the time, just listen to the frustrated people calling the Tech Guy, Leo Laporte every weekend.

Leave a Reply