Spatial Design for Immersive Apps: Creating User-Friendly and Engaging Experiences

Spatial design is a rapidly evolving field, and the principles outlined in this article will help you create immersive apps that are user-friendly and engaging.

The first part of the article discusses the principles of spatial design for immersive apps, such as familiar spatial elements, human-centered design, and designing with dimension. The second part of the article discusses the specific considerations that should be taken into account when designing spatial user interfaces for immersive apps, such as UI foundations and app icons, materials and visual language, typography and vibrancy, creating ergonomic layouts, core structure and presentation styles. And, last part will discuss about designing spatial input for eyes and hands.

Principles of Spatial Design for Immersive Apps

Designing Familiar Spatial Apps

• Emphasize the use of common elements like sidebars, tabs, and search fields for familiarity.
• Place interfaces within windows, making them feel like part of the surroundings.
• Design windows with a new visual language, using the glass material for contrast and adaptability to lighting conditions.
• Use flexible window sizes and shapes to accommodate different content types.
• Utilize tab bars and toolbars to provide more room for content and separate controls from it.
• Avoid blocking too much of people’s view by keeping windows smaller when possible.

Human-Centered Design for Spatial Apps

• Focus on the center of people’s field of view for the most important content.
• Use landscape layouts to match the wide field of view.
• Consider ergonomics when placing content, allowing for comfortable interaction from various positions.
• Place content relative to the person’s head direction for natural viewing and interaction.
• Encourage interaction at a distance by placing content slightly further than arm’s reach.
• Avoid anchoring content to people’s view; instead, anchor it in their space for natural exploration.
• Create stationary experiences to minimize the need for physical movement.
• Leverage the system’s re-centering feature for readjusting content after movement.

Designing Apps with Dimension

• Take advantage of the available space around people but design for any amount of space.
• Blend app content thoughtfully with the user’s physical surroundings.
• Use depth to create hierarchy and direct people’s attention to essential elements.
• Use light, shadow, and visual cues to reinforce depth.
• Experiment with different scales to emphasize content.
• Subtle animation and Spatial Audio can bring liveliness and atmosphere to the experience.

Creating Immersive Apps

• Understand the immersion spectrum, offering dynamic transitions between states of immersion.
• Start apps in a window in the Shared Space to give users control over immersion level.
• Guide people’s focus towards essential parts of the experience.
• Blend app content with reality and use soft edges for smooth integration.
• Make use of subtle motion and lighting effects to create an alive feeling.
• Design smooth and predictable transitions for comfort.
• Provide a clear way for users to enter and exit immersive experiences.

Designing Authentic Apps for the Platform

• Focus on unique aspects that can be experienced spatially or immersively.
• Find key moments that can be enhanced with depth, scale, or transformation in space.
• Create experiences that feel real and unique, using high-fidelity visuals and audio.
• Enhance existing features with spatial elements to make the experience memorable.

Designing Spatial User Interfaces for Immersive Apps

UI Foundations and App Icons

• App icons are three-dimensional and realistic, expanding with a 3D effect when viewed.
• Use multiple layers for app icons (background and up to two foreground layers).
• Design icons as edge-to-edge square images; all layers are cropped by a circular mask.
• Keep graphics centered and avoid using large regions of semi-transparent pixels.

Materials and Visual Language

• Introduce the glass material for apps to adapt to different lighting conditions.
• Glass material feels part of the physical world, allowing light and virtual content to show through.
• Use system-defined vibrant materials for better legibility and dynamic adaptability.
• Avoid stacking lighter materials to maintain contrast and legibility.

Typography and Vibrancy

• Adapt font styles to be legible at any distance; use semantic names that work on all platforms.
• Increase font weight slightly to improve contrast against vibrant materials.
• Use vibrancy to enhance legibility and maintain system materials’ hue and contrast.
• Use white text or symbols for clarity; use system colors and avoid solid colors on windows.

Creating Ergonomic Layouts

• Prioritize physical comfort and safety; consider neck range of motion for content placement.
• Size interactive elements with at least 60 points of space for easy targeting.
• Use the hover effect to indicate interactivity and design layouts with proper padding for focus feedback.

Core Structure and Presentation Style

• Understand the input model (eyes, hands, voice) for interactions.
• Design app windows, tab bars, and sidebars for easy navigation and hierarchy.
• Utilize ornaments for persistent controls and easy access to actions.
• Use menus, popovers, and sheets as modal views for additional content or navigation.

Designing Spatial Input for Eyes and Hands

Eyes as Targeting Mechanism

• Eyes are the primary targeting mechanism for spatial experiences.
• Design apps to fit inside the field of view, keeping the main content in the center for comfortable viewing.
• Use depth responsibly, keeping interactive content at the same depth to avoid eye strain.
• Design UI elements with round shapes and generous padding to guide eyes to the center for precise targeting.
• Maintain a minimum target area of 60 points for eye-friendly interactions.

Eyes as a Signal of Intent

• Interactive elements highlight when users look at them, providing eye feedback.
• Eye intent can be used to trigger tooltips, expand tab bars, and perform actions like Speak to Search.
• Eye intent provides opportunities for assistive technology, like the Dwell Control feature for selecting content.

Hands as Primary Interaction

• Hand gestures, combined with eyes, are the primary way to interact across the system.
• Familiar gestures like pinch, drag, zoom, and rotate are supported and should match people’s expectations.
• Consider custom gestures, but ensure they are easy to perform, distinct from standard gestures, and accessible for all users.
• Eye direction combined with hand gestures allows for precise and satisfying interactions, making simple behaviors more intelligent.

Direct Touch Interaction

• Direct touch interaction allows users to reach out and interact with UI elements using their fingertips.
• It’s suitable for experiences that require up-close inspection, object manipulation, or physical activity at the core of the experience.
• Compensate for the lack of tactile feedback with visual and audio cues to make interactions feel reliable and satisfying.

By following the principles and considerations outlined in this article, you can create immersive apps that are user-friendly, engaging, and authentic.

I hope you found this article helpful!

References:

Principles of spatial design - WWDC23 - Videos - Apple Developer

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

Design for spatial input - WWDC23 - Videos - Apple Developer