COMP 4026 Lecture3 Prototyping and Evaluation
5 likes1,448 views
The document outlines the interaction design process used in prototype development and evaluation, emphasizing the importance of user-centered design and various prototyping tools. It discusses methods for creating low and high fidelity prototypes, alongside the evaluation techniques employed during the design process to gather user feedback. It provides examples, including the use of mobile augmented reality for navigation at Bunratty Folk Park, demonstrating how technology can enhance visitor experience.
COMP 4026 Lecture3 Prototyping and Evaluation
- 1. LECTURE 3: PROTOTYPE AND EVALUATE COMP 4026 – Advanced HCI Semester 5 - 2016 Mark Billinghurst University of South Australia August 11th 2016
- 2. DESIGN
- 3. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 4. Tools for Effective Design ! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
- 6. Wireframe • It’s about • Functional specs • Navigational systems • Functionality and layout • Notes about the intended functionality • How interface elements work together • Leaving room for the design to be created
- 7. 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
- 8. PROTOTYPE
- 9. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 11. Sketched Interfaces ▪ Sketch + Powerpoint/Photoshop/Illustrator
- 12. From Sketches to Prototypes • Sketches: early ideation stages of design • Prototypes: capturing /detailing the actual design
- 13. 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
- 16. Card-based prototypes • Index cards (3 X 5 inches) • Each card represents one screen or part of screen • Often used in website development
- 24. Interactive Sketching • Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
- 25. ▪ 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
- 26. Video Sketch
- 27. 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/
- 28. 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
- 29. Flinto • https://www.flinto.com/ • High fidelity prototyping • Use final png files/interface screens • Connect mockup screens visually • Apply transitions, scrolling etc • Send prototypes to mobile for viewing • Looks like real application
- 30. Flinto Interface Video 11: Flinto
- 32. Facebook Origami • http://facebook.github.io/origami/ • Visual programming for mobile prototypes • Drag and drop interface elements, interactions • Extends Mac Quartz Composer • Visual design tool • Tutorial • http://facebook.github.io/origami/tutorials/
- 34. Limitations ▪ No access to sensor data ▪ Camera, orientation sensor ▪ No multimedia playback ▪ Audio, video ▪ Simple transitions ▪ No conditional logic ▪ No networking
- 35. App Inventor • http://appinventor.mit.edu/ • http://appinventor.org/ • 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
- 39. 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
- 43. OtherVisual PrototypingTools • VVVV • http://vvvv.org • Hybrid visual/text programming environment • Real time audio/graphics, physical interfaces, etc • Max/MSP • http://cycling74.com/products/max/ • Visual programming • Designed for interactive media applications
- 45. VVVV Interface
- 47. Experience Prototyping “Experience Prototype is any kind of representation, in any medium, that is designed to understand, explore or communicate what it might be like to engage with the product, space or system we are designing.” Buchenau and Suri
- 48. Buchenau, M., & Suri, J. F. (2000, August). Experience prototyping. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques (pp. 424-433). ACM.
- 49. Experience Prototyping The experience of even simple artifacts does not exist in a vacuum but, rather, in dynamic relationship with other people, places and objects. Additionally, the quality of people’s experience changes over time as it is influenced by variations in these multiple contextual factors.
- 51. IDEO.com Interactive Role Play in Environment
- 52. Role Playing
- 53. Wizard-of-Oz Prototyping • The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. • Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User
- 54. Physical Prototyping - d.tools • Hardware prototyping • http://hci.stanford.edu/research/dtools/
- 56. littleBits - http://littlebits.cc/ • Plug and play hardware components • Sensors, input, output • Rapid design with hardware
- 59. Rapid Prototyping • Speed development time with quick hardware mockups • handheld device connected to PC • LCD screen, USB phone keypad, Camera • Can use PC development tools for rapid development • Flash,Visual Basic, etc
- 60. Hardware Prototyping Example ▪ Can we develop unobtrusive input devices ? ▪ Reduce need for speech, touch pad input ▪ Socially more acceptable ▪ Examples ▪ Ring, ▪ pendant, ▪ bracelet, ▪ gloves, etc
- 61. Prototyping Platform Arduino Kit Bluetooth Shield Google Glass
- 62. Example: Glove Input ▪ Buttons on fingertips ▪ Map touches to commands
- 63. Example: Ring Input ▪ Touch strip, button, accelerometer ▪ Tap, swipe, flick actions
- 65. Goals of Prototyping • Learn • Solve Disagreements • Reduce miscommunication • Start a conversation • Fail quickly and cheaply • Test ideas without spending time and money • Manage the solution building process • Break large problem into smaller testable parts
- 67. NASA Hololens Concept Demo • Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
- 69. Hololens Story
- 71. Final NASA HoloLens OnSight Demo https://www.youtube.com/watch?v=o-GP3Kx6-CE
- 72. EVALUATION
- 73. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 74. What is evaluation? • Evaluation is concerned with gathering data about the usability of a design or product by a specified group of users for a particular activity within a specified environment or work context
- 75. “Iterative design, with its repeating cycle of design and testing, is the only validated methodology in existence that will consistently produce successful results. If you don’t have user-testing as an integral part of your design process you are going to throw buckets of money down the drain.” See AskTog.com Bruce Tognazzini
- 76. When to evaluate? • Once the product has been developed • pros : rapid development, small evaluation cost • cons : rectifying problems • During design and development • pros : find and rectify problems early • cons : higher evaluation cost, longer development design implementationevaluation redesign & reimplementation design implementation
- 77. Four evaluation paradigms • ‘quick and dirty’ • usability testing (lab studies) • field studies • predictive evaluation
- 78. Quick and dirty • ‘quick & dirty’ evaluation: informal feedback from users or consultants to confirm that their ideas are in-line with users’ needs and are liked. • Quick & dirty evaluations are done any time. • Emphasis is on fast input to the design process rather than carefully documented findings.
- 79. Formal Usability Testing • Recording typical users’ performance on typical tasks in controlled settings. Field observations may be used. • As the users perform these tasks they are watched & recorded on video & their key presses are logged. • This data is used to calculate performance times, errors & help explain why the users did what they did. • User satisfaction questionnaires & interviews are used to elicit users’ opinions.
- 80. Laboratory-based studies Controlled, instrumented environment
- 81. Field/Ethnographic Studies • Field studies are done in natural settings • The aim is to understand what users do naturally and how technology impacts them. • In product design field studies can be used to: - identify opportunities for new technology - determine design requirements - decide how to introduce new technology - evaluate technology in use.
- 82. Predictive Evaluation • Experts apply their knowledge of typical users, often guided by heuristics, to predict usability problems. • Can involve theoretically based models. • A key feature of predictive evaluation is that users need not be present • Relatively quick and inexpensive
- 83. Characteristics of approaches Usability testing Field studies Predictive Users do task natural not involved Location controlled natural anywhere When prototype early prototype Data quantitative qualitative problems Feed back measures & errors descriptions problems Type applied naturalistic expert
- 84. Evaluation approaches and methods Method Usability testing Field studies Predictive Observing x x Asking users x x Asking experts x x Testing x Modeling x
- 85. CASE STUDY
- 86. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
- 87. MOBILE AUGMENTED REALITY FOR SPATIAL NAVIGATION Sharon Brosnan 0651869 Bachelor of Science in Digital Media Design
- 88. BUNRATTY FOLK PARKSharon Brosnan 0651869 Bachelor of Science in Digital Media Design
- 89. 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.
- 91. 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
- 92. NAVIGATIONALAID Smartphone Platform Most people carry mobile phones and are comfortable with them Ideal Augmented RealityTechnology • Global tracking tools • Wireless communication capabilities • Location based computing • Large display for interaction
- 94. 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 To ensure this… • It is necessary to understand the visitor of a navigational aid in Bunratty Folk Park • Identify visitor motives and goals while going through the Folk Park.
- 95. HUMAN CENTRED DESIGN Understanding Technology and Related Work • Literature • Similar Technologies • Electronic Tours in Museum Settings • Interactions design in Outdoor Museums Understanding the User over time • Observations • Interviews
- 96. 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
- 97. NEXT STEPS FROM RESEARCH • DefineVisitors Goals • Define Functionalities of the Aid • Develop Personas – visitors who use the Aid • Develop Scenarios – how the persona uses the navigational aid in the Folk Park • Draw up Storyboards on scenarios
- 98. FUNCTIONALITY • View Options • CameraView • MapView • ListView • Sub-Options • Places • Events • Restaurants • Augmented Reality Features for navigation • Text Information • 3D Objects • 3D Tour Guide • 3D Placement of Buildings
- 99. STORYBOARD
- 102. ITERATIVE DESIGN
- 103. ITERATIVE DESIGN PROCESS Prototyping and UserTesting • Low Fidelity Prototyping • Sketches • Paper Prototyping • Post-It Prototyping • PowerPoint Prototyping • High Fidelity Prototyping • Wikitude
- 105. POST IT PROTOTYPING First Dra5 Camera View with 3D Second Dra5 Third Dra5 • Selec;on highlighted in blue • Home bu)on added for easy naviga;on to main menu
- 107. WIKITUDE • Popular augmented reality browser for mobile devices • Mapping • Point of Interest abilities • Multiplatform • Shows the points of interest of Bunratty Folk Park • Markers can be selected in and an information pop-up appears
- 108. WIKITUDE UserTesting • Application well received • Understandable • Participants playful with the technology
- 109. FINAL CONCEPT DESIGN
- 110. 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
- 111. VIDEO PROTOTYPE " Flexible tool for capturing the use of an interface " Elaborate simula;on of how the naviga;onal aid will work " Does not need to be realis;c in every detail " Gives a good idea of how the finished system will work
- 112. DemoVideo • Human emotional or physical necessities. • Needs help define your design • Needs are verbs not Nouns • Verbs - (activities and desires) • Nouns (solutions) • Identify needs directly out of the user traits you noted, or from contradictions between • disconnect between what she says and what she does..