1. Concepts and Prototypes
CS352

2. Announcement
Project – learning from your users due tomorrow Wed. 11:59pm

3. Where we are in PRICPE Predispositions: Did this in Project Proposal.
RI: Research was studying users. Hopefully led to Insights.
 CP: Concept and initial (very low-fi) Prototypes
Evaluate throughout, repeat iteratively!!

4. Concepts (Conceptual Model)
Pre-prototype
Explore how to address some aspect, e.g.,:
The interface metaphor
e.g., desktop, ...
The paradigm or device
e.g., WIMP, wearable, …
The interaction type
e.g., instructing, conversing, manipulating/demonstrating, or exploring)
interface metaphor
Part of the conceptual model
Provides a structure that is similar to aspects of an entity that is familiar to the user
Instruction type
User issues command to computer via typing in commands, using menus, pressing buttons
E.g., OS
Conversing
User has a dialog with the computer. User can speak via an interface or type in questions. System responds using text or speech.
e.g, help facilities, search engines
Manipulating
User interacts with objects in a virtual or physical space by manipulating them, e.g. Wii
Exploring
- User moves through a virtual environment or physical space

5. The best way to have a good idea is to have lots of ideas.
Concepts (cont’d)
This is a brainstorming-like tool
Consider several concepts.
The best way to have a good idea is to have lots of ideas.
-- Linus Pauling
Pauling was among the first scientists to work in the fields of quantum chemistry and of molecular biology. He is one of only four individuals to have won multiple Nobel Prizes.[3] He is one of only two people to have been awarded a Nobel Prize in two different fields (the Chemistry and Peace prizes), the other being Marie Curie (the Chemistry and Physics prizes), and the only person to have been awarded each of his prizes without sharing it with another recipient.[

6. Concepts (cont’d) There should be some bad ideas!
Don’t get too attached to a concept
i.e., avoid design fixation
Don’t spend too much time on any of them.

7. Concepts
Examples
Example #1: The thermostat ideas you presented last week.
Example #2: Fig 11.7
Examples from Mike Madison’s homelessness project. (He ultimately scrapped all of them.)

8. Inklings of a Design… Concept
What is common among all these sketches?
They are sketches – sketchy and not much details
presents high level ideas
easy to change
as means of communicating and evaluating ideas
Concept
Mike Madison, Jason De Runa, Jordan Fugate, Sakshi Gupta

9. In-Class Activity In your teams:
Sketch >=3 concepts for the on-line grocery.
Pick a population/device(s).
Be ready to argue for why your solution would work for that device/population
Aim for creative, interesting, useful solutions
We’ll look at a few with the doc scanner.

10. Is concept good?
Questions to try to decide (#2-6 are for metaphor concepts):
Does it solve the problem/aspect?
How much structure does it provide?
How much of it relevant to the problem?
Is it easy to represent?
Will your audience understand the metaphor?
How extensible is the metaphor?

11. Announcements
Project – learning from your users due tomorrow at 11:59pm
Reading:
Skim the BOXES only of section 6.3. (What is a box: heading says "Box n" or "Research and design issues")
Read 11.2, 11.3, 11.5, 11.6

12. Prototypes To flesh out a concept with enough detail
to communicate/understand user experience in detail.
in this class: for our use to understand user problems with our ideas.
can also be used to communicate with boss, news media, etc...

13. Prototype Low Fidelity High Fidelity Marty Siegel
Sketching -> wireframe -> sign off from customers -> nicer quality version -> coding
Prototype
Marty Siegel

14. Prototyping Early design Late design
Brainstorm different representations
Choose a representation
Rough out interface style
Low fidelity (paper) prototypes
Task centered walkthrough and redesign
Fine tune interface, screen design
Heuristic evaluation and redesign Usability testing and redesign
Medium fidelity prototypes
Limited field testing
Alpha/Beta tests
High fidelity prototypes
Working systems
Late design

15. Low fidelity prototypes
Lo-fi prototypes ideal for some purposes:
cheap
flexible
yet force enough attention to detail.

16. Higher fi prototypes Useful:
When: AFTER get through lower-fi ones first.
Why: Get at details of design (layout, icons, colors etc)
Example: Wizard of Oz: on the computer, but human fakes in the computer logic.
Front end finished with widgets polished up, but behavior/data is hard-coded (no back end).
For boss, at trade shows, etc.

17. Wizard of Oz A method of testing a system that does not exist
the voice editor, IBM 1984
The Wizard
What the user sees

18. Lo-fi prototypes (we will start here)
Just how lo-fi can one go
The lowest-fi: paper
At first: sketches.
Later can be more polished.
Static paper vs. “interactive” paper.
There are tool-supported variants of above concepts.
Details of each next...

19. Paper prototypes Static paper For communicating among team.
Usually done as a written use case or a sketched storyboard or sketched “state machine”.
Example: Fig 11.2 (very high-level).
Examples: Fig 11.4, 11.9 (more detailed).
Example: Fig (very detailed).
Another very detailed one (next slide).

20. Low-fidelity prototype

21. Paper prototypes (cont.)
Dynamic (interactive) paper
For evaluating with user at a very low-cost.

22. Dynamic/interactive paper prototypes (cont.)
Designing with office supplies
multiple layers of sticky notes and plastic overlays
different sized stickies represent icons, menus, windows etc.
interaction demonstrated by manipulating notes
new interfaces built on the fly
session videotaped for later analysis
usually end up with mess of paper and plastic!

23. Dynamic/interactive paper prototypes (cont.)
Can pre-make paper interface components
buttons
menu
alert box
combo box
tabs
list box
entries

24. Dynamic/interactive paper prototypes (cont.)
Examples:
Example #1: from ML-interaction experiment.
(Next slide).
Example #2: Fig 11.11
Example #4: Fig 11.15

25. Lo-fi prototype set-up with pens, printouts, table

26. Storyboarding a series of key frames
originally from film; used to get the idea of a scene
snapshots of the interface at particular points in the interaction
users can evaluate quickly the direction the interface is heading

27. Scan the stroller ->
Initial screen
Place the order ->
Change the color ->

28. Scan the shirt ->
Alternate path…
Delete that item->
Touch previous item ->

29. Tool-supported prototypes
Low-fi with tool support.
DENIM (Fig 11.18) and CogTool (fig next slide): tools for sketched storyboards/states.
Can transition these to nicer, more polished versions.

30. CogTool Example

31. Limiting prototype functionality
vertical prototypes
includes in-depth functionality for only a few selected features
common design ideas can be tested in depth
horizontal prototypes
the entire surface interface with no underlying functionality
a simulation; no real work can be performed
scenario
scripts of particular fixed uses of
the system; no deviation allowed
Vertical prototype
Scenario
Horizontal prototype
Full interface
Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

32. A few things to note about prototypes
throw-away
prototype only serves to elicit user reaction
creating prototype must be rapid, otherwise too expensive
incremental
product built as separate components (modules)
each component prototyped & tested, then added to the final system
evolutionary
prototype altered to incorporate design changes
eventually becomes the final product

33. CS 352 Prototyping In here:
We will begin with static paper (by Week 4),
then iterate from that start using CogTool, and
eventually have a more polished version, still in CogTool.

34. Activity Choose one concept you did for the on-line grocery.
Consider one specific user task:
your user wants to buy ingredients to make lemonade.
Sketch a static prototype storyboard/states of your UI:
that shows how your user will accomplish that task in your UI.

35. CogTool The prototyping tool for this class. Supports:
creating prototypes (various fidelities).
static and interactive
measuring user efficiency with your prototype
skilled users
given a particular task
how 1: GOMS under the hood
how 2: ACT/R full cognitive model under the hood
Web site: resources/examples/QA support
GOMS (Goals, Operators, Methods, and Selection rules) is a kind of specialized human information processor model for human computer interaction observation.
For all of the variants, the definitions of the major concepts are the same. Goals are what the user intends to accomplish. Operators are actions that are performed to get to the goal. Methods are sequences of operators that accomplish a goal. There can be more than one method available to accomplish a single goal, if this is the case then selection rules are used to describe when a user would select a certain method over the others. Selection rules are often ignored in typical GOMS analyses.

36. CogTool: How to prototype in it
1. Create a design storyboard
From scanned images, html files, or ...
2. Define a task the (skilled) user is supposed to do.
3. Demonstrate the steps to accomplish the task.
Example (see CogTool Tutorial):
ChoiceWay Guide to NYC: Museum lookup task.

37. Wizard of Oz A method of testing a system that does not exist
the voice editor, IBM 1984
The Wizard
What the user sees

38. Wizard of Oz Human ‘wizard’ simulates system response Good for:
interprets user input according to an algorithm
controls computer to simulate appropriate output
uses real or mock interface
wizard sometimes visible, sometimes hidden
“pay no attention to the man behind the curtain!”
Good for:
adding simulated and complex vertical functionality
testing futuristic ideas