VR Interaction Design — Level 2: Intermediate

Abstract: This intermediate course takes students beyond prototyping to design VR experiences that are rigorously ergonomic, multi-zone, and testable with the SUS questionnaire. Students deepen their knowledge of spatial patterns, VR ergonomics, 3D UI, multi-zone navigation, spatial audio, and iterate through structured user evaluation. The capstone project is a cultural mediation VR experience (2 zones, waypoints, 3 world-locked information panels, ≥3 SUS testers). Outline: Spatial patterns → VR ergonomics & cybersickness → 3D UI → Multi-zone navigation → Spatial audio architecture → SUS evaluation → Prioritization → 3D visual design.

Learning Objectives

By the end of this course, students will be able to:

1. Apply (Bloom: applying) at least 4 spatial interaction patterns suited to different contexts
2. Diagnose (analyzing) ergonomic issues (cybersickness, bad UI placement, distance/scale errors)
3. Design (creating) a coherent 3D UI: world-locked panels, readable text in depth, visual hierarchy
4. Build (creating) a multi-zone VR navigation with waypoints in A-Frame
5. Architect (creating) a spatial audio design with 3 layers (ambiance / positional / UI)
6. Evaluate (evaluating) a VR experience with the SUS questionnaire (10 adapted questions + scoring formula)
7. Prioritize (applying) design corrections with a P0/P1/P2 grid

Module 1 — Spatial Interaction Patterns (2h)

Concept

A spatial interaction pattern is a reusable solution for a recurring VR interaction problem. Knowing these patterns avoids reinventing solutions that have been tested and validated.

The 5 fundamental patterns:

How to choose?

• Near manipulation → proximal grab
• Far selection → ray casting
• Accessibility (hands free) → gaze + dwell
• Assembly/step-by-step teaching → snap-to-socket
• Navigation between zones → teleportation

Lab 1.1 — Pattern Audit

Steps:

1. Open an existing VR experience (YouTube VR, Wander, Rec Room on Quest)
2. For each interaction: identify the pattern used, the feedback given, a potential improvement
3. Draw a 2-column table: "interaction observed" / "pattern used / alternatives"

Mini-exercise: For your future capstone project (cultural mediation), list 5 planned interactions and choose the appropriate pattern for each.

Module 2 — VR Ergonomics and Cybersickness (2h)

Concept

Cybersickness is the VR designer's primary enemy. It results from a conflict between visual signals (movement in VR) and vestibular/proprioceptive signals (physical stillness or movement).

Technical factors to control:

• Framerate: minimum 60 fps (ideally 90–120 fps depending on the headset). Below 45 fps → guaranteed nausea.
• Latency motion-to-photon: maximum 20ms. Above → visible discordance between head movement and image update.
• No non-initiated camera movement: the camera must NEVER move unless the user initiates it (locomotion or physical movement).
• No abrupt accelerations: avoid fast fade-ins, visual shocks, sudden zooms.
• IPD: verify that the interpupillary distance is correctly configured on the headset.

Comfort checklist (to apply before any user test):

Lab 2.1 — Ergonomics Audit on an Existing Experience

Steps:

1. Choose a freely accessible WebVR experience (A-Frame example or similar)
2. Navigate for 5 minutes from the perspective of a non-habituated user
3. Fill in the comfort checklist: what passes, what doesn't?
4. Propose 3 concrete improvements for the most critical problem

Mini-exercise: Write a "comfort brief" for your capstone project in 10 sentences: which locomotion patterns, why, and what experience the user has when they arrive (first 30 seconds).

Module 3 — 3D UI: Design of Spatial Interfaces (2h)

Concept

3D UI in VR must be designed differently from flat UI. Three types of anchoring:

Avoid head-locked UI: A menu glued to the field of vision causes eye convergence fatigue after 2–3 minutes. Prefer world-locked or diegetic.

Readable text in 3D:

• Minimum font size: 0.1m at 1m distance (≈ 10°)
• Maximum line width: 40–50 characters (reading comfort)
• Sufficient contrast: ratio ≥ 4.5:1 (WCAG AA)
• No more than 3 typographic levels in the same panel

World-locked panel in A-Frame: html <a-entity id="info-panel" position="0 1.6 -2" rotation="0 0 0"> <a-plane width="0.8" height="0.6" color="#1a1a2e" opacity="0.85"></a-plane> <a-text value="TITLE" position="0 0.2 0.01" color="white" align="center" width="1.2" font="roboto"></a-text> <a-text value="Body text. Max 50 characters per line." position="0 0 0.01" color="#cccccc" align="center" width="1.0" font="roboto" wrap-count="50"></a-text> </a-entity>

Lab 3.1 — 3D UI Panel

Steps:

