Design Atlas
한국어
◫ Spatial UI & XR

Comfort zone

컴포트 존

The field-of-view and arm-reach radius where content can be seen without turning the head and touched without straining — persistent UI belongs inside it.

Also known as: FOV comfort zoneReach zoneField of view guideline
···
html
<svg viewBox="0 0 300 200" class="cz"></svg>
css
body{background:radial-gradient(circle at 50% 90%,#1a1c30,#0a0a12 70%)}
.cz{width:min(100%,420px);height:auto}
js
const svg=document.querySelector('.cz');
const NS='http://www.w3.org/2000/svg';
function el(name,attrs){ const n=document.createElementNS(NS,name); for(const k in attrs) n.setAttribute(k,attrs[k]); return n; }
const cx=150, cy=196;
function wedge(r, deg, fill, stroke){
  const a1=(-90-deg)*Math.PI/180, a2=(-90+deg)*Math.PI/180;
  const x1=cx+r*Math.cos(a1), y1=cy+r*Math.sin(a1), x2=cx+r*Math.cos(a2), y2=cy+r*Math.sin(a2);
  return el('path',{d:'M '+cx+' '+cy+' L '+x1+' '+y1+' A '+r+' '+r+' 0 0 1 '+x2+' '+y2+' Z', fill, stroke, 'stroke-width':1.5});
}
svg.appendChild(wedge(178,60,'rgba(91,91,247,.10)','rgba(91,91,247,.4)'));
svg.appendChild(wedge(70,60,'rgba(255,122,89,.16)','rgba(255,122,89,.55)'));
svg.appendChild(el('circle',{cx,cy,r:6,fill:'#fff'}));
const labels=[['Field of view','rgba(180,190,255,.9)',150,20],['Reach','rgba(255,190,170,.95)',150,138]];
labels.forEach(([t,c,x,y])=>{
  const n=el('text',{x,y,fill:c,'font-size':10,'font-weight':700,'text-anchor':'middle'});
  n.textContent=t; svg.appendChild(n);
});
const nodes=[[150,40,'far'],[76,72,'ui'],[224,72,'ui'],[150,150,'ui']];
nodes.forEach(([x,y,kind])=>{
  const c=el('circle',{cx:x,cy:y,r:kind==='ui'?9:7,fill:kind==='ui'?'#5b5bf7':'rgba(255,255,255,.5)'});
  svg.appendChild(c);
});

A headset's lenses show more than the human eye normally takes in, but not all of it is comfortable. Roughly 30–60 degrees left and right of straight ahead is what the eyes alone can cover comfortably; past that, the head has to turn. Arm reach (roughly 40–70cm) is a separate radius — something can be in view yet still be out of reach.

Persistent UI — toolbars, notifications, controls — belongs inside both circles: the field-of-view comfort zone and the arm-reach radius. Placed outside either, users end up turning their head or leaning forward for every interaction, which tires them out even on short tasks. Background and environmental content, by contrast, can extend well beyond this range since it is not something you keep reaching for.

The demo draws a top-down floor plan of the user with the FOV comfort zone (a wide wedge) and the reach radius (a tighter circle) overlaid. UI fragments that cross the wedge's edge fade, marking "you'd need to turn your head to reach this."

When to use

Frequently used controls must stay inside this range. Content meant only to be looked at, like photos or video, can extend past it just fine.