SunyoungKim,PhD Last class 1. Brainstorming 2. Sketch 3. Scenario 4. - - PowerPoint PPT Presentation

Human-Computer Interaction

• 12. Design – Part 2. Design: Prototyping

SunyoungKim,PhD

Last class

• 1. Brainstorming
• 2. Sketch
• 3. Scenario
• 4. Storyboard

Recap: Brainstorming: Sharpen the focus

• Posing the right problem is critical

– neither too narrow, nor too fuzzy

• Not “bicycle cup-holders” but

“helping cyclists to drink coffee without accidents”

Recap: Brainstorming: Number your ideas

• Obvious but very useful
• Helps keep track of them during brainstorming (100 or more ideas can

be in play)

• Allows ideas to take on an identity of their own

Recap: Brainstorming

Recap: Why sketching?

Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try out ideas, usually vague and uncertain ones.

• Suwa & Tverksey

Sketching practices

• Sketch frequently
• No bad ideas or sketches (don’t erase)
• Always annotate (for your future self &
• thers)
• Explore broad space (getting right design)
• Refine and iterate (getting design right)
• Record ideas you see elsewhere
• Collect existing materials (printouts,

magazines)

Recap: Scenarios

• Motivation – what prompted the persona to embark on the scenario?
• Context – where is the person while the scenario is taking place? Does

it change? Who else and where else is involved?

• Distractions – What kinds of distractions or interruptions typically occur

and how does the persona deal with them?

• Goal – What is the persona’s goal? Information seeking? An artifact? An

emotion?

Recap: Storyboards

• The point of storyboards is to convey the experience of using the

proposed system

• Include people experiencing the design and their reactions to it
• Visual elements: Detail, text, people, frame, portrayal of time

Prototype

Sketch vs. Prototype

Prototype

A prototype is not the final product! Do not expect it to look like the final product.

• A simulation of the final product
• Using visuals to describe how a system should behave
• To test whether or not the flow of the product is smooth

and consistent

• To test the feasibility and usability of our designs before we

actually begin writing code

Prototype

• A representation of an interactive system
• Support creativity
• Encourage communication
• Permit early evaluation
• Users often can’t articulate clearly what they need/want;

If you give them something and they get to use/test it, they know what they don’t want

• A designer needs a bridge between talking to users in

the abstract about what they might want and building a full-blown system: Prototype is that bridge - “A picture speaks a thousand words”

Prototyping process

Coding Wireframing Interactive prototyping Paper sketches

Prototyping process

User testing User testing User testing Paper sketches Wireframing Interactive prototyping Coding User testing

Prototyping process

Low fidelity High fidelity Medium fidelity

Wireframing Interactive prototyping Paper sketches

Low fidelity

Rapid prototyping – Paper prototype

• A starting point: easy to create and very easy to deliver
• Allow you to check that concepts and requirements have been fully-

understood without putting in too much effort

• Ideal during brainstorming (early exploration of design ideas)
• Static and usually have low visual and content fidelity
• A quick way to create rough mock-ups of design approaches : Allows

making changes easily and quickly à This forces users to focus on how they will use the system instead of what it will look like, and it makes designers more open to changes based on user feedback

Paper prototype examples

Storyboard (scenario in prototype)

Storyboard (scenario in prototype)

Interactivity in paper prototypes

Paper prototype

Use printable sketching templates

Medium fidelity

• Wireframe
• Using computer-based tools (e.g., balsamiq, visio)
• Take more time and effort but look more formal and refined:

more detailed than sketches

• Interactivity can be simulated

à You don’t need to make these things pretty but you do need to include enough detail to see how the system performs à Force users to view it as a draft or work in progress, rather than a polished and finished product à Prototype a high visual fidelity (e.g., done in Photoshop) makes the user to focus on the visual design and look and feel, including color, fonts, layout, logo and images

High fidelity

• The most realistic but time-intensive
• The only way to create high-fidelity prototypes used to

actually code using a programming language; these days, you can create high-fidelity prototypes that simulate the Functionality of the final product without coding (e.g., Axure, iRise, omni graffle)

• Appropriate when high visual and functional fidelity is

required

• An excellent reference for developers
• Tools: https://www.cooper.com/prototyping-tools

High fidelity prototype examples

Lo-fi to hi-fi prototype

Lo-fi to hi-fi prototype

Flowchart

Flowchart

• Specific sequence of actions
• Visualize the entire process of how a user walk through

the system

• Visualize what is going on and thereby help understand

a process, and perhaps also find flaws, bottlenecks, and

• ther less-obvious features within it

Flow chart

User testing with prototypes

Wizard of Oz

A rapid-prototyping method for systems costly to build or requiring new

