How to Design for Apple Vision Pro

With Apple revolutionizing how designers conceptualize and create digital products, it’s necessary to start discussing how to design for Apple Vision Pro. Apple Vision Pro expands the canvas from the limits of 2D screens to infinite 3D space.

Designers have always aimed to integrate design functionality and aesthetics seamlessly with their surroundings and nature. Still, a gadget connecting digital products with the real world brings this concept to another level. 

If you’re curious about how to design for Apple Vision Pro, you’re in the right place — keep reading!

Instead of being confined to screen planarity and size constraints, we finally have a limitless canvas to design for Apple Vision Pro. This opens doors to creating experiences with unparalleled immersiveness up until now. Apple Vision Pro can transport users into different places, blurring the line between digital and reality.

Apple Vision Pro introduces three distinct levels of immersion for users to choose from. 

Shared space allows users to switch between multiple windows, similar to 2D user interfaces, while retaining a vision of their surroundings. 

Full space allows for total immersion, hiding other apps, content, and surroundings, allowing a deep dive into digital content. The third immersion level is between full and shared, balancing real and digital. 

Design for Apple Vision Pro should adapt to different levels of immersion (Source: Apple)

The Passthrough level allows users to control the level of immersion and how much they see their surroundings while wearing Apple Vision Pro. It’s controllable by Digital Crown, a physical wheel that changes the amount in which the user sees actual surroundings.

Design for Apple Vision Pro accommodates different levels of passthrough seamlessly (Source: Apple)

If you want to know how to design for Apple Vision Pro, first, you need to learn how they collect input. Input is collected through direct and indirect gestures. The user performs an indirect gesture by looking at an item and performing a “tap” by tapping or closing their fingers together.

Moreover, the user performs a direct gesture by reaching their hand to “touch” a virtual object with a finger.

Apple Vision Pro has one of the rare interfaces that doesn’t use external hardware for input, such as a mouse, keyboard, or screen.

A person preparing to perform a single action.

A person closing their fingers to perform a single action

With constant screen engagement, maintaining visual comfort when understanding how to design for Apple Vision Pro is paramount. Apple Vision Pro automatically adapts content placement relative to the user’s head position and height, so you don’t have to worry about designing that part.

A person looking with their head tilted in a back position

Apple Vision Pro constantly adapts the screen on different surfaces (ceiling)

To successfully design for Apple Vision Pro, you should prioritize placing the important content around the center of the field of view for optimal viewing comfort. Instead of anchoring the content to the user’s head, anchor it to the surrounding space for a more natural and intuitive viewing experience. Keeping content static in front of the user’s face can introduce feelings of confinement and uneasiness.

Windowed design for Apple Vision Pro optimally takes up about 60 degrees of the user’s field of view (Source: Apple)

To create a high-quality design for Apple Vision Pro and to enhance user experience, integrate depth strategically, focusing on adding value, clarity, or delight. The Apple Pro Vision system automatically adds depth to 2D windows and components through visual cues like color, temperature, reflections, and shadows. VisionOS windows are created with an unmodifiable background glass material, letting light and physical and virtual objects show through. 

However, thoughtful consideration of visual cues remains crucial from your side. Use depth to communicate hierarchy. For example, if a window appears in front of another window, recede the background window along the z-axis to communicate deprioritization. In the same way, advance buttons or other interactive elements along the z-axis to help them stand out. 

Finally, avoid adding depth to text.

A sharp image of a lemon looks closer to the eye than the lemons, gradually using a blur effect.

A bigger lemon looks closer to a screen than a smaller one

When creating a design for Apple Vision Pro, remember to leverage volumes to display 3D content. Generally, designers recommend using a window to present typical 2D content, such as email inbox. Moreover, the recommendations suggest using volumes for 3D content, such as a globe, sneaker model, board game, or any other item that might benefit from being shown in a form similar to that they take in the real world.

Dynamic scaling dynamically adjusts the size of windows based on their distance from the viewer, ensuring consistent usability across distances. It’s most appropriate for typical user interface objects such as video players.

Contrarily, fixed scaling maintains an object’s size regardless of proximity to the viewer, mirroring the behavior of physical objects. Fixed scaling is best suited for non-interactive objects or those objects that mimic their physical counterparts.

