Concepts and Prototypes

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)

5. 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 http://en.wikipedia.org/wiki/File:Pauling.jpg

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 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. Low Fidelity High Fidelity Prototype Marty Siegel

14. 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 redesignUsability testing and redesign Medium fidelity prototypes High fidelity prototypes Working systems Limited field testing Alpha/Beta tests Prototyping Early design 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. The Wizard Wizard of Oz • A method of testing a system that does not exist • the voice editor, IBM 1984 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. 11.17 (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. 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.

27. CogTool Example

28. Horizontal prototype Scenario Full interface Vertical prototype 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 Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press.

29. 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

30. 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.

31. 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.

32. 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

33. 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.

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