1. ISP 666 Week 6 Prototyping

2. Design a Solution From task to system From abstract to concrete Task Models UI Presentation evaluation Conceptual Model System description Architectural Model Prototype

3. Design Artifacts How do we express early design ideas? –No coding at this stage Key notions –Make it fast!!! –Allow lots of flexibility for radically different designs –Make it cheap –Promote valuable feedback *** Facilitate iterative design and evaluation ***

4. Dilemma You can’t evaluate design until it’s built –But… After building, changes to the design are difficult Simulate the design, in low-cost, easily changeable manner

5. Prototyping A Prototype is a concrete but partial implementation of system design A User Interface Prototype is a prototype built to explore usability issue

6. Prototyping Dimensions 1. Representation –How is the design depicted or represented? –Can be just textual description or can be visuals and diagrams 2. Scope –Is it just the interface (mock-up) or does it include some computational component?

7. Dimensions (contd) 3. Executability –Can the prototype be “run”? –If coding, there will be periods when it can’t 4. Maturation –What are the stages of the product as it comes along? Revolutionary - Throw out old one Evolutionary - Keep changing previous design

8. Terminology Early Prototyping Late Prototyping High fidelity prototype Low fidelity prototype Early prototyping Low fidelity Late prototyping High fidelity continuum

9. Terminology (2) Horizontal prototype Vertical prototype Very broad, does or shows much of the interface, but does this in a shallow manner Fewer features or aspects of the interface simulated, but done in great detail

10. Low Fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboard Is quick, cheap and easily changed Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

11. Sketch

12. Storyboard Describe a “script” of important events –leave out the details –concentrate on the important interactions Depict “key frame” –file & animation

13. Black: page content Red: page title Green: annotations Blue: links A Storyboard

14. Wizard of Oz Person simulates and controls system from “behind the scenes” –Long tradition in computer industry prototype of a PC w/ a VAX behind the curtain –Much more important for hard to implement features Speech & handwriting recognition

15. Wizard of Oz (2) Can work for paper based prototypes too! Tips –Rehearse your actions For a complicated UI, make a flowchart which is hidden from the user Make list of legal words for a speech interface –Stay “in role” You are a computer, and have no common sense, or ability to understand spoken English.

16. Paper Sketches Advantages –support brainstorming –do not require specification of details –designers feel comfortable sketching Drawbacks –do not evolve easily –lack support for “design memory” –force manual translation to electronic format –do not allow end-user interaction Computerized tool support may be needed.

17. DENIM: Designing Web Sites by Sketching DENIM’s features are based on interviews with many designers. Support early-phase information & navigation design –Support pen-based interaction http://guir.berkeley.edu/projects/denim/ Video

18. Advantage of Low-fi Prototypes Fast –prototype -> test -> iterate Can simulate the interaction –sketches act as prototypes designer “plays computer” other design team members observe & record Kindergarten implementation skills –allows non-programmers to participate in the design process Good for Conceptual Design

19. High-fidelity Prototyping Uses materials that you would expect to be in the final product. Prototype looks more like the final system than a low- fidelity version. Good for physical design Look and feel Component Layout Interaction Danger that users think they have a full system

20. Tools for High-fi prototyping Web sites –HTML/XHTML + CSS, Web IDEs drag-and-drop GUI toolkits for standard UI mockups –e.g. Visual designers in IDEs, Hypercard, Visual Basic scripting languages & interface libraries for additional flexibility –e.g. tcl/tk, python graphical languages for visualization and novel interface creation –Director, Flash special purpose tools and environments –e.g. speech, haptics, Supercard/Revolution

21. Hi-fi Prototypes are not good for Conceptual Design Perceptions of the tester/reviewer? –formal representation indicates “finished” nature comments on color, fonts, and alignment Time? –encourage precision specifying details takes more time Creativity? –lose track of the big picture

22. Assignment 2 This assignment continues your mini-project started in assignment 1 Produce a low-fidelity prototype to implement one use case of your mini-project If you use DENIM, send me the.dnm file If you use paper sketches, hand in all the papers This assignment due in class on Mar. 29

23. Food Volunteer?