Prototyping 1: Concepts and Software Tools Sketches, storyboards, mock- ups and scenarios Software tools
Prototyping 1:Concepts and Software Tools
Sketches, storyboards, mock-ups and scenariosSoftware tools
Fall 2019 PSYCH / CS 6755 2
AgendaØThe purpose of prototypingØDimensions and terminologyØNon-computer methodsØComputer methods
Why Prototype?
Fall 2019 PSYCH / CS 6755 3
Fall 2019 PSYCH / CS 6755 4
Fast solutions for brighter future; rapid prototyping entrepreneurship
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
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 ***
Fall 2019 PSYCH / CS 6755 7
DilemmaØYou can’t evaluate
design until it’s built
ØSimulate the design, in low-cost manner
Fall 2019 PSYCH / CS 6755 8
Prototyping DimensionsØRepresentationØScopeØExecutabilityØMaturation
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?
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
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
Fall 2019 PSYCH / CS 6755 12
Terminology (2)ØLow-fidelity prototype
ØHigh-fidelity prototype
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
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
Fall 2019 PSYCH / CS 6755 15
Flow Chart Example
Or this
Fall 2019 PSYCH / CS 6755 16
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
Fall 2019 PSYCH / CS 6755 18
Mockups: Simple sketches…
Fall 2019 PSYCH / CS 6755 19
Mockups: Complex details…
Fall 2019 PSYCH / CS 6755 20
Mockup: Controls…
Fall 2019 PSYCH / CS 6755 21
Mockup: Displays…
Fall 2019 PSYCH / CS 6755 22
Mockup: Controls + Displays
Physical Mockup
Fall 2019 PSYCH / CS 6755 23
Nintendo Does ItØThe Wii U
Fall 2019 PSYCH / CS 6755 24
Fall 2019 PSYCH / CS 6755 25
Wireframe Screen
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
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
Storyboard
Fall 2019 PSYCH / CS 6755 35
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
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
Fall 2019 PSYCH / CS 6755 38
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!
Fall 2019 PSYCH / CS 6755 40
About Face: The Essentials of Interaction Design
So…this result?
Fall 2019 PSYCH / CS 6755 41
Paper Prototype
Fall 2019 PSYCH / CS 6755 42
Fall 2019 PSYCH / CS 6755 43
Paper Prototype (game design)
Fall 2019 PSYCH / CS 6755 44
Paper Prototype (game design)
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
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)
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
Fall 2019 PSYCH / CS 6755 49Photoshop
Fall 2019 PSYCH / CS 6755 50Illustrator
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
Fall 2019 PSYCH / CS 6755 52
Scripting Example
Ctrl-p
e.g., HTML, Javascript
Reflect on theseØDo you see any issues with these?
v Inaccessible
Fall 2019 PSYCH / CS 6755 53
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
Fall 2019 PSYCH / CS 6755 55
e.g., Visual Basic
UI Controls
Design area
Controlproperties
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…
Fall 2019 PSYCH / CS 6755 57
e.g., Java
Fall 2019 PSYCH / CS 6755 59
Other Prototyping ToolsØDenimØSketch-
basedØWeb
design
http://dub.washington.edu:2007/denim/
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 60
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 61
Axurewww.axure.com
Fall 2019 PSYCH / CS 6755 62
Balsamiq
Fall 2019 PSYCH / CS 6755 63
http://www.balsamiq.com
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
Microsoft SketchFlowØ http://www.microsoft.com/Expression/products/SketchFlow_Overview.aspx
65PSYCH / CS 6755Fall 2019
quick demo
Centrafuse
Fall 2019 PSYCH / CS 6755 66
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
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
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
Fall 2019 PSYCH / CS 6755 70
Starner’s CopyCat – Wizard of Oz
AR Façade – Wizard of Oz
Fall 2019 PSYCH / CS 6755 71
http://www.interactivestory.net/
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
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!!