Build 2017: Microsoft evolves beyond flat UI with its Fluent Design Language

At the start of Microsoft’s Build Conference, 2017, Satya Nadella pointed out that there were two potential future scenarios that technology could take us to, that none of us really wants. In George Orwell’s 1984, technology is used for mass surveillance, to oppress and control the population. In Brave New World, by Aldous Huxley, the future was full of distractions without any underlying meaning.Software engineers have the power to prevent these two futures, and a powerful means of achieving that was selectively implementing a set of thought through design principles in developing technologies. “I believe we can make these practical design choices that help enshrine our timeless values,” Nadella said.[caption id="attachment_275908" align="aligncenter" width="640"] Windows Vista used the Aero design language.[/caption]Nadella was talking about the overall design of the technologies themselves, but the core principles outlined apply as well to a new design language unveiled by Microsoft. Known as the Fluent Design System, the design document is all set to transform the way users interact with the technologies.The approach is similar to what Microsoft did with the Aero design language, before it came up with the flat design, which is in use currently. All three design languages have been described by Microsoft as "eloquent". Check out the video introducing Fluent below.Joe Belfiore, Corporate Vice President of Windows introduced Fluent on the second day of the Microsoft Build Conference. The overall objective was to enable developers to create engaging experiences, no matter which input modalities were being used and on what device. The design system encompasses inputs using a mouse, stylus, touch, gesture, gaze, for all kinds of devices including PCs, tablets, smartphones, mixed reality headsets, televisions, etc.[caption id="attachment_375964" align="aligncenter" width="640"] Joe Belfiore, CVP for Windows.[/caption]The current Microsoft Design Language is functional, but too flat to address the various usage scenarios that emerge from the combinations of these various input mechanisms and devices. Fluent takes a bit of Aero, a bit of Material design by Android, a bit of what used to be called Metro, and pushes all of it into 3D space, instead of just surfaces.There are five basic elements of the fluid design system. These are light, depth, motion, material and scale. Each of these elements give subtle cues to the user, allowing them to navigate their way around the app being used. While some of the user interface may reference familiar real world interactions, others exist entirely in the digital realm.One of the most innovative elements is the use of light. Neither Google nor Apple has demonstrated the use of light in quite the same way, and it translates amazingly well, especially into 3D space. The demonstration showed an interaction with a popular VR short film known as Invasion, where the controls were highlighted as the cursor moved over them.

How Material Design uses depth. via GIPHYDepth is used by both Android and iOS to convey hierarchy. iOS uses stacks and transparencies, Google uses shadows to convey height. Microsoft has a slightly different approach, where the layers with varying depths are used to convey the relationship between the different elements on a screen at any point of time. Bullets or highlighted information in a web page for example, come closer to the reader, the page itself is a grounding flat layer, and the images peek in from behind the page. Compared to the flat UI seen so far, it is transformational.

How Fluent uses depth. via GIPHYMicrosoft wants to use motion for allowing the user to navigate through the application. The company wants to make the transitions from one state to another cinematic. It is an evolution from what Google does with material design. If the device is showing the progress of a task in material design, it will either loop or flow smoothly in one direction depending on whether or not the device knows how much of the task is left to be completed. Similarly, Microsoft also wants to use the motion and animation to provide additional details about the task being performed.

via GIPHYMaterials is an element in the design language. This means adding textures and different levels of transparencies to the elements on the screen, similar to what was done with Aero, and in the way iOS moved away from Skeuomorphic design with its Human Interface Guidelines. A basic window border can be made to look like an acrylic sheet with the right amount of transparency, blur, and a slight texture.The end user automatically and invisibly processes the information, and knows that the window is made of pretty sturdy stuff, and is stiffer than say a rubber sheet or a plastic film. The materials translate especially well to touchscreen devices, as even though your fingers may not be feeling the surfaces, your eyes partially fool you into thinking you are touching things other than glass.Finally, there is scale. This is really the design element of the future, for mixed reality and virtual reality applications. Scale really expands the dimensions of your work environment well beyond the device, and takes it to the room, or the general environment. Users can potentially manipulate life sized digital objects in an environment that blends the virtual and the real world. Mark Zuckerberg in the F8 developer conference envisioned a world where objects that were unnecessary to actually physically own would be increasingly replaced with virtual alternatives, and the design element of scale is fully prepared to address this future.Fluent is a living design document, similar to Material Design by Google. Microsoft is going to work with developers to evolve the language further. The design language is meant to be used on all Windows based devices. Those using Windows 10 can expect Fluent to be incorporated in the Windows 10 Fall Creators Update.