.Net Foundation On .NET, 24 Aug 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Exploring the Fluent Design System

Description

The Fluent Design System empowers creators to design applications that feel natural on the devices people use; from tablets to laptops to television.

In this episode, Paul Gusmorino (@pag3rd) comes to share some of the motivations behind creating the Fluent Design system, and also shows how it supports different interaction models across devices.
00:45 - What is the Fluent Design System?
01:44 - Who is the audience that cares about this?
04:10 - Demo
07:20 - How does Fluent compare to Metro?
12:42 - Are there similarities to Material Design from Google?
15:22 - How can you get started ?

Useful Links:
The Fluent Design System Homepage: https://www.microsoft.com/design/fluent/?WT.mc_id=channel9-ondotnet-cephilli
Fluent Design guidelines and code samples: https://developer.microsoft.com/en-us/windows/apps/design?ocid=cxfluent-getstartedheader-devcenterappsdesign&WT.mc_id=ondotnet-channel9-cephilli
Windows UI Library documentation: https://docs.microsoft.com/en-us/uwp/toolkits/winui/?WT.mc_id=ondotnet-channel9-cephilli

A

On this episode of the on.net show,, we're going to be learning about fluent design system and how it's exposed in the windows platform.

A

tune. In. hey, welcome.

A

To another episode of the on.net show.

A

today, we've got paul and he's going to be talking to us about a fluent design system, and I'm your host, rich lander. okay,. So how about you introduce yourself and then we'll get into the topic.

B

Sure, I'm paul gusmorino and I work on fluent design and developer platforms at microsoft, uwp, stuff, like that.

A

So you work on windows.

B

Yeah. yeah. on windows. is that still a thing that we work on?.

A

Yeah, we still do.. We definitely still do the windows.

A

so,. What is fluent design system?.

B

So, fluent design system is the system that microsoft.

B

Is making available to help developers create their great user experiences.

B

when we started this project,, we really were thinking about. How do we help people create ui? That is delightful to users,.

B

People like to use,, they find productive,, they find great, and thinking of the whole life cycle of experience. Creation.

B

so, not just giving them some tools and saying, "hey, go run in. good luck".. But what do we think about guidelines?.

B

What you think about design tool support in the real design tools that the designers are using now?, how we include kind of design as an equal partner in the whole ecosystem of app creation and think about the whole experience creation, process.

B

so,, fluent, are kind of offering our kind of end end solution around creating great user experience for our customers,.

B

And that we use internally ourselves to create our own apps and experiences. right. so,, actually an interesting question. Is,.

A

Who is the audience? Who really cares deeply about this kind of thing?.

A

You know clearly the team within microsoft, do.

A

But once you get outside of that, is it just isvs like adobe, for example, who care about this or do big companies of what we call line of business applications? Also care about this?.

B

Yeah,, it's a great question.. I think. Certainly, everyone wants to make their experiences be great and productive for their customers..

B

Both certainly consumer facing products spend a lot of time and money and effort to kind of differentiate in their design and have a really great experience to the consumers..

B

But even line of businesses and enterprises want to have great productivity, great usability..

B

They want to make sure that things they create are accessible and inclusive for all the people they have working at their place, and so there's a lot of benefits of bringing great user experience, design for productivity and usability.

B

we're just training costs. for a lot of reasons you want to have even in the business,. Even when the business apps have really good design to them. so,, we think it can be expensive to do that,.

B

It can be hard work,, it can be a lot of effort, and so,.

B

What we're trying to do is make it easier for people to do that,, whether they're investing in creation, especially consumer scale, or even just a line of business at helping them have that good design.

A

Right. so, one question for you: since you're one of the designers of this, I've, this assumption.

A

B

Which you can prove or disprove. yeah, go for it.

A

Which is that you know if I was to go all in on fluent design, system, that I could build an app that was better for my users than a website?.

B

We definitely think that's the case,, and actually I can.

B

Show couple ideas of some of the ways I think that's true.

B

right,, because if that's not true.

