Science in the System: Fluent Design and Depth
By: Mike Jacobs
Tags: UX Design, Microsoft, 3d Design, Fluent Design System, Design

Linear perspective is a monocular depth cue. Parallel lines converge in the distance; our brain uses that fact to estimate the relative distance of objects. Familiar size is another monocular depth cue. Objects appear to shrink as they get farther away; if we’re familiar with the object and know how big it is, we can infer how far away it is.

In this atmospheric shot without context, scale, or perspective, it’s hard to tell how big Reba is. (Reba is a small Shiba, but she’s not that tiny — she’s just far away.)

Using monocular cues to simulate depth

What makes monocular cues particularly interesting to us is that, because they don’t depend on having two eyes — or views — they also work in 2-D.

Artists have been simulating depth on flat, two dimensional surfaces (canvases and church walls) since the 15th century. In 1415, Filippo Brunelleschi painted the first known picture to use linear perspective. The effect caught on; by the late 15th century, many artists were using perspective to create the illusion of depth. Simulating depth in user interface came much later.

Opportunities to observe linear perspective are everywhere in art, architecture, and here — at the Gardens of Versailles.

Using depth to enhance a 2-D UI

Mimicking the real world wholesale is great for games but has been historically inefficient for common productivity tasks. Mixed reality, a more sophisticated approach to 3-D interactions, is opening up a whole new world full of contextual, scale, and perspective cues to help us feel comfortable—but that’s another story!

By selectively including certain elements of the physical world, we can take advantage of hardwired processing in our brains and enhance the user interface and make it more efficient and easier to use. My previous story, Fluent Design and Light, described how adding lighting effects to your app take advantage of the dedicated neural pathways in our brains for identifying and processing changes in light and position.

Keeping your UI inclusive

Some people don’t have binocular vision, and some people can’t see at all. Effects such a depth and light should be used to enhance the user interface — but the UI should be accessible and easy-to-use for people who can’t see them. For example, when using depth to arrange UI elements into a visual hierarchy, consider whether that hierarchy is obvious when you’re using a screen reader.

Designing a UI that’s inclusive enables more people to use your app, and that benefits everyone. For example, making an app that works well for the visually impaired could mean that the app has a great navigation experience and thoughtful keyboard shortcuts — something all users can benefit from.

So how can we use depth to enhance the UI?

The essential challenge in creating a user interface is how to present users with the information they need or might be interested in without overloading them. (By information, I don’t just mean content, such as a new article, but app functionality, such as menu items and commands.) There are many 2-D techniques that help, such as using scroll bars or multiple pages to put some content off-screen, or ensuring there’s sufficient whitespace between UI elements.

Depth can help as well. Depth (or the illusion of depth) gives us another mechanism for indicating the priority of elements on the screen. By taking advantage of the 3rd dimension to create distance between items, we can reinforce their priority. Depth helps reinforce the “background-ness” of less important elements, while making elements in the foreground — the active elements the user is currently interacting with — stand out even more.

Techniques for incorporating depth: Motion parallax

Motion parallax is the effect where items closer to the viewer appear to move faster than items in the background. When you’re in a car, trees near the side of the road appear to be whizzing by, while trees that are farther away hardly move at all.

The parallax effect

Parallax is useful for creating a visual distinction between a background element and foreground elements. UWP provides a new ParallaxView that makes it easy to create this effect. To use it, you need a background element and a foreground element. It’s particularly well suited for lists with a background image.

This code example uses parallax to create a sense of distance between a list and its background image.

<Grid>

<ParallaxView Source=”{x:Bind ForegroundElement}”

VerticalShift=”50"> <! — Background element →

<Image x:Name=”BackgroundImage” Source=”Assets/turntable.png”

Stretch=”UniformToFill”/>

</ParallaxView> <! — Foreground element →

<ListView x:Name=”ForegroundElement”>

<x:String>Item 1</x:String>

<x:String>Item 2</x:String>

<x:String>Item 3</x:String>

<x:String>Item 4</x:String>

<x:String>Item 5</x:String>

<x:String>Item 6</x:String>

<x:String>Item 7</x:String>

<x:String>Item 8</x:String>

<x:String>Item 9</x:String>

<x:String>Item 10</x:String>

<x:String>Item 11</x:String>

<x:String>Item 13</x:String>

<x:String>Item 14</x:String>

<x:String>Item 15</x:String>

<x:String>Item 16</x:String>

<x:String>Item 17</x:String>

<x:String>Item 18</x:String>

<x:String>Item 19</x:String>

<x:String>Item 20</x:String>

<x:String>Item 21</x:String>

</ListView>

</Grid>

How do I get the parallax effect?

The ParallaxView control was just released as part of the Windows 10 Fall Creator’s update. If you want to start experimenting with parallax (and other cool features, such as acrylic material), get the Windows 10 Fall Creator’s update and download the latest Windows SDK.

To get all the latest cutting-edge features before they’re released to the public, join the Windows Insider Program.