Spatial UX Design 2026: Designing Interfaces for Apple Vision Pro, Meta Quest & visionOS
The Headache Nobody Told You About
You have designed a beautiful floating panel for Apple Vision Pro. Typography is clean, hierarchy is clear, the glass morphism background is textured just right. Then someone puts it on and places the panel 20 centimetres from their face. Within five minutes: eye strain, headache, and an uninstall.
That is a spatial UX failure — and it has nothing to do with aesthetics. It has everything to do with a constraint that flat-screen designers have never had to think about: the human visual system's ability to simultaneously focus on a virtual object and perceive it at a certain depth.
Spatial computing is no longer a research prototype. Apple Vision Pro has reached its second major hardware iteration. Meta Quest 3 is embedded in enterprise workflows for training, collaboration, and spatial data visualization. The early adopter phase is over. Platform-scale UX problems are now design problems — and the field needs a vocabulary.
This guide builds that vocabulary: the core principles, critical constraints, and practical patterns for designing interfaces that work in three-dimensional space.
Section 1: The Spatial Design Paradigm — What Changes
Flat UI design is a two-dimensional discipline. You compose elements on a canvas, arrange them in a hierarchy, and the user navigates using a mouse, keyboard, or finger. The screen is a fixed, rectangular window into your interface.
Spatial UX breaks all four of those constraints simultaneously.
Windows float in physical space, not on a screen. The user can move them, resize them, push them away, or leave them in a room and return later. There is no implicit "above the fold" — a window left on the ceiling is equally "visible" as one at eye level.
Depth communicates hierarchy. In flat design, visual weight and proximity signal importance. In spatial design, Z-axis position is a design variable: content that is closer feels more urgent, content that is further away feels ambient or dismissed.
Input is eye and hand, not mouse and keyboard. On visionOS, the user looks at an element to focus it and pinches to activate it. On Meta Quest 3, near-field hand tracking lets users physically reach and touch UI elements within arm's reach; far-field interactions use raycast pointing from a distance.
The environment is part of the design surface. In passthrough mode (where the real world is visible), your UI overlays the user's kitchen, office, or living room. You do not control the background. You cannot assume lighting, colour, or spatial context.
| Platform | Input Method | Primary Use Case | Resolution | Design Target |
|---|---|---|---|---|
| Apple Vision Pro | Eye gaze + pinch, voice | Creative tools, media, enterprise | High (micro-OLED) | Precision UI, detail-rich content |
| Meta Quest 3 | Hand tracking, controller | Enterprise training, gaming, social | Medium | Large targets, forgiving interaction |
| Meta Quest Pro | Eye tracking + hand | Enterprise collaboration | High | Productivity, mixed reality work |
Three immersion modes define the spatial design context:
Passthrough (Shared Space) — the real world is fully visible. Your app's windows float in the user's physical environment. Multiple apps can coexist in this space, like apps on a desktop.
Shared Space with dominance — one app takes visual priority but the real world remains visible. Used for focused creative work.
Full Space (Full Immersion) — the real world is replaced by a virtual environment. Used for games, meditation, cinematic experiences.
Always design your primary experience for Passthrough first. Full immersion should be opt-in, not default.
Section 2: The Comfort Zone — Your Most Important Constraint
The vergence-accommodation conflict is the core physiological constraint of spatial computing. When human eyes focus on an object, they simultaneously rotate inward (vergence) and adjust lens curvature (accommodation). These two responses are tightly coupled in natural vision.
In current XR headsets, the display is at a fixed physical distance from the eye (typically 5-7cm). But virtual objects are rendered at varying apparent distances. The eye can accommodate to the object's apparent depth (look at something that appears 2 meters away) but cannot fully resolve the vergence-accommodation mismatch for very close or very far objects. The result, at extreme distances, is eye strain and fatigue.
The practical comfort zone for most content: 1 to 3 meters from the user.
| Apparent Distance | Design Guidance |
|---|---|
| < 0.5m | Never use for static content; severe vergence strain. Only for transient, user-initiated effects |
| 0.5m – 1m | Use sparingly. Acceptable for brief interactions (notifications, confirmations) |
| 1m – 3m | Primary content zone. All main UI should live here |
| 3m – 5m | Ambient information, environmental elements, background UI |
| > 5m | Spatial audio signals only; visual detail is lost at this range |
The "ceiling of sky" rule: never place persistent UI above a 60-degree vertical angle from the user's eye level. Looking up for extended periods causes neck fatigue. Apple's own visionOS apps keep primary content between -20 and +30 degrees from horizontal eye level.
UI scaling with depth: as objects move further away, they must scale up to maintain perceived size and legibility. A button that reads clearly at 1 meter needs to be roughly twice the visual size to read equally well at 2 meters. Design your spatial layout for a specific primary distance — and test at that distance on device, not just in the simulator.
Section 3: Eye-and-Pinch Interaction Design (visionOS)
visionOS's primary input model is deceptively simple: look to focus, pinch to activate. In practice, designing for this input method requires rethinking fundamental assumptions from mouse and touch design.
The three-state interactive model for visionOS:
- Default — the element is present but not focused. Renders at normal visual weight.
- Look (Hover via gaze) — the user's gaze rests on the element. The element brightens slightly, scale may increase subtly, a hover ring or glow indicates readiness. This state is critical — it is the user's only confirmation that the system has registered their attention.
- Select (Pinch) — the user pinches (typically thumb and index finger together) while gazing at the element. The action executes, and a brief activation animation confirms the interaction.
The Look state is the most frequently neglected in first-time spatial UI design. Without a clear gaze response, users are left guessing whether the system is tracking their eyes correctly. Every interactive element must have a visible Look state.
Minimum target size for eye-and-pinch: Apple recommends a minimum of 44pt × 44pt at a reference distance of 1.5 meters. This is larger than iOS touch targets (44pt on a screen held 30cm away subtends a different angle). At 2 meters, increase minimum sizes to 60pt equivalent.
Dwell activation vs pinch: For users with tremor or motor impairments, dwell activation (the element activates after the user gazes at it for 1-2 seconds) offers an alternative. Design for both. Make dwell sensitivity configurable.
Meta Quest 3 hand-tracking patterns:
- Near-field (within arm's reach): direct touch — users literally poke or grab virtual UI elements
- Far-field (beyond arm's reach): raycast pointing — a virtual ray extends from the hand, and users point-and-pinch at distant UI
- Voice: always available as an input fallback; critical for accessibility
Section 4: Depth Hierarchy — Using the Z-Axis as a Design Signal
In 2D design, visual hierarchy is created through scale, contrast, position, and whitespace. In spatial design, depth (Z-axis position) is an additional hierarchy signal — and it carries semantic meaning.
Three-layer spatial depth model:
Background layer (3-5m apparent distance) — environmental elements, ambient information, contextual visual atmosphere. This layer should never contain interactive elements — users will not comfortably interact with content this far away.
Content layer (1-3m) — primary UI: all main interface panels, content displays, navigation. This is where users spend most of their time.
Foreground layer (0.8-1m) — alerts, tooltips, critical actions, and confirmation dialogs. Content at this layer feels urgent and demands attention because it is "closer" to the user.
Depth as animation signal:
- Objects that approach the user (animate from content to foreground) feel urgent and demanding
- Objects that recede (animate from foreground to background) feel dismissed or deferred
- New panels emerging from background to content layer feel like deliberate arrivals, not intrusions
Glass morphism in visionOS is not purely aesthetic — it is a depth cue. Translucent panels that reflect the user's environment signal that the UI is embedded in real space, not floating in a void. The degree of blur and reflectivity can signal depth: more transparent (less blur) for background elements, more opaque for foreground.
Design principle: Every Z-axis position must communicate something. Depth used purely for decoration adds cognitive load without meaning. A button 10cm closer than its siblings implies greater urgency — if it is not actually more urgent, the depth is wrong.
Section 5: Typography and Content Design for Spatial Environments
Reading in spatial computing is fundamentally different from reading on a screen. The text is not on a fixed surface with consistent lighting — it floats against an unpredictable background at a variable apparent distance.
Minimum type sizes at reference distances:
| Distance | Body Text Minimum | Heading Minimum | Label Minimum |
|---|---|---|---|
| 1m | 14pt | 24pt | 11pt |
| 1.5m | 17pt | 28pt | 13pt |
| 2m | 22pt | 36pt | 17pt |
| 3m | 30pt | 48pt | 22pt |
The adaptive contrast problem: In passthrough mode, the background behind your text panel is whatever the user's environment looks like. A dark background colour on a dark wall becomes illegible. Glass morphism panels need adaptive text colour — measure the luminance behind the panel and switch between dark and light text accordingly. Apple's vibrancy materials handle this automatically; custom implementations must account for it.
World-locked vs head-locked content: Text attached to a fixed point in physical space (world-locked) shifts in the user's view as they move their head. For long-form text, world-locked is correct — it behaves like a real book sitting on a table. For critical notifications and HUD elements, head-locked (moving with the user's head position) ensures the information is always legible regardless of head movement.
Content chunking: Reading in a headset is more tiring than reading on-screen. Target maximum 100 words per visible text block. Use larger paragraph spacing (1.8-2x line height rather than the standard 1.5x). Prefer shorter sentences (≤20 words) for UI copy.
Section 6: Designing for Mixed Reality — Respecting the Real World
Passthrough mode means your UI exists in the user's real physical environment. This introduces design constraints that flat-screen UX has never faced.
Environmental unpredictability: Your UI will be viewed against white walls, dark rooms, sunlit windows, and cluttered desks. Design for all of them simultaneously. Test your UI with a simulated bright background and a simulated dark background. If it fails either, revise.
Spatial audio as a UX signal: positional audio in visionOS and Quest confirms interactions and establishes spatial relationships. A notification that "arrives from the left" (played in the left audio channel) lets the user find it without moving their head. A button click sound confirms activation without requiring visual feedback alone. Spatial audio is not a nice-to-have in XR — it is a primary UX feedback channel.
Real-world anchoring: Attaching UI elements to physical objects creates natural, memorable interaction points. A calendar app that "sits on the user's virtual desk" exploits the spatial memory advantage of physical place — people remember where things are in space more reliably than where they are in digital hierarchies.
The social context problem: When a Vision Pro user sits in a café, people nearby see a person wearing a headset — not the experience. The "external face" of the experience matters. EyeSight (the Vision Pro feature that displays the wearer's eyes on the outward-facing screen) is Apple's first attempt to address social presence. Designing for multi-person environments means considering the experience of those not wearing the device.
Environmental safety: Every spatial computing experience must provide a mechanism to check surroundings without removing the headset. Apple's look-through gesture (looking down and past the device) is built in; apps should not override this safety valve. For full-immersion experiences, a low-battery or time-based check-in prompt that fades the virtual environment momentarily is a responsible design pattern.
Section 7: Getting Started — Tools and Learning Path
Design Tools:
- Figma + Apple's official visionOS UI Kit — for component design in a familiar environment
- Apple Reality Composer Pro — for spatial layout, physics-based interactions, and 3D asset composition
- SketchUp, Blender — for 3D asset creation
- Unity + Meta's Presence Platform — for Quest-first development
Testing Tools:
- Xcode's visionOS Simulator — test window placement and basic interactions without hardware
- Apple Vision Pro hardware — necessary for eye-tracking accuracy, comfort zone validation, and glass morphism legibility testing
- Meta Quest Developer Hub — for Quest app testing and performance monitoring
Recommended learning path:
- Read Apple's Human Interface Guidelines for visionOS in full — especially the sections on ergonomics, eye tracking, and system glass
- Build a single window-based app in Reality Composer Pro before tackling any immersive experience
- Test every design in the simulator at 1x, then on device at the target distance — they feel very different
- Join the Apple Vision Pro developer community — spatial design patterns are actively being established and sharing is fast
Spatial UX is not AR/VR dressed in better marketing — it is a genuinely new design discipline with its own physics, its own input model, and its own relationship with the human body. The designers who invest in learning it now are building the vocabulary that will define how computing feels for the next generation of users.
Start small: design a single floating panel correctly, with the right comfort distance, the right gaze-response state, and the right typographic scale. Get that right, and the rest of the discipline becomes learnable.
Frequently Asked Questions
What is spatial UX design? Spatial UX design is the discipline of creating user interfaces for three-dimensional, mixed reality environments like Apple Vision Pro (visionOS) and Meta Quest. Unlike flat screen design, spatial UX must account for depth, physical comfort, eye-tracking interactions, hand gestures, and the user's real-world environment as a design surface.
How is spatial UX different from regular UI design? Flat UI design works in two dimensions with mouse/touch input on a fixed screen. Spatial UX operates in three dimensions where windows float in physical space, depth communicates hierarchy, eye gaze controls focus, and hand pinches replace clicks. Physical comfort (ergonomics) becomes a core design constraint alongside visual hierarchy.
What are the key design principles for visionOS? Apple's visionOS HIG defines five core principles — physical comfort (keep content in the comfort zone 1 to 5 meters ahead), glass morphism aesthetics (translucent panels that respect the environment), eye-and-pinch input (look to focus, pinch to activate), progressive immersion (start in passthrough, offer full immersion as opt-in), and spatial audio as a UX signal.
What are the biggest UX mistakes in spatial design? The most common mistakes are placing content too close (causing eye strain within 50cm), making interactive targets too small for eye-and-pinch precision, using flat 2D design patterns directly in 3D without depth adaptation, overwhelming users with too many simultaneous floating windows, and designing for a single lighting context without considering the user's unpredictable real-world environment.
How do I start designing for Apple Vision Pro? Start with Apple's Vision Pro Simulator in Xcode and Reality Composer Pro for spatial prototyping. Design in Figma using Apple's visionOS UI Kit, paying attention to component sizing, typography hierarchy (minimum 14pt for body at 1m distance), and glass morphism backgrounds. Study Apple's Human Interface Guidelines for visionOS — spatial design conventions differ significantly from iOS.