A

Then that's a weird proposition, right?.

B

Sure. no,, I would separate out kind of a specific technology in platform..

B

I think you'll see that microsoft, we do make websites and web apps and things, and as a design system, we're being kind of inclusive of those and making sure that that there's a way to have those things that fit in in the broader system..

B

But I think that at the same time,.

B

Absolutely the native platform that we create with uddp and windows and for.net developers were definitely pushing the limits of what you can do with experience and try and let you create experiences that go beyond in a richer and were better than what you do the website and more easily to build them.

B

okay.. How about we take a look at your demo and.

A

We kind of talk more about philosophy.

B

Yeah, sure. so, this kind of demo app. I have here, it's called the van arsdale lighting app and it's an app so that.

B

You can control kind of smart lights in your home for this theoretical van arsdale company.

B

right., because all smart lights.

A

Look exactly like that, right?.

B

They're, just as beautiful. so,, you can pick a light and you can go, you pick a set of lights like a shift clicked and picked a set of lights.

A

That was awesome.

B

And you can change their color and brightness.

B

So, imagine you're at home and you're trying to oh. What's the mood I'm trying to say, and it can kind of have fun with that and set the brightness and stuff you want..

B

You can have a whole bunch of lights here in different rooms of lights, and then the app also has a whole shopping. Section,.

B

You can go and create your own lightning, customize it and say: I'm going to go, buy a new light,, a table lamp, and I can pick what kind of top do I like for it and what kind of middle do I like, and does this look better,? Does this look better.

A

Engrave it,, customize, it. folks at home, can't quite see at the moment,, but you were doing that last bit with your thumb.

A

Yeah. I was using my thumb,.

B

Because it's just so convenient., I'm someone who at least I find in my surface book, I'll jump around between inputs. I'll use, my keyboard a lot to tab around and I'm kind of keyboard-tracker power user..

B

I use my trackpad for things and then, as soon as I just use my finger for stuff,, especially panning, zooming,, those kinds of things,, I just find to be quicker and easier with a touch screen..

B

In fact, I get annoyed,. If I go to a non-touchscreen computer, and I can't do that on the glass.

B

so, yeah. so, anyway, that's kind of what the app does.

B

And you can see it's a very beautiful app., it's very seamless that moves between things, the kind of interactions it has them using the keyboard now, for example, to arrow up and down through these lamps and select them, shift clicking..

B

The kind of experience richness you have is definitely the kind of experience you get with the intelligent edge, with a rich client type of experience..

B

You also think about iot scenarios like this.

B

Often those are things that really-, I probably have to be talking to local devices.

B

so, the intelligent edge. You want to do these kinds of operations. You probably don't want to go through the latency of going through the cloud for managing a bunch of light bulbs in your house.

A

Right. necessarily. so,. I.

B

Think it's a great example saying that now we just smart lighting, which is more consumer-oriented,, but you can imagine, there's lots and lots of iot scenarios and businesses where they're managing tens of sensors in an edged devices that you can imagine having a console to control.

B

we're going to be making this app available as an open, source., very nice..

A

For folks, this summer. love open, source., all right., so, yes,, that's kind of.

B

So,, I think, if you see kind of richness of the app,, the animations,, the interaction experience,.

B

Even if we're saying it's not productivity,, everyone knows which productivity, apps, there's just so much benefit of doing in the native client..

B

But sometimes people wonder about apps that have a bit more of a browsing kind of aspect to them, the benefits, and I think you just see the kind of experience richness that you can get and the kind of scenario.

B

right. so,. You were showing me a couple of.

A

Things earlier that I really liked. yeah., maybe you're, going to show them now,, which is how we were talking about the old metro, design, pattern,.

A

Which a bunch of folks probably still remember., that was very touch first oriented and in fact,.

B

In the halls of microsoft,.

A

That was kind of actually driven into our hands..

A

We will support keyboard and mouse, and there will be sensible interaction for those,, but it is 100 percent, totally click, first , and I'm kind of guessing. We might have done something different, here., yeah., so, actually say.

