Concepts and Prototypes CS352

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

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!!

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

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

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.

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

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

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.

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?

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

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

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

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

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

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.

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

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

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

Low-fidelity prototype

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

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!

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

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

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

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

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

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

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.

CogTool Example

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.

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

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.

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.

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.

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.

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

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