>> Hi, everybody. Thank you very much for coming
To the presentation today. I hope you are enjoying build so
Far and taking the time to come out and listen to us talk about
Microsoft fluent and how it is being used any of the microsoft
Office team. We are going to spend 20
Minutes deskreebing fluent invoicing
Office. And the continued collaboration
Makes the microsoft design language and the windows
Platform better going forward. I am chris.
I'm a pm on the microsoft out look team and work on the
Windows 10 mail. >> I am project manager for one
Note. >> Cool.
So a lot of people have asked us
How the fluent design is using inside of microsoft office.
It is happening from the very
Beginning. Office is an integral part of
The work flows and necessity in staying
Productive. Fluent translates beautifully
And helping the users to remain productive and it is natural fit
To partner on. Office has decades of experience
In e increasing protuck tifty. William and are are focussed
Today on the windows 10 mail calendar and one note uwp apps.
You can ask questions to us at the end.
But it is important to note that some core features of the fluent
Design system arose from office teams working with fluent
Designers and engineers and we continue the process of
Collaboration going forward. So this partnership is critical
To microsoft empowering the users to do more.
The calendar and apps there are a tong of functionality baked
Into them and designed to make the users more productive.
Paired with the fluent design, the apps adapted to the user's needs.
That is because fluent isn't just about how things looked.
It is a collection of principles designed to help users interarchitect.
It helps with the us a aj consistency for the customers.
The design patterns and principles that help empower the
Users are timeless. Elevation, color, motion are key
Parts of the fluent tool set. And with fluent design, we were
Able to evolve the windows 10 mail app in this, this is a mock
Up of the app or screen shot of the app before fluent design to this.
Just by adhering to the core principles of the fluent design
System, we were able to make the app more productive and more beautiful.
So left pane is giving color and hierarchy without reducing the
Readability for the users. Reveal effects for the areas of
Control and alts reducing clutter and any unnecessary
Borders and lines. Just allowing the user's content
To come to the fore. We added color persona circles
To the message lirs and making it easier to scan the list.
We use clean lines and able to remove the soerted noisy u
Issues around the search box and more emphasized and still
Allowing to delineate the three functional areas of the map;
Folders, accounts pane and messages and reading pane on the right.
>> Office is taking decades of research and design innovation
And bringing it to the fluent design and staying focussed and
Doing more and most
Experiences chl reducing the scrolling and helping the users
Get to the content faster. We are always bringing on object
Commands, gestures and floating tool bars and easy access to the
Commands they need in the context of what they are doing.
Easier than ever to make the apps inclusive with the rich
Exclues i havety support out of the box with fluent controls.
Let's dive into these. When we first released the one
Note and mail apps on windows 10, we heard a lot of feedback
About the density of the ui. The largest touch
Parts. So about a year ago, in response
To the feedback, we prototyped a new level of density in one note.
As you are seeing here, go we decreased by 22-33 percent.
Reducing the font sizes, decreasing margins and padding,
Etc. And this change dramatically changed the
Perception of the user productivity. You know, the smaller ribbon and
Navigation feels more professional and with 3 # more
Content, more pages on the screen, access to more
Information at a glance and scrolling less.
We took the learnings and brought them back in the
Platform. Any developer can increase the
Density of the apps and make them more productive.
Including the mail app. >> We had gotten feedback with
The windows 10 mail app that users wanted to see more of the
Mail on the screen. Too much white space, too much
Smas between the individual controls and the windows 10 mail
App is designed to be a productivity app.
So as a team, we decided to dig more into the feedback, get into
More of the specific of what is going on.
And we actually saw a lot of the users are using lower
Resolutions screens and instead of seeing mail app that looks
Like, this is 1080p mock up of the mail app, they might be
Seeing more like this. And for an app that is
Productivity app, that is not ideal. They see about the most recent
Six emails in the in box and that is not exactly a great experience.
William mentioned that one note was able to make a significant
Change to hit targets and our designers
Examined whether or not it makes sense to make the
Changes as well. We looked at the folder items
And account controls and reduced the height by 20 and met with a
Positive feedback and the users could see more of the content on
The screen. However, in the message list,
Research showed a wide variety of tastes with no single density
Winning out overall. Some users liked the big easily
Touch bl mail items, and others preferred a hyperdense show me
As many emails as i can. Following the ui density, some
Adapted principles, we decided to give that to the users and
Earlier this month just before build we release add setting to
Switch between 3 densities in
Email app. This is met with a los of positive.
A user might be only able to six and a half emails on the screen,
With the most dense, they are actually now able to see 23.
Which felt better, users felt like we are meeting them where
They are and feeling more productive. This goes into the core of why
The fluent design language can adepartmentive. We want to meet the users where they are.
This means adapting to a provide variety of display types as the
Goal with density and wide variety of input methods that
Are used in today's world. That is braining us to the
Example of how office is improving fluent.
Object ui, it is a core part of outlook. Win 32 uses it.
It is a natural fit for the mail app and part of the mail app
With windows 10. It is actually one of the
Principle ways that the users are using it.
The team is now bringing this to fluent. Of course, while the mouse, the
Track pad and the cursor with the popular ways to interact
With windows 10, touch and pen input are part of the story.
They want to swipe through and key interaction with the windows
10 Mail app from the very beginning. Fluent followed quickly and gave
Developers the ability to incorporate rich and complex
Swipe controls into the windows apps.
This is a mock up of the swipe controls on the bottom.
They have great code snip its and examples to put them in the
Apps and watch the presentation from yesterday and they have
Examples there as well. That is the beauty of the flunlt
Besign system. You can adapt the experience and
Meet the users where they are. The previous example was
Optimized for the mouse users. You want to meet the users
However they are using your apps.
Mixed reality, or something as tried and true as a right click
Context menu, everything just works. One thing that we hear from the
Users they want to easy access, like bold, high light.
Office has a great solution called the mini tool bar and
Displaying the commands in a floating menu next to where the
User the working and providing the commands in context, the
Users can focus on the content and reduce scrolling and mouse
Travel and other distractions. The mini tool bar is only
Available in the win 32. Apps like one note has the basic context.
As we announced, one note windows 10 is
Default one note app in office 365.
It is important that we bring the simplicity and the context
And the speed of the min issue tool bar to the windows 10 app.
So we could have rebuilt the mini tool bar in windows 10,
Instead we actually worked with the fluent team to build this
Mini tool bar into windows as a native control for any developer
To use. With the new command bar fly
Out, the users have access to fingertips like in office.
Fluent is taking it a step further.
As you can see here. We bring these two commanding
Together in a single experience. The floating ui where the
Commands sit is displayed when the user high lights the text.
You have complete control over what is shown here.
Right clicking or selecting at the end of the list displays a
List of the secondary commands.
So you have a lot of flexibility in cruising this control.
It is adapting to your input mertd and resizing whether a
Mouse, key board or pen and touch.
It is scaling there. We have support for acrylic and
Light and dark themes. Everything that you expect from
A fluent control and adapting to the app and input type.
It is a great partnership between windows and office.
We designed the control from simple to rich productivity apps.
You can use it with any experience from editing the tegs
In ink to interacting with images and
Go the paul's talk from yesterday on demand for more
Guidance on when to use the command fly out.
We have designed future improvements to the control.
The control supports everything that you would expect from
Cascading menus and boxes to split buttons and more.
It is all about giving you the flexibility to make the apps as
Productive as positive m. One note for windows 10 one of
The first apps to support the command fly out once it is available.
It is easy to want to cram in
All of the favorite features into the primary come
Manhattaneds space. But we found that the more
Commands that you add the harder it is for users to find the
Content that they are looking for.
We recommend 6-7 primary commands. That is the best combination of
The options for the users as well as screen realest state and
The nice thing, you have a list of the
Second ary commands as well.
We have used this to help us inform which commands that we
Show here. Again, it is contextual.
The image here is not final, it is a mock up, we are still
Tweaking the exact list of commands.
It is representative of what the control is when available.
Try it for yourselves and start using it in our own apps.
>> The last thenning to touch on is
How fluent is keeping pace and committing to the
Experiences that are abscess bl and efficient as possible.
Anyone who used the word exexcel and power point with
Windows is familiar with this.
They are a staple of office for years and a great way for the
Key board users to navigate the apps. We are excited that access keys
Are available for all of the developers and number of the
Apps are leveraging them today. You are seeing here the paint 3d
And alarms app making them for accessible and more efficient
With the access keys. Motion is a critical part of the
Fluent design system and core to modern user experiences as you
Know.Motion helps to guide the user and where they came from
And where they are going. In one note, motion is used to
Build a mental model and understanding the location
Within the notebooks, without it, switching from a zero panes
To 3 is jarring. Users have no idea what is going
On. Again, this is not surprising
For you m when we added motion the problems went away.
The users know that the navigation panes come
In from the left.
Of course, motion while krit calling can actually be a little
Distracting or provide increased perception of sluggishness if
Used incorrectly. So be careful and do the
Research so you have the right amount of motion and fluent
Helps with that. In one window, some of the
Animations were bouncy and we tweaked them to make them
Smoother as you can see here. That is coming soon.
>> Apiece of the fluent tool kit is connected animations and they
Are a fantastic way to make an nation compelling and trains
Transitioning between the fees, in the photos app and the grove
App and continuity between the views.
But for mail and one note, research showed that the simple
And quicker navigation su sufficient fissioned. You can use the fluent elements
With the app. It is not all of nothing.
We are looking at the connecting animations for the future.
>> It is all about the flexibility.
This is just the beginning. There is only a few of the
Enhancements on the way to fluent. Thanks to the great partnership
Between windows and office.
You can increase the ui density and gesture actions and about
Aing ses keys and more, we are working together to bring the
Best of what the teams have to offer to fluent.
If you missed any of the fluent sessions this week, go to the
Build website and watch all of the sessions on demand.
We have a few sessions left today. They are all available on demand
And learn more how to use the fluent controls in your apps and
Helping your productive as well. >> Thank you, everyone.
>> One more thing, we are handing out the fluent team
Giving apremium swag, if you see the folks, get a card and head
To fluent booth and pick up cool stuff. Check that out.