B

A philosophical thing and then I'll just show something in the app.. But when we started creating fluent and it is kind of something that's replacing metro or kind of the evolution or re-imagination of metro or whatever.

B

There are a few different things we chose to do. Differently.

B

one is, while metro was very touch first, with fluent. We really wanted to be about making experiences the best on the form factor that using them on, making them work great with touch, makes them work great with mouse, and making them work great, with keyboard,, with holographic displays in 60 off controllers, speech.

B

So,, we're really thinking about the different ways people interact with their computer and we want it to be, first,.

B

It has to be great at working the specific way, the person's trying to work with it, and then we can find commonalities beyond that, as opposed.

B

To trying to fit everyone into kind of one design that has to work everywhere, even if it's common denominator.

B

a second thing that we- so that's kind of one principle we had..

B

The second principle we had is about letting people be productive and do stuff.

B

a lot of our focus with metro apps was about consumption and kind of sitting back and like scrolling through content. Like you do on the web., that's great.

B

there's. Definitely a lot of consumption that happens,, but a lot of microsoft's ethos is about letting people create,, letting people do., satya, jokes, sometimes, and people say, "oh,, sure I work at microsoft or not?".

B

He says, "well,, if you want to be cool, go work somewhere else,, but if you want to make others cool, come work at microsoft.". yeah.. I like that line. I like that line. He uses..

B

I think that we really are about empowering people to do stuff and that is kind of in our dna here.

B

so,. A lot of the design systems are really focused on. How can we help people create experiences to let people do more and let people be more productive.

B

so,. We're doing a lot of work with the office team, for example, learning a lot about the designs and things they choose, they're, making those available to people at scale.

B

The second point is pro-activity.. The third point was still having that level of immersion and richness.

B

so,. While metro was very flat and authentically.

B

Digital is how he referred to it, with fluent,.

B

There's a lot more depth like materiality, things from the real world, and kind of mixed worlds: blending digital and analog.

B

That's not just an aesthetic principle, but within there's actual real functional value from that, because taking advantage of those things that we understand as human beings about the physical world and leveraging those in designing the software that we use on a computer can actually help us to be more productive and efficient..

B

So,, anyway, those are kind of three ways in which fundamentally, like philosophically, what we're doing is different with fluent than we did with the metro,, and on that first point I want to show an example..

B

Let's see, it. so, here,, how this happened,, let's say, as you imagine, in a lighting app like this,. I need to be able to change the room that I put a light. In. so, here, this floor. Device c is in my living room,.

B

And let's say I wanted to move it to some other bedroom.

B

If I was using a mouse, the way I'd expect to do that is by right, clicking and getting a context menu., I think we'd all agree how masters would expect to go.

B

Will also do that. as a touch user,.

B

I probably actually expect you to go swipe and get to it.

B

Yeah. so,, one of our principles of fluent.

B

Is let people do each thing? The way that's natural, makes sense to do. That. so,, we don't have to say touch. Users have to use a context menu, for you to press and hold and wait for context menu to show up. yes,. We support that.

B

of course, that works,, but people should be able to actually work in the most efficient best way for them. so,, if they're using touch, swipe is probably more efficient. if they're using a mouse, right, click is more efficient., but now that reaches a conundrum causes a lot of work for developers,.

B

You have to go, add the swipe,. You have to go, add context, menu,, you've to go, add keyboard shortcuts, and in the past our platform has been structured where you to do that many different times, over, and over,, and over again. even things like the strings,, you have to copy the same string over and over again.

B

I'ts, probably the same icon reference in million places.

B

so,. We've really been thinking hard about. How can we evolve the platform to model and structure stuff in a way that.

B

Makes it easier for developers to build experiences that actually are multi-modal, that actually are multi-device, that are multi-sense,, that reach this intelligent edge that we're trying to reach. so, in this example, here,? I'm not showing the code today, but you'll be able to seeing the sample..

B

This thing called the ui command that we've created..

