Rapid Prototyping: A lecture on prototyping techniques for interface design
1 like114 views
This is a lecture taught on August 26th 2025 by Mark Billinghurst on prototyping for user experiences. It covers the basics of prototyping in the Interaction Design cycle and gives examples of tools that can be used for rapid prototyping.
Rapid Prototyping: A lecture on prototyping techniques for interface design
- 1. RAPID PROTOTYPING Introduction to Prototyping Mark Billinghurst August 25th 2025 [email protected]
- 2. 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
- 3. Typical Interaction Design Cycle
- 4. Typical Interaction Design Cycle Develop alternative prototypes/concepts and compare them, And iterate, iterate, iterate....
- 5. How can we quickly prototype interactive experiences with little or no coding?
- 6. Google Glass
- 7. asdfa
- 16. 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
- 17. Case Study: CityViewAR (2021)
- 18. February 2011
- 19. CityViewAR Application Goal: Create a mobile app that allowed people to view immersive panoramas on site, showing the 2011 damage Key technology: Mobile phone, GPS, 360 panorama, map User Experience: People walking the city streets will be able to be immersed in the earthquake damage from 10 years ago
- 20. CityViewAR Prototyping Process 1. Sketch Interaction Flow (Paper) 2. Create Wireframe (Powerpoint) 3. Sketch Screens (Paper) 4. Test Transitions (Pop) 5. Collect/Create Assets (Photoshop, various) 6. Create High Fidelity Prototype (Proto.io) 7. Code (Unity, Mapbox) 8. Make video demo (Various) 9. Publish (Android, iOS)
- 22. Interaction Flow
- 23. Sketch Interface
- 24. Pop Wireframe
- 26. Asset Collection
- 27. High Fidelity - Proto.io
- 30. Unity Build
- 31. Deployment to App Store
- 33. Example: From Idea to Product Define Requirements CityViewAR 1 2 3 4 5 6 1 Sketch Interface 2 Rough Wireframes 3 Interactive Prototype 4 High Fidelity Prototype 5 Developer Coding 6 User Testing 7 Deploy App 8 Develop Iterate
- 34. Typical Development Steps ● Sketching ● Storyboards ● UI Mockups ● Interaction Flows ● Video Prototypes ● Interactive Prototypes ● Final Native Application Increased Fidelity and Interactivity
- 36. What is a Prototype? A prototype is a concrete but partial representation or implementation of a system design. Prototypes are used extensively in most design and construction domains. Prototypes may be used to: • demonstrate a concept in early design, • test details of that concept at a later stage • as a specification for the final product.
- 38. ● Quick visual design ● Capture key interactions ● Focus on user experience ● Communicate design ideas ● Learn by doing/experiencing Why Prototype?
- 39. Process of Prototyping • Going from Idea to Experience Idea Prototyping Tools Instantiation
- 40. Prototyping Tools •Good prototyping tools should: • Allow easy, rapid modification of interface details or functionality • For designers who are not programmers, allow direct manipulation of prototype components • For incremental and evolutionary prototypes, facilitate reuse of code • Not constrain the designer to default styles for interface objects.
- 41. 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
- 43. Different Tools at Different Stages • Tools for Requirements Animation • Paper, Powerpoint, drawing software, etc. • Tools for throw away design • Powerpoint, InDesign, Figma, etc. • Use case prototyping • Video editing, visual scripting, programming tools
- 46. Prototyping Techniques Lo- Fi Hi- Fi Easy Hard Digital Authoring On Device Authoring Web-Based Development* Cross-Platform Development* Native Development* * requires scripting and programming skills Sketching Paper Prototyping Video Prototyping Wireframing Bodystorming Wizard of Oz
- 47. Prototyping Tools Low Fidelity (Concept, visual design) • Sketching • Storyboarding & wireframes • Mockups • Paper & video prototyping High Fidelity (Interaction, experience design) • Interactive sketching • Desktop authoring • On-device authoring & visual scripting • Development toolkits
- 49. 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
- 50. From Sketch to Prototype Sketch Wireframe Mock-up Prototype
- 51. SKETCHING
- 52. Your Most Valuable Prototyping Tool..
- 53. 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
- 54. 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
- 59. Design Break: 5 minutes • TripMingle: a dating app for tourists • TripAdvisor x Tinder • Sample Screens • Splash Screen • Home screen (first page) • Map screen (location and people) • People profile pages (filtering) • Location page (info about tourist spot) • Chat screen • Setting up profile
- 60. STORYBOARDING
- 61. Storyboarding Sequence of sketches showing the use of the system in everyday use context Concrete example Easier (faster) to grasp than text based stories Means of communication with users and system developers Sketches, not drawings... Use to test interaction and make sure design works
- 62. Traditional Storyboarding • Have some notes attached to each scene expanding on what will happen - overcome the limitations of representing a dynamic experience in a static medium.
- 65. Storyboard
- 66. Key Elements 1. Scenario: Storyboards are based on a user story. The 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. This describes the user’s actions, environment, emotional state, device, etc.
- 67. 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?
- 71. StoryboardThat • Web-based Storyboarding - https://www.storyboardthat.com/
- 73. WIREFRAMES
- 74. Wireframes Creating: - Functional specs - Functionality and layout - Navigation and interaction - Connecting screens together - How interface elements work together - Defining the interaction flow/experience Leaving room for the design to be created
- 75. Example: Website Flow Boxes showing: - page layout - interaction flow
- 76. Payment Service
- 78. Wireframe Guidelines 1. Understand user needs/goals 2. Represent interaction points/changes in user state 3. Show all User Interface elements 4. Create flow between interaction points to meet user needs 5. Decide the fidelity level of wireframe and fill in the details 6. Get feedback from experts/end users
- 79. Tools for Wireframing •Axure.com • Full featured wireframing tool, native download •Figma.com • search on community pages for wireframe templates •Wireframy - https://wireframy.com/ - Paid Figma wireframe template •Lucidchart - https://www.lucidchart.com/ - Online wireframing/charting tool
- 81. MOCKUPS
- 82. 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/
- 83. Example: Cook Simple Using AR to enhance cooking - High fidelity mockup - Animated GIF demo Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 84. Priyaa Sathiyaseelan - https://priyaasathiyaseelan.com/portfolio/cook-simple-ar-app/
- 87. Mock-up Guidelines 1. Generate final interface elements 2. Replace wireframe UI elements with high quality visuals 3. Use standard UI elements 4. Simulate user views 5. Focus on visual/audio design 6. Collect feedback from target end-users
- 88. Sketch vs. Wireframe vs. Mock-up Low Fidelity Low to Medium Fidelity Medium to High Fidelity IDEATE FLOW VISUALIZE
- 90. “Unless you can show me where you’ve fleshed out the character and aspects of the transitions at the same level of … fidelity as you have the states – you’re fired.” Bill Buxton
- 91. Paper Prototyping – Showing Transitions
- 92. Paper Prototyping (Low Fidelity) Quick and simple means of sketching interfaces Use office materials Easier to criticize, quick to change Creative process (develop in team) Can also use for usability test (focus on interaction flow) Used a lot to test out concepts before real design begins.
- 93. Basic Materials ● Post-its ● 5x8 in. index cards ● Scissors, X-acto knives ● Overhead transparencies ● Large, heavy, white paper (11 x 17) ● Tape, stick glue, correction tape ● Pens & markers (many colors & sizes)
- 94. Example: Mobile Paper Prototype https://www.youtube.com/watch?v=jTytI1PkGFM
- 95. Body Storming • Mockup/act out user interaction • Capture key elements of experience • Use paper prototypes + real people • Demonstrate/video the transitions
- 96. AR Visualization with Props https://www.youtube.com/watch?v=dXBXBHLqrLM
- 97. Video Sketching • Process • Capture elements of real world • Use series of still photos/sketches in a movie format. • Act out using the product • Benefits • Demonstrates the product experience • Discover where concept needs fleshing out. • Communicate experience and interface • You can use whatever tools you want, e.g. iMovie.
- 101. Google Glass Concept Movie https://www.youtube.com/watch?v=5R1snVxGNVs
- 103. Prototyping Tools Low Fidelity (Concept, visual design) • Sketching • Storyboarding & wireframes • Mockups • Paper & video prototyping High Fidelity (Interaction, experience design) • Interactive sketching • Desktop authoring • On-device authoring & visual scripting • Development toolkits
- 104. Digital Prototyping Lo- Fi Hi- Fi Easy Hard Digital Authoring Immersive Authoring Web-Based Development* Cross-Platform Development* Native Development* * requires scripting and 3D programming skills
- 105. Interactive Sketching •Pop App ● Pop - https://marvelapp.com/pop ● Combining sketching and interactivity on mobiles ● Take pictures of sketches, link pictures together
- 106. Using Pop
- 107. Pop Demo https://www.youtube.com/watch?v=Zdjg9yhBqTU
- 108. Proto.io • Web based prototyping tool • Visual drag and drop interface • Rich transitions • Scroll, swipe, buttons, etc • Deploy on device • mobile, PC, browser • Ideal for mobile interfaces • iOS, Android template • For low and high fidelity prototypes
- 109. Proto.io Demo https://www.youtube.com/watch?v=omw1o0IoSNw
- 110. Figma - https://www.figma.com/ • Web based tool for interface design and prototyping • Collaborative web application, visual editing • Key Features • vector graphics editor • prototyping tools for mobile, tablet, desktop • support for real-time collaboration • advanced interactive behaviours • mobile app for Android and iOS
- 114. Origami Studio - https://origami.design/ • Free design tool created by Meta (Mac only) • Goal: prototype small, interactive, app-interactions that will eventually be handed off to developers • Features • Rapidly build and share interactive interfaces. • Drag and drop/visual programming • Deploy on mobile phones
- 117. Case Study: Interactive Flight AR App https://blog.prototypr.io/making-flights-more-interesting-with-augmented-reality-322eecde82
- 118. Flight Augmented Reality Application ● Hold up mobile phone to see POI out of plane window ● AR tags in real world ● Tap tags for more information
- 119. Interaction Flow ● Input flight route ● View AR HUD
- 120. Design Interface Screens ● Using Sketch - https://www.sketch.com/
- 121. Create AR View ● Use looped video ● Load into Origami Studio ● Add POI onto video ● Animate POI with video ● Add touch interactions to POI https://www.youtube.com/watch?v=ejzS0atCtgQ
- 122. Add POI and Move with Video ● Use Origami Studio - https://origami.design/
- 123. Add Touch Interaction ● Add information toggling based on touch input (Origami Studio)
- 125. App Inventor • Visual Programming for Android Apps • Features • Access to Android Sensors • Multimedia output • Drag and drop web-based interface • Designer view – app layout • Blocks view – program logic/control • Download • http://appinventor.mit.edu/ • http://appinventor.org/
- 127. App Inventor Designer View
- 128. App Inventor Blocks View – Adding Interactivity
- 129. On-Device Authoring • Authoring AR/VR/MR on the target device • Mobile phone, tablet, head mounted display • Benefits • Intuitive 3D authoring (natural user interaction) • Can edit while previewing experience • Preview in target real environment • Collaborative viewing/interaction • Disadvantages • Only simple interactions • Some interactions more difficult (precise placement)
- 130. Apple Reality Composer • Rapidly create 3D scenes and AR experiences • Creation on device (iPhone, iPad) • Drag and drop interface • Loading 2D/3D content • Adding simple interactivity • Anchor content in real world (AR view) • Planes (vertical, horizontal), faces, images
- 131. Apple Reality Composer Interaction https://www.youtube.com/watch?v=tRcAGdM7878
- 132. FigminXR • A tool for real time Spatial Creation • In-VR Prototyping: • Build directly in HMD, seeing your creations in full scale and 3D space. • No Code Required: • Visual, drag-and-drop interface for designers, artists, and non-technical users. • Room Mapping: • Uses the Quest's room-mapping technology, supporting Mixed Reality viewing
- 134. ShapesXR - www.shapesxr.com •VR creation and collaboration platform • Mockup AR/VR interfaces • Collaborative Support collaborative viewing • Import 2D/3D assets • Export to 3D development tools • Available for Meta Quest
- 135. Motivation https://www.youtube.com/watch?v=zmjL7PsU4eE
- 136. https://www.youtube.com/watch?v=WAZfG-FHgNA ShapesXR Storyboarding/Presenting Create 3D scenes - Key elements Jump between scenes - Simulate transitions
- 137. Conclusion • Tom Chi’s Prototyping Rule • Find the quickest path to experience • Prototyping Tools • Use different tools at different parts of the process • Low Fidelity Prototyping • Focus on Concept, visual design • High Fidelity Prototyping • Focus on Interaction, experience design • Future Impacts • Use of AI, new devices, cross platform, accessibility, etc
- 138. QUESTIONS