Download as PDF, PPTX
Uploaded byMark Billinghurst
Rapid Prototyping For Augmented Reality
The document discusses rapid prototyping techniques for augmented reality (AR) design, emphasizing the importance of user experience and iterative processes. Key concepts include various prototyping methods such as sketching, paper prototyping, and interactive wireframes, alongside tools to facilitate user testing and feedback. It highlights Tom Chi's prototyping rules, advocating for speed and hands-on experience in the design process, ultimately aiming to keep the user at the core of AR interface development.
More Related Content
Similar to Rapid Prototyping For Augmented Reality
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Rapid Prototyping For Augmented Reality
- 1. RAPID PROTOTYPING FOR AUGMENTEDREALITY Mark Billinghurst mark.billinghurst@unisa.edu.au April 5th 2016
- 2. How do youDesign and Test this?
- 3.
- 4.
- 5.
- 6.
- 7. Rapid Prototyping Glass • Q:How long would it take you to make the first working version of the Glass headset display? • A: One day..
- 8.
- 9. Prototyping Interaction • Q: Howlong would it take you to prototype a Minority Report interaction technique? • A: 45 minutes..
- 10. Tom Chi’s PrototypingRules 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
- 12. The Road toGlass
- 13.
- 14.
- 15.
- 16. DesignThinking -Three PhaseModel http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/
- 17. Elaboration and Reduction • Elaborate - generate solutions.These are the opportunities • Reduce - decide on the ones worth pursuing • Repeat - elaborate and reduce again on those solutions Source: Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons
- 18. Elaboration vs.Reduction • Elaboration: Sketching/Storytelling • Creation,exploration • Quick, conceptual • Reduction: Prototyping/Testing • Functional • Idea presentation • Decision making
- 19.
- 20. How can wequickly prototype Augmented Reality experiences with little or no coding?
- 21. Why Prototype? ▪ Quickvisual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
- 22.
- 23. Typical Development Steps ▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application Increased Fidelity & Interactivity
- 24. Sketching Sketching is notabout drawing It is about 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
- 25. Figure 41: ASketch of a Dialogue with a Sketch The “conversation” between the sketch (right bubble) and the mind (left bubble). A sketch is created from current knowledge (top arrow). Reading, or interpreting the resulting representation (bottom arrow), creates new knowledge. The creation results from what Goldschmidt calls “seeing that” reasoning, and the extraction of new knowledge results from what she calls “seeing as.” sketch representation mind (new) knowledge Create (seeing that) Read (seeing as) Sketching is about the activity not the result – Bill Buxton 25
- 26.
- 27. Sketched Interfaces ▪ Sketch+ Powerpoint/Photoshop/Illustrator
- 28.
- 29.
- 30.
- 31.
- 32. Paper Prototyping (LowFidelity) 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.
- 33.
- 34. The Basic Materials • Post-its • 5x8in. 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)
- 35.
- 36. • Early ideation • Think throughideas • Force you to visualize how things come together • Communicate ideas to others to inspire new designs • Active brainstorming Why is Sketching/Paper Prototyping Useful?
- 37. Paper Prototypes Prosand Cons • Good • Quick and dirty • No software needed • Very inclusive • Bad • Not quick enough • Too dirty (lack context and scale) • Hard to share among team • Still needs a separate documentation step
- 38. From Sketches toWorkingSystems Early design Late design Brainstorm different ideas and representations Choose a representation Rough out interface style Multitude of sketches Sketch variations and details Sketch or low fidelity prototypesTask centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Low to medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems
- 39. From Sketches toPrototypes • Sketches: early ideation stages of design • Prototypes: capturing /detailing the actual design
- 40. Prototyping • Create physical formof ideas • Allow people to experience and interact with them • Why Prototyping? • Empathy gaining- deepen understanding of design space • Exploration – build to think • Testing – test solutions with end users • Inspiration – help others catch your vision
- 41. Sketch vs.Prototype Sketch Prototype Invite A)end Suggest Describe Explore Refine Ques;on Answer Propose Test Provoke Resolve Tenta;ve, non commi)al Specific Depic;on The primary differences are in the intent
- 42.
- 43. Wireframe • It’s about • Functional specs • Navigationalsystems • Functionality and layout • Notes about the intended functionality • How interface elements work together • Lack of typographic style, colour or graphics • Leaving room for the design to be created
- 44.
- 46. Mockup • It’s about • Lookand feel • Build on the wireframe with graphics and polish • May adjust layout slightly but stays within the general guide of the wireframe
- 47. FunMe Mobile ARWireframe/Mockup http://www.yunnuocheng.com/funme/
- 48. GlassSim – http://glasssim.com/ ▪ Simulate the view through Google Glass ▪ Multiple card templates
- 49. GlassSim Card Builder ▪ Use HTML for card details ▪ Multiple templates ▪ Change background ▪ Own image ▪ Camera view
- 50.
- 51.
- 52.
- 53.
- 54. Wireframe/Mockup Pros andCons ▪ Positives ▪ Good for documenting screens ▪ Can show application flow ▪ Negatives ▪ No interactivity/transitions ▪ Can’t be used for testing ▪ Can’t deploy on device ▪ Can be time consuming to create
- 55.
- 57. ▪ Series of stillphotos in a movie format. ▪ Demonstrates the experience of the product ▪ Discover where concept needs fleshing out. ▪ Communicate experience and interface ▪ You can use whatever tools, from Flash to iMovie. Video Sketching
- 58.
- 59. Video Sketch Prosand Cons • Good • Excellent communication tool • Shows interactions • High fidelity concept • Bad • No interaction • Difficult to use for user testing • May not be able to implement vision • Too good to be true
- 60.
- 61. AR Hockey • Concept– Air Hockey in the real world • Mix materiality and real surfaces with digital forms • React to real body movement and player interaction https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
- 62.
- 63.
- 64.
- 65. Paper/Experience Prototypes • Havingpeople act out the game
- 66.
- 67.
- 68.
- 69. Interactive Sketching • Pop App • Pop- https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
- 70.
- 71. Interactive Wireframing ▪ Developinginteractive interfaces/wireframes ▪ Transitions, user feedback, interface design ▪ Web based tools ▪ UXpin - http://www.uxpin.com/ ▪ proto.io - http://www.proto.io/ ▪ Native tools ▪ Justinmind - http://www.justinmind.com/ ▪ Axure - http://www.axure.com/
- 72. Proto.io - http://www.proto.io/ ▪ Web based mobile prototyping tool ▪ Features ▪ Prototype for multiple devices ▪ Gesture input, touch events, animations ▪ Share with collaborators ▪ Test on device
- 73.
- 74. Limitations ▪ No accessto sensor data ▪ Camera, orientation sensor ▪ No multimedia playback ▪ Audio, video ▪ Simple transitions ▪ No conditional logic ▪ No networking
- 75. Wireframe vs.Prototype vs.Mockup • Wireframe • Low fidelity representation of design • What UI elements, where UI are placed • Mockup • High fidelity static design • Visual design draft • Prototype • Medium to high fidelity • Supports user interaction
- 76. Interactive Coding -Processing ▪ Programming tool for Artists/Designers ▪ http://processing.org ▪ Easy to code, Free, Open source, Java based ▪ 2D, 3D, audio/video support ▪ Processing For Android ▪ http://wiki.processing.org/w/Android ▪ Strong Android support, builds .apk file
- 79. Processing + AugmentedReality • Support for Augmented Reality • Camera input • GPS/Sensor input • 3D Graphics • Books • Prototyping Augmented Reality (Mullins) • Rapid Android Development (Sauter) • Software • Ketai Library - http://ketai.org/ • Android library support – all sensors on Android devices
- 80.
- 81. Other Tools ▪ Wireframing ▪ pidoco ▪ FluidUI ▪ Rapid Development ▪ Phone Gap ▪ AppMachine ▪ Interactive ▪ App Inventor ▪ WearScript
- 82.
- 83. NASA Hololens ConceptDemo • Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
- 84.
- 85.
- 86.
- 87. Final NASA HoloLensOnSight Demo https://www.youtube.com/watch?v=o-GP3Kx6-CE
- 88.
- 89. Build Your OwnWearable ▪ MyVu display + phone + sensors
- 90.
- 91. Physical Input Devices ▪ Can we develop unobtrusive input devices ? ▪ Reduce need for speech, touch pad input ▪ Socially more acceptable ▪ Examples ▪ Ring, ▪ pendant, ▪ bracelet, ▪ gloves, etc
- 92. Prototyping Platform Arduino KitBluetooth Shield Google Glass
- 93. Example: Glove Input ▪ Buttons on fingertips ▪ Map touches to commands
- 94. Example: Ring Input ▪ Touch strip, button, accelerometer ▪ Tap, swipe, flick actions
- 95.
- 96.
- 97.
- 98. MOBILE AUGMENTED REALITYFOR SPATIAL NAVIGATION Sharon Brosnan Bachelor of Science in Digital Media Design http://www.sharonbrosnan.com/portfolio/mobile-augmented-reality.php
- 99. BUNRATTY FOLK PARK • Irishvisitor attraction run by Shannon Heritage • 19th century life is recreated • Buildings from the mid-west have been relocated to the 26-land surrounding Bunratty Castle • 30 buildings are set in a rural or village setting there.
- 101. AUGMENTED REALITY In BunrattyFolk Park: • Allows the visitor to point a camera at an exhibit, the device recognises its by it’s location and layers digital information on to the display • 3-dimensional virtual objects can be positioned with real ones on display • Leads to dynamic combination of a live camera view and information
- 102. NAVIGATIONALAID Smartphone Platform Most peoplecarry mobile phones Ideal Augmented Reality Technology • Global tracking tools • Wireless communication capabilities • Location based computing • Large display for interaction
- 103.
- 104. HUMAN CENTRED DESIGN Goalof the Navigational Aid • Easy to use, clear and understandable • Useful to visitors • Creating interaction between the visitor and the aid through the user interface Engage the visitor • It is necessary to understand the visitor to Bunratty • Identify visitor motives and goals while going through the Folk Park.
- 105. HUMAN CENTRED DESIGN Understandingthe technology and Related Works ! Literature ! Similar Technologies ! Electronic Tours in Museum Settings ! Interactions design in Outdoor Museums Understanding the User over time ! Observations ! Interviews
- 106. HUMAN CENTRED DESIGN Findings • Most visitors do not use the map • Most visitors have mobile phones • Visitors want more information • View the Folk Park at their own pace • Information should be straight to the point • Large social interaction within groups
- 107. FUNCTIONALITY • View Options • CameraView • MapView • ListView • Sub-Options • Places • Events • Restaurants ! AR Features ! Text Information ! 3D Objects ! 3D Tour Guide ! 3D Placement of Buildings
- 108.
- 111.
- 112. ITERATIVE DESIGN PROCESS Prototypingand User Testing • Low Fidelity Prototyping • Sketches • Paper Prototyping • Post-It Prototyping • PowerPoint Prototyping • High Fidelity Prototyping • Wikitude
- 113. INITIAL SKETCHES -Photoshop Pros: • Good for idea generation • Cheap • Concepts seem feasible Cons: • Not great feedback gained • Photoshop not fast enough for making changes
- 114. POST IT PROTOTYPING First DraJ Camera View with 3D Second DraJ Third DraJ • Selec;on highlighted in blue • Home bu)on added for easy naviga;on to main menu
- 115. POWERPOINT PROTOTYPING Benefits • Used forUser Testing • Interactive • Functionalities work • Quick • Easy arrangement of slides User Testing • Participants found • 15 minute sessions screen captured • ‘Talk Allowed’ technique used • Notes taken • Post-Interview
- 116. WIKITUDE • Popular ARbrowser • Mapping • Point of Interest abilities • Multiplatform • Shows points of interest • Markers can be selected in and information pop-up appears
- 117.
- 118. FINAL DESIGN CONCEPT Key Issues • Fix issues found in previous sessions • Design with guidelines in mind • Appealing to the Mental Model • Icon Design • Aesthetic Design • Colour/Font • Buttons • Look
- 119.
- 120.
- 121. Tom Chi’s PrototypingRules 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
- 122. Conclusions • Prototyping is oneof the most important skills you can have as an ARinterface designer • There are many tools available: • Sketching, Paper Prototyping, Video, etc • Always keep the user at the heart of the process • User centered design • User testing/feedback
- 123.
- 124.