1. Prototyping Universidad de Costa Rica Posgrado en Computación e Informática Diseño de interfaz humano-computador

2. 2 “In engineering, and error, not the planning of flawless intellects, has brought most advances; this is why engineers build prototypes.” Eric Drexler

3. 3 Overview User centered system design and participatory design Prototyping and construction Conceptual design Physical design Generating prototypes Tool support

4. 4 User Centered System Design Typical approach: System Centered Design

5. 5 User Centered System Design What can I easily build on this platform? What can I create from the available tools? What do I as a programmer find interesting? Typical approach: System Centered Design

6. 6 User Centered System Design Design is based upon a user’s –abilities and real needs –context –work –tasks –need for usable and useful product Golden rule of interface design: Know The User

7. 7 User Centered System Design... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers… From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley Denning and Dargan, 1996

8. 8 User Centered System Design Assumptions –The process of design is a collaboration between designers and customers. The design evolves and adapts to their changing concerns. The process produces a specification as an important byproduct.

9. 9 User Centered System Design Assumptions –The customer and designer are in constant communication during the entire process. –The result of a good design is a satisfied customer.

10. 10 Participatory Design Problem –Intuitions wrong –Interviews and other communications not precise –Designer cannot know the user sufficiently well to answer all issues that come up during the design The user is just like me

11. 11 Participatory Design Solution –Designers should have access to representative users END users, not their managers or union reps!

12. 12 Participatory Design Users are 1 st class members in the design process. –Active collaborators vs passive participants Users considered subject matter experts. –Know all about the work context.

13. 13 Participatory Design Iterative process –All design stages subject to revision Design Prototype Evaluate

14. 14 Participatory Design Up side –Users are excellent at reacting to suggested system designs. Designs must be concrete and visible. –Users bring in important “folk” knowledge of work context. Knowledge may be otherwise inaccessible to design team. –Greater buy-in for the system often results.

15. 15 Participatory Design Down side –It is hard to get a good pool of end users. Expensive, reluctance... –Users are not expert designers. Don’t expect them to come up with design ideas from scratch. –The user is not always right Don’t expect them to know what they want.

16. 16 Participatory Design Methods for involving the user At the very least, talk to users –Surprising how many designers don’t! Contextual interviews + site visits –Interview users in their workplace, as they are doing their job –Discover user’s culture, requirements, expectations,…

17. 17 Participatory Design Methods for involving the user Explain designs –Describe what you’re going to do. –Get input at all design stages. All designs subject to revision

18. 18 Participatory Design Methods for involving the user Important to have visuals and/or demos –People react far differently with verbal explanations. –This is why prototypes are critical.

19. 19 Prototyping and construction What is a prototype? Why prototype? Different kinds of prototyping low fidelity high fidelity Compromises in prototyping vertical horizontal Construction

20. 20 What is a prototype? In other design fields a prototype is a small- scale model: a miniature car a miniature building or town

21. 21 What is a prototype? In interaction design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

22. 22 Why prototype? Evaluation and feedback are central to interaction design. Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing. Team members can communicate effectively. You can test out ideas for yourself. It encourages reflection: very important aspect of design. Prototypes answer questions, and support designers in choosing between alternatives.

23. 23 What to prototype? Technical issues Work flow, task design Screen layouts and information display Difficult, controversial, critical areas

24. 24 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, others ‘Post-it’ notes Storyboards ‘Wizard-of-Oz’

25. 25 Sketching Sketching is important to low-fidelity prototyping. Don’t be inhibited about drawing ability. Practice simple symbols.

26. 26 Sketching It is drawing of the outward appearance of the intended system. Crudity means people concentrate on high level concepts. –But hard to envision a dialog’s progression

27. 27 Sketching - Attributes Quick –to make Timely –provided when needed Disposable –investment in the concept, not the execution Plentiful –they make sense in a collection or series of ideas Clear vocabulary –rendering & style indicates it’s a sketch, not an implementation Constrained resolution –doesn’t inhibit concept exploration Consistency with state –refinement of rendering matches the actual state of development of the concept Suggest & explore rather than confirm –value lies in suggesting and provoking what could be i.e., they are the catalyst to conversation and interaction

28. 28 Card-based prototypes Index cards (3 X 5 inches) Each card represents one screen or part of screen Often used in website development

29. 29 Storyboards Users can evaluate quickly the direction the interface is heading. Are often used with scenarios, bringing more detail, and a chance to role play. A storyboard is a series of sketches showing how a user might progress through a task using the device. It is used early in design.

