Spatial UI Design: Where 2D Thinking Breaks Down

Your design system works perfectly on screens. Your buttons are pixel-perfect. Your hierarchy is clear. Then you build for AR or VR, and suddenly nothing feels right.

The problem isn't your skills—it's that 2D design principles don't translate to spatial environments. When you're designing interfaces that exist in three dimensions, with depth, perspective, and user movement all factoring in, the mental model shifts entirely. Let's look at where most 2D designers stumble and what actually works in 3D space.

Ignoring Depth and Layering

In 2D, layering is a visual concept. You use opacity, shadows, and position to suggest depth on a flat plane. In 3D, depth is physical.

The mistake: treating a 3D scene like a layered Photoshop file. You place UI elements at different Z-depths but forget they need spatial coherence. Your text might sit at Z=0, a button at Z=-2, and a panel at Z=5 with no logical relationship between them.

What to do instead

Establish a spatial hierarchy based on interaction distance and importance. Elements the user interacts with most should be positioned within arm's reach (typically 0.5–2 meters in VR). Background information or secondary controls belong further back. This isn't arbitrary—it reflects how humans naturally organize physical space.

typescriptCopy
interface SpatialUIElement {
  position: Vector3;
  interactionDistance: number; // in meters
  priority: 'primary' | 'secondary' | 'background';
}

const primaryButton: SpatialUIElement = {
  position: new Vector3(0, 1.2, 1.0), // at chest height, arm's reach
  interactionDistance: 0.3,
  priority: 'primary'
};

const backgroundPanel: SpatialUIElement = {
  position: new Vector3(0, 1.5, 5.0), // far back, informational
  interactionDistance: 0.5,
  priority: 'background'
};

Forgetting About User Movement and Perspective

A button's size on a 2D screen is fixed. In 3D space, size and legibility change based on distance, angle, and user position. This is where many designers miss the mark.

Designing a UI element at a specific distance then expecting it to work equally well when the user moves three feet closer will fail. Text that reads clearly at 1.5 meters away becomes unreadable at 0.5 meters because the viewing angle shifts and individual pixels take up too much visual space.

Practical approach

Test readability and interaction targets across the actual range of distances where users will operate. A good rule: ensure text remains legible and buttons remain hittable from 0.3 to 3 meters, depending on your application. Scale elements appropriately for their depth.

typescriptCopy
function calculateUIScale(distanceInMeters: number, baseSize: number): number {
  // Maintain visual size consistency across depth
  // Farther objects need to be physically larger
  const referenceDistance = 1.0;
  return baseSize * (distanceInMeters / referenceDistance);
}

const buttonSize = calculateUIScale(1.5, 0.15); // 0.225 units at 1.5m
const distantText = calculateUIScale(3.0, 0.05); // 0.15 units at 3m

Misunderstanding Interaction Affordances

In 2D, you use visual cues—shadows, highlights, color changes—to show interactivity. In spatial UI, those signals often feel weak or ambiguous.

When a user can walk around, rotate, and approach an interface from multiple angles, flat visual feedback isn't enough. You need spatial affordances: depth changes, rotation toward the user, sound feedback, or hand proximity visualization.

Better affordances for 3D

• Proximity feedback: UI elements subtly brighten or scale up as the user's hand approaches
• Gaze coupling: Elements rotate slightly to face the user's view direction
• Haptic reinforcement: Paired with visual feedback for confirmation
• Spatial audio cues: Sound sources that localize in 3D space

At LavaPi, we've found that the most successful spatial interfaces combine visual, audio, and haptic channels—redundancy matters when your interface exists in the real world.

The Core Shift

2D design optimizes for a fixed viewpoint and a flat surface. Spatial design optimizes for presence, movement, and physical interaction. Your UI elements aren't graphics layered on a screen—they're objects in space that users navigate, approach, and manipulate from multiple angles.

Stop thinking about UI as something viewed. Start thinking about it as something inhabited.