comp 4026 lecture3 prototyping and evaluation
TRANSCRIPT
![Page 1: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/1.jpg)
LECTURE 3: PROTOTYPE AND EVALUATE
COMP 4026 – Advanced HCI Semester 5 - 2016
Mark Billinghurst University of South Australia
August 11th 2016
![Page 2: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/2.jpg)
DESIGN
![Page 3: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/3.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 4: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/4.jpg)
Tools for Effective Design
! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups
![Page 5: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/5.jpg)
Persona + Storyboard
![Page 6: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/6.jpg)
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
![Page 7: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/7.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 8: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/8.jpg)
PROTOTYPE
![Page 9: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/9.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 10: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/10.jpg)
Design/Prototyping Tools
![Page 11: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/11.jpg)
Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator
![Page 12: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/12.jpg)
From Sketches to Prototypes • Sketches: early ideation stages of design • Prototypes: capturing /detailing the actual design
![Page 13: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/13.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 14: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/14.jpg)
Paper Prototyping
![Page 15: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/15.jpg)
Paper Proto: Create Widgets
![Page 16: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/16.jpg)
Card-based prototypes
• Index cards (3 X 5 inches) • Each card represents
one screen or part of screen • Often used in website
development
![Page 17: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/17.jpg)
![Page 18: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/18.jpg)
![Page 19: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/19.jpg)
![Page 20: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/20.jpg)
![Page 21: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/21.jpg)
![Page 22: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/22.jpg)
![Page 23: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/23.jpg)
Physical Prototype
![Page 24: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/24.jpg)
Interactive Sketching
• Pop App • Pop - https://popapp.in/ • Combining sketching and interactivity on mobiles • Take pictures of sketches, link pictures together
![Page 25: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/25.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 26: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/26.jpg)
Video Sketch
![Page 27: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/27.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 28: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/28.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 29: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/29.jpg)
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
![Page 30: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/30.jpg)
Flinto Interface
Video 11: Flinto
![Page 31: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/31.jpg)
Finto Demo
https://www.youtube.com/watch?v=V1nb0uoSa4A
![Page 32: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/32.jpg)
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/
![Page 33: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/33.jpg)
Origami Interface
![Page 34: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/34.jpg)
Limitations ▪ No access to sensor data ▪ Camera, orientation sensor
▪ No multimedia playback ▪ Audio, video
▪ Simple transitions ▪ No conditional logic
▪ No networking
![Page 35: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/35.jpg)
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
![Page 36: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/36.jpg)
App Inventor Designer View
![Page 37: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/37.jpg)
App Inventor Blocks View
![Page 38: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/38.jpg)
App Inventor Demo
http://www.youtube.com/watch?v=DUuDzEbPqnM
![Page 39: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/39.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 40: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/40.jpg)
![Page 41: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/41.jpg)
![Page 42: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/42.jpg)
http://toxiclibs.org/
![Page 43: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/43.jpg)
Other Visual Prototyping Tools • 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
![Page 44: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/44.jpg)
Max/MSP Interface
![Page 45: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/45.jpg)
VVVV Interface
![Page 46: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/46.jpg)
VVVV Visual Programming
![Page 47: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/47.jpg)
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
![Page 48: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/48.jpg)
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.
![Page 49: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/49.jpg)
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.
![Page 50: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/50.jpg)
Interactive Role Play
![Page 51: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/51.jpg)
IDEO.com
Interactive Role Play in Environment
![Page 52: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/52.jpg)
Role Playing
![Page 53: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/53.jpg)
‘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
![Page 54: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/54.jpg)
Physical Prototyping - d.tools • Hardware prototyping • http://hci.stanford.edu/research/dtools/
![Page 55: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/55.jpg)
D Tools Demo
http://hci.stanford.edu/research/dtools/
![Page 56: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/56.jpg)
littleBits - http://littlebits.cc/
• Plug and play hardware components • Sensors, input, output
• Rapid design with hardware
![Page 57: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/57.jpg)
Little Bits Demo
https://www.youtube.com/watch?v=wDa3dOERxvA
![Page 58: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/58.jpg)
Tethered Prototypes
Goal: Communicate Vision HIGH FIDELITY PROTOTYE
![Page 59: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/59.jpg)
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
![Page 60: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/60.jpg)
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
![Page 61: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/61.jpg)
Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass
![Page 62: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/62.jpg)
Example: Glove Input
▪ Buttons on fingertips ▪ Map touches to commands
![Page 63: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/63.jpg)
Example: Ring Input
▪ Touch strip, button, accelerometer ▪ Tap, swipe, flick actions
![Page 64: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/64.jpg)
How it works
Bracelet
Armband
Gloves
1,2,3,4
Values/output
![Page 65: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/65.jpg)
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
![Page 66: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/66.jpg)
EXAMPLE: CONCEPT TO DEMO
![Page 67: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/67.jpg)
NASA Hololens Concept Demo
• Vision: Work on Mars from your office • Story and sketches based on vision • Led to working Demo
![Page 68: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/68.jpg)
Chesley Bonestell (1940s)
![Page 69: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/69.jpg)
Hololens Story
![Page 70: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/70.jpg)
HoloLens Concept Sketches
![Page 71: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/71.jpg)
Final NASA HoloLens OnSight Demo
https://www.youtube.com/watch?v=o-GP3Kx6-CE
![Page 72: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/72.jpg)
EVALUATION
![Page 73: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/73.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 74: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/74.jpg)
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
![Page 75: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/75.jpg)
“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
![Page 76: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/76.jpg)
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 implementation evaluation redesign & reimplementation
design implementation
![Page 77: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/77.jpg)
Four evaluation paradigms
• ‘quick and dirty’ • usability testing (lab studies) • field studies • predictive evaluation
![Page 78: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/78.jpg)
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.
![Page 79: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/79.jpg)
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.
![Page 80: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/80.jpg)
Laboratory-based studies
Controlled, instrumented environment
![Page 81: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/81.jpg)
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.
![Page 82: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/82.jpg)
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
![Page 83: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/83.jpg)
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
![Page 84: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/84.jpg)
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
![Page 85: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/85.jpg)
CASE STUDY
![Page 86: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/86.jpg)
Interaction Design Process
Evaluate
(Re)Design
Identify needs/ establish
requirements
Build an interactive version
Final Product
![Page 87: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/87.jpg)
MOBILE AUGMENTED REALITY FOR SPATIAL
NAVIGATION Sharon Brosnan
0651869 Bachelor of Science in Digital Media Design
![Page 88: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/88.jpg)
BUNRATTY FOLK PARK Sharon Brosnan
0651869 Bachelor of Science in Digital Media Design
![Page 89: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/89.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 90: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/90.jpg)
![Page 91: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/91.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 92: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/92.jpg)
NAVIGATIONAL AID Smartphone Platform Most people carry mobile phones and are comfortable with
them Ideal Augmented Reality Technology • Global tracking tools • Wireless communication capabilities • Location based computing • Large display for interaction
![Page 93: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/93.jpg)
DESIGNING FOR THE VISITOR
![Page 94: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/94.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
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.
![Page 95: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/95.jpg)
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
![Page 96: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/96.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 97: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/97.jpg)
NEXT STEPS FROM RESEARCH • Define Visitors 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
![Page 98: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/98.jpg)
FUNCTIONALITY • View Options
• Camera View • Map View • List View
• Sub-Options • Places • Events • Restaurants
• Augmented Reality Features for navigation • Text Information • 3D Objects • 3D Tour Guide • 3D Placement of Buildings
![Page 99: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/99.jpg)
STORYBOARD
![Page 100: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/100.jpg)
![Page 101: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/101.jpg)
![Page 102: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/102.jpg)
ITERATIVE DESIGN PROCESS
![Page 103: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/103.jpg)
ITERATIVE DESIGN PROCESS Prototyping and User Testing • Low Fidelity Prototyping
• Sketches • Paper Prototyping • Post-It Prototyping • PowerPoint Prototyping
• High Fidelity Prototyping • Wikitude
![Page 104: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/104.jpg)
INITIAL SKETCHES Pros:• Goodforideagenera;on• Cheap• ConceptsseemfeasibleCons:• Notgreatfeedbackgained• Photoshopnotfastenoughformakingchanges
![Page 105: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/105.jpg)
POST IT PROTOTYPING
FirstDra5
CameraViewwith3D
SecondDra5 ThirdDra5
• Selec;onhighlightedinblue
• Homebu)onaddedforeasynaviga;ontomainmenu
![Page 106: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/106.jpg)
POWERPOINT PROTOTYPING Benefits• UsedforUserTes;ng• Interac;ve• Func;onali;esworkwhenfollowingthestoryofScenario1• Quick• EasyarrangementofslidesUserTes?ng• Par;cipantsfound• 15minutesessionsscreencaptured• ‘TalkAllowed’techniqueused
• Notestaken
• Post-Interview
![Page 107: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/107.jpg)
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
![Page 108: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/108.jpg)
WIKITUDE User Testing • Application well received
• Understandable
• Participants playful with the technology
![Page 109: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/109.jpg)
FINAL CONCEPT DESIGN
![Page 110: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/110.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 111: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/111.jpg)
VIDEO PROTOTYPE " Flexibletoolforcapturingtheuseofaninterface
" Elaboratesimula;onofhowthenaviga;onalaidwillwork
" Doesnotneedtoberealis;cineverydetail
" Givesagoodideaofhowthefinishedsystemwillwork
![Page 112: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/112.jpg)
Demo Video • 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..
![Page 113: COMP 4026 Lecture3 Prototyping and Evaluation](https://reader030.vdocuments.mx/reader030/viewer/2022021500/587081e31a28ab57368b692d/html5/thumbnails/113.jpg)
Demo Video
https://www.youtube.com/watch?v=8BqbEXUyDfo