The fundamentals of spatial design by Apple WWDC23, best practices for creating comfortable, human-centered experiences that transforms reality.
- 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
- 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
- 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)
- 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
- 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.