Science in the System: Fluent Design and Material
Using physical elements to create a visual hierarchy and organize content in a way that’s easy for the user to process
Material science is a growing field full of ground-breaking discoveries and inventions that seem to defy the laws of physics.
For example, take carbon nanotubes. Each nanotube is about 10,000 times smaller than a human hair. When rolled into sheets, carbon nanotubes have 100 times the strength of steel — but only 1/6 of the weight. In addition to being small, they’re semiconductors that can be used to create chips that are smaller, more efficient, and faster than their silicon counterparts.
MIT is creating fluorescent polymer gels that change color when disturbed by heating, shaking, or exposing them to acid. This new color-changing material can be used to detect structural failures, which could help make vehicles and buildings safer.
At least one theoretical physicist believes that the right exotic materials could generate a warp bubble that would enable faster-than-light travel…
On a more practical note, material has come to the Windows user interface.
Before material: Glass in the UI
We have experimented with material-like visual effects in UI for years. In the late ‘90s and early 2000s, “glass” and “plastic” buttons were so common that popular image-editing programs, like Adobe Elements, provided presets for creating them. Eventually, mainstream operating systems embraced transparency effects: Apple introduced translucent, glass-like effects to the macOS in 2000, and Microsoft added the Aero Glass theme to Windows Vista in 2005.
With the Windows 10 Fall Creators Update, released last year, we’ve added material to the OS. Our first material, Acrylic, is a translucent surface.
More than a special effect
Early glass and plastic effects typically used one or two linear gradients and a bevel.
Acrylic material is more sophisticated. On a PC, it’s a two-dimensional simulation of a 3D, real-world object that uses light, blur, noise, and color to replicate a physical, acrylic material.
By simulating an actual material, rather than applying a simple 2D special effect, means we do some interesting things with Acrylic in Mixed Reality environments…
Material benefits
Usability studies show that people prefer attractive UI. Regardless of whether it actually demonstrates good UI design, users find them more enjoyable to use. But in addition to enhancing the look of an app, acrylic material serves a purpose; like other components of the Fluent Design system, material is more than just a special effect.
As I’ve mentioned in my other articles, one of the biggest challenges in UI design is organizing content and presenting it in a way that’s easy for the user to process. Some apps provide so much functionality that the user is bombarded with menus and buttons and context menus and text. It can be overwhelming.
We can reduce information overload and make content easier to process by providing cues that help the user mentally group it into chunks. Creating a strong visual hierarchy can help.
Techniques for creating visual hierarchy
The concept of visual hierarchy in layout design has been around for a long time, long before computers and graphical UI — even before typesetting and printing. Thanks to centuries of experimentation, we have a solid set of techniques for creating a strong visual hierarchy.
Contrast: The differences between elements is what establishes the visual hierarchy. For example, using different background colors or different fonts creates contrast between two otherwise similar elements.
Size: Use size to create relationships between elements. For example, make dominant elements (such as section headers) larger than their child elements.
Proximity: Users assume that elements that are next to each other are related. Take advantage of that assumption by putting actions and content that are related next to each other.
Negative space: This is the opposite of proximity. Use negative space to separate elements that aren’t related to each other.
Repetition: The opposite of contrast, repetition makes elements look similar to each other, which encourages users to mentally group them together. Effective use of repetition creates a feeling of consistency and predictability.
Material: Acrylic material is another technique for creating a visual hierarchy. Use it as the background of a region to make that region stand out. Acrylic creates a contrast that’s more subtle than a color background change — and it feels more open, too, because it’s transparent quality lets light shine through.
When to use Acrylic
Acrylic is a lightweight mechanism for creating a contrast between a set of elements and the rest of the UI. The more carefully you use it, the more powerful the effect. In general, we recommend using acrylic for supporting or secondary elements, such as navigation and commanding elements.
Acrylic’s translucent nature makes it particularly useful for dialogs and flyouts because the user can see past the dialog and be reminded of the UI that triggered it.
How to use Acrylic in your UWP app
In UWP terms, Acrylic is a type of brush you can use to paint the background of any element. You can create your own and customize it, or you can use one of the 20+ predefined Acrylic brushes we provide, as shown in this example:
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">Some controls, such as the Navigation View, automatically use Acrylic.
Find out more
For a complete list of Acrylic brushes and detailed instructions (with code examples), check out our Acrylic Material article on docs.microsoft.com.
Follow me on Instagram.
Learn more about Fluent Design and join the diverse community of creators
Check out Fluent Design’s LinkedIn Group
Check out #FluentFridays on Twitter @MicrosoftDesign
Follow Microsoft Design on Dribbble, Twitter, and Medium
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
