Humans Are Depth Sensing Machines – So As Your Website Should be.

February 11, 2022

Websites are two dimensional experiences but, we humans perceive the world in three dimensions. Our mind is hard wired to automatically figure out the third dimension in the two dimensions pictures – well the third dimension is – Depth.

Let’s begin by answering this question. Which line do you think is the longest? ‘Line A’ or ‘Line B’?

ponzo-illusion-depth-perception-linear-perspective-parallel-lines-example-size-constancy

Isn’t it obviously Line B? While your eyes may tell you that option ‘B’ is longer, the length of both the lines are exactly the same!

Confused?

ponzo-illusion-depth-perception-parallel-lines-example-size-constancy- linear-perspective

This is due to a famous optical illusion – ‘The Ponzo Illusion’. This is a strong example of misapplied size constancy. The side lines indicate depth through linear perspective. The reason behind ‘Line B’ looking longer is that we tend to interpret the scene using a linear perspective. Since the vertical parallel lines grow closer, we interpret Line B as being farther off in the distance. An object at a distance will have to be longer for it to appear the same size as the near object. Hence, Line B seems to be longer than Line A even though they are the same size.

By considering this illusion, designers can further explore how adding a sense of depth can make the design look more realistic and increase its visual interest. A 3-dimensional figure would also capture the user’s attention and lead them to engage and decode the design further. The designer can also set entry points and determine the flow throughout the design.

Human mind perceives the world in three dimensions. Objects around humans exist in 3 dimensions but on the screen it is limited to two. By adding a third dimension, we can make the digital world appear more life-like..

What can the designers do to create an illusion of depth in their design?

In this blog, I will walk you through 5 ways to add depth in the design:

  • Occlusion (overlapping objects)
  • Size and Shape
  • Texture
  • Cast shadows
  • Location on the Design

Occlusion (overlapping objects)

This is the strongest cue for depth perception that overrides all other cues when a conflict is present. When one object/shape overlaps a part of another object, it is clear that there must be some amount of depth between them.

Objects/shapes that are near overlap the objects/shapes that are further away. The partially overlapped objects in the background must be recognizable by the user to perceive its complete shape. If the user is unable to perceive its complete shape, the objects/shape might be considered as sitting side by side.

For example, in the design below, the left figure of occlusion creates a stronger depth cue than the occlusion on right. This is because transparency in the right figure can make it difficult to determine which shape is in front and which is behind.

occlusion-depth-example-transperancy-overlap-perception-types-of-depth-website-design-elements

Transparency is one form of occlusion where the user is able to see through and past the other object. For example, the design below hampers the user’s depth perception since transparency of these figures makes it difficult for the user to determine which figure is in front and which is behind.

transperancy-occlusion-example-depth-perception-website-designing-element

However, in this design below, the moon as well as the round planet create a sense of depth by employing occlusion. When occlusion occurs, the viewer fills in the missing details of the hidden design/object.

occlusion-example-three-dimensional-website-design-element-depth-perception

Parallax is a way of showing moving objects/elements overlapping one another. One way to employ this principle is by having the more important information or design occlude the less important information.

occlusion-example-depth-perception-website-design-shape

For example, in the design above, the square shape that contains vital information is overlapped with the rectangle containing less important information

Size and Shape

Larger objects appear to be closer and smaller objects appear to be farther away. By placing different sized objects/elements near each other, designers can add a cue that the difference in size occurs due to difference in depth. This also helps the designer to create a perspective of size and scale that shows the depth of composition.

size-shape-stars-difference-depth-perception-scale-website-designing-depth-composition

Just like in the design below, it is evident that the shark (design 1) and the circle (design 2) are nearer to that of the other sharks and circles respectively. The designer has created a sense of depth by manipulating the size of the figures.

three-dimensional-size-and-shape-far-away-depth-perception-website-designing-element

circles-example-depth-perception-three-dimensional-website-design-example

By varying scale in a design, the designer can create perspective and again, this can be used to grab attention towards relevant information.

Texture

Just by the literal meaning of it, texture implies a sense of depth as it aims to let one feel the surface of an object. Textured elements appear to be smaller and more densely packed when the distance increases and they become farther away. Designers could use texture that mimics something in real life as a reference to create a sense of depth, such as, grass or water.

green-grass-texture-depth-perception-website-element-example-design

three-dimensional-depth-perception-website-design-element-texture-example

Cast shadows

A shadow cast between two elements, objects or shapes gives a perception of relative distance between the two. Drop shadows are perhaps the most common way a designer adds depth to a design. Reflections can also be utilised in a similar way since they appear on a different surface.

drop-shadows-cast-shadows-reflection-dark-firm-small-depth-perception-website-designing-elements

light-and-shadow-pencil-reflection-example-website-design-element-depth-perception

When the shadow is smaller, darker, firm, and also nearer to the object casting it, the object appears nearer to the surface casting the shadow. By making the shadow larger and lighter and placing it away from the object casting it, designers can increase the depth. By blurring the edges of the shadow, the depth can be personified.

Just like in the below website design, the designer casted the shadow of the objects in such a way that it appears to be lifted from the ground.

web-design-trends-shadow-example-transperancy-reflection-depth-perception-website-design-element

However, in this website design, it is evident that the objects are in proximity to the surface.

shadow-reflection-depth-percedption-website-design-element

Location on the design

When elements are seen higher up on the design, they are usually perceived to be farther away. This has to do with our surroundings and how humans have been conditioned.

Consider the world around you. What’s above is sun, moon, sky, clouds and they are farther away from what’s down here – ground, sea, grass, and yourself.

Naturally, humans in their surroundings have a 3-dimensional experience with the things they see down here (ground, sea, grass) and those are the things they are physically connected with, the things that are closer.

The clouds, the sky, the stars, those things we see above are also further away from us.

location-on-design-down-upward-physically-connected-website-designing-elements

Just like in the design below, by placing the elements lower in the frame, the elements appear to be nearer than the computer that is located on top.

website-design-elements-placed-down-grab-attention-depth-perception

location-on-plane-example-depth-perception-website-design

Summary

Understanding depth gives designers more control over the hierarchy of their design elements as varied elements are placed at different depths.

Every picture, image, or design divides itself into figure and ground. The greater the depth, greater is the distance between figure and ground, and the foreground element becomes visual.

Since the website is only 2-dimensional, the designer imparts a sense of depth through visual depth cues such as: Occlusion (overlapping objects), Size and Shape, Texture, Cast shadows and Location on the Design.

These cues in their own way are unique and communicate depth.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]