Principles of spatial design

In order to take over the subjects of my previous article Introduction to Spatial Sofware, this one aims to summarize content from the WWDC ’23 design section of Apple Developer, in order to review the best practices for user experiences and get ideas on how to apply it into spatial interfaces.

Objectives and goals

There must be a human-centered design, making sure the most important content is placed inside the user’s Field of View (FOV). Also, adjusting the objects comfortably, placing content away from user and anchoring it in space are recommended — avoid locking to user’s view.

Set familiar interfaces, related to other devices from the Apple ecosystem, that blend well with the real world physical objects, light and color. Anchor the content to space, avoiding locking it to the view, and also making it as stationary as possible to require minimal movement from the user.

This can be achieved by making extensive use of the system’s glass material, besides setting comfortable size of the screen based on the content and design with points to keep proportionality between components.

How to set a Field of View?

Specifically for the Vision Pro device, we can consider a 2k resolution screen of 2160 x 1468 pixels with 96 ppi (pixel per inch), a 27 inch display screen size.

Representation of FOV angle calculation. Source: Author.

Now, we use a Field of View calculator (https://www.fov-calculator.com/) to get the angle θ and take a working distance from the screen and concepts of optics field to get a FOV Dimension, given by:

Source: Edmund Optics. Available on: https://www.edmundoptics.com/knowledge-center/application-notes/imaging/understanding-focal-length-and-field-of-view/

This FOV Dimension can be horizontal and vertical. Then, take an arm length distance from the 27 inch display (0.28 inch, average) to get FOV angles:

• Horizontal: 45 degrees
• Vertical: 29 degrees

And, considering each one being θ angle to FOV dimension equation:

• Horizontal FOV dimension: ~21.9 pixels
• Vertical FOV dimension: ~13.7 pixels

Finally, we can use the ratio of 1.6:1 px and lock the vertical dimension into 1468 px (considering that we are able to receive all the content in the vertical axis) and get a horizontal dimension of 2351.2 px.

Here is a representation of the Field of View for a Vision Pro template screen, using the Apartment background on daylight:

Point of view of a Vision Pro template screen, with the Field of View boundaries highlighted in blue and the most important content in center. Source: Author.

Immersion

Finally, let’s talk about how immersion plays an important factor to build the full experience of the mixed reality environments the Vision Pro is capable of creating.

Progression of user’s immersion during the use of visionOS. Source: Author.

By standard recommendation, it might guide people’s focus in a way to promote stability and avoiding confusion while using the VR headset. But one should also blend with reality gradually to create key moments, and make things feel alive, as represented in the scheme above.

That said, a very important feature of these spatial interfaces is the sound design. With that, one could design more vivid and unique experiences with less visual elements that may be overwhelming to the user.

Final remarks

Considering the numerous amount of new experiences and sensations into spatial software and spatial design, we can still work with the same design principles (heuristics, accessibility, proportionality, etc.) in order to promote an immersive and human-centered design that fits the Apple’s Vision Pro proposal as a Mixed Reality device.

Also, there will be a challenge within the spatial design elements and how to interact them with the user’s environment in order to create pleasant and accessible interfaces.