Thinking About the Fluent Design System

Posted on May 12, 2017 by Paul Thurrott in Windows 10 with 50 Comments

With its Fluent Design System, Microsoft is finally moving past the flat world of Metro and embracing a model that works with many more devices and input types. But are they just making the same mistakes all over again?

During a conversation that Microsoft officials had with the press and bloggers at Build 2017 this week, the firm explained that Fluent is “not a revolution” but is instead a “journey to a new point.” But put in the context of Microsoft’s sweeping strategy shift with Windows 10 and its embrace of a heterogeneous world of devices, most of which it does not control, I feel that Microsoft is undercutting the importance of this new design.

But then it’s also exaggerating where it’s at, too. At this point in time, Fluent is incomplete and it has no hard release date or milestones. Instead, Microsoft seems to be sort of making it up as it goes along, and implementing Fluent design elements in a rather haphazard way. For example, there are a handful of Fluent design touches in some Windows 10 apps in the Creators Update. And Fluent will not be fully realized, or completed from a design perspective, by the time the Fall Creators Update ships in September.

I wasn’t initially bothered by any of that. Mostly because Microsoft is doing a much better job of explaining its goals with Fluent than it did with Metro, its previous design language, back in 2010. At that time, Microsoft’s overly-pedantic designers beat us to death with overly-detailed and flowery explanations for why this design style—modeled after classic Swiss graphic design and transportation iconography—was so superior.

Microsoft never saw any real success with Metro, let alone in explaining it to the public. But this flat design style was later stolen by both Google (Material Design) and Apple (starting in iOS 7), and neither of those companies ever bothered to thank Microsoft for leading the way.

Where Microsoft is stumbling, however, is in repeating some serious mistakes from the past. You may recall that Microsoft excitedly described a Longhorn future that would never happen at PDC 2003, and that the firm’s supposedly live code shown on stage was later revealed to be mocked-up demos that never evolved into an actual product.

Well, they’ve done it again. The Fluent designs that Microsoft showed off this week at PDC 2013, almost exactly ten years later, were clearly fake, and not running code. And it’s not clear that Windows or the other products that will utilize Fluent will ever look as good as those demos.

This is disheartening, and it makes my earlier points—that Microsoft is making this up as they go and has no clear schedule milestones—more troubling.

I’m not going to judge Fluent or Microsoft’s design intentions prematurely. But I do want to raise these issues now because the community is once again excited by a direction that may never be realized. And because the products that influenced Fluent—like HoloLens—will never be mainstream, leading me to wonder why the flat, 2D interfaces we actually do, and will, use should be changed unnecessarily.

Consider the following: Back in the 1990s, Microsoft changed the toolbars in the key Office applications—Word, Excel, PowerPoint—to be as identical as possible so that users could transition from one application to the others more easily. This is the type of thing that makes sense to virtually everybody because it sounds logical enough. But what Microsoft later admitted is that this design change was done without any research at all—it just sounded right to them as well—and that when they later did do that research, they discovered a contrary truth: Human beings are pretty malleable, actually, and they have no problem using different user interfaces in different applications.

We probably lost decades of productivity to this mistake, and while it’s impossible to know how or if Word, Excel, PowerPoint or other productivity applications might have been made more efficient years ago, we can at least apply this learning to the present. And with Fluent, specifically, it’s unclear to me why a PC, phone, or tablet UI needs to be made consistent with a HoloLens or Mixed Reality headset UI.

Consider the live tiles that everyone seems to love so much. This kind of interface, which provides “at a glance” live information on rectangular surfaces on a home screen makes tons of sense on a smartphone or even a small tablet. But it makes zero sense on a PC, especially when that interface is hidden in a Start menu you need to manually toggle. Live tiles are a great example of a UI not scaling between different form factors.

Now consider the flipside. As you must know, one of the central successes of Windows 10 is that some of the current UIs actually do scale very nicely between different devices types: Just resize a UWP app like Groove or News into a phone-shaped portrait rectangle on your PC screen to see what I mean. So Microsoft may, in fact, be onto something, at least in some areas.

Don’t get me wrong, I don’t have any answers here, I’m just raising the question. We’ll have to see how Fluent evolves over time, and how broadly Microsoft introduces these design elements into its various software products. For now, I’m a bit nervous that they are just making the same mistakes all over again, but I’m likewise happy that they are at least trying, and seem interested in feedback. If they can approach Fluent with the same customer focus that they use with the Windows 10 Insider Preview, this may all work out just fine.

 

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

