Level 1

AR Interaction Design — Level 1: Beginner

Take this course — FREEGuided training — PAIDFree to read + exercises. For mentoring (workshop / masterclass), switch to the guided format.
PathReferenceLevel 1Level 2Level 3Custom training (paid) →
Abstract: This beginner course introduces augmented reality interaction design with no prior coding or AR experience required. Students build their first interactive AR prototype using A-Frame and WebAR tools (marker-based, then markerless), learn the core principles of spatial feedback and anchoring, and complete a portfolio project. Outline: Introduction to AR concepts → First AR scene (HTML/A-Frame) → Marker-based interaction → Surface anchoring → Visual & audio feedback → Portfolio project.

Learning Objectives

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

  1. Explain (Bloom: remembering/understanding) what augmented reality is, its types (marker-based, markerless), and its concrete applications.
  2. Create (creating) a functional AR scene in the browser with A-Frame, with no server or compilation.
  3. Apply (applying) visual markers to trigger AR content and configure anchoring on a flat surface.
  4. Design (creating) basic interactions: tap-to-place, object rotation, visual feedback on selection.
  5. Evaluate (evaluating) the quality of an AR prototype against criteria of legibility, anchoring, and feedback.
  6. Produce (creating) a documented, presentable capstone project.

Module 1 — What Is AR? (2h)

Concept

Augmented reality overlays digital elements onto the perception of the physical world in real time. It differs from VR (total immersion) and the traditional interface (2D screen).

Azuma's three criteria (1997): combines real + virtual / interactive in real time / 3D space.

Source: Azuma, R. (1997). A Survey of Augmented Reality. Presence, 6(4), 355–385.

AR types to remember:

Lab 1.1 — Observe and Analyze

Objective: develop a critical eye for existing AR experiences.

