Science in the System: Fluent Design and Depth

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

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.

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.)

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.
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.

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!

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.

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
<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.


Microsoft Design

Putting technology on a more human path, one design story at a time.

Mike Jacobs

Written by

Writer of design guidelines for Microsoft, scuba diver of the oceans and seas, and photographer of things. https://twitter.com/mikethesnowbean

Microsoft Design

Putting technology on a more human path, one design story at a time.