rapid prototyping for augmented reality
TRANSCRIPT
![Page 2: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/2.jpg)
How do you Design and Test this?
![Page 3: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/3.jpg)
Or this..
![Page 4: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/4.jpg)
Google Glass
![Page 5: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/5.jpg)
View Through Glass
![Page 6: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/6.jpg)
Google Glass Prototyping
http://ed.ted.com/lessons/rapid-prototyping-google-glass-tom-chi
![Page 7: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/7.jpg)
Rapid Prototyping Glass • Q: How long would it take you to make the first working version of the Glass headset display?
• A: One day..
![Page 8: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/8.jpg)
Interacting with Glass
![Page 9: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/9.jpg)
Prototyping Interaction • Q: How long would it take you to prototype a Minority Report interaction technique?
• A: 45 minutes..
![Page 10: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/10.jpg)
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
![Page 11: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/11.jpg)
![Page 12: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/12.jpg)
The Road to Glass
![Page 13: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/13.jpg)
Early prototyping
![Page 14: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/14.jpg)
DESIGN PROCESSES
![Page 15: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/15.jpg)
Interaction Design Process
![Page 16: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/16.jpg)
Design Thinking - Three Phase Model
http://dschool.stanford.edu/redesigningtheater/the-design-thinking-process/
![Page 17: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/17.jpg)
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
![Page 18: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/18.jpg)
Elaboration vs. Reduction
• Elaboration: Sketching/Storytelling • Creation, exploration • Quick, conceptual
• Reduction: Prototyping/Testing • Functional • Idea presentation • Decision making
![Page 19: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/19.jpg)
RAPID PROTOTYPING
![Page 20: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/20.jpg)
How can we quickly prototype Augmented Reality experiences
with little or no coding?
![Page 21: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/21.jpg)
Why Prototype?
▪ Quick visual design ▪ Capture key interactions ▪ Focus on user experience ▪ Communicate design ideas ▪ “Learn by doing/experiencing”
![Page 22: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/22.jpg)
Design/Prototyping Tools
![Page 23: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/23.jpg)
Typical Development Steps
▪ Sketching ▪ Storyboards ▪ UI Mockups ▪ Interaction Flows ▪ Video Prototypes ▪ Interactive Prototypes ▪ Final Native Application
Increased Fidelity & Interactivity
![Page 24: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/24.jpg)
Sketching Sketching is not about 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
![Page 25: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/25.jpg)
Figure 41: A Sketch 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.”
sketchrepresentation
mind(new) knowledge
Create(seeing that)
Read(seeing as)
“Sketching is about the activity not the result” – Bill Buxton
25
![Page 26: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/26.jpg)
AR Hockey Concept
https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
![Page 27: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/27.jpg)
Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator
![Page 28: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/28.jpg)
Sketched Concepts
http://www.objecttheory.com/
![Page 29: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/29.jpg)
Example Storyboard
![Page 30: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/30.jpg)
Example Storyboard p.2
![Page 31: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/31.jpg)
Persona + Storyboard
![Page 32: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/32.jpg)
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.
![Page 33: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/33.jpg)
Paper Prototyping
![Page 34: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/34.jpg)
The 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)
![Page 35: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/35.jpg)
Physical Prototype
![Page 36: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/36.jpg)
• Early ideation • Think through ideas • Force you to visualize how things come together • Communicate ideas to others to inspire new designs • Active brainstorming
Why is Sketching/Paper Prototyping Useful?
![Page 37: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/37.jpg)
Paper Prototypes Pros and 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
![Page 38: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/38.jpg)
From Sketches to Working Systems 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 prototypes Task 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
![Page 39: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/39.jpg)
From Sketches to Prototypes • Sketches: early ideation stages of design • Prototypes: capturing /detailing the actual design
![Page 40: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/40.jpg)
Prototyping
• Create physical form of 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
![Page 41: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/41.jpg)
Sketch vs. Prototype Sketch PrototypeInvite A)endSuggest DescribeExplore RefineQues;on AnswerPropose TestProvoke ResolveTenta;ve,noncommi)al SpecificDepic;on
The primary differences are in the intent
![Page 42: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/42.jpg)
Sketching to Prototype
![Page 43: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/43.jpg)
Wireframe
• It’s about • Functional specs • Navigational systems • 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
![Page 44: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/44.jpg)
Wireframes
![Page 45: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/45.jpg)
![Page 46: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/46.jpg)
Mockup
• It’s about • Look and feel • Build on the wireframe with
graphics and polish • May adjust layout slightly but stays
within the general guide of the wireframe
![Page 47: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/47.jpg)
FunMe Mobile AR Wireframe/Mockup
http://www.yunnuocheng.com/funme/
![Page 48: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/48.jpg)
GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass ▪ Multiple card templates
![Page 49: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/49.jpg)
GlassSim Card Builder ▪ Use HTML for card details ▪ Multiple templates ▪ Change background ▪ Own image ▪ Camera view
![Page 50: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/50.jpg)
GlassSim Samples
![Page 51: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/51.jpg)
Application Storyboard
▪ http://dsky9.com/glassfaq/google-glass-storyboard-template-download/
![Page 52: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/52.jpg)
Application Flow
![Page 53: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/53.jpg)
Acting/Role Playing
![Page 54: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/54.jpg)
Wireframe/Mockup Pros and Cons ▪ 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
![Page 55: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/55.jpg)
Transitions
![Page 56: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/56.jpg)
![Page 57: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/57.jpg)
▪ Series of still photos 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
![Page 58: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/58.jpg)
UI Concept Movies
![Page 59: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/59.jpg)
Video Sketch Pros and 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
![Page 60: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/60.jpg)
EXAMPLE: SKETCH TO VIDEO
![Page 61: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/61.jpg)
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/
![Page 62: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/62.jpg)
AR Hockey Concept
https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/
![Page 63: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/63.jpg)
Sketched Projected Content
![Page 64: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/64.jpg)
Game Setup
![Page 65: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/65.jpg)
Paper/Experience Prototypes
• Having people act out the game
![Page 66: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/66.jpg)
Physical Mockup
![Page 67: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/67.jpg)
Concept Video
https://vimeo.com/79285725
![Page 68: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/68.jpg)
WORKING PROTOTYPES
![Page 69: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/69.jpg)
Interactive Sketching
• Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
![Page 70: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/70.jpg)
Using Pop
![Page 71: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/71.jpg)
Interactive Wireframing ▪ Developing interactive 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/
![Page 72: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/72.jpg)
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
![Page 73: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/73.jpg)
Proto.io - Interface
![Page 74: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/74.jpg)
Limitations ▪ No access to sensor data ▪ Camera, orientation sensor
▪ No multimedia playback ▪ Audio, video
▪ Simple transitions ▪ No conditional logic
▪ No networking
![Page 75: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/75.jpg)
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
![Page 76: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/76.jpg)
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
![Page 77: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/77.jpg)
![Page 78: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/78.jpg)
![Page 79: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/79.jpg)
Processing + Augmented Reality • 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
![Page 80: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/80.jpg)
http://toxiclibs.org/
![Page 81: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/81.jpg)
Other Tools ▪ Wireframing ▪ pidoco ▪ FluidUI
▪ Rapid Development ▪ Phone Gap ▪ AppMachine
▪ Interactive ▪ App Inventor ▪ WearScript
![Page 82: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/82.jpg)
EXAMPLE: CONCEPT TO DEMO
![Page 83: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/83.jpg)
NASA Hololens Concept Demo
• Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
![Page 84: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/84.jpg)
Chesley Bonestell (1940s)
![Page 85: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/85.jpg)
Hololens Story
![Page 86: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/86.jpg)
HoloLens Concept Sketches
![Page 87: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/87.jpg)
Final NASA HoloLens OnSight Demo
https://www.youtube.com/watch?v=o-GP3Kx6-CE
![Page 88: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/88.jpg)
HARDWARE PROTOTYPING
![Page 89: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/89.jpg)
Build Your Own Wearable
▪ MyVu display + phone + sensors
![Page 90: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/90.jpg)
Beady-i
▪ http://www.instructables.com/id/DIY-Google-Glasses-AKA-the-Beady-i/
![Page 91: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/91.jpg)
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
![Page 92: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/92.jpg)
Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass
![Page 93: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/93.jpg)
Example: Glove Input
▪ Buttons on fingertips ▪ Map touches to commands
![Page 94: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/94.jpg)
Example: Ring Input
▪ Touch strip, button, accelerometer ▪ Tap, swipe, flick actions
![Page 95: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/95.jpg)
How it works
Bracelet
Armband
Gloves
1,2,3,4
Values/output
![Page 96: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/96.jpg)
CASE STUDY
![Page 97: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/97.jpg)
ITERATIVE DESIGN PROCESS
Design(redesign)
PrototypeTestDesignwithUsers(Note
problems)Evaluate(FixIssues)
![Page 98: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/98.jpg)
MOBILE AUGMENTED REALITY FOR SPATIAL NAVIGATION
Sharon Brosnan Bachelor of Science in Digital Media Design
http://www.sharonbrosnan.com/portfolio/mobile-augmented-reality.php
![Page 99: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/99.jpg)
BUNRATTY FOLK PARK
• Irish visitor 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.
![Page 100: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/100.jpg)
![Page 101: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/101.jpg)
AUGMENTED REALITY
In Bunratty Folk 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
![Page 102: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/102.jpg)
NAVIGATIONAL AID
Smartphone Platform Most people carry mobile phones Ideal Augmented Reality Technology • Global tracking tools • Wireless communication capabilities • Location based computing • Large display for interaction
![Page 103: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/103.jpg)
DESIGNING FOR THE VISITOR
![Page 104: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/104.jpg)
HUMAN CENTRED DESIGN
Goal of 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.
![Page 105: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/105.jpg)
HUMAN CENTRED DESIGN
Understanding the technology and Related Works ! Literature ! Similar Technologies ! Electronic Tours in Museum Settings ! Interactions design in Outdoor Museums
Understanding the User over time ! Observations ! Interviews
![Page 106: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/106.jpg)
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
![Page 107: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/107.jpg)
FUNCTIONALITY • View Options
• Camera View • Map View • List View
• Sub-Options • Places • Events • Restaurants
! AR Features ! Text Information ! 3D Objects ! 3D Tour Guide ! 3D Placement of Buildings
![Page 108: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/108.jpg)
STORYBOARD
![Page 109: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/109.jpg)
![Page 110: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/110.jpg)
![Page 111: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/111.jpg)
ITERATIVE DESIGN PROCESS
![Page 112: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/112.jpg)
ITERATIVE DESIGN PROCESS
Prototyping and User Testing • Low Fidelity Prototyping
• Sketches • Paper Prototyping • Post-It Prototyping • PowerPoint Prototyping
• High Fidelity Prototyping • Wikitude
![Page 113: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/113.jpg)
INITIAL SKETCHES - Photoshop
Pros: • Good for idea generation • Cheap • Concepts seem feasible Cons: • Not great feedback gained • Photoshop not fast enough for making changes
![Page 114: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/114.jpg)
POST IT PROTOTYPING
FirstDraJ
CameraViewwith3D
SecondDraJ ThirdDraJ• Selec;onhighlightedinblue • Homebu)onaddedforeasy
naviga;ontomainmenu
![Page 115: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/115.jpg)
POWERPOINT PROTOTYPING Benefits • Used for User 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
![Page 116: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/116.jpg)
WIKITUDE
• Popular AR browser • Mapping • Point of Interest abilities • Multiplatform • Shows points of interest
• Markers can be selected in and information pop-up appears
![Page 117: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/117.jpg)
FINAL CONCEPT DESIGN
![Page 118: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/118.jpg)
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
![Page 119: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/119.jpg)
VIDEO PROTOTYPE
" Flexibletoolforcapturingtheuseofaninterface
" Elaboratesimula;onofhowthenaviga;onalaidwillwork
" Doesnotneedtoberealis;cineverydetail
" Givesagoodideaofhowthefinishedsystemwillwork
![Page 120: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/120.jpg)
SUMMARY
![Page 121: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/121.jpg)
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
![Page 122: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/122.jpg)
Conclusions • Prototyping is one of 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
![Page 123: Rapid Prototyping For Augmented Reality](https://reader033.vdocuments.mx/reader033/viewer/2022052116/587f40161a28ab43318b568f/html5/thumbnails/123.jpg)
Consider the Whole User