• technology. A human “Wizard” simulates the system’s intelligence and

interacts with the user through a real or mock computer interface.

Wizard of Oz

• Makes it possible to test functionality that does not

yet exist

• Can simulate different system behaviors and test

result (e.g., speed of ticket from input to output)

• Can simulate errors and test result
• Common in areas such as intelligent agents,

human-robotic interaction

Wizard of Oz

Individual project

Individual project I2-Part 3: Data analysis

Conduct data analysis 1) Survey data analysis: Graphical representation with descriptive statistics (Slide09: P42, 44) 2) Interview Data analysis: Affinity diagram (Slide09: P29-33, 38-39)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Individual project I2-Part 3: Data analysis

Format

• Submission includes:
• 1. Survey analysis
• Graphs with descriptive statistics
• A paragraph describing what you learned: themes, categories, things

unexpected or surprised you

• 2. Affinity diagram (15+ sticky notes, no software) à Turn into a digital version
• Two photos: A photo of raw data (Slide9: p38) and a photo of synthesis

(Slide 9: p39)

• A digital version of a finished diagram: should have a problem statement on

top (Slide9: P33)

• A paragraph describing what you learned: themes, categories, things

unexpected or surprised you

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Individual project I2-Part 3: Data analysis

Format

• Add a description of your project proposal on top
• Link to your project webpage on top
• Should be accessible
• Should have full contents (no pdf file):

§ Intro (yourself) § Project Proposal § Review of existing systems § Data collection plan: Interview/survey § Data analysis: Affinity diagram/Survey analysis

• A PDF file, 12 point scale in Times New Roman, 1.5 line spacing

Due by Midnight 10/23

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Individual project I2-Part 3: Data analysis

Rubric

• Survey (4pt)
• If the survey analysis is presented using a proper visualization

format with proper statistical measures (2pt)

• If the description clearly explains what you learned (2pt)
• Affinity diagram (6pt)
• If the final diagram contains significant themes through a structure

(2pt)

• If the submission includes the photos to show the extract-synthesis

process and a final digital version (2pt)

• If the description clearly explains what you learned (2pt)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Individual project I2-Part 3: Data analysis

Rubric

• You will lose 20% if your website doesn’t work or misses the contents
• You will lose 50% if your submission does not follow the format
• You will lose 20% if it’s a late submission (Not accepting a late

submission submission after that): Don’t think of it as an extended deadline but think of it as a grace period to fix any major mistakes you make for resubmission!!!

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

By next class

Quiz #2: Slide08-12 Assignment

• Group project: P3. Data analysis

Recap

Recap: Prototype

A prototype is not the final product! Do not expect it to look like the final product.

• A simulation of the final product
• Using visuals to describe how a system should behave
• To test whether or not the flow of the product is smooth

and consistent

• To test the feasibility and usability of our designs before we

actually begin writing code

Recap: Prototyping process

User testing User testing User testing Paper sketches Wireframing Interactive prototyping Coding User testing

Recap: Low fidelity

Rapid prototyping – Paper prototype

• A starting point: easy to create and very easy to deliver
• Allow you to check that concepts and requirements have been fully-

understood without putting in too much effort

• Ideal during brainstorming (early exploration of design ideas)
• Static and usually have low visual and content fidelity
• A quick way to create rough mock-ups of design approaches : Allows

making changes easily and quickly à This forces users to focus on how they will use the system instead of what it will look like, and it makes designers more open to changes based on user feedback

Recap: Medium fidelity

• Wireframe
• Using computer-based tools (e.g., balsamiq, visio)
• Take more time and effort but look more formal and refined:

more detailed than sketches

• Interactivity can be simulated

à You don’t need to make these things pretty but you do need to include enough detail to see how the system performs à Force users to view it as a draft or work in progress, rather than a polished and finished product à Prototype a high visual fidelity (e.g., done in Photoshop) makes the user to focus on the visual design and look and feel, including color, fonts, layout, logo and images

Recap: High fidelity

• The most realistic but time-intensive
• Appropriate when high visual and functional fidelity is

required

• An excellent reference for developers

Recap: Flowchart

• Specific sequence of actions
• Visualize the entire process of how a user walk through

the system

• Visualize what is going on and thereby help understand

a process, and perhaps also find flaws, bottlenecks, and

• ther less-obvious features within it

Recap: Wizard of Oz

A rapid-prototyping method for systems costly to build or requiring new technology. A human “Wizard” simulates the system’s intelligence and interacts with the user through a real or mock computer interface.

• Makes it possible to test functionality that does not

yet exist

• Can simulate different system behaviors and test

result (e.g., speed of ticket from input to output)

• Can simulate errors and test result
• Common in areas such as intelligent agents,

human-robotic interaction