AR/VR UI Design
User interface design in AR and VR differs greatly from flat screen design. This topic covers the core rules for placing menus, buttons, and text inside a 3D space.
Diegetic vs Non-Diegetic Interfaces
A diegetic interface exists as an object inside the virtual world, such as a watch on a character's wrist that shows health status. A non-diegetic interface floats independently of the world, such as a health bar fixed at the top of the screen. Diegetic interfaces feel more natural, while non-diegetic interfaces stay easier to read at a glance.
Diagram: Diegetic vs Non-Diegetic UI
Placing Elements at a Comfortable Distance
Place important text and buttons about one to two meters away from the user's virtual position. Objects placed too close force the eyes to strain, and objects placed too far become hard to read clearly.
Depth and Layering
Give interface panels real depth instead of flattening them against the screen like a 2D app. A slight tilt or a small gap between layered panels helps the brain understand which element sits in front of another.
Simple Example
Picture a car dashboard. Speed and fuel gauges sit built into the dashboard itself, acting like a diegetic interface. A phone mounted on the dashboard showing turn-by-turn directions acts more like a non-diegetic interface, since it floats separately from the car's own systems.
Text Readability
Use larger font sizes than a typical phone app, since screen resolution inside a headset stays lower than a phone display held close to the eyes. Keep sentences short, and avoid placing text against busy or moving backgrounds.
Button and Interaction Size
Make buttons larger than typical touchscreen buttons, since hand tracking and controller pointers are less precise than a finger tapping glass. A wider target reduces missed clicks and user frustration.
Why UI Design Rules Matter Here
Poor interface placement causes eye strain, missed interactions, and confusion about what the user can touch. Good AR and VR interface design keeps the experience comfortable and easy to understand from the very first use.