1. In an A-Frame scene, create 3 distinct world-locked panels at different heights and distances
2. For each: title + 2–3 lines of text + a close button (animation on click)
3. Test at 1m, 2m, 3m distance: which distances are readable? Which cause eye convergence?
4. Revise based on observations

Mini-exercise: For your capstone project, sketch 3 spatial UI panels: position in space, readable content from 1m, visual hierarchy (title / body / action).

Module 4 — Multi-Zone Navigation (2h)

Concept

A multi-zone VR experience is organized around waypoints: predefined navigation points from which the user teleports.

Principles:

• A waypoint must be clearly visible and understood as a "possible destination"
• Never more than 7 waypoints in a single zone (cognitive load)
• Give "arrival" feedback: brief animation, sound, environment change

A-Frame multi-zone waypoint template: `html <!-- Waypoint 1 — Zone A --> <a-entity id="waypoint-a" position="-3 0 -2"> <a-cylinder radius="0.3" height="0.02" color="#00ff88" animation="property: position; from: -3 0.02 -2; to: -3 0.12 -2; dir: alternate; loop: true; dur: 1500; easing: easeInOutSine"> </a-cylinder> <a-text value="Zone A" position="0 0.3 0" align="center" color="white" width="1"></a-text> </a-entity>

<!-- Waypoint 2 — Zone B --> <a-entity id="waypoint-b" position="3 0 -4"> <a-cylinder radius="0.3" height="0.02" color="#0088ff" animation="property: position; from: 3 0.02 -4; to: 3 0.12 -4; dir: alternate; loop: true; dur: 1500; easing: easeInOutSine"> </a-cylinder> <a-text value="Zone B" position="0 0.3 0" align="center" color="white" width="1"></a-text> </a-entity> `

Cognitive map: the user must be able to reconstruct the structure of the space from their experience. Visual landmarks, varied zone colors, and gradual reveals help build this mental map.

Lab 4.1 — 2-Zone Experience

Steps:

1. Create a scene with 2 clearly differentiated zones (color, content, atmosphere)
2. Add 2–3 waypoints per zone (including an inter-zone waypoint)
3. Add an "arrival" animation on each waypoint (rotation or brief color pulse)
4. Test with 2 people: can they draw the map of the space after visiting it?

Mini-exercise: For your capstone project, draw the zone map with: start, inter-zone waypoints, information density per zone, estimated duration per zone.

Module 5 — Spatial Audio Architecture (2h)

Concept

Good spatial VR audio is organized in 3 layers:

Crossfade between zones (JavaScript): javascript AFRAME.registerComponent('zone-audio', { schema: { from: {type: 'selector'}, to: {type: 'selector'}, duration: {default: 2000} }, init: function() { this.el.addEventListener('zone-enter', () => { const from = this.data.from.components.sound; const to = this.data.to.components.sound; this.fade(from, to, this.data.duration); }); }, fade: function(from, to, duration) { let startVol = from.data.volume; let elapsed = 0; const interval = setInterval(() => { elapsed += 100; const t = elapsed / duration; from.el.setAttribute('sound', 'volume', startVol * (1 - t)); to.el.setAttribute('sound', 'volume', t * 0.3); if (elapsed >= duration) { clearInterval(interval); from.el.components.sound.stopSound(); } }, 100); to.el.components.sound.playSound(); } });

Occlusion and reverberation: A-Frame does not natively support acoustic occlusion (sound blocked by walls). For an A-Frame project, simulate occlusion by reducing the volume of sources behind virtual walls when the user moves. Complete physical simulation requires Web Audio API or a dedicated library.

Lab 5.1 — 3-Layer Audio Architecture

Steps:

1. For your 2-zone scene: add one ambient sound per zone
2. Add at least 2 positional sound sources (objects that "emit" sound)
3. Add 3 interaction sounds (UI layer)
4. Test with eyes closed: can you locate each zone from sound alone? Can you tell when an interaction has been confirmed?

Mini-exercise: Write the sound design guide for your capstone project: list each sound source (type, layer, file, volume).

Module 6 — SUS Evaluation: User Testing (2h)

Concept

The System Usability Scale (SUS) is a 10-item standardized questionnaire for assessing the global usability of an interface. Adapted for VR, it measures global comfort and learnability.

Source: Brooke, J. (1996). SUS: A "Quick and Dirty" Usability Scale. In Jordan, P. W. et al. (Eds.), Usability Evaluation in Industry. Taylor & Francis, pp. 189–194.

10 items adapted for VR (alternate: positive/negative):

1. I think I would like to use this VR experience frequently.
2. I found this experience unnecessarily complex.
3. I thought the experience was easy to use.
4. I think I would need assistance from a technical person to use this experience.
5. I found the various features of this experience were well integrated.
6. I thought there was too much inconsistency in this experience.
7. I would imagine that most people would learn to use this experience very quickly.
8. I found the experience very cumbersome to use.
9. I felt very confident using the experience.
10. I needed to learn a lot of things before I could get going with this experience.

