Spatial Design: The kit for new spatial designers

In this edition, we focus on spatial design. Discover the opportunities for spatial designers, best practices, tutorials and resources.

What’s up 👋
It’s Jack

Welcome to this edition!
Here we discuss the latest news & opportunities in spatial computing.

🔗 Shortcuts:

In this edition, we focus on spatial design. Discover the opportunities for spatial designers, best practices, tutorials and resources. Let's go 👇

📡 News in figures

10 years

That's the number of years Meta has spent developing the operating system that powers its virtual reality headsets (Freshly rebranded Meta Horizon OS), a derivative of the open-source version of Android. This week, Meta decided to open up its operating system to the competition, making it much more open. This is very good news for the entire space computing sector.

50%

That's the number of production cuts for Apple's Vision Pro headset, according to supply chain analyst Ming-Chi Kuo. However, the information has not been confirmed by Apple, and many are criticizing its accuracy. Ming-Chi claims that US demand for the Vision Pro is lower than expected, but does not share concrete & reliable sources and lacks credibility given the discrepancies in these statements.

📍 Spatial projects

With the launch of the Vision Pro, Apple has set new design standards for applications in spatial environment. Spatial Icons are one of them:

Spatial icons are 3D icons with an immersive floating effect.

- The background file
- Layer 1 (or foreground 1)
- Layer 2 (or foreground 2)

Each file must be a 1024px square, Layer 1 & Layer 2 being transparent.

It's not easy to create your own spatial icons, and there's no dedicated library.
So I decided to create a Figma file with +100 Custom-made Spatial Icons:

If you want to go further, we are creating a system that allows you to directly generate and convert your spatial icon: https://SpatialIcon.com

📚A beginner’s kit for new designers

The Spatial Design refers to the design of user interfaces and experiences in a 3D spatial environment, offering a more immersive and intuitive way to interact with digital content.

Spatial computing offers a whole new way of interacting with machines. This requires the creation of optimized experiences.

Here are the 10 key concepts of spatial design to understand:

1) Volume
The volume displays 3D content that can be viewed from any angle. For example, products on an E-commerce can be viewed in 3D to see what they look like IRL.

2) Windows
Windows represent screen views. They are infinite, can be any size, and can be positioned anywhere.

3) Ornaments
Ornaments contain controls or information linked to a window. They can be components such as toolbars, tab bars and video playback controls.

4) Tool Bars
Toolbars contain commands frequently used to perform actions on the current view. The toolbar provided by VisionOS is horizontal and appears along the bottom edge of a window.

5) Tab Bars
A tab bar is always vertical, floating on the front side of a window. Tab bars are used to navigate between different sections of an application.

6) Side Bars
A sidebar extends along the main side of a window when a tab from the tab bar is selected. It is used to display additional navigation options.

7) Menus and popovers
Menus and popovers can extend outside the window. We use popovers to expose a small amount of information or functionality.

8) Sheets
A sheet is a modal window that floats in front of its parent window, asking people for specific information or presenting them with a simple task they can complete before returning to the parent window.

9) Spaces
Space is the type of display. There are two types of space: shared space and full space. In shared space, windows can exist side by side, and people can reposition them wherever they like. In full space, the view is concentrated on a single window, perfect for an immersive experience.

10) Immersion spectrum
Apps can dynamically switch from one immersion state to another: normal window, panoramic view for a wider field of vision, spherical view surrounding the user. There are many ways to immerse users in a spatial application. For example, you can use dimming, a simple way of creating contrast between content and the user's environment without taking them out of their own space.

The best practices for developing spatial-friendly interfaces:

A spatial application offering a good user experience is a human-centered application. When designing applications for spatial interfaces, Apple takes the following 3 aspects into account:

1) Field of vision:
In spatial interfaces, users wear the device and see the space in front of them. It's easier for everyone to see what's in the center. The most important interface elements and content should therefore be placed in the center, as this is their field of vision.

2) Ergonomics:
Content must be placed in all dimensions, taking into account all possible scenarios. The placement of content sometimes has a very important effect on users.

The little tip shared by Apple is to place content a little beyond the user's arm's reach, so that it can adapt to different user postures and they can interact with it comfortably. Avoid placing content behind people, or too low or too high, unless it's part of an immersive user experience. Also avoid fixing content in users' field of vision, otherwise they'll feel trapped. Instead, fix the content in people's space, giving them the freedom to use the applications.

3) Movement:
Most users move around and change places while using their space applications. It is therefore necessary to make the interface immobile in relation to the user's environment, or to design experiences that require a minimum of movement. This will make interfaces easy to use and functional.


Windows size

When it comes to window size, keep them small to avoid obstructing users' view. Ideally, an application's interface should be kept in a single window to avoid overwhelming users with multiple windows. Windows get bigger as they move away from the user, and smaller as they get closer. If you design your interface with points in mind, it will adapt itself.

Design applications to work in any space, avoiding constraints based on physical limitations. Moving windows become translucent and pass through objects, making them easier to place. When they are released, the content becomes visible, with the system managing this behavior. Darkening the area of passage (everything other than the window) when reading content helps users to concentrate. It is also possible to opt for a full-space experience.


Immersive experience

The success of spatial applications lies largely in their degree of imagery. Guide users' attention by avoiding overwhelming visuals. Design smooth, predictable transitions to ensure continuity between different states of experience. Merge app scenes with reality using soft edges that blend seamlessly with the environment. Add animations to give the impression that the user interface is alive. Create an immersive atmosphere with sound. Make content disappear during movement, even in immersive experiences.

I hope you liked this edition!
If you want daily tips on spatial computing, let’s chat on Twitter🤝