170 likes | 177 Vues
Concepts and Prototypes. CS584. Concepts (Conceptual Model). Pre-prototype. Explore how to address some aspect, eg: The interface metaphor (eg, desktop, ...) The paradigm or device (eg, WIMP, wearable, ...)
E N D
Concepts and Prototypes CS584
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: from Mike Madison’s homelessness project. (He ultimately scrapped all of them.) • See next slide.
Inklings of a Design… Concept Mike Madison, Jason De Runa, Jordan Fugate, Sakshi Gupta
Example #2: In-Class Activity • Sketch >=3 concepts for a programmable refrigerator to order groceries.
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”. • Example: (next slide).
Paper prototypes (cont.) • Dynamic (interactive) paper • For evaluating with user at a very low-cost.
Dynamic/interactive paper prototypes (cont.) • Example: • from ML-interaction experiment. • (Next slide).
Tool-supported prototypes • Low-fi with tool support. • CogTool (fig next slide): tools for sketched storyboards/states. • Can transition these to nicer, more polished versions.
Activity • Choose one concept you did for the programmable refrigerator. • Consider one specific user task: • your user wants to always keep stocked with the ingredients for tacos. • Sketch a static prototype storyboard/states of your programming tool: • that shows how your user will accomplish that task in your tool.