Scoring formula: Each item is rated from 1 (strongly disagree) to 5 (strongly agree). SUS Score = Σ[(odd item score − 1) + (5 − even item score)] × 2.5

Lab 6.1 — SUS Test

Steps:

1. Prepare the 10 adapted VR questions on a printed or digital form
2. Test with ≥ 3 testers (ideally non-habituated profiles: non-gamers, people unfamiliar with VR)
3. Calculate the SUS score for each tester and the average
4. Identify the 2 worst-scoring items → they indicate priority problems

Mini-exercise: Given scores of 4, 2, 5, 1, 4, 2, 5, 2, 4, 1 — calculate the SUS score. Interpret the result.

(Solution: (4-1)+(5-2)+(5-1)+(5-1)+(4-1)+(5-2)+(5-1)+(5-2)+(4-1)+(5-1) = 3+3+4+4+3+3+4+3+3+4 = 34 → 34×2.5 = 85. Score: 85/100 — Excellent.)

Module 7 — Prioritization: P0/P1/P2 Grid (2h)

Concept

After a user test, prioritization avoids treating all problems the same way.

P0/P1/P2 grid:

Correction decision tree:

1. Is this problem repeated across ≥ 2 testers? → YES → P0 or P1 / NO → P2 or ignore
2. Does this problem cause task failure or cybersickness? → YES → P0 / NO → P1
3. Is the fix quick (< 1h)? → YES → fix immediately / NO → schedule for next iteration

Lab 7.1 — Prioritization of SUS Results

Steps:

1. List all observed problems from Lab 6.1 (SUS + direct observations)
2. Classify each problem as P0 / P1 / P2 using the decision tree
3. Draft a 1-week correction plan: P0s in the first 2 days, P1s in days 3–5
4. For each P0 correction: describe the proposed fix and how you will verify it

Mini-exercise: A tester vomits in VR. Another can't find the start button. A third finds the 3D text too small. Classify these problems and justify.

Module 8 — 3D Visual Design (2h)

Concept

3D visual design in VR is governed by principles specific to stereoscopic space.

Rules for 3D text:

3D color palette:

• Avoid pure, highly saturated colors on large surfaces (visual fatigue)
• Prefer slightly dark or slightly desaturated backgrounds
• Use color to code semantic levels (category, importance, interactivity)
• Test with a grayscale filter: hierarchy must remain visible even without color

Depth and negative space:

• Objects placed at different depths create a natural hierarchy
• Leave empty volumes between elements — "3D white space"
• Use scale variation (small = far = less important) rather than placing everything at the same depth

Lab 8.1 — Visual Audit

Steps:

1. Take a screenshot of your VR scene in the browser
2. Apply a grayscale filter (Photoshop, GIMP, or browser DevTools filter)
3. Evaluate: is the visual hierarchy visible without color? What elements get lost?
4. Apply the contrast checker (https://webaim.org/resources/contrastchecker/) on each text
5. Correct the 2 most critical problems

Mini-exercise: For each of your 3 world-locked panels, verify: font size (in CSS px or A-Frame units), contrast ratio, number of characters per line.

Capstone Project — "Cultural Mediation VR"

Brief

Design a VR experience on a cultural subject of your choice (heritage site, museum, historical archive, artistic work) that allows a user to explore and understand independently.

Constraints

• Technology: A-Frame (WebXR) or Unity (with WebGL/WebXR build)
• 2 differentiated zones with at least 2 waypoints each
• 3 world-locked information panels (title + text + optional image)
• At least 3 testers for SUS evaluation (calculate score + prioritization grid)
• No headset required for the demo — functional in desktop browser

Deliverables

1. Functional link (Glitch.com, itch.io, or personal server)
2. Design documentation (2–3 A4 pages): concept, zone map, pattern choices, sound design
3. SUS evaluation report: raw scores, average, 3 prioritized problems
4. Oral presentation (8 min): demo + reflection on design decisions + lessons learned

Evaluation Rubric

Readings & Resources

• Brooke, J. (1996). SUS: A "Quick and Dirty" Usability Scale. In Usability Evaluation in Industry.
• Boletsis, C., & Cedergren, J. E. (2019). VR Locomotion. https://doi.org/10.1155/2019/7420781
• LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin, 32(1), 47–56.
• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• A-Frame Components Registry: https://www.npmjs.com/search?q=keywords:aframe
• A-Frame Teleport Controls: https://www.npmjs.com/package/aframe-teleport-controls
• WebXR W3C spec: https://www.w3.org/TR/webxr/

→ Previous level: VR Interaction Design — Level 1 → Next level: VR Interaction Design — Level 3 → Custom workshop for your school or studio: Book a 30-min call — free