Human-Computer Interaction 10. Prototyping Last class 1. - - PowerPoint PPT Presentation

Human-Computer Interaction

• 10. Prototyping

Last class

• 1. Brainstorming
• 2. Persona
• 3. Storyboard

Recap: 4 brainstorming rules

1. Sharpen the Focus 2. Number your Ideas 3. Build and Jump 4. The Space Remembers

Aim for quantity! Hope for quality

Recap: Brainstorming

Recap: Persona

A precise description of a hypothetical user and what they suffer from and wish to do when using a system

• Based on demographics and on patterns of behavior
• Not real; an imaginary example of the real users
• Make it as specific as possible: give a name, personality, etc.
• A concrete person in the designer’s mind
• A shared basis for communication
• At least one primary persona – the main focus of the design

Essential question in developing a persona

• What are the classes of users?
• What do they do? And Why?

Recap: Storyboard

• A linear sequence of illustrations, arrayed together to visualize a story.
• A tool that helps you visually predict and explore a user’s experience

with a product

• Illustrate what’s going on in the real world and how the product can

make a better life

• Storyboards shape the user journey and the character (persona).
• Stories are an effective and inexpensive way to capture, relate, and

explore experiences in the design process

Recap: Storyboard

• The primary purpose of storyboarding is COMMUNICATION!
• A UI designer’s main skill isn’t in Photoshop or Illustrator but the ability

to formulate and describe a scenario.

Today’s agenda

• 1. Prototype
• 2. Flowchart
• 3. Wizard of Oz

Prototype

Prototyping process

Coding Wireframing Interactive prototyping Paper sketch Low High Fidelity

Sketch

Sketching is fundamental to ideation and design. Traditional disciplines such as industrial design, graphic design and architecture make extensive use of sketches to develop, explore, communicate and evaluate ideas.

• Tohidi, Buxton, Baecker, Sellen

Why sketching?

Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try

• ut ideas, usually vague and uncertain ones.
• Suwa & Tverksey

Sketching will help you:

• Think more openly & creatively about your ideas
• Create abundant ideas w/out fixating on quality
• Invent and explore concepts visually
• Iterate quickly
• Choose ideas worth pursuing
• Archive ideas for later reflection

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)

Sketching techniques

Different pen thickness Use of shadow Minimalist design: no unnecessary details 3D perspective

Sketching is not about drawing! Sketching is about design!

“Sketching is a fundamental tool that helps designers express, develop, and communicate ideas.”

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

Purposes of prototyping

• 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 Low High Fidelity

Prototyping process

User testing User testing User testing Paper sketches Wireframing Interactive prototyping Coding User testing Low High Fidelity

Prototyping process

Low fidelity High fidelity Medium fidelity

Wireframing Interactive prototyping Paper sketches

Low-Fidelity Prototype

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

Lo-Fi Prototype: Reading Responses

Why lo-fi prototype, for me it is to makes the designer fail faster and get as many problems as the designer can gather. The more problem we find in the lo-fi prototype the less likely we are going to start over at the stage of hi-fi prototype because the later the problems find the more expensive these problems cost and these problems will be less likely to correct. - Chai I'm very quickly drawn to hi-fi prototypes before I even realize it. I get into the smaller details, start designing on my computer before I sketch it out, spend a lot of time on interactions that don't matter for the current stage of user testing and as marc rightly stated, it gets harder for me to accept new opinions considering the amount of time I've already invested in the

• mockups. - Vishal

Presently we have things such as prototyping programs which can assemble what a basic application would look like without having to code. Coding is much more easier nowadays as well because there are free applications you can download onto your computer instead of having to buy a software suite or a specialized computer. - John

Lo-Fi Prototype

Lo-Fi Prototype

Lo-Fi Prototype

Lo-Fi Prototype

Lo-Fi Prototype

Use printable sketching templates

Lo-Fi Prototype

Use printable sketching templates

Lo-Fi Prototype

Use printable sketching templates

Storyboard (scenario in prototype)

Interactivity in Paper Prototypes

Mid-Fidelity Prototype: 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

Wireframe

Wireframe

Wireframe

Wireframe

Wireframe

Wireframe

Hi-Fidelity Prototype

• 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

Hi-Fi Prototype

Hi-Fi Prototype

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

Group project

• P4. Data Analysis

In this assignment, you will analyze the collected data.

• 1. Survey data analysis

1) Report important findings using relevant visualization formats 2) Report demographic data using descriptive statistics 3) Write a paragraph to describe what you learned: themes, categories, things that are unexpected or surprised you 2. Interview data analysis: Crate an affinity diagram (30+ sticky notes) --> Turn into a digital version. 1) Record your diagramming process (photos): Report the final output (synthesis) as well as the process (raw data) 2) Report a digital version of a final affinity diagram 3) Write a paragraph describing what you learned: themes, categories, things that are unexpected or surprised you Due by midnight 2/27 (Tuesday)

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

• P4. Data Analysis

Submission format:

• A PDF file, 12 point scale in Times New Roman, 1.5 line spacing
• Add a team name, a description of your project, a link to your project website on

top (Your website should be accessible with full contents)

• Body should include:
• 1. Survey analysis
• 2. Affinity diagram with a process
• At the end: Indicate who contributed to the original writing of each section and

who helped improve and/or review at the end

• Exemplar Affinity diagram:

http://www.sunyoungkim.org/class/hci_sp18/examples/P4_examplar.pdf

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

• P4. Data Analysis

Rubric

• Survey (2pt)
• If the survey analysis is presented using a proper visualization format with

proper statistical measures, both demographic info and other findings (1pt)

• If the description clearly explains what you learned (1pt)
• Affinity diagram (5pt)
• If the final diagram contains significant themes (2pt)
• If the final diagram has a structure/relation of top and sub themes (1pt)
• If the submission includes the photos to show the extract-synthesis process

and a final digital version (1pt)

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

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

• P4. Data Analysis

Rubric

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

submission after 24 hours from the due)

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

Next Class

• Quiz #2
• Be prepared to work on your P4 in class