Science in the System: Fluent Design and Depth

Depth cues helps us perceive and make sense of the real world

Published in

Microsoft Design

6 min readOct 10, 2017

Forced perspective is one way to use monocular cues to manipulate depth perception. Here, I used forced perspective to make my living room look like a doll house.

The difference between a flat, 2-dimensional image and a three-dimensional scene is depth. We have the technology to simulate depth and even stereoscopic vision. The challenge is deciding when, how much, and what type of depth — to build into your UWP app. This is the second in a series exploring the essential building blocks of the Fluent Design System, including light, material, motion, and scale.

How we perceive depth

We might take it for granted that the world has 3 dimensions (4 if you include time as a dimension), but our brains have to do some heavy lifting to help us perceive depth. When our brain processes an image, it looks for depth cues to construct a three-dimensional scene.

Binocular depth cues

Some depth cues rely on having two similar but slightly different views of the same object. We call these binocular cues. Having two eyes on the front of our face enable us to perceive an object from two slightly different angles. Our brain uses the difference between the angles to estimate the object’s distance from us. This effect is called “stereopsis.” (3-D movies use stereopsis to create the illusion of depth by using special glasses to present different images of the same scene to each eye.)

Another binocular cue is convergence. When both eyes focus on an object that’s less than 10 meters away, extraocular muscles send sensations to the brain that help it estimate the object’s distance.

Monocular depth cues

When you close one eye, does your sense of depth vanish? Of course it doesn’t. Our brains are sophisticated enough to use multiple techniques for sensing depth. In addition to binocular cues, our brain can also detect monocular depth cues. These cues don’t depend on us having two eyes that are pointing in the same direction. Animals whose eyes are wider apart — such as squirrels, cows, and non-predatory birds — rely on these cues to sense depth.

Abby and Mo have binocular vision, this squirrel does not.

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.

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.

Find out more

Read the complete Parallax article for more information and code examples.

Check out Fluent Design’s LinkedIn Group.

Follow me on Instagram.

References

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.