Steps:

  1. Open two WebAR experiences on a smartphone (e.g. an A-Frame example: https://aframe.io/examples/showcase/helloworld/ — adapt with an AR marker, e.g. 8thWall demos)
  2. For each experience, note on paper: What is anchored? What visual feedback is present? What works / what doesn't?
  3. Share in 3 sentences: "What works / What doesn't work / What I would improve"

Mini-exercise: Sketch by hand (paper prototype) a simple AR experience to explain something in your immediate surroundings.

Module 2 — First AR Scene with A-Frame (2h)

Concept

A-Frame is a declarative HTML framework for creating WebXR 3D scenes. No compilation, no server — just an HTML file.

Documentation: https://aframe.io/docs/

Minimal structure: html <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>

Core attributes: position (x y z), rotation (degrees), scale, color, visible

Lab 2.1 — My First AR Scene

Steps:

  1. Create an index.html file on your desktop
  2. Copy the template above, open in Chrome
  3. Modify: change the color, add a sphere (<a-sphere>), a cylinder (<a-cylinder>)
  4. Add a plane to simulate the ground: <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

Mini-exercise: Create a scene showing 3 simple objects (geometric shapes) at different heights. Label each object with 3D text (<a-text>).

Module 3 — Marker-based AR with AR.js (2h)

Concept

AR.js is a library that adds AR tracking to A-Frame. The marker-based version detects Hiro markers or custom images and anchors 3D content to them.

AR.js docs: https://ar-js-org.github.io/AR.js-Docs/

Marker-based template: html <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> </head> <body style="margin: 0; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-box position="0 0.5 0" material="color: red;"></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>

Hardware requirements: smartphone with camera + Chrome/Firefox browser + printed Hiro marker (https://ar-js-org.github.io/AR.js-Docs/marker-based/)

Lab 3.1 — Object on Marker

Steps:

  1. Print or display the Hiro marker on screen
  2. Create the marker-based HTML file above
  3. Serve the file on a local server (e.g. npx serve. in the terminal, or VS Code Live Server)
  4. Open on smartphone, point toward the marker
  5. Observe the anchoring and tracking

Mini-exercise: Replace the red cube with a tower of 3 stacked geometric shapes. Each shape has a different color and its own rotation.

Module 4 — Surface Anchoring (Markerless) (2h)

Concept

Tap-to-place is the most universal mobile AR interaction pattern: the user points toward a surface, a preview appears, then taps to place the object. ARKit and ARCore use SLAM to detect flat surfaces.

For the web, MindAR.js offers simple surface tracking without an app:

https://hiukim.github.io/mind-ar-js-doc/

Alternatively, 8thWall (commercial/freemium solution) provides high-quality in-browser SLAM:

https://www.8thwall.com

Lab 4.1 — Preview & Placement (Paper/Mockup)

(If access to 8thWall or MindAR is not available, perform the prototype on paper/Figma.)

Paper version steps:

  1. Sketch 5 screens: initial state → surface detection (ground grid) → object in preview (semi-transparent) → tap → placed object → interaction with placed object
  2. Annotate each screen: what visual information indicates the system state?
  3. Identify 3 questions to test with a real user

Mini-exercise: Write in 5 sentences how to indicate to the user that their phone "sees" a detectable surface — with no text on screen.

Module 5 — Visual and Audio Feedback (2h)

Concept

In AR, feedback replaces the haptic response of physical objects. It informs the user of the system state (object selected, action completed, error).

Three feedback levels:

  1. State indicator (idle → hover → selected → action): color change, size change, halo
  2. Action confirmation: animation, particle, sound
  3. Error / limit: red blinking, vibration (on mobile), error sound

Critical rule: feedback latency must be < 100ms to be perceived as immediate (Nielsen, 1994 — interface delay guidelines).

Source: Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.

Lab 5.1 — Adding Feedback to an A-Frame Object

Steps:

  1. Take the scene from Lab 2.1
  2. Add a click event on the cube:

html <a-box id="mycube" position="0 1.5 -3" color="#4CC3D9" event-set__click="_target: #mycube; color: #FF5733"> </a-box>

  1. Add a click sound (free audio file — e.g. Freesound.org, CC0 license)
  2. Test: does the object change color immediately?

Mini-exercise: For your capstone project (see §Project), define: what are the 3 main states of an AR object in your scene? Describe the visual feedback for each transition.

Module 6 — Basic User Testing (2h)

Concept

A user test for AR doesn't need to be sophisticated to reveal critical problems. Even a paper prototype or a basic markerless prototype allows testing affordances.

Minimal test protocol (Jakob Nielsen: 5 users are enough):

Nielsen, J., & Landauer, T. (1993). A Mathematical Model of the Finding of Usability Problems. CHI '93 Proceedings. https://doi.org/10.1145/169059.169166
  1. Prepare a concrete task ("Place the object on the table")
  2. Observe without intervening (do not help)
  3. Note: hesitations, errors, abandonments, spontaneous verbal feedback
  4. After the task: 3 open-ended questions

Lab 6.1 — Test with 2 People

Steps:

  1. Prepare your prototype (digital or paper)
  2. Draft 1 clear task (not "explore the app" — "place the red object on the surface of your choice")
  3. Test with 2 people of different profiles
  4. Fill in an observation grid: Task completed? Time? Hesitations? Comments?

Mini-exercise: List the 3 main problems revealed by your tests and propose a concrete fix for each one.

Capstone Project — "My First AR Object"

Brief

Create a simple AR experience (marker-based or surface) that explains, presents, or augments an object or space you know well — a plant, a design object, an artwork, a place.

Constraints

Deliverables

  1. Functional HTML file (prototype or link to hosted version)
  2. Short documentation (1 A4 page): concept, interaction choices, 3 design decisions and their rationale
  3. Observation grid from user test (1–2 testers)
  4. Presentation (5 min): live demo + reflective debrief

Evaluation Rubric

CriterionInsufficient (1)Satisfactory (2)Good (3)Excellent (4)
Technical functionalityDoesn't work on smartphoneWorks with difficultiesWorks reliablyWorks without friction, states handled
Anchoring qualityFloating, unstable objectAnchored but unstableStably anchoredNatural anchoring + simulated occlusion
Interaction feedbackNo feedbackFeedback present but delayed or confusingClear feedback (< 100ms)Multimodal, coherent feedback
DocumentationAbsent or incomprehensiblePresent but incompleteClear concept + 3 decisionsDeep reflection + alternatives considered
User testingAbsent1 tester, little data2 testers, grid completed2+ testers, iteration documented

Readings & Resources

→ Next level: AR Interaction Design — Level 2 → Custom workshop for your school or team: Book a 30-min call — free

Custom training

Intensive workshop (1–2 days) for schools, studios, museums — condensed theory, guided labs, project mentoring.

Book a 30-min call (free) →