Experimental Design & Evaluation 9. Prototyping - - PowerPoint PPT Presentation

Experimental Design & Evaluation

• 9. Prototyping

SunyoungKim,PhD

Last week

• Consolidating findings
• Solution proposal

Recap: Solutions come from a consolidation of your data analysis!

1. Consolidate what you found across different users and interviews allows the team to see patterns 2. Identify breakdowns 3. Identify expressed needs 4. Come up with a list of potential solution ideas

Recap: Storyboards

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

proposed system using a persona and a scenario

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

Recap: Scenarios

• A concise descript of a persona
• A narrative description of a task : the current use of a system
• An informal narrative story, simple, “natural”, personal
• Scenario should be simple and focused
• Use personas in scenarios – how does it serve their needs?

Recap: Storyboard, Persona and Scenario

• Storyboards: How action and narrative is framed around interaction
• Personas
• Specific archetype of target user
• Build based on contextual inquiries/interviews
• Scenarios: Use of narrative, persona, and context

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

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 other less-obvious features within it

Prototyping

What is Prototyping?

• Prototypes are experimental and incomplete designs which are

cheaply and fast developed

• An integral part of iterative user-centered design
• It enables designers to try out their ideas with users and to gather

feedback

Why should we prototype?

• Evaluation and feedback are central to interaction design
• Users can see, hold, interact with a prototype more easily than a

document or a drawing

• You can test out ideas for yourself
• It encourages reflection: important aspect of design
• Prototypes answer questions, and support designers in choosing

between alternatives

What can prototypes tell us?

• Interest: would people want this?
• Use: does this solve a real problem?
• Usability: is this easy, sensible, and effective?
• Implementation: can this be done?

Sketches vs. Prototypes

• Sketches
• Early ideation

stages of design

• Exploring ideas
• Prototypes
• Capturing/detailing

the actual design

• Testing ideas

Prototype Fidelity

Prototyping fidelity

Low fidelity High fidelity Medium fidelity

Wireframing Interactive prototyping Paper sketches

Wireframe (Mid-fi prototype)

• Using computer-based tools (e.g., balsamiq, wireframe.cc)
• 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 (Mid-fi prototype)

High-fidelity Prototypes

• Prototype looks more like the final system than a low-fidelity version
• Common hi-fi prototyping tools:
• Photoshop/Illustrator, Axure, PowerPoint

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 vs. Hi-fi prototypes

Lo – Fi Lo – Fi Hi – Fi Hi – Fi Advantages

• Fast
• Cheap
• Easy – kindergarten

skills!

• Can simulate actual

product

• Better sense of finished

product

• Can judge aesthetic appeal
• More realistic experience
• Can evaluate experience

Disadvantages

• Slow response time
• Can’t get feedback

about aesthetics

• User may question

design quality

• Users may focus on

unnecessary detail

• Takes a lot of time to make
• Users may lose track of big

picture

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

Group Project

Group Project: Wireframe and Flowchart

Among the sketches you created in the last assignment, you either pick some, combine some, or update some. And then, come up with a final set of wireframe with a flowchart. Wireframe

• Use a software of your choice.
• Recommended: Wireframe.cc https://wireframe.cc/
• Recommended: Balsamiq https://balsamiq.com/products/
• Recommended: Indigo studio https://www.infragistics.com/products/indigo-studio
• Check for more:

http://mashable.com/2010/07/15/wireframing-tools/#oqegDW3EXZqq

• Do not apply colors
• Don't focus on the details, look&feel and visual details, but focus on the

content structure, workflow, and systems usability.

Flowchart

• Use a software of your choice
• Recommended: Powerpoint
• Recommended: https://www.draw.io/

Turn in: a PDF with

• Your project proposal on top
• A link to your Website with wireframe and a flowchart
• Wireframe of your entire system
• Flowchart
• A link to a working hi-fi prototype (optional)
• State which team members contributed to which part
• Due by midnight 11/13

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

Group Project: Wireframe and Flowchart

Create a hi-fi prototype

• Recommended to use Indigo Studio from Infragistics as our hi-fi prototyping

tool.

• Download the Free 30 Day Trial License for Infragistic’s Indigo Studio to your

computer (http://indigo.infragistics.com/).

• You can get a free academic license to use it beyond the 30 day trial using

your Rutgers.edu email address to download and install you’re a Free 1-Year Academic License for Infragistics Indigo Studio here (http:// www.infragistics.com/products/indigo-studio/indigo-academic-license)

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

Group Project: Hi-Fi prototype (optional)

Rubric

• Wireframe (6pt)
• If the wireframe does not miss any screens that are important part of the

system (2pt)

• If each screen in the wireframe clearly demonstrates what it's about (2pt)
• If each screen has any usability problems (2pt)
• Workflow (4pt)
• If the workflow does not miss any steps that are important an part of the

system (2pt)

• If the workflow clearly demonstrates how a user would navigate through a

system (1pt)

• If the workflow does not have any usability problem (1pt)

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

Group Project: Hi-Fi prototype (optional)

Next class

• Reading: Experimental Research in HCI (discussion required)