Apple Vision Pro Spatial Design 101 - (Part 5)

Learn Spatial Design from scratch

This is part 5 of an ongoing series, catch up on part 1, part 2, part 3, part 4 here.

What are some of the best practices for creating comfortable, human-centered experiences that transform reality?

Field of View

A person’s field of view is the space they can see without moving their head. It’s easiest to see things in the center, so place the most important content there. And the field of view is wide, so use landscape layouts.

Field of view

Below is an example: In Safari, the main window is at the centre. But when people want to see all their tabs at once, it’s spread out in a grid. This layout is wide to match people’s field of view. The tabs scale down so they’re not too far from the center, and the tabs on the sides turn inward so they’re easier to read.

Content can be further extended for immersive experiences, but in general, keep main content within the field of view.

Contents in and around the center of field of view (click to play)

Ergonomics

By default, windows are placed along a natural line of sight to encourage a healthy and comfortable posture, irrespective of the position they are in.

Place content away from people, a bit further than arm’s reach, to encourage people to interact at a distance.

Windows are placed along a natural line of sight, irrespective of the position they are in (click to play)

Window Controls

The controls shown below are used to move, close and resize windows.

Controls to move, close and resize windows (click to play)

People can grab the window bar to move windows anywhere around them.

Grab the window bar to move window (click to play)

Windows can be stretched to fit any size.

Resizing windows is quick and easy (click to play)

Multiple sections can be used to separate controls from content

In the example below, in Safari, the navigation bar at the top is set apart from the web page to let the page take the focus. When the sidebar is opened in Safari, the window grows, showing more controls without covering the web page.

Sidebar opens to show more controls (click to play)

Another example below is in Keynote, when playing a presentation, the slides are in one window, large and far away, while the presenter display is in a smaller window nearby. This lets people place the presenter display where they want, while keeping the slides nice and large.

Presentation slides are large and placed far away, while the presenter display is in a smaller window nearby

As people move windows, they scale larger as they move away and scale smaller as they move closer to them. This keeps interfaces legible and usable.

Windows scale larger as they move away and scale smaller as they move closer (click to play)

Emitting Light & Shadows

An object in spatial experience that appears to have light need to shine light and color onto the floor and ceiling, highlighting its position in the room.

Whereas objects that don’t emit light should cast a shadow, like a window’s shadow over the table. This makes them look more integrated into the space.

Objects need to cast light or shadow (click to play)

Where to anchor content?

Avoid anchoring content to people’s view as they might feel stuck.

Avoid fixing content to people’s view (click to play)

Instead, anchor content in people’s space as this gives them the freedom to look around naturally.

Fix content in space to look around freely (click to play)

Spatial Audio

For engaging experiences, spatial audio should be used to create soundscapes that fully surround people.

Spatial audio to surround people (click to play)

Rich visuals and high-fidelity audio make things feel real.

In my next article, we’ll further learn how to use sounds in spatial apps to enhance immersive experiences.

Credits: Apple

Let’s work together on an interesting project. Ping me at hello@luxanza.com.

Get the Best Seller Professional Resume that has helped dozens land great jobs, now available here.