WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Principles of spatial design

Principles of spatial design

Spatial ComputingDesignvisionOS
Watch original video

Highlight

Apple distilled five principles for visionOS spatial design: stay familiar, center on people, embrace dimension, immerse progressively, and feel native to the platform.

Core Content

Spatial computing is not about floating an iPad app in a room. Nathan Gitter and Amy DeDonato use system apps like Music, Safari, Keynote, TV, Mindfulness, and Photos to explain why spatial design starts with restraint.

(01:25) The first principle is familiarity. Users still need sidebars, tabs, search fields, and windows. The new platform did not remove these—it just placed them in space. Windows use glass material that contrasts with the real world while preserving environmental awareness. The system provides move, close, and resize controls; when users drag a window, it always turns to face them so content stays readable.

(02:49) Window size is driven by content. Safari suits a tall window because web pages scroll vertically; Keynote suits a wide window because slides need horizontal space. Toolbars and tab bars can extend beyond the window, like Music suspending controls above the main content. When Safari opens its sidebar, the window grows wider instead of covering the webpage. Apple’s guidance is clear: keep windows modest, prefer a single window, and treat multiple windows as a management burden for users.

(04:32) The second principle is human-centered design. Users wear the device, interact with eyes and hands, and experience apps in their own rooms. Important content should sit in the center of the field of view, with layouts favoring horizontal orientation because human vision is wide. Safari’s tab overview is an example: tabs spread in a grid, with side tabs rotating inward for readability.

(06:36) Ergonomics dictate content placement. The system places windows at a natural sight line by default, encouraging comfortable posture. Custom content should be positioned relative to the user’s head and facing direction, adapting to different heights, seating positions, and even lying on a couch. Most content should sit slightly beyond arm’s length to encourage distant interaction. Avoid placing content behind the user, too high, or too low. Do not lock content to the field of view—that creates a “stuck to the eyes” feeling; anchor content in space so users can turn their heads naturally to observe it.

(08:21) The third principle is dimension. Space is infinite, but the user’s physical room may be small. Windowed content is handled by the system in relation to the room—developers do not need to worry about it passing through chairs or walls. Video content can use dimming to expand usable space: when the TV app plays a movie, the image fills the window and surrounding passthrough is darkened. Users still know where they are, but attention is drawn to the content.

(09:57) Depth is a new hierarchy tool. Large content far away suits viewing; small controls nearby suit interaction. TV’s immersive cinema places playback controls in a small, close position—though the controls are small, they have higher visual priority than the huge screen in the distance. Placing controls on the movie screen makes them feel oversized and out of place. Use light and shadow to reinforce depth: glowing objects should illuminate nearby surfaces; ordinary objects should cast shadows. Text generally should not be 3D—it becomes hard to read when viewed at an angle.

(12:37) The fourth principle is progressive immersion. Apps can start in a window in Shared Space, then enter Full Space at key moments. Keynote opens as a normal window; during playback, dimming focuses attention on the presentation; rehearsal enters a full theater. Apple recommends starting from a window and letting users control immersion level.

(15:00) Immersive experiences need to guide attention. Mindfulness uses motion, spatial audio, and colorful materials to pull focus toward flowers in space; during deep reflection, the flowers expand to surround the user. Transitions should be smooth and predictable so users know what is happening. Room blending should use soft edges to avoid abrupt scene boundaries. Subtle animation and spatial audio can bring static scenes to life—you do not need to render a full theater; faint reflections on the floor and ceiling can convey a cinema feel.

(17:35) Comfort is a hard constraint. If you must move the user’s position or move the immersive space, avoid large, rapid motion. Fade out content during movement and fade in once stable. When the user moves physically, the immersive experience should fade out so they can see the real environment. Entering and exiting immersive modes both need clear entry points with short labels and familiar icons, such as expand and collapse arrows.

(18:24) The final principle is platform nativeness. Great visionOS apps should be worth inviting into the user’s space. Photos keeps a familiar library window, then enlarges a special photo to near real-world scale and dims the environment; panoramas take users back to the capture location. The key is not spatializing every feature—it is finding a pivotal moment that only works on a spatial platform.

Detailed Content

Design checklist

1. Familiarity
   - Does it preserve navigation structures users recognize?
   - Does it prioritize windows for the main interface?
   - Does it avoid jumping straight into Full Space?

2. Ergonomics
   - Is main content in the center of the field of view?
   - Does it use horizontal layouts to match wide vision?
   - Is content placed along the natural sight line, slightly beyond arm's length?
   - Does it avoid head-locked content?

3. Dimension
   - Is depth used for hierarchy and focus?
   - Are nearby controls kept small and clear?
   - Do glowing objects have reflections, and ordinary objects have shadows?
   - Is text kept flat?

4. Immersion
   - Does it start from a window and let users decide to go deeper?
   - Does Full Space have clear entry and exit paths?
   - Are scene transitions smooth and predictable?

5. Platform nativeness
   - Is there a pivotal moment that only works on a spatial platform?
   - Does it avoid mechanically moving an entire legacy app into space?

Key points:

  • This is a no-code design session—the practical entry point is a product review checklist, not API calls
  • Each item comes from system app examples in the transcript
  • Suitable for design reviews or visionOS migration assessments, checked item by item

Window design principles

Window size: driven by content, smaller is better
- Safari: tall window for long web reading
- Keynote: wide window for slide proportions
- Music: toolbar floats outside the main window, leaving room for content
- Safari sidebar: window widens when expanded, without covering the webpage

Window count: single window by default
- Multiple windows only for side-by-side content or independent actions that must work together
- Keynote playback: large, distant slides + small, nearby presenter display

Key points:

  • There are no screen edges in space, but oversized windows block the user’s field of view
  • Multiple windows increase management cost and should not be the default design
  • Toolbars can break free of the rectangular window outline—new freedom on a spatial platform

Immersion mode examples from the transcript

Windows in Shared Space
  Keynote and Photos both start with familiar windows for the main interface, keeping users in control

Window playback + Dimming
  Keynote presentations and TV movies dim the surroundings to help users focus on content

Room-visible experiences in Full Space
  Some immersive scenes still keep the real room visible so users can see hands, keyboard, or controllers

New environments in Full Space
  Keynote rehearsal takes users to a theater; environments can extend beyond the physical room

Key points:

  • These are design pattern examples from the transcript, not a formal classification table from Apple
  • Dimming is a way to focus attention and can be used in window playback or presentation scenarios
  • Full Space can also keep the room visible—it does not have to fully replace the user’s surroundings

Core Takeaways

  • Design an “enlarge the memory” moment for photo apps: Lists, albums, and search stay in windows; when users open their most important photo, enlarge it to near real-world size and slightly dim the environment. Panoramas can enter a semi-immersive mode that takes users back to the capture location.

  • Build a classroom with nearby controls and distant content for education apps: Place courseware or models far away and enlarged, with chapter navigation and playback controls on a small nearby panel. Hierarchy stays clear, and users do not need to reach for distant content.

  • Make product 3D showcases a true-scale experience: E-commerce or industrial design apps can let users browse in a window, then place a selected model at real-world scale on a desk or in a room. Use shadows and ambient light so objects feel grounded—do not make all UI 3D.

  • Add a safe exit path for immersive scenes: Every Full Space should have a clear “exit immersion” button with a short label and familiar icon. Fade out before moving scenes, then fade in—avoid forcing the user’s viewpoint to move.

Comments

GitHub Issues · utterances