1. ISP 666 Week 6 Prototyping

2. Design a Solution • From task to system • From abstract to concrete evaluation UI Presentation ArchitecturalModel Prototype Task Models System description ConceptualModel

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 continuum Early prototyping Low fidelity Late prototyping High fidelity

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. A Storyboard • Black: page content • Red: page title • Green: annotations • Blue: links

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?