30. 30 Storyboards - Examples Storyboard showing navigationStoryboard with annotations

31. 31 Tutorials as Storyboards A step by step storyboard walkthrough with detailed explanations –Written in advance of the system implementation Also an interface specification for programmers Apple’s Tutorial Guide to the Macintosh Finder

32. 32 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. For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, and Smalltalk. Danger that users think they have a full system…….see compromises

33. 33 High-fidelity prototyping Purpose –Provides sophisticated but limited scenario for the user to try –Can test more subtle design issues Dangers –Users reluctant to challenge designer –Users reluctant to touch the design –Management may think its real!

34. 34 High-fidelity prototyping Prototyping with a computer –simulate some but not all features of the interface engaging for end users “Wizard of Oz” Scripted simulations

35. 35 ‘Wizard-of-Oz’ prototyping The user thinks she is interacting with a computer, but a person is responding to output rather than the system. Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User

36. 36 ‘Wizard-of-Oz’ prototyping Human ‘wizard’ simulates system response –Interprets user input according to an algorithm. –Controls computer to simulate appropriate output. –Uses real or mock interface. –Wizard is sometimes visible, sometimes hidden. “Pay no attention to the man behind the curtain!” Good for: –Adding simulated and complex vertical functionality –Testing futuristic ideas

37. 37 ‘Wizard-of-Oz’ prototyping Dear Henry What the user sees Speech Computer

38. 38 ‘Wizard-of-Oz’ prototyping

39. 39 Compromises in prototyping All prototypes involve compromises. For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? Two common types of compromise ‘horizontal’: provide a wide range of functions, but with little detail ‘vertical’: provide a lot of detail for only a few functions Compromises in prototypes mustn’t be ignored. Product needs engineering

40. 40 Control panel for pump 2 coolant flow 45 % retardant 20% speed 100% Shut Down Scripted simulations Create storyboard with media tools –Scene transition activated by simple user inputs –A simple vertical prototype User given a very tight script/task to follow –Appears to behave as a real system –Script deviations blow the simulation Control panel for pump 2 coolant flow 0 % retardant 20% speed 100% DANGER! Shut Down

41. 41

42. 42

43. 43

44. 44

45. 45 Conceptual design: from requirements to design Transform user requirements/needs into a conceptual model. “A description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended” Don’t move to a solution too quickly. Iterate, iterate, iterate. Consider alternatives. prototyping helps.

46. 46 Is there a suitable metaphor? Interface metaphors combine familiar knowledge with new knowledge. In a way that will help the user understand the product Three steps: Understand functionality. Identify potential problem areas. Generate metaphors.

47. 47 Is there a suitable metaphor? Evaluate metaphors: –How much structure does it provide? –How much is relevant to the problem? –Is it easy to represent? –Will the audience understand it? –How extensible is it?

48. 48 Considering interaction types Which interaction type? How the user invokes actions Instructing Conversing Manipulating Exploring Do different interface types provide insight? WIMP, shareable, augmented reality, others

49. 49 Expanding the conceptual model What functions will the product perform? What will the product do and what will the human do (task allocation)? How are the functions related to each other? Sequential or parallel? Categorisations, e.g. all actions related to telephone memory storage

50. 50 What information needs to be available? What data is required to perform the task? How is this data to be transformed by the system? Expanding the conceptual model

51. 51 Using scenarios in conceptual design Express proposed or imagined situations Used throughout design in various ways Scripts for user evaluation of prototypes Concrete examples of tasks As a means of co-operation across professional boundaries

52. 52 Generate storyboard from scenario

53. 53 Generate card-based prototype from use case

54. 54 Tool support - DENIM

55. 55 Limiting prototype functionality Vertical prototypes –Include in-depth functionality for only a few selected features. –Common design ideas can be tested in depth. Horizontal prototypes –The entire surface interface with no underlying functionality –A simulation No real work can be performed Scenario –Scripts of particular fixed uses of the system No deviation allowed Vertical prototype Scenario Horizontal prototype Full interface

56. 56 Summary Different kinds of prototyping are used for different purposes and at different stages Prototypes answer questions, so prototype appropriately Construction: the final product must be engineered appropriately Conceptual design (the first step of design) Consider interaction types and interface types to prompt creativity Storyboards can be generated from scenarios Card-based prototypes can be generated from use cases