Rapid Prototyping for XR: Lecture 2 - Low Fidelity Prototyping.
0 likes188 views
This is lecture 2 on the Rapid Prototyping for XR course taught by Mark Billingurst on June 10th 2025. This lecture is about Low Fidelity Prototyping.
Rapid Prototyping for XR: Lecture 2 - Low Fidelity Prototyping.
- 1. RAPID PROTOTYPING FOR XR Lecture 2: Low Fidelity Prototyping Mark Billinghurst June 10th 2025 mark.billinghurst@auckland.ac.nz
- 3. Google Glass
- 4. Tom Chi’s Prototyping Rules 1. Find the quickest path to experience 2. Doing is the best kind of thinking 3. Use materials that move at the speed of thought to maximize your rate of learning
- 5. Interaction Design “Designing interactive products to support people in their everyday and working lives” Preece, J., (2002). Interaction Design Design of User Experience with Technology
- 6. Typical Interaction Design Cycle Develop alternative prototypes/concepts and compare them, And iterate, iterate, iterate....
- 7. ● Quick visual design ● Capture key interactions ● Focus on user experience ● Communicate design ideas ● Learn by doing/experiencing Why Prototype?
- 8. Importance of Prototyping • Going from Idea to Interactive Experience Idea Prototyping Tools Instantiation
- 9. Types of Prototyping Instantiations • Sketches and drawings • Diagrams and maps • Text • Videos • 2D images • Digital assets/3D models • Physical models • Actions (body storming, Wizard of Oz) • Software
- 10. XR Prototyping Techniques Lo- Fi Hi- Fi Easy Hard Digital Authoring Immersive Authoring Web-Based Development* Cross-Platform Development* Native Development* * requires scripting and 3D programming skills Sketching Paper Prototyping Video Prototyping Wireframing Bodystorming Wizard of Oz
- 11. XR Prototyping Tools Low Fidelity (Concept, visual design) • Sketching • Storyboarding & wireframes • Mockups • Paper & video prototyping High Fidelity (Interaction, experience design) • Interactive sketching • Desktop & on-device authoring • Immersive authoring & visual scripting • XR development toolkits
- 12. Advantages/Disadvantages Prototype Advantages Disadvantages Low-fidelity prototype - low developmental cost - evaluate multiple design concepts - limited error checking - navigational and flow limitations High-fidelity prototype - fully interactive - look and feel of final product - clearly defined navigational scheme - more expensive to develop - time consuming to build - developers are reluctant to change something they have crafted for hours
- 13. From Idea to Product • Low-Fi: (Sketches) - early ideation stages of design • High-Fi: (Working prototypes) - detailing the actual design
- 14. Typical Development Steps ● Sketching ● Storyboards ● UI Mockups ● Interaction Flows ● Video Prototypes ● Interactive Prototypes ● Final Native Application Increased Fidelity and Interactivity
- 15. Case Study Mobile AR for Spatial Navigation From Sharon Brosnan BS in Digital Media Design Final Project
- 19. XR Prototyping Tools Low Fidelity (Concept, visual design) • Sketching • Storyboarding & wireframes • Mockups • Paper & video prototyping High Fidelity (Interaction, experience design) • Interactive sketching • Desktop & on-device authoring • Immersive authoring & visual scripting • XR development toolkits
- 20. From Sketch to Prototype Sketch Wireframe Mock-up Prototype
- 21. SKETCHING
- 22. Your Most Valuable Prototyping Tool..
- 23. Not about drawing, but design Sketching is a tool to help you: • express • develop, and • communicate design ideas Sketching is part of a process • Idea generation • Design elaboration • Design choices • Engineering “Sketching is about the Activity not the Result” - Bill Buxton Sketching
- 24. Buxton’s Key Attributes of Sketching • Quick • Work at speed of thought • Timely • Always available • Disposable • Inexpensive, little investment • Plentiful • Easy to iterate • A catalyst • Evokes conversations
- 27. AR/VR Interface Design Sketches •Sketch out Design concept(s) Luisa Vasquez - https://blog.prototypr.io/10-tips-for-rapid-prototyping-on-the-hololens-2-bda021e21743
- 29. AR Augmented Sketch ● Sketch on top of photos of real world – target workplaces Luisa Vasquez - https://blog.prototypr.io/10-tips-for-rapid-prototyping-on-the-hololens-2-bda021e21743
- 30. AR Prototyping with Layers ● Separate world-stabilized and head stabilized ○ Draw world stabilized on background paper ○ Draw head stabilized on transparent plastic ● Simulate Field of View of AR HMD Lauber, F., Böttcher, C., & Butz, A. (2014, September). Papar: Paper prototyping for augmented reality. In Adjunct Proceedings of the 6th International Conference on Automotive User Interfaces and Interactive Vehicular Applications (pp. 1-6). FOV in Red Head Stabilized - Foreground World Stabilized - Background
- 31. Sketching VR Interfaces •Download 360 panorama template grid •Draw interface ideas into grid •Scan into 360 photo viewer for VR HMD See https://virtualrealitypop.com/vr-sketches- 56599f99b357
- 34. Sketching on the Template
- 37. Final 360 Image
- 39. ONIRIDE - 360° Art Plugin for Photoshop • Draw 360 panorama’s directly in Photoshop • Preview in Photoshop, export to VR • See http://www.oniride.com/360art
- 41. InstaVR •http://www.instavr.co/ •Free, fast panorama VR, deploy to multi platforms
- 42. Bringing 360 Sketches Into VR • Draw sketch on 360 template • Scan/photograph image • Load into 360 viewing tool • E.g. InstaVR - https://www.instavr.co/ • Add interactivity
- 43. Demo - Using InstaVR • https://www.youtube.com/watch?v=M2C8vDL0YeA
- 44. AI Generated 360 Images • Blockadelabs provides AI tool for generating 360 images • https://skybox.blockadelabs.com/
- 45. Demo
- 46. 360 Photo
- 47. Layering 360 Sketches Nebeling & Madier: 360proto: Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper (CHI 2019)
- 48. 360 Sketch Nebeling & Madier: 360proto: Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper (CHI 2019)
- 49. Layering 360 Sketches Nebeling & Madier: 360proto: Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper (CHI 2019)
- 50. Intersecting 360 Sketches Nebeling & Madier: 360proto: Making Interactive Virtual Reality & Augmented Reality Prototypes from Paper (CHI 2019)
- 52. Sketching in VR Using VR applications for rapid prototyping - Intuitive sketching in immersive space - Creating/testing at 1:1 scale - Rapid UI design/layout Examples - Open Brush - https://openbrush.app/ - Quill - https://quill.art/ More tools see - https://www.roadtovr.com/vr-painting-drawing-modeling-animation-art-tools-quest-pc/
- 53. Open Brush Video
- 54. Sketchbox • VR design tool - create VR interface inside VR • Support for HTC Vive, Oculus Rift • Easy to use VR sketching tool • Available from SteamVR • See https://www.sketchboxvr.com/
- 56. Example: VR Concept Interface for SketchUp https://www.youtube.com/watch?v=5FR3BLkgSPk
- 57. Example: VR Concept Interface Gun https://www.youtube.com/watch?v=NPxzPKmSai0
- 58. Designing AR in VR https://www.youtube.com/watch?v=TfQJhSJQiaU
- 60. STORYBOARDING
- 61. Storyboards Storyboarding is a technique taken from film making using a simple cartoon-like structure, key moments from the interactive experience are represented. The advantage of storyboarding is that it allows you to get a feel for the ‘flow’ of the experience. It is also a very economical way of representing the design – a single page can hold 6–8 ‘scenes’.
- 62. Storyboarding - Describing the Experience http://monamishra.com/projects/Argo .html
- 64. Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 66. Persona:Gunther theAd Guy Gunther is from Germany. He Travels extensively for work and As he is an advertising executive he needs to present concepts to clients quickly and easily. He is a person very well-versed in new technologies and wishes he had easier portable solutions for his presentations…..
- 67. Scenario Gunther has been given a project to design a new corporate identity for North- Eastern Airline. His mission is to promote NE Air as an ’international company’. Part of the requirement for this ad campaign is that he communicate the ‘fun’ company culture. They want to show that flying NE is a lifestyle. Gunther has his work cut out for him. He has a meeting schedule to show identity ideas on his laptop. During this meeting he will need to point out specific features on the graphic design. He also wants to show a video of an example commercial that has been completed.
- 68. Storyboard
- 69. Low and High Fidelity Storyboards Low fidelity High fidelity
- 70. Key Elements 1. Scenario: Storyboards are based on a scenario or a user story. The persona or role that corresponds to that scenario is clearly specified 2. Visuals: Each step in the scenario is represented visually in a sequence. The steps can be sketches, illustrations, or photos. 3. Captions: Each visual has a corresponding caption. The caption describes the user’s actions, environment, emotional state, device, etc.
- 74. Concept Sheet Top down and First Person view Suitable for rough sketch
- 78. VR Sketch Sheets Available from https://blog.prototypr.io/vr-paper-prototyping-9e1cab6a75f3
- 79. Storyboard Guidelines Successful Storyboards: § Visually tell the story § Detail the concept, characters, setting, sequence, interactions § Reflect key ideas and POV Describe the following: § Field-of-View: What surroundings can the viewer see? § Estimated POV: Where is viewer positioned in their surroundings? § Key Frames: What is the starting and ending points of the scene? § Interaction: How does the viewer interact in this scene?
- 80. WIREFRAMES
- 81. Wireframes • Wireframes are outlines of the structure of a software system • the “bones of the application”. • Wireframes focus on the structure of particular types of pages. • navigation maps focus on how pages are structured and linked together • So navigation maps + wireframes = basics of an application
- 82. Example: AR Fitting Room https://uxfol.io/project/0372e625/AR-Fitting-Room
- 83. Wireframes It’s about - Functional specs - Navigation and interaction - Functionality and layout - How interface elements work together - Defining the interaction flow/experience Leaving room for the design to be created
- 84. Task Flow User flow with the application Informs screen/interface elements
- 86. Example Wireframe Chris Jacobs - https://blog.prototypr.io/making-flights-more-interesting-with-augmented-reality-322eecde827c
- 88. MOCKUPS
- 89. Mockup It’s about - Look and feel - Building on wireframe - High fidelity visuals - Putting together final assets - Getting feedback on design Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 92. Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 93. Example: Cook Simple Using AR to enhance cooking - High fidelity mockup - Animated GIF demo Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 95. Argo
- 96. Argo
- 99. Tools for Making Mobile Mockups Put list of tools here - Look and feel - Building on wireframe - High fidelity visuals - Putting together final assets - Getting feedback on design Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 100. AR Mockup https://medium.com/@dylanhongtech/augmented-reality-prototyping-tools-for-head-mounted-displays-c1ee8eaa0783 Combining 3D graphics with photo background
- 101. 2D Asset Creation •Many possible tools •Sketch •MacOS •https://www.sketch.com/ •Figma •Chrome plugin •https://www.figma.com/
- 102. 3D Asset Creation •Use public 3D assets •Sketchfab - https://sketchfab.com/ •Web-based 3D model library •Poly - https://poly.google.com/ •Low polygon models for AR/VR •Build 3D assets •Sketchup - https://www.sketchup.com/ •Easy 3D modelling •Gravity Sketch - https://www.gravitysketch.com/ •Model creation from sketching/CAD •Google Blocks - https://arvr.google.com/blocks/ •Model in VR •Blender - https://www.blender.org/ •Open source CAD modelling
- 103. 3D Scene Layout •Scene layout in VR •Sketchbox •https://www.sketchbox3d.com/ •Fast and simple VR prototyping tool •Collaborative VR design tool •Export to SketchFab/fbx
- 104. Gravity Sketch •Intuitive immersive 3D design platform •Move from sketch to final 3D model render •Natural 3D UI manipulation •Two handed input, 3D menus, etc •Multi-platform •HMD (Quest, Steam), tablet, etc •Support for collaboration
- 106. Scene Assembly •Assemble assets into 3D scene •Prototype final UI concept •Create high-fidelity view •Collect user feedback •Immersive Scene Assembly •Sketchbox: https://www.sketchbox3d.com/
- 107. Scene Assembly In AR • Many tools for creating AR scenes • Drag and drop your assets • Develop on web, publish to mobile • Examples • Catchoom - CraftAR • Blippar - Blipbuilder • ARloopa - ARloopa studio • Wikitude - Wikitude studio • Zappar - ZapWorks Designer
- 108. Scene Assembly In AR • Many tools for creating AR scenes • Drag and drop your assets • Develop on web, publish to mobile • Examples • Catchoom - CraftAR • Blippar - Blipbuilder • ARloopa - ARLOOPA studio • Wikitude - Wikitude studio • Zappar - ZapWorks Designer
- 109. ARLoopa Studio Web-based AR authoring •Add 3D models, video, images to real print content •Simple drag and drop interface •Marker image recognition, markerless tracking • https://arloopa.com/
- 111. Vuforia Studio • Author animated AR experiences • Drag and drop content • Add animations • Import CAD models • Combine with IOT sensors • https://www.ptc.com/en/products/vuforia/vuforia-studio
- 113. Mock-up Guidelines 1. Generate final 2D/3D interface elements 2. Replace wireframe UI elements with high quality visuals 3. Use standard AR/VR UI elements 4. Simulate AR/VR views 5. Focus on visual/audio design 6. Collect feedback from target end-users