B

That's a object in zamel that encapsulates all the ui information about the command,, the label,, the tool tip, string,, the icon, etc.

B

Then,, you can just connect to the different controls, and then in that common implementation,, not just of the back end of the command,, but the actual ui of the command, it'll get presented and surface the right way, with swipe, with right click and so forth,.

B

But you just have to write it. Once.

B

so,! That's one example of how we're trying to make sure we have the right set of affordances that you can make apps look really great, with touch,, really great, with mouse, really great with keyboard,, and you can decide for your customers, in your scenario, and what you're targeting.

B

You don't really have compromises.

A

Make sense. so, we.

A

Talked about how this is successor to metro.

A

Is this an analog to material design from google?.

A

Is there a similarity there?.

B

Yeah,, I think it's a similar idea.

B

Of primal comprehensive, offering.

B

For people around crane, great user experience.

B

But of course there are differences in how we're approaching it. again, rooted in our core strengths, in our core ethos.

B

So,, I think if you looked in material, you'll see it's very focused on mobile and small screen touch devices.

B

There's been a lot less thinking about keyboard,.

B

And mouse, and large, screen, and multi-window,, and that stuff., I think if you look at fluent, you'll, see there's a lot more about productivity and getting stuff done.

A

Right, linking an app like office work for example.

B

Linking and app like office work.

A

Or visual studio. yeah., that doesn't mean we're.

B

Not bringing together smart ideas from things.

B

Actually, on the office work,, here's another example of something: that's new in the system. so, in a screen where I was buying a lamp,.

B

After customizing it,, I could also choose to engrave it.

B

of course. of course,. They offer engraving, and so I could say, "oh, fluent design system is for everyone." great.

A

I'm going to write, "to mom, love,, your favorite son.".

A

Perfect, exactly.

B

Yeah. here, mom,. I got you a smart lamp.

A

Yeah. there you go., I put emphasis on favorite son.

B

Yeah. now, one of the things people are prior familiar with microsoft office. Like word is,, if you select a word, you get that floating toolbar that has commands right on it.

B

so,, one of the things you brought into fluent, in words,, or working across the whole company to design this who said, "hey!, there's that rich floating toolbar that has contextual commands,, that people familiar with in apps like word.".

B

Let's have that as part of the system, so I can go and actually select. My word here, one second.

B

Oh! real code and I crashed my app.

B

There we go, and make that word bold.

B

So,, that's one of the new elements, for example, brought into fluent, this past update, is contextual, commanding and floating command bar..

B

I can see how people would like that. yeah, and it's very rich and scalable,.

B

You can fit quite a few commands on that., then again,, that's a place that you'll see it's different than something like material where they have like a floating action button. That's like one button, really.

B

so, yes,. So I think it's similar scoped effort, but.

B

Really the things we're bringing into it represent microsoft's core values.

B

so,, some totally bought into this,.

A

I think what you've just described is the best thing ever.. Where can I use it?? How do I get it?.

B

That's great question.

B

so,. You can go to fluent.microsoft.com and that's.

B

Our website that you can start on the whole journey and it's more of a marketing site., but you can start there and click find the links, and your in dev, docs, and guidance, and samples, and things..

B

The platform where we're most supporting.

B

Fluent right now is the uwap platform.

B

so,. If you use uwap platform, you.

B

Can get access to all the stuff that we're providing with fluent. now, there's a couple of things we announced at build,? They broaden the reach of that, that I think, maybe not everyone's heard about,.

B

So I want to make sure everyone knows about., I'm guessing zamel islands is one of these.

A

The first, there was zamel islands and so a lot of.

B

People have traditional.net apps,, wind, forms, and wpf apps and even non.net apps.

B

Some people they talk, I get it built, so people hide in mfc app store. people have traditional windows apps., so in zamel islands you can now use and there's some preview now in rs5..

B

You can now use all the modern ui stack,.

B

