prototyping 1: concepts and software...
TRANSCRIPT
![Page 1: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/1.jpg)
Prototyping 1:Concepts and Software Tools
Sketches, storyboards, mock-ups and scenariosSoftware tools
![Page 2: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/2.jpg)
Fall 2019 PSYCH / CS 6755 2
AgendaØThe purpose of prototypingØDimensions and terminologyØNon-computer methodsØComputer methods
![Page 3: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/3.jpg)
Why Prototype?
Fall 2019 PSYCH / CS 6755 3
![Page 4: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/4.jpg)
Fall 2019 PSYCH / CS 6755 4
Fast solutions for brighter future; rapid prototyping entrepreneurship
![Page 5: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/5.jpg)
Why Prototype?ØRESEARCH TOOLØBetter designs
v More creativeØFind failures quicklyØFaster feedback from usersØFeasibility for high-fi versions
Fall 2019 PSYCH / CS 6755 5
![Page 6: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/6.jpg)
Fall 2019 PSYCH / CS 6755 6
Design ArtifactsØHow do we express early design ideas?
v No software coding at this stageØKey notions
v Make it fast!!!v Allow lots of flexibility for radically different
designsv Make it cheapv Promote valuable feedback
*** Facilitate iterative design and evaluation ***
![Page 7: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/7.jpg)
Fall 2019 PSYCH / CS 6755 7
DilemmaØYou can’t evaluate
design until it’s built
ØSimulate the design, in low-cost manner
![Page 8: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/8.jpg)
Fall 2019 PSYCH / CS 6755 8
Prototyping DimensionsØRepresentationØScopeØExecutabilityØMaturation
![Page 9: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/9.jpg)
Fall 2019 PSYCH / CS 6755 9
Prototyping DimensionsØ1. Representation
v How is the design depicted or represented?v Can be just textual description or can be
visuals and diagrams
Ø2. Scopev Is it just the interface (mock-up) or does it
include some computational component?
![Page 10: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/10.jpg)
Fall 2019 PSYCH / CS 6755 10
Dimensions (contd)Ø3. Executability
v Can the prototype be �run�?
v If coding, there will be periods when it can’t
Ø4. Maturationv What are the stages of the product as it
comes along?
Revolutionary - Throw out old oneEvolutionary - Keep changing previous design
![Page 11: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/11.jpg)
Fall 2019 PSYCH / CS 6755 11
Terminology (1)ØEarly prototyping
v Used to evaluate function and interfacev Typically non-computer
ØLate prototypingv Used to evaluate performancev Usually computer-based
![Page 12: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/12.jpg)
Fall 2019 PSYCH / CS 6755 12
Terminology (2)ØLow-fidelity prototype
ØHigh-fidelity prototype
![Page 13: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/13.jpg)
Fall 2019 PSYCH / CS 6755 13
Terminology (3)ØHorizontal prototype
ØVertical prototype
Very broad, does or shows much of the interface,but does this in a shallow manner
Fewer features or aspects of the interface simulated,but done in great detail
![Page 14: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/14.jpg)
Fall 2019 PSYCH / CS 6755 14
Flow ChartØFunctional specification of how the
system operates, in a step-by-step flowv IF-THENs, branches, loopsv No visual layout/interface specifiedv More detailed, useful for quick evaluation,
but requires more commitment of resources to produce
v Also more advanced (sometimes means more rigid) than simpler mockups
![Page 15: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/15.jpg)
Fall 2019 PSYCH / CS 6755 15
Flow Chart Example
![Page 16: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/16.jpg)
Or this
Fall 2019 PSYCH / CS 6755 16
![Page 17: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/17.jpg)
Fall 2019 PSYCH / CS 6755 17
Sketches, Mock-upsØPaper-based �drawings� of interfaces
v Good for brainstormingv Focuses people on high-level design notionsv Not so good for illustrating flow and the
detailsv Quick and cheap -> helpful feedback
![Page 18: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/18.jpg)
Fall 2019 PSYCH / CS 6755 18
Mockups: Simple sketches…
![Page 19: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/19.jpg)
Fall 2019 PSYCH / CS 6755 19
Mockups: Complex details…
![Page 20: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/20.jpg)
Fall 2019 PSYCH / CS 6755 20
Mockup: Controls…
![Page 21: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/21.jpg)
Fall 2019 PSYCH / CS 6755 21
Mockup: Displays…
![Page 22: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/22.jpg)
Fall 2019 PSYCH / CS 6755 22
Mockup: Controls + Displays
![Page 23: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/23.jpg)
Physical Mockup
Fall 2019 PSYCH / CS 6755 23
![Page 24: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/24.jpg)
Nintendo Does ItØThe Wii U
Fall 2019 PSYCH / CS 6755 24
![Page 25: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/25.jpg)
Fall 2019 PSYCH / CS 6755 25
Wireframe Screen
![Page 26: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/26.jpg)
Pros/ConsØ Pros:
v Give grounding to feedback
v Helps users think about it instead of conceptual only
v Good for brainstorming iteration
ØCons:v Users could get
stuck on the colors/wording
v Harder to test new interaction styles
Fall 2019 PSYCH / CS 6755 26
![Page 27: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/27.jpg)
Fall 2019 PSYCH / CS 6755 34
StoryboardingØPencil and paper simulation or walkthrough
of system look and functionalityv Use sequence of diagrams/drawingsv Show key snap shotsv Quick & easy
![Page 28: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/28.jpg)
Storyboard
Fall 2019 PSYCH / CS 6755 35
![Page 29: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/29.jpg)
Fall 2019 PSYCH / CS 6755 36
ScenariosØHypothetical or fictional situations of use
v Typically involving some person, event, situation and environment
v Provide context of operationv Often in narrative form, but can also be
sketches or even videos
![Page 30: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/30.jpg)
Fall 2019 PSYCH / CS 6755 37
Scenario Utility
ØEngaging and interestingØAllows designer to look at problem from
another person’s point of viewØFacilitates feedback and opinionsØCan be very futuristic and creativeØCan involve social and interpersonal
aspects of the task
![Page 31: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/31.jpg)
Fall 2019 PSYCH / CS 6755 38
![Page 32: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/32.jpg)
Fall 2019 PSYCH / CS 6755 39
PersonasØPrevent designers from designing for
themselves or for �average� customersØMaintain focus on customer needsØEvolve as survey and focus groups
continueØNOT a replacement for user testing!
![Page 33: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/33.jpg)
Fall 2019 PSYCH / CS 6755 40
About Face: The Essentials of Interaction Design
![Page 34: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/34.jpg)
So…this result?
Fall 2019 PSYCH / CS 6755 41
![Page 35: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/35.jpg)
Paper Prototype
Fall 2019 PSYCH / CS 6755 42
![Page 36: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/36.jpg)
Fall 2019 PSYCH / CS 6755 43
Paper Prototype (game design)
![Page 37: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/37.jpg)
Fall 2019 PSYCH / CS 6755 44
Paper Prototype (game design)
![Page 38: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/38.jpg)
Fall 2019 PSYCH / CS 6755 45
Computer-Supported MethodsØCan support more rapid changes to
simple mockupsØCan support more functionality for
prototypesØCan lead to �stale� design, can focus user
(or customer) too much on the details of the interface, too early in the design process
![Page 39: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/39.jpg)
Fall 2019 PSYCH / CS 6755 47
Mockup – �Four Angry Men�Ø AR Experience �Four
Angry Men�Ø 6 months of content
development…three times
Ø 1 year of software development before testing was possible
Ø Motivated creation of Designers� Augmented Reality Toolkit (DART)
![Page 40: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/40.jpg)
Fall 2019 PSYCH / CS 6755 48
Prototyping ToolsØ1.Draw/Paint programs
v Draw each screen, good for look
Thin, horizontal prototype PhotoShop, PowerPoint,...
IP Address
CancelOK
![Page 41: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/41.jpg)
Fall 2019 PSYCH / CS 6755 49Photoshop
![Page 42: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/42.jpg)
Fall 2019 PSYCH / CS 6755 50Illustrator
![Page 43: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/43.jpg)
Fall 2019 PSYCH / CS 6755 51
Prototyping ToolsØ2. Scripted simulations/slide shows
v Put storyboard-like views down with (animated) transitions between them
v Can give user very specific script to followv Often called chauffeured prototyping
v Examples: PowerPoint, HTML, Javascript
![Page 44: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/44.jpg)
Fall 2019 PSYCH / CS 6755 52
Scripting Example
Ctrl-p
e.g., HTML, Javascript
![Page 45: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/45.jpg)
Reflect on theseØDo you see any issues with these?
v Inaccessible
Fall 2019 PSYCH / CS 6755 53
![Page 46: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/46.jpg)
Fall 2019 PSYCH / CS 6755 54
Prototyping ToolsØ3. Interface Builders
v Tools for laying out windows, controls, etc. of interface• Have build and test modes that are good for
exhibiting look and feel• Generate code to which back-end functionality can
be added through programming
v Examples: Visual Studio (or Visual C++), .NET, Processing, Python
![Page 47: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/47.jpg)
Fall 2019 PSYCH / CS 6755 55
e.g., Visual Basic
UI Controls
Design area
Controlproperties
![Page 48: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/48.jpg)
Fall 2019 PSYCH / CS 6755 56
True Programming
ØLess useful for rapid prototyping, but can save re-coding time down the road
ØMore constrained in look and feelØConstrained to traditional interaction
styles and methodsvHard to think outside the box…
![Page 49: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/49.jpg)
Fall 2019 PSYCH / CS 6755 57
e.g., Java
![Page 50: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/50.jpg)
Fall 2019 PSYCH / CS 6755 59
Other Prototyping ToolsØDenimØSketch-
basedØWeb
design
http://dub.washington.edu:2007/denim/
![Page 51: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/51.jpg)
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 60
![Page 52: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/52.jpg)
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 61
![Page 53: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/53.jpg)
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 62
![Page 54: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/54.jpg)
Balsamiq
Fall 2019 PSYCH / CS 6755 63
http://www.balsamiq.com
![Page 55: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/55.jpg)
Pencil
Ø http://pencil.evolus.vn/en-US/Home.aspxØ Similar to BalsamiqØ Open-sourceØ Works with Firefox
or as an appv OSXv Windowsv GNU/Linux
PSYCH / CS 6755 64Fall 2019
![Page 56: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/56.jpg)
Microsoft SketchFlowØ http://www.microsoft.com/Expression/products/SketchFlow_Overview.aspx
65PSYCH / CS 6755Fall 2019
quick demo
![Page 57: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/57.jpg)
Centrafuse
Fall 2019 PSYCH / CS 6755 66
![Page 58: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/58.jpg)
67
Audio Interface (Telephony) Builder Tools
Ø SUEDE - flow-chart speech interface dialoguev Landay et al.
Ø For wizard-of-Oz studies
Ø Could be used to drive real system
Ø http://dub.washington.edu:2007/projects/suede/
PSYCH / CS 6755Fall 2019
![Page 59: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/59.jpg)
Fall 2019 PSYCH / CS 6755 68
Prototyping �Enhancements�ØWizard of Oz - Person simulates and
controls system from �behind the scenes�v Use mock interface and
interact with usersv Good for simulating
system that would be difficult to build
Can be either computer-based or not
![Page 60: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/60.jpg)
Fall 2019 PSYCH / CS 6755 69
Wizard of OzØMethod:
vBehavior should be algorithmicvGood for voice recognition systems and
non-traditional interfacesØAdvantages:
vAllows designer to immerse oneself in situation
vSee how people respond, how to specify tasks
![Page 61: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/61.jpg)
Fall 2019 PSYCH / CS 6755 70
Starner’s CopyCat – Wizard of Oz
![Page 62: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/62.jpg)
AR Façade – Wizard of Oz
Fall 2019 PSYCH / CS 6755 71
http://www.interactivestory.net/
![Page 63: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/63.jpg)
72
Review of Prototyping Concepts
Low-fidelity Medium-fidelity High-fidelity
Sketches, mock-ups Slide shows
Simulations
System prototypes
Scenarios
Storyboards Wizard of Oz
Horizontal
Vertical
VerticalPSYCH / CS 6755Fall 2019
![Page 64: Prototyping 1: Concepts and Software Toolssonify.psych.gatech.edu/~walkerb/classes/ms-hci/pdf/61-prototyping… · Prototyping Tools Ø2. Scripted simulations/slide shows v Put storyboard-like](https://reader030.vdocuments.site/reader030/viewer/2022041007/5ead521138d9594b1210b5ae/html5/thumbnails/64.jpg)
Fall 2019 PSYCH / CS 6755 73
Prototyping SummaryØResearch research researchØTradeoffs of simplicity, manageabilityØVeracityØInteractivenessØUp-front costs vs. down the road costs
ØKey: Don’t let the prototyping environment drive or constrain your creativity!!