How to design apps for Apple Vision Pro

Apple Vision Pro, a groundbreaking mixed reality platform, is changing the game for app development. It blends the digital and physical worlds, creating immersive experiences that go beyond the limits of traditional screens. For the design side of things, Vision Pro offers both exciting opportunities and new design challenges.

Today, we’ll break down the key design principles for Vision Pro in a clear and easy-to-understand way. We'll explore its unique visual style, user-friendly design, and innovative spatial input capabilities. Don’t forget to check out our previous blog post about adapting your apps for Vision Pro.

Understanding visionOS and spatial design

VisionOS, the operating system that powers Apple Vision Pro, introduces a unique visual language and spatial design principles. 

Visual language

VisionOS features a glass material design element, new font styles, and vibrancy adjustments to enhance the look and feel of apps and ensure legibility across various environmental conditions.

Spatial design principles

VisionOS embraces spatial design principles that allow developers to create dynamic windows, incorporate human-centered design, utilize depth and scale, create immersive experiences, and ensure authenticity to the platform.

There are also several key capabilities and design elements of visionOS UI and Vision Pro itself that are specifically aimed at enabling immersive and spatial app experiences:

• Glass material design that blends the digital and physical worlds;
• New typography styles for legibility at any distance;
• Vibrancy feature for dynamic text/UI contrast adjustment;
• Ergonomic layouts with large tap targets and focus feedback;
• System components like windows, tab bars, and sidebars are designed for inputs;
• New "ornaments" presentation style for toolbars/actions;
• Menus, popovers, and sheets are integrated for seamless experiences.

Concept of an infinite canvas and immersive experiences

Vision Pro expands the traditional 2D screen canvas to an infinite 3D space, providing developers with unprecedented opportunities to create immersive experiences. Apps can seamlessly integrate with the user's surroundings, blending virtual elements with reality to create a more engaging and interactive experience.

Importance of designing for different levels of immersion

Vision Pro supports various levels of immersion, allowing developers to design experiences that range from traditional windowed apps to fully immersive environments. It is important to understand the different levels of immersion and design apps that effectively transition between them, ensuring a smooth and intuitive user experience.

Want to take your app to Apple Vision Pro?

We're here to help.

Learn more

Apple Vision Pro app design principles

Before we list the most important Apple Vision Pro app design principles, we need to understand the key terms that bind the entire user experience together.

Key terms

Spatial exploration. With the Apple Vision Pro, designers have a limitless canvas to create immersive experiences that go beyond the constraints of traditional screens.

Adaptive immersion levels. Vision Pro offers three levels of immersion. Shared space allows one to view multiple windows while retaining awareness of surroundings. Full space provides complete immersion in digital content, hiding other apps and the physical environment. The third level balances real and digital elements, offering a middle ground between the two.

Contextual passthrough. The Passthrough feature enables users to control the level of immersion and the degree to which they perceive their physical surroundings while wearing the Apple Vision Pro. This is achieved through the Digital Crown, a physical wheel that adjusts the visibility of the user's surroundings.

Intuitive input methods. Vision Pro introduces two primary input methods: direct and indirect gestures. Indirect gestures involve looking at an item and performing a "tap" by tapping or closing the fingers together. Direct gestures involve reaching out and "touching" virtual objects with the user's fingers. This interface eliminates the need for external input devices like mice or keyboards.

Ergonomic design. To ensure visual comfort during prolonged use, Vision Pro automatically adapts the placement of content relative to the user's head position and height. 

How will Vision Pro impact design processes?

The introduction of Apple's Vision Pro headset is highly likely to have a significant impact on how we do UI/UX design. One key area of change will be the shift from flat, 2D design to embracing the spatial, 3D nature of the Vision Pro interface. 

Designers will need to rethink their approach, focusing on depth, perspective, and the spatial relationships between elements. Tools and workflows may need to evolve to accommodate this new design standard, requiring designers to learn new software or techniques.

What's more, the Vision Pro's ability to utilize eye and hand gestures for interaction also presents new design considerations. Designers will need to carefully consider how users will navigate and manipulate content in a 3D space, ensuring intuitive and satisfying experiences. Enhancing micro-interactions and providing clear visual feedback will be crucial as users adapt to using their eyes as a "cursor."

Beyond the UI, Vision Pro's potential impact on data visualization and web design is also significant. The ability to present data in immersive, 3D environments could change how information is consumed and analyzed, particularly in fields like finance, logistics, and operations. 

Web designers will also need to optimize their sites for Vision Pro's unique display and interaction capabilities, exploring features like 360-degree content, voice commands, and adaptive layouts.

Best Apple Vision Pro app design principles

Our top 10 best Apple Vision Pro app design principles for today that correlate with advice Apple gives:

