5 Principles of Spatial Design

The fundamentals of spatial design by Apple WWDC23, best practices for creating comfortable, human-centered experiences that transforms reality.

  1. Familiar
    • use familiar elements like sidebars, tabs, search field; provides consistency
    • place interfaces within windows people are used to.
    • Use points to size interface elements so they adapt across distances
  2. Human-centered
    • consider people's wide field of view and use landscape layouts
    • design for ergonomics by placing content at comfortable viewing angles and distances that encourage good posture
    • minimize required movement, ex: press and hold digital crown to recenter app
  3. Dimensional
    • use available space, don't limit to physical room
    • use depth for hierarchy and focus, nearby objects feel tangible, far away feels impressive. (ex: playback control is a nearby element compared to screen)
    • reinforce depth with lighting and shadows to appear realistic (ex: screen shines light onto nearby objects, objects casts shadows, grounding them)
    • prefer subtle depths, (ex: use for contrasting modals)
    • explore small and large scale (ex: movies should be large and impressive, shopping products should be real-life scale)
  4. Immersive
    • immersion spectrum: from shared spaces to full spaces, can take people to new places, or still show their surroundings
    • guide focus to avoid overwhelming people
    • blend thoughtfully with surroundings using soft edges, lighting, shadows. Anchor content
    • add liveliness with subtle animation (water rippling and clouds)
    • create atmosphere with spatial audio
    • avoid large fast movements, fade out content when moving, and back in when settled
    • provide clear entry and exit to immersive experience with recognizable icons like expand/collapse arrows
  5. Authentic
    • Identify key interactions, perspectives or moments that can be experienced spatially (ex: viewing panorama, seeing pictures at real-life scale) with rich visuals and high-fidelity audio, make things feel real.
    • Make use of space and immersion for creativity, focus, or evoking feelings

The video shows a lot of cool examples for these concepts.

I can't wait for the day where I own a Vision Pro, and interact with the web in a completely different way.