Concepts and Prototypes

1. Concepts and Prototypes CS468/568: Inclusive Design

2. Overview • 1. Start with a persona “attribute” (eg, one of Abby’s “facets”) • 2. Sketch some “concepts” (design brainstorms) along some design dimension that can work for that attribute. • 3. Pick your best concepts and sketch a lo-fi prototype out of them. • 4. Iteratively refine your lo-fi prototype into a hi-fi one.

3. Concepts • Pre-prototype. • Explore how to address some dimension, 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 much time on any of them.

4. Concept Examples:Dimension: Hardware for “Access” • Examples from Mike Madison’s homelessness project. (He ultimately scrapped all of them.)

5. Concept Examples:Dimension= “Show energy usage”

6. Concept Example (but too polished):Dimension=Window Management

7. Concept Examples (but too polished):Dimension= “Select” Paradigm

8. Concept Example (but too polished):Dimension= “Quick Entry”

9. Concept Examples (but too polished):Dimension= “Alert Style”

10. Concepts Can Also Explore Metaphors • Metaphors: help users build a mental model. • eg: Computer desktop is like a desktop. • Objects: Folders, trash can, … • Actions: You can put documents into folders, label them, discard them, ... • What are the Objects in this metaphor, and what Actions do you expect to be available?

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

12. Higher fi prototypes • Useful: • When: AFTER get through lower-fi ones first. • Why: Get at details of design (layout, icons, colors etc) • Front end finished with widgets polished up, but behavior/data is hard-coded (no back end). • For boss, at trade shows, etc.

13. Lo-fi prototypes (we will start here) • Just how lo-fi can one go • The lowest-fi: paper • At first: sketches as screen-transition diagrams. • Later can be more polished. • Static paper vs. “interactive” paper. • Example: Wizard of oz: on the computer, but human fakes in the computer logic. • There are tool-supported variants of these. • Details of each next...

14. Paper prototypes • Static paper • For communicating among team. • Usually done as a sketched storyboard or sketched “state machine”. • Example: lo-fi paper prototypes (next 2 slides). • Hi-fi prototype (slide after those two)

15. Static Low-fi Prototype #1(Screen transition diagram)

16. Static Low-fidelity prototype #2

17. Static high-fidelity prototype(Screen transition diagram)

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

19. Dynamic lo-fi prototype: Screen #1 From Christoph Neumann’s “Interactive Football” strategy programming environment

20. Tool-supported prototypes • Low-fi with tool support. • DENIM (click) and CogTool (fig in an upcoming slide): tools for sketched storyboards/states. • Can transition these to nicer, more polished versions.

21. CogTool Example

22. CS 468/568 Prototyping • In here: • We will begin with static paper (sketched screen transition diagrams), • Then iterate from that start using any tool you want to. • One possibility: a tool called Mockups.

23. Review • 1. Start with a persona “attribute” (eg, one of Abby’s “facets”) • 2. Sketch some “concepts” (design brainstorms) along some design dimension that can work for that attribute. • 3. Pick your best concepts and sketch a lo-fi prototype out of them. • 4. Iteratively refine your lo-fi prototype into a hi-fi one.