1. Spatial design. The limitless canvas offered by Vision Pro helps create immersive experiences that blend virtual content with the user's surroundings. You can transition between different levels of immersion, such as Shared Space and Full Space.
2. Intuitive eye and hand interactions. Design interactions that combine eye gaze and indirect gestures (like taps) or direct gestures (like touching virtual objects with fingers) for natural and intuitive control.
3. Comfortable eye interaction. Design content to fit comfortably within the field of view, reducing the need for excessive neck and body movement. Consider depth cues to minimize frequent changes in focus depth and reduce eye strain.
4. Spatial audio optimization. The device's capability to model the sonic characteristics of the user's surroundings and fine-tune Spatial Audio can deliver custom, immersive audio experiences when granted permission.
5. Intuitive hand gestures. Develop custom hand gestures that are easy to perform and distinguishable from system gestures. Combine eye targeting and hand gestures for precise and engaging interactions.
6. Direct touch. While direct touch with fingertips remains an option, be mindful of potential fatigue from prolonged holding of hands in the air. Incorporate appropriate feedback mechanisms to compensate for the lack of tactile response.
7. Passthrough integration. Incorporate the Passthrough feature, which provides live video from the device's cameras, allowing users to interact with virtual content while still seeing their actual surroundings. Enable users to control the amount of passthrough using the Digital Crown.
8. Ergonomic considerations. Visual comfort is ensured by automatically placing content relative to the user's head position and orientation, regardless of their height or posture. Minimize the need for users to move or strain their bodies.
9. Accessibility support. Incorporate accessibility features like VoiceOver, Switch Control, Dwell Control, and Head Pointer to cater to users with diverse needs and preferences.
10. Privacy-respecting design. Respect user privacy by avoiding the transmission of sensitive eye focus information to the app. Incorporate features like dwell control for content selection without the need for hand gestures.

We realize these tips and principles can be quite complicated to implement for people unfamiliar with designing and developing for the Vision Pro. Spatial experience design and spatial graphic design are extremely new in the UI/UX design field. 

That being the case, our Merge team offers our services regarding Apple Vision Pro app design, so you don’t have to worry about all those rules we mentioned throughout our article. 

Would you like a Vision Pro app design that incorporates all these principles?

You need Merge.

Click here

Best practices of spatial experience design

We’re not done yet. Spatial design has turned out to be quite a vast topic. Here, we combined a bunch of spatial experience design best practices we have collected.

Consider the immersion spectrum

Evaluate the appropriate level of immersion for different moments within your app or experience. Some moments may work best in a windowed, UI-centric context, while others may benefit from a fully immersive environment. Choose the minimum level of immersion that suits each moment.

Use windows for UI-centric experiences

For standard tasks and UI-centric experiences, use familiar windows that appear as planes in space. Users can relocate these windows, and the system's dynamic scaling ensures content remains legible at different distances.

Prioritize comfort

Keep the user's comfort and physical relaxation in mind by:

• Displaying content within their field of view
• Avoiding overwhelming or jarring motion
• Supporting indirect gestures for interaction
• Limiting the need for extended direct gestures or excessive movement

Enable shared activities

Utilize SharePlay to support shared activities, allowing users to view the Spatial Personas of other participants, creating a sense of being together in the same space.

Stay in the field of view

Anchor important content around the center of the user's field of view, rather than anchoring it to their head. This provides a more natural and comfortable viewing experience.

Add depth strategically

Integrate depth cues to communicate hierarchy, clarity, or delight, but avoid adding depth to text. Use depth to help interactive elements stand out or to deprioritize background elements.

Leverage volumes for 3D content

Use windows for typical 2D content, but leverage volumes (3D spaces) to display 3D content like models or objects that benefit from a physical representation.

Define appropriate scaling

Use dynamic scaling for typical UI objects to maintain consistent usability across distances, and fixed scaling for objects that should mimic their physical counterparts.

Provide ample whitespace

Allow sufficient whitespace to facilitate accurate eye tracking and comfortable selection through indirect gestures.

Round interactive elements

Follow the Human Interface Guidelines by using rounded interactive elements, as they lack sharp corners that can draw unwanted focus.

Choose your gestures wisely

Prioritize indirect gestures for optimal user experience, reserving direct gestures for object manipulation or inspection when necessary.

Use ornaments strategically

Ornaments can house important interactive controls but maintain an uncluttered layout and visual coherence by using them judiciously.

Use motion subtly

Incorporate motion intentionally and subtly to enhance the experience, avoiding overwhelming or disorienting motion effects. Provide stationary frames of reference when extensive visual motion is present.

Want to take your app to Apple Vision Pro?

We're here to help.

Learn more

Conclusion

Overall, Apple Vision Pro definitely offers a new era of immersive, spatial computing apps. To unlock its potential, together with Merge, you can embrace the unique capabilities of visionOS. 

Let’s summarize all the design rules we’ve learned today:

• When creating apps for Vision Pro, prioritize comfort and natural interactions. Leverage the device's unique spatial computing capabilities to craft immersive experiences.
• Embrace Vision Pro's visual language, spatial design principles, and innovative input methods. This will allow you to move beyond traditional screens and create captivating 3D worlds.
• The most successful apps will be those that fully utilize the Vision Pro's capabilities. Experiment with depth, scale, and human-centric ergonomics to redefine spatial computing experiences.
• Harness the power of eye and hand gestures to enable novel, intuitive interactions. Ensure these interactions feel seamless and provide clear feedback.

Those willing to push the boundaries of what's possible with the Vision Pro will set the new standard for immersive apps.

So, would you like to create groundbreaking experiences that will transport your users into captivating 3D environments?