Microsoft Fluent Design

Microsoft Fluent's five major components: light, depth, motion, material, and scale.
Image from the Microsoft Fluent site.


As technology evolves, work becomes ever more mobile. Employees frequently switch between devices depending on where they are – from the PC at work to the tablet at home, to checking emails on personal and business phones. This constant switching can seem distracting and unproductive.

Microsoft see this as a good thing. They believe that working across devices can actually help boost productivity due to our miniscule 40-seconds of attention span.

However, the difference between mobile and desktop design systems require a significant cognitive switch to jump naturally between the two. Microsoft are working to change that.

First announced in 2017, Microsoft envisioned that their Fluent Design system would get apps talking to each other. This would not only provide seamless user experience between devices and programmes, but also help teams and colleagues work together better.

In an article on Medium, Head of Office Design Jon Friedman said that, “when mobile apps seamlessly connect and feel similar, it reduces cognitive burden by eliminating the need to re-learn app patterns and navigation.” Microsoft hopes that Fluent will be ‘natural on every device’ to avoid disrupting thought process during device switches.


What is Fluent?

Fluent Design is a design language revamped from Windows 10 phones, providing user experience continuity across devices and a framework of design principles for guiding apps to communicate with each other. This creates consistency between each interface, including app icons, splash screens, cells, cards, typography, people, and file lists, making movement between apps far less jarring.

Fluent focuses on simplicity and navigation ease. By listening to Office users, Microsoft have adapted their software to increase interactivity and improve design. The ecosystem of apps is intended to update together, adapting to use for years to come.


Fluent Functions

According to Smallbizgenius, 80% of B2B buyers use mobile devices at work. Microsoft’s focus has been on improving mobile app functions to make mobile a more viable workspace without the disintegration from the virtual workspace and interruption of workflow.

There are many functions that help to achieve this. Performance has been improved with nimbler start-up and dynamic components. Mobiles can scan documents and tables quickly and upload them instantly to Office, OneDrive, and other apps. Search functions are prominent across every app, making it easier to find documents, people and more across apps and immediately add them to your document. This also improves collaboration with real-time updates and dynamic components.


Fluent Design

Fluent Design focuses on five major components: light, depth, motion, material, and scale.

The new app designs have a clean feel, with easily recognisable icons and coloured headers for each app. These simplified visuals create a better flow through each element of the UI, whilst reducing clutter and making information easier to find and use. These minimalist changes to navigation panes, headers and colours help the user to focus without unnecessary distractions.

Depth is key in understanding the relationship of elements and creates a sense of hierarchy between sections. As demonstrated with the Windows Phone, Microsoft’s previous designs were flat and lacked this perception.

Windows phones are now a thing of the past. It is believed that Microsoft are working closely with previous rival giants Samsung and Apple to incorporate Fluent across their systems.


Accessibility

Accessibility was a big focus for designers in 2019, and the Fluent system is no exception.

Microsoft Office suites are used by many – from children writing their homework to international businessmen keeping track of their assets, so the scope for accessibility has to include basically everyone.

Every person’s interface needs are different, so a one-size-fits-all design system is not appropriate. Fluent’s suite of connected services adapts to its user, making for a much more user-friendly experience.

Microsoft worked alongside the Washington state School for the Blind to understand how to approach narration experiences. This relationship has influenced some of Fluent’s features, including Play My Emails on Outlook and Read Aloud on other Office apps.

In 2018, dark mode and updated colours and contrast ratios were introduced to Office apps. This has since been built upon in Fluent. The latest designs reduce eye-strain and damage by using fewer colours and enabling differentiated themes.


How Fluent can help your business

If your company provides employees with mobile devices, you may see a rise in productivity levels once Fluent is implemented. Changes to apps and how they communicate with one another will make work easier for many, as well as streamline processes between teams. Third party app developers will also be allowed access to Fluent design toolkits, helping to make their apps more aesthetically pleasing and user-friendly.

If your company does not currently provide flexible working opportunities, it may be worthwhile looking into it. Elements of Fluent are constantly being developed to make a future-proof system that is usable by everyone.

For more information, visit Microsoft’s Fluent Design page.