COMP 4026 Lecture3 Prototyping and Evaluation

Director at HIT Lab NZ
Aug. 16, 2016

More Related Content


Recently uploaded(20)

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
  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
  5. Persona + Storyboard
  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
  9. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  10. Design/PrototypingTools
  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
  14. Paper Prototyping
  15. Paper Proto:CreateWidgets
  16. Card-based prototypes • Index cards (3 X 5 inches) • Each card represents one screen or part of screen • Often used in website development
  17. Physical Prototype
  18. Interactive Sketching • Pop App • Pop - • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
  19. ▪ 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
  20. Video Sketch
  21. Interactive Wireframing ▪  Developing interactive interfaces/wireframes ▪  Transitions, user feedback, interface design ▪  Web based tools ▪  UXpin - ▪ - ▪  Native tools ▪  Justinmind - ▪  Axure -
  22. - ▪  Web based mobile prototyping tool ▪  Features ▪  Prototype for multiple devices ▪  Gesture input, touch events, animations ▪  Share with collaborators ▪  Test on device
  23. Flinto • •  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
  24. Flinto Interface Video 11: Flinto
  25. Finto Demo
  26. Facebook Origami • •  Visual programming for mobile prototypes •  Drag and drop interface elements, interactions •  Extends Mac Quartz Composer •  Visual design tool •  Tutorial •
  27. Origami Interface
  28. Limitations ▪  No access to sensor data ▪  Camera, orientation sensor ▪  No multimedia playback ▪  Audio, video ▪  Simple transitions ▪  No conditional logic ▪  No networking
  29. 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
  30. App Inventor DesignerView
  31. App Inventor BlocksView
  32. App Inventor Demo
  33. Interactive Coding - Processing ▪ Programming tool for Artists/Designers ▪ ▪ Easy to code, Free, Open source, Java based ▪ 2D, 3D, audio/video support ▪ Processing For Android ▪ ▪ Strong Android support, builds .apk file
  35. OtherVisual PrototypingTools •  VVVV • •  Hybrid visual/text programming environment •  Real time audio/graphics, physical interfaces, etc •  Max/MSP • •  Visual programming •  Designed for interactive media applications
  36. Max/MSP Interface
  37. VVVV Interface
  38. VVVVVisual Programming
  39. 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
  40. 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.
  41. 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.
  42. Interactive Role Play
  43. Interactive Role Play in Environment
  44. Role Playing
  45. 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
  46. Physical Prototyping - • Hardware prototyping •
  47. D Tools Demo
  48. littleBits - •  Plug and play hardware components •  Sensors, input, output •  Rapid design with hardware
  49. Little Bits Demo
  50. Tethered Prototypes Goal: CommunicateVision HIGH FIDELITY PROTOTYE
  51. 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
  52. 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
  53. Prototyping Platform Arduino Kit Bluetooth Shield Google Glass
  54. Example: Glove Input ▪  Buttons on fingertips ▪  Map touches to commands
  55. Example: Ring Input ▪  Touch strip, button, accelerometer ▪  Tap, swipe, flick actions
  56. How it works Bracelet Armband Gloves 1,2, 3,4 Values/ output
  57. 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
  59. NASA Hololens Concept Demo • Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
  60. Chesley Bonestell (1940s)
  61. Hololens Story
  62. HoloLens Concept Sketches
  63. Final NASA HoloLens OnSight Demo
  65. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  66. 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
  67. “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 Bruce Tognazzini
  68. 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
  69. Four evaluation paradigms • ‘quick and dirty’ • usability testing (lab studies) • field studies • predictive evaluation
  70. 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.
  71. 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.
  72. Laboratory-based studies Controlled, instrumented environment
  73. 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.
  74. 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
  75. 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
  76. 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
  78. Interaction Design Process Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final Product
  79. MOBILE AUGMENTED REALITY FOR SPATIAL NAVIGATION Sharon Brosnan 0651869 Bachelor of Science in Digital Media Design
  80. BUNRATTY FOLK PARKSharon Brosnan 0651869 Bachelor of Science in Digital Media Design
  81. 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.
  82. 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
  83. 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
  85. 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.
  86. 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
  87. 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
  88. 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
  89. 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
  92. ITERATIVE DESIGN PROCESS Prototyping and UserTesting •  Low Fidelity Prototyping •  Sketches •  Paper Prototyping •  Post-It Prototyping •  PowerPoint Prototyping •  High Fidelity Prototyping •  Wikitude
  93. INITIAL SKETCHES Pros: •  Good for idea genera;on •  Cheap •  Concepts seem feasible Cons: •  Not great feedback gained •  Photoshop not fast enough for making changes
  94. 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
  95. POWERPOINT PROTOTYPING Benefits •  Used for User Tes;ng •  Interac;ve •  Func;onali;es work when following the story of Scenario 1 •  Quick •  Easy arrangement of slides User Tes?ng •  Par;cipants found •  15 minute sessions screen captured •  ‘Talk Allowed’ technique used •  Notes taken •  Post-Interview
  96. 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
  97. WIKITUDE UserTesting •  Application well received •  Understandable •  Participants playful with the technology
  99. 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
  100. 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
  101. 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..
  102. DemoVideo
  103. @marknb00