All the great features that we have in whole fluent design system in all those apps, and start incorporating them. then,. The second thing we've heard is that people would like to be able to use these things, I'll say, against the in-market os, against the os that people are running. Now.

B

synergy have new features and they come out in this fall,.

B

And then saw users have gotten that os update, app authors, don't immediately feel they can start targeting that os yet.

A

Latency problem.

B

Latency problem. so,, we announced at build in this week,. We just shipped the windows, ui library.

B

so,, when ui, it's up on github,.

B

There's a link to it, but it's a new git.. You go find it, it's in preview, starting this week.

B

that has a whole bunch of the controls,. The styles,.

B

And the features that we've been building available, and you get package,- you can start linking to and using now, and it works on rs2 or higher builds..

B

So,, that's of course, rs2,.

B

I think a couple of years, now.

A

B

Going, so really hits a broad set mint now of the installed base.

A

B

So,, those are two things: people can do.

B

This sample be available. This summer.

B

Then,, if there's just one other thing, I'd like people to know about is another tool.

B

That's coming out this summer, also, which is our color tool.

B

some of these people. When they hear about fluent or design system,, they think it's a very specific brand., it's like, "oh,! I have to have transparent windows. This way", or something like that.

B

fluent, is not about one specific styling or visual skin..

B

It's a designed system to supports lots of stylings to it. one of the things we hear that people want to do first often is just apply a color..

B

Almost every company has a brand color,, even if it's an lrb app instead of business,.

B

There is like the brand color of that company that they want to apply to things.

B

in the past. That's involved,! If you imagine all these controls, which you might have in your app, styling tons and tons of controls,, maybe a templating controls to get all the different parts in states. so,. We have a much simpler model that is coming on line this year with resource palettes.

B

That resource schemes that allow you to just changing a few color values, change systematically all the colors of all the controls.

B

We are going to be expanding, that to work with density and other aspects of the design. Too, make it much simpler for someone, without literally changing tons, and tons, and tons of styles, to just apply a branding, easily.

B

so,. Here you see all the zamel controls, and if I go and I switch to this pastel colors that all it does is change the six color values, here, three for light and three for dark.

B

or if I change to a forest, or if I change to nighttime, or whatever, and it's the full working controls, but they have been recolored.

A

Right,- and this is intend to show the light and the dark theme,, but for the same color.

B

≫ same color, scheme. yeah., because a lot of apps support both light and dark theme, and so you could still support light and dark theme. This way.

B

so,. It was a lot of benefit to the new color system,, and this will also be available on github this summer for people to go, take advantage, of, and play around with them.. We think will make it much easier for people to color stuff in and the tool still warn you if you're filing contrast, ratios,.

B

Support screen,, accessible things is very important for a lot of companies to do., including microsoft.

A

Including microsoft., it doesn't.

B

Overwrite high contrast, dials, it's just a much simpler model that we're excited to get out there, that a lot of people are liking.

A

Awesome. yeah. so,- these are all winner tapis,, so you can. You can use them. From.Net.

A

B

It's all good. yeah, absolutely.. I think both this app and the van arsdale app are c# apps.

A

Okay. so, we have people who are familiar. With.Net should be able to read back.

B

Absolutely. be happy,, and is there.

A

A minimum vs version for that?. Do you know?.

B

I think I don't know the answer to that, it's wherever the windows, sdk. okay.

A

Versions: matches. so,, vs, 2017,, probably., okay,, awesome.,.

A

Well, this was super good information., cool, thanks.. It seems like the design principles have.

A

Moved forward a lot.

A

yeah. at least I last looked at them, which was back in the metro, days.

B

A

So,, I imagine these are going to get adopted by a lot of folks.

B

Yeah,, we think so. across the whole company,. It's really been great, the effort within microsoft too. Just seeing all the different teams coming together on ui principles and on ui design in.

B

A really-, it's a great cultural transformation as well.

B

Awesome.: okay! Well, thanks for coming on the show.

A

Yeah, thank you.. This has been another episode of the on.net show, and today we talked about fluent design system with paul., thanks for watching.

A