51 responses to “Thinking About the Fluent Design System”

  1. Avatar

    zvonimirm

    I was on that 2003 PDC, and yesterday keynote reminded me also on it. It looked great but also very intimidating for young developer. Hope that this time is not fully fake like 14 years ago.

  2. Avatar

    Ugur

    As creative person working on UI/UX, design and code, i find it funny when any of these companies would claim as having come up with something like modern design. The reality is that the design ideals and concepts behind such things go way back, to times way before any of these companies existed. And it also goes forth and back in cycles usually where for example in between there is a push towards more ornamentalism, playfulness and then often skeumorphism in aim to make things more intuitive to use by making them more like real world objects, devices and tools.

    And then there is often afterwards a push to the contrarian appeal, for example the minimalism of flat or modern design.

    Then after a while it goes towards adding more texture, depth, shadows, highlights, transparency and 3d, and see, we're getting towards mor eplasticity and it stepwise looking more like real objects again.


    And note: the flat/or modern design was, again, not just something rejiggered from the past, and also not just something done in protest by Jony and team after kicking out overly skeumorphic next to overly powerful becoming Scott forestall or on MS end wanting to be all fresh and hip in large touch screen presentation mode and sell users both windows rt and windows 8 as same thing at first glance synophsyky and team.

    No, it was also largely born out of neccessity, because before there were was a while of devices with more similar resolutions and screen dimensions for a while and then suddenly the screens of phones got bigger, the screens of tablets smaller, then resolutions jumped higher and higher and to more and more different options in very short timespan.

    So it was a big necessity suddenly to reduce the look and feel to something which could be reused more easily across a way larger range of resolutions/dpi and aspect ratios and for UIs usable with both mouse cursor optimized dimensions and finger touch size hit area dimensions.


    So yeah..

    And now that that's been done on most OS, sure, with time now it gets refined more again now with depth, shadows, semi transparency etc.

    And now as more push for AR/Vr, of course then more depth/volume/3D objects are added and to panels also fancy shadows and moving around in 3D etc..


    I don't blame any of the OS fellas for not getting their flavor of (meanwhile refined) modern look pushed through fully, because lots of apps/games are made in cross platform engines not using system/OS ui components and in windows uwp is not widespread and on Android the latest OS versions not widespread.


    The part i find a bummer on windows is that they don't have a consitent look within windows, but then on the other hand i'm glad they didn't make all the classic windows uwp look, because the uwp "modern" look was really just nice looking at first glance in a promo video, in usability it was a big waste of space in most parts and not good in usability overall regarding noticing which are interactive controls/buttons, what just static text etc.


    When i look at that uwp version of the explorer you wrote about recently for example, yeah, that is a big cut down in usability on many ends.


    Apple gets the design better on iOS and macOS regarding modernizing it in between but actually keeping usability largely the same regarding amount of space used etc at least.

  3. Avatar

    MikeCerm

    Live tiles are not an idea that ever really made sense, even on phones. Fingertips are round, so a sea of square buttons is not a natural, logical UI. Also, the "glance-able" info on the tile... like, how much useful info can you really fit into a 1" square? Having the current date on the Calendar tile is fine, but staring at the home screen as the email tile cycles through the first 3 words of the last 3 emails you got is not really a time saver, especially when you could be in and out of the email app in the same amount of time it takes the tile to auto-cycle. Lastly, an endless grid of same-colored squares makes it actually more difficult to find the app that you want... especially if you're not even sure what it looks like, because the text on the "live" tile keeps changing.

    It's a lot easier to find and launch the app you want when everything looks different. If Facebook is a blue square with a white F, WhatsApp is a green chat bubble with a white phone, and Firefox is the same Firefox logo you've seen on your PC forever, it's really easy to distinguish these things. If every app is a same-colored square cycling through unexpected text, how do you know which is which? You turn off live tiles.

  4. Avatar

    Jorge Garcia

    MS is so foolish to be thinking about re-designs at all, so close to the whole Windows 8/10 fiasco. Do they not see the threats around the corner? They should never lose sight of the fact that they are MEANINGLESS to most people, nothing more than a means to an end. As soon as other "means" become available, even somewhat crippled ones, people voluntarily jump ship...I've seen it happen over and over again. I know people who used to use Windows every day, then as soon as they got a 5.7" phone, they never touched a PC again. And that person taught ME how to use DOS back in the 80's! MS should be focused on making damn sure that their "means" is more pleasant than the competitor's means, and it really isn't. The Windows updating process is horrific and consumers will have a long memory of the abuse once someone...most likely Google or Samsung (or both) develop an OS that credibly frees people from the shackles of Windows 10. I for one, will keep my Windows 8.1 (With Start8) up and running as long as the stars (and Microsoft) permit, because my other 3 machines, all regrettably running Windows 10, are a hot mess of constant updating annoyance and reduced functionality. You blew it MS.



  5. Avatar

    Rob_Wade

    Well, I find nothing to like about Fluent. I HATED Aero, and I despise this garbage even more. It's annoying, ugly and just gets in the way of a clean interface that Metro was. In fact, what Microsoft is doing is virtually indistinguishable from what Apple is doing on the iPhone and iPad. Really, they're just copying it. As for live tiles, I have demanded from the beginning that they bring BACK the ability to keep the Start Menu up on one screen when you have multiple screens. I've said, over and over, they need to INCREASE the capability of live tiles so that they are more interactive---there simply are some aspects of apps that don't necessarily need me to open the full app in order to request or input information. I should be able to see something on a tile and interact immediately. But what have the fools at MS done? Given me this idiotic Action/Notification Center that pops up annoying garbage that I may or may not be able to interact with. THAT NEEDS TO BE ON THE TILE. So, yes, there ARE things they could do, but I'm apparently the only person in the flipping world who sees value in doing those things. The rest seem content in watching this become an Android also-ran experience.

  6. Avatar

    bbold

    Great concept! But if it takes Microsoft THIS LONG to keep releasing updates to apps such as Skype, which many people visibly still have problems with, we may be in for a long wait!

  7. Avatar

    glenn8878

    It still look flat with better transitions. It retains wide blank spaces. Looks like Minecraft. What they do with Fluent should matter more with Windows than with the apps. Still, Win32 applications should be adapted in the near future. Microsoft's struggles with UI design style tells you why they lag Android and iOS. It really shouldn't take so long to make the change. 90% UI change for Windows, then the rest in 6 months. Tiles must go away. All icons must be same size and there should be a new launcher to replace Start Menu.

  8. Avatar

    bbold

    I don't mind waiting, but let's be honest. If the wait is longer than 5 years, by then, Microsoft and the rest of the world will surely be onto 'the next big thing' or 'something else.' The world moves at an alarming pace, and ideas and concepts change almost yearly in some cases. This is all to satisfy stock holders and wall street, obviously, I'm still not sold on the fact this is what the users WANT or NEED. (What we NEED is for Skype to work correctly, or for One Drive to sync correctly, etc.) Reliability is a need, not looks or presentation. Let's hope the 'concept' becomes at least partially a reality! Most people don't have 5 -10 year long attention spans. Microsoft needs to move QUICKLY with these concepts and make them realities before Google or Apple beats them to it again.

    • Avatar

      warren

      In reply to bbold:

      Designers and UX specialists don't fix connectivity issues with Skype. Different teams, different disciplines.

      You might as well be complaining that your car dealership shouldn't be allowed to sell any more new cars until the service department has fixed the problem you're having with your car. I mean, shit, get those salesmen and accountants some overalls and FIX SOMETHING.

      Right?


  9. Avatar

    bluvg

    "The Fluent designs that Microsoft showed off this week at PDC 2013, almost exactly ten years later,"


    Wait... I thought you were talking about Build 2017, ~14 years later?

  10. Avatar

    Martin Pelletier

    Sadly Microsoft likes to show us in-progress technologies. It's like "Don't go see the other guy yet, look what is coming. Cool heh? But I don't know when it's getting available. You just have to wait for it... But I don't you to see something else while you wait".


    I know Embarcadero Delphi or C++ Builder are expensive like hell but, I do like how you can design your app for different devices.


    Nevertheless, I'm hyped about Fluent, Microsoft Graph and the AI Cognitive they will have. I have to redo Bob Tabor UWP course again :)


  11. Avatar

    obarthelemy

    I disagree with Live Tiles not being well suited to a PC. They're not well suited to a techie's PC (I don't use them at all), but excellent for regular joes such as my elderly parents (who've got no Launch menu, only a smattering of Live Tiles on their Home screen):

    1- they provide at-a-glance info (mails, weather, news...) on all that's needed

    2- they're similar to the familiar widgets on their Android tablets

    3- they're simpler than menus, my parents have all their apps on the Desktop, which they already had as messy ugly icons, Live Tiles are cleaner, more informative, ...

    I get desperate calls when one Live Tile takes a bit long to synch ^^

    If there's an issue with Live Tiles, it's that there are too few of them, even fewer good ones.

    In general, I think an axis that's missing from "PC" discussions is the casual vs advanced angle. Be it for Windows or MacOS, those are 2 very different segments.

  12. Avatar

    Waethorn

    Reusing names again:


    http://www.digitalcontentfactory.com/blogpost/microsoft-office-fluent-user-interface/

  13. Avatar

    Jedi Dwight

    I don't always watch these videos, but that was very, very nice. It shows that with the added three dimensional depth enabled by Windows MR, they have rethought what can be done by a UI and done comprehensive modeling to be able to introduce these features OS-wide. If Windows 10 could go from "ugh, Windows 10" to actually being extra cool, it couldn't arrive fast enough. Aero Glass was something they eschewed with the excuse of better battery life and consistency for tablets. If they really want to make people forget about Aero Glass and embrace 10, this is the way.


    By the way, I liked the videos explaining and advocating for the Metro/Modern UI design style—modeled after classic Swiss graphic design and transportation iconography. — It's important to advocate for the logic of your design. I'd say there wasn't enough follow through on Microsoft's part. (Also things were needlessly changed and duplicated.)

  14. Avatar

    Bdsrev

    "And with Fluent, specifically, it’s unclear to me why a PC, phone, or tablet UI needs to be made consistent with a HoloLens or Mixed Reality headset UI."


    Because there needs to be a consistent design language/design process across all of their software, otherwise it would be a mess and an embarrassment. Design philosophy is very important, and this is a big step forward. It's frustrating that it took Microsoft this long to really figure out what their design philosophy is but better late than never. Their software will improve a lot once this fully rolls out

  15. Avatar

    maethorechannen

    But what Microsoft later admitted is that this design change was done without any research at all


    They probably read Apple's Human Interface Guidelines for the Mac, which helped to establish the idea of applications having a similar UI so that users would have less to learn, back in the mid to late 80s.


    I think this is something that was more true back when the Mac was new than it is now. Research done in the late 70s and early 80s would have been with people who were either used to character based green screens or not used to computers at all. People already used to GUIs might have an easier time adjusting to different GUIs (though seeing the complaints of people moving between iOS/Android or PC/Mac I have to wonder).

  16. Avatar

    Asgard

    "Well, they’ve done it again. The Fluent designs that Microsoft showed off this week at PDC 2013, almost exactly ten years later, were clearly fake, and not running code."


    MS reps stated many times, including on the Fluent sessions, that the demos ARE running code. Not fakes. Some of the code is already on our hands, others were told to be available "soon". Were they lying? Of course that's possible. But we should know "soon".


    As for the design, I wouldn't call the current Windows 10 design "Metro". Windows 8 was Metro. The current Win10 design is a mess coming from MS "embracing" Android UI. This was done by implementing stuff into their app design which wasn't designed to be there, while leaving remnants of Metro in place (for example App Bars). UWP platform doesn't even include a control for Hamburger for gods sake nor dictate what it is used for.


    What is nice about Fluent is that they are fixing this mess in a way which is super easy for developers to do. And this is only the "step one"; make it easy to change ugly look nice, bring easy ways to actually implement hamburger and data visualization, improve navigation and so on. Even if the apps are "minecraft blocks" in their core implementation, they can look and work much more elegantly by just adding a few modern touches on top.


    What happens next, who knows. I do agree that the lack of actually roadmap is a bit scary.

  17. Avatar

    Roger Ramjet

    "And because the products that influenced Fluent—like HoloLens—will never be mainstream.."

    Microsoft would probably beg to differ, right? But how can anyone make such statements categorically given the history of computing and famous last words ... one could list them, but what's the point (except Ballmer's laughter about iPhones, just to say ...)

    But to get back to current events, I believe Thurrott wrote that Microsoft 3D paint would never be used by more than a tiny percent, maybe 1 month or so ago, but look, Build 2017, and they are incorporating that 3D work into a cool photo app, and Thurrott now says, wow, this app could be something for everyday people! Point is: it's early days with these things, you don't know what tricks they have up their sleeves.




  18. Avatar

    mortarm

    >...Microsoft showed off this week at PDC 2013...

    2013?

  19. Avatar

    Bats

    Is flat design Microsoft's lone contribution to the mobile smartphone universe?

    • Avatar

      Paul Thurrott

      In reply to Bats:

      Since Android and iOS both copied it, it's not that bad of an accomplishment.

      • Avatar

        Darmok N Jalad

        In reply to Paul Thurrott:

        Hard to say. I think the 3D look was getting tired across the board and was on the way out. MS was out in front for a change, but they also had side scrolling and live tiles as part of their design language, and no one bothered to copy that (Android already had widgets). I think they all copied each other to some degree (Android pioneered the notification shade), but I think that's just the result of adopting best practices.

      • Avatar

        Jorge Garcia

        In reply to Paul Thurrott:

        I personally think that the UI is the main thing MS has gotten RIGHT since that cherry of an OS know as Windows 7. I think that the tiles and smart menu look great and work reasonably well on tablet, phone, and PC, which was the whole point, after all!. The problem is they have a wretched updating system that everybody but their biggest fans will NAIL them for in the near future, and because they dropped the ball on mobile, they don't (and might never) have the Apps that mainstream consumers need in 2017.

    • Avatar

      NazmusLabs

      In reply to Bats:

      Not just smartphones. The entire web uses flat design. It revolutionized the entire tech design language!

  20. Avatar

    pprabu

    Paul, isn't one if the advantages of a unified system actually from a programming perspective? You program once and the system figures out how to transform between different form factors applying the same principle.

  21. Avatar

    dcdevito

    I don't think any of this matters. No one is making personal desktop applications anymore. So unless this type of interaction makes its way to the DOM on the web it's all moot (in my opinion). Don't get me wrong, I think it's cool and could be powerful, but let's face it my company won't ever incorporate this stuff.

  22. Avatar

    timo47

    The main Fluent Design System video (at the top of this article) does indeed appear to contain a lot concept stuff for which no code exists. However, this session, which goes into more detail on the whole concept, does show a lot of working code/apps. Of course it only shows what's included in "wave 1". The next waves appear to be quite... fluent at the moment.


    What has me worried is that all this, as far as I know, applies only to UWP apps. As such, the differences between classic Windows applications, such as Explorer, and existing Win32 apps and new UWP apps is only going to get bigger.


  23. Avatar

    Jorge Garcia

    Microsoft should fix its persistent, horrific, detestable and violating updating system before moving onto other things, if you ask me. I guess they really like re-arranging deck chairs.

  24. Avatar

    skane2600

    I just don't get all the infatuation with style. It's like watching the lengths of skirts go up and down over the years. I find flat design's "guess where you can click" approach a big step backwards. MS should go back to UI design based on usability studies rather than driven by designers with delusions of high art.

  25. Avatar

    Demileto

    "Consider the live tiles that everyone seems to love so much. This kind of interface, which provides “at a glance” live information on rectangular surfaces on a home screen makes tons of sense on a smartphone or even a small tablet. But it makes zero sense on a PC, especially when that interface is hidden in a Start menu you need to manually toggle. Live tiles are a great example of a UI not scaling between different form factors."

    I don't get this criticism, people don't look at a phone/small tablet's home screen longer than they do Windows' Start Menu, both are visible just long enough to find the app you're looking for and open it, so why do Live Tiles make sense on the former and not on the latter? For what's worth, I've occasionally found out news worth my time by reading a headline or two in the News app's live tile while I opened Windows' desktop Start Menu.

    • Avatar

      hrlngrv

      In reply to Demileto:

      Lots of people opening their PCs' Start menus to check the live tiles?

      It's COMMON for people to check their phones periodically. Pull it out of pocket or purse, check for any notifications, if not, put it back in pocket or purse. On PCs, people may check notifications as they arrive, but who periodically opens their Start menu periodically to check the live tiles?

      OK, maybe you do, but you may be surprised to learn you'd be part of a very small minority of PC users.

  26. Avatar

    david.thunderbird

    Why do I think (ef)Fluent  design ?

  27. Avatar

    Lawrence Ladomery

    When the case for Metro (aka Modern Design) was made I was sold - I thought that they presented well too.


    But the implementation was poor.


    For example, the pop up menus featuring thick, high contrast background, font colour and borders. Removing personality more than introducing a coherent, demographically flat design.


    Or the whole of the Settings area looking different from anything else all that white space. Like a simple website from 1999 (minus the GIF animations, thankfully).


    Plus the legacy design, starting from File Explorer that hasn't really changed in 200 years.


    Fluent will soften things up a bit, no doubt. And re-introduce some personality. My fear, though, is that it will just add more mish to the mash.


    Some VP at MS should take full ownership of the UX and not rest until a solid, consistent, beautiful and usable design is implemented. A design and experience that will WOW people when they use it. With no compromise.

Leave a Reply