Design for Apple Vision Pro can either scale dynamically depending on the distance from the user’s point of view or can keep the fixed scale, mimicking real objects (Source: Apple)

Fixed window scaling

Dynamic window scaling

Indirect gestures require users to look at the part of the UI they want to interact with. Upon looking, the interface shows a hover state. To ensure seamless interaction, consider ample whitespace when creating the design for Apple Vision Pro. This whitespace allows the system to accurately discern the areas of UI the user is focusing on, facilitating comfortable selection and interaction.

Larger padding between elements for Apple Vision Pro to discern areas the user is focusing on

Increase the size of touch targets to minimize the likelihood of accidental clicks for users.

Adhere to the Human Interface Guidelines (HIG) recommendation for using rounded interactive elements. People’s eyes tend to be drawn to sharp corners. Rounded elements lack such focus points, facilitating the user’s viewing focus on the center. Such focus enables the system to easily recognize the exact component the user is looking at, reducing hover activation and improving usability.

When designing interactions, prioritize indirect gestures for optimal user experience. Indirect gestures enable interaction with objects at any distance, which promotes ease of use. Direct gestures, suitable for nearby objects, may become fatiguing for users, especially if repeated frequently. If you want to successfully design for Apple Vision Pro, reserve direct gestures for objects requiring manipulation or inspection, ensuring minimal physical effort from users.

Ornaments are parts of UI that float slightly in front of their associated windows or objects. Ornaments move together with their objects, maintaining their relative position. Ornaments usually house interactive elements such as buttons, tabs, and segmented controls.When incorporating ornaments, prioritize frequently used controls.

Make sure they’re easily recognizable and prominently displayed. While multiple ornaments may be necessary in some cases, maintain an uncluttered layout and consider omitting ornaments for noncrucial actions or information.

Additionally, if you want to deliver a high-quality design for Apple Vision Pro, maintain visual coherence and ensure ornaments are of equal width or narrower than the associated window.

The tab bar maintains a relative position in a windowed mode

The navigation bar maintains a relative position in a windowed mode

As mentioned earlier, users can switch between shared and full space, depending on the amount of immersion and passthrough preferred. All designs for Apple Vision Pro should encompass both immersion levels. Strategically assess the level of immersion necessary for each part of the user flow and provide a minimum level of immersion suitable to uphold safety and convenience.

App launch should take place in a shared place. The parts of the user flow intended for completing tasks are also usually best suited for a windowed, UI-centric view, as this facilitates seamless task completion. Reserve complete immersion for meaningful moments, content, and experiences while always providing an easy exit from full-space experiences.

Shared space

Full Space

Use motion subtly and intentionally to enhance the user experience without overpowering it. Refrain from incorporating motion into frequently occurring actions and interactions, as the operating system already includes subtle animations in pre-built components.

Be thoughtful when implementing rotational movements and other actions that may disrupt users’ spatial orientation. Steer clear of excessively dynamic motion that could overwhelm users’ senses with sudden and unpleasant effects. If the design for Apple Vision Pro contains experiences with extensive visual motion, ensure the presence of a stationary frame of reference to preserve users’ sense of orientation in space.

Head-locked (motion effort)

World-locked / Lazy follow (motion effort)

If you want to make the most out of your design for Apple Vision Pro, utilize the SharePlay feature to build social VR experiences. Each user of Apple Vision Pro has an associated Spatial Persona, predicted for use in shared activity spaces. Spatial personas can be positioned in various configurations relative to displayed content, including side-by-side facing the object, surrounding the object, or forming a circle next to the object.

When implementing shared experiences, ensuring seamless integration of other users without disrupting users’ ongoing tasks and preserving the privacy of the unshared part of the experience is imperative.

Spatial persona templates

Decide who will have access

In conclusion, the design for Apple Vision Pro opens up a new realm of possibilities for creating immersive and intuitive digital experiences. By adhering to the fundamental principles and best practices outlined in this guide on how to design for Apple Vision Pro, designers can leverage the unique capabilities of this innovative platform to craft engaging and user-friendly interfaces. As technology evolves, embracing these design principles will be essential for creating compelling experiences that seamlessly blend the digital and physical worlds.