220 likes | 340 Views
Concepts and Prototypes. CS352. Announcements. Notice upcoming due dates (web page). Where we are in PRICPE : P redispositions: Did this in Project Proposal. RI : R esearch was studying users. Hopefully led to I nsights. CP : C oncept and initial (very low-fi) P rototypes due next.
E N D
Concepts and Prototypes CS352
Announcements • Notice upcoming due dates (web page). • 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 due next. • Evaluate throughout, repeat iteratively!!
Concepts (Conceptual Model) • Pre-prototype. • Explore how to address some aspect, eg: • The interface metaphor (eg, desktop, ...) • The paradigm or device (eg, WIMP, wearable, ...) • The interaction type (eg, instructing, conversing, manipulating/demonstrating, or exploring) • This is a brainstorming-like tool • Consider several concepts. • There should be some bad ideas! • 1. don’t get too attached to a concept and 2. don’t spend too much time on any of them.
Concepts • Examples • Example #1: The thermostat ideas you presented on the doc cam. • Example #2: Fig 11.7 • Examples from Mike Madison’s homelessness project. (He ultimately scrapped all of them.)
Inklings of a Design… Concept Mike Madison, Jason De Runa, Jordan Fugate, Sakshi Gupta
In-Class Activity • In your teams: • Sketch >=3 concepts for the on-line grocery.
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?
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... • Lo-fi prototypes ideal for some purposes: • cheap • 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.
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”. • Ex: Fig 11.2 (storyboard, very high-level). • Ex: Fig 11.4,11.9 (more detailed storyboards). • Ex: Fig. 11.17 (very detailed paper prototype, showing planned look/behavior). • Another very detailed paper prototype (next slide).
Paper prototypes (cont.) • Dynamic (interactive) paper • For evaluating with user at a very low-cost.
Dynamic/interactive paper prototypes (cont.) • Examples: • Example #1: from ML-interaction experiment. • (Next slide). • Example #2: Fig 11.11 • Example #3 (if time permits): from spreadsheet study (this one has elements of wizard-of-oz) • Example #4: Fig 11.15 • Example #5: next next slide
Lo-fi interactive prototype set-up with pens, printouts, table
Example lo-fi prototype From Christoph Neumann’s “Interactive Football” strategy programming environment
Tool-supported prototypes • Low-fi with tool support. • DENIM (Fig 11.18) and CogTool (fig in an upcoming slide): tools for sketched storyboards/states. • Can transition these to nicer, more polished versions.
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 prototype storyboard/states of your UI: • that shows how your user will accomplish that task in your UI.
CS 352 Prototyping • In here: • We will begin with static paper, • then iterate from that start using CogTool, and • eventually have a more polished version, still in CogTool.
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
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.