Spatial Design Principles
Notes from WWDC23
Introduction
Apple’s recent announcement of Vision Pro has sparked excitement in the design industry. In this article, we will explore the design principles highlighted in the “Spatial Design Principles” video from WWDC23 on developer.apple.com. These principles emphasize familiarity, human-centered design, ergonomics, dimensional elements, immersion, and authenticity. Let’s delve into the details and uncover how Apple is reshaping the design landscape.
Familiarity and Intuitive Controls
Windows
- Place interfaces within windows to provide a familiar experience, with glass material offering contrast and awareness of surroundings.
- The system provides intuitive controls:
— Move: Windows always turn to face the user when being moved.
— Close: A close button is integrated into the window bar for easy window closure.
— Resize: Windows can stretch to fit any size and shape, thanks to a resize notch in the corner.
Size Considerations
How some IOS apps utilize size:
- Safari utilizes tall windows for optimal web page visibility:
— Tab bars and toolbars are always accessible, providing more space for content.
— The navigation bar is set apart from the web page. - Keynote adopts wide windows to accommodate full-size presentations, separating the presenter view from the slides view.
UX & Window Sizes:
- Keep windows small to avoid obstructing users’ views.
- Ideally, maintain an app’s interface in a single window to prevent overwhelming users with multiple windows.
Points
“To make sure our interface scales well, we design with points.”
- Windows scale larger when they move away and scale smaller when they move closer to a user.
- If you design your interface according to points, it will scale itself.
Human-Centered Design
Field of View
- Utilize the wide field of view and place the most important content in the center for optimal visibility.
- Landscape layouts and inward-facing tabs enhance readability.
Ergonomics
- Consider the placement of content based on a person’s head position and facing direction.
- Position content slightly further away from arm’s reach to encourage interaction from a comfortable distance.
- Avoid placing content behind or extremely high/low unless it is part of an immersive experience.
- Anchor content in people’s space instead of their view to allow natural freedom of movement.
Movements
- Design apps that require minimal movement to enhance user convenience.
- Users can recenter content by pressing and holding the ‘digital crown’ without requiring a dedicated feature to bring back windows or reset the scene.
Dimensional
Space
- Design apps to work in any amount of space, avoiding constraints based on physical limitations.
- Moving windows become translucent and pass through objects, making placement easy. When released, content becomes visible, with the system handling this behavior.
- Darken the passthrough (everything apart from the window) when content is played to help users focus. Opting for a full space experience is also possible.
Depth
“Depth affects how we relate to objects in space”
- Encourage interaction at a distance by making faraway content larger and appealing.
- Enable easy inspection of nearby objects from different angles.
Creating Hierarchy with Depth:
- Give visual precedence to small, nearby elements over large objects placed far away.
- Use light and shadows as visual cues to reinforce depth:
— Objects emitting light should cast color onto nearby objects.
— Other objects should cast shadows, making them look integrated into the space.
— Prefer subtle depth adjustments, such as a slight window movement and color change when a modal appears.
Scale
Utilize scale to evoke different perceptions:
- Small objects create a personal and lightweight feel.
- Large objects leave a strong impression.
- Some objects, such as those in e-commerce, are best viewed at their real-life scale.
Immersive Experiences
Immersion Spectrum
- Apps can dynamically transition through various states of immersion:
— Normal window state.
— Panoramic view for an expanded field of vision.
— Spherical view surrounding the user.
Spaces — Apps can function in:
- shared space or
- full space, adapting to different user scenarios.
Essential Tips
“Do more with less.”
- Guide users’ focus by avoiding overwhelming visual stimuli.
- Design smooth and predictable transitions for continuity between different experience states.
- Blend app scenes with reality by utilizing soft edges that merge seamlessly into the surroundings.
- Add subtle motion to make the user interface feel alive.
- Create an immersive atmosphere using sound.
Comfort
- Minimize large and fast movements to ensure user comfort.
- Fade out content during motion, even in immersive experiences.
- Provide clear entry and exit points for users in immersive experiences.
Authenticity
- Leverage the unique capabilities of the device to create authentic experiences.
- Design immersive experiences that utilize the user’s surrounding space.
- Avoid creating apps solely for quick interactions, instead focusing on providing meaningful experiences.
- Find a key moment in your apps and design that part into an immersive experience
Conclusion
The introduction of Apple’s Vision Pro opens up exciting opportunities for new designers to explore and contribute to Spatial Design. As augmented reality technology continues to evolve, designers can pioneer new approaches and focus on creating intuitive, human-centric designs. This nascent space provides a fertile ground for innovation, pushing boundaries, and delivering extraordinary experiences that seamlessly integrate with users’ surroundings.
New designers have a unique chance to make their mark by mastering these principles and spearheading the next wave of transformative design in augmented reality.
Maybe in another article we will discuss how Apple’s VisionOS differs from the metaverse from an eye of DESIGN!
*This article was enhanced by Chatgpt 3.5 (plus)
If you found it helpful, give this article a clap and let me know 👏
Feel free to ask questions and leave feedback in the comments 💬
Click on the image below to check out my website and connect with me on other platforms 👇
