prototyping 1: concepts and software...

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!!