1. Prototyping JTB April 20041 ISDE Prototyping Preece Chapter 8

2. Prototyping JTB April 20042 Objectives of Lecture Overview of Prototyping What is prototyping Aims of prototyping Prototyping techniques Prototyping tools

3. Prototyping JTB April 20043 Overview Prototyping is a well understood and used technique in engineering where novel products are tested by testing a model prototype prototypes can be “throw away” (e.g., scale models) or go into commercial use (Concorde!) In software development prototypes can be paper-based - software-based

4. Prototyping JTB April 20044 What is Prototyping? Essential element in user centred design Is an experimental and partial design Involves users in testing design ideas Typically done very early in the design process Can be used throughout the SDLC Different types of prototyping are appropriate for different stages of design Product conceptualization – requirements – task match user acceptance

5. Prototyping JTB April 20045 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

6. Prototyping JTB April 20046 What to prototype? Work flow, task design Screen layouts and information display Difficult, controversial, critical areas

7. Prototyping JTB April 20047 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’

8. Prototyping JTB April 20048 Storyboards Often used with scenarios, bringing more detail, and a chance to role play It is a series of sketches showing how a user might progress through a task using the device Used early in design

9. Prototyping JTB April 20049 Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols

10. Prototyping JTB April 200410 Index cards (3 X 5 inches) Each card represents one screen Often used in website development Using index cards

11. Prototyping JTB April 200411 ‘Wizard-of-Oz’ prototyping The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User

12. Prototyping JTB April 200412 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

13. Prototyping JTB April 200413 Aims of Prototyping in Software The aim of prototyping is to resolve uncertainty about functional and user requirements operation sequences user support needs required representations “Look and Feel” of the interface appropriateness of the design

14. Prototyping JTB April 200414 General Features of Prototyping Enables the designer to quickly build or create examples of :- The data entry form The menu structure and order The dialogue styles Error messages Should be inexpensive to develop – intention is to discard/modify it Should not require programming skills

15. Prototyping JTB April 200415 Prototyping (cont) Traditionally users lack the ability to envisage designs conceptually Alternatively their may be a conceptual mismatch between the designer and the user This may not manifest itself until very late Users often lack the ability to imagine the ramifications of design decisions Users are often unable to comment on technical design documents A prototype provides users with a concrete representation of the proposed design

16. Prototyping JTB April 200416 Prototyping Users are therefore more able to :- Confirm change or elaborate upon the specification Software prototyping is a dynamic simulation It should reflect the users real task with appropriate task scenarios Input a customer order given on the telephone This will provide information on task sequence operations and any difficulties which the user may experience

17. Prototyping JTB April 200417 Paper Based Prototyping Paper based prototypes These have no functionality but can still be useful for:- Generating ideas Gaining insights into what the user might want or is thinking Eg a paper based design of a data entry screen Storyboards and Snapshots using “film-scripting” techniques to visualise interactions between users and the system This is very quick and cheap

18. Prototyping JTB April 200418 Software Prototyping A software prototype will be a version of the proposed system with limited functionality Will differ from the final system in terms of Size, reliability robustness & completeness A software prototype is “executable” can be thrown away, or evolve may serve many different purposes should be “quick and dirty” (and cheap!) is an integral part of user-centred design approaches based on evaluation/modification

19. Prototyping JTB April 200419 Prototyping Techniques The three major kinds of prototyping are “Throw away” prototyping (a.k.a. “rapid prototyping”) used exclusively in requirements gathering Incremental prototyping not actually prototyping at all, but the delivery of prioritised functions incrementally to a single, overall design Evolutionary prototyping (a.k.a “Rapid Application Development, RAD) as for incremental prototyping but with evolving design

20. Prototyping JTB April 200420 Rapid Prototyping Aims to collect information on requirements and the adequacy of possible designs Recognises that requirements are likely to be inaccurate when first specified The emphasis is on evaluating the design before discarding it

21. Prototyping JTB April 200421 Rapid Prototyping -Advantages Helps the designer to evaluate the design very early in the the design cycle It is good for addressing the problem of users not knowing or being unable to state their requirements Provides the opportunity for continued evaluation and refinement of the design Increases the chance of getting a well designed system acceptable to the users with the required functionality and ease of use

22. Prototyping JTB April 200422 Rapid Prototyping – Disadvantages Can consume a lot of resources – users analysts programmers. Therefore can be costly as well as time consuming The continued process of design evaluate redesign may mean that the design phase of the cycle is considerably increased May be a long time before get a working system Reluctance to ‘throw away’ or discard the prototype Users expectations/wishes may be unrealistic May not be technically or economically feasible

23. Prototyping JTB April 200423 Incremental Prototyping Final product is built as separate components one at a time There is one overall design for the system It is partitioned into independent and smaller components Final product is released as a series of products Eg General student details data module – the students assessment profile module

24. Prototyping JTB April 200424 Incremental Prototyping - Advantages Allows large systems to be installed in phases Helps to avoid the delays between specification and implementation Core system features are provided early Users are not overwhelmed with a complex level of functionality in one go Suitability and appropriateness of key requirements can be checked Less essential features can be added later

25. Prototyping JTB April 200425 Incremental Prototyping – Disadvantages Need to have an overall view of requirements Suitable development software must be used – not just high level prototyping software Long development timescale before full functionality is obtained This may be incompatible with management business goals Eg Need to get to market before a competitor Urgent requirements for a complete solution

26. Prototyping JTB April 200426 Evolutionary prototyping – RAD As for incremental prototyping Additions and amendments are made following evaluation and the system is regenerated in its amended form In this case the prototype evolves into the final system

27. Prototyping JTB April 200427 Evolutionary prototyping – Advantages The system can cope with change during and after implementation Again helps to overcome the gap between specification and implementation Users get some functionality quickly

28. Prototyping JTB April 200428 Evolutionary prototyping -Disadvantages Can lead to a long development timescale May have limited functionality which may not be apparent to the user May believe that they have the final complete system and may therefore be unimpressed!

29. Prototyping JTB April 200429 Other Prototyping Techniques Full prototype full functionality, lower performance than production software Horizontal prototype displays “breadth” of functionality, no lower level detail “back end” support Eg. Database link Vertical prototype full functionality and performance of a “slice” or small part of the system

30. Prototyping JTB April 200430 Using prototypes in conceptual design Allow evaluation of emerging ideas Low-fidelity prototypes used early on, high-fidelity prototypes used later

31. Prototyping JTB April 200431 Physical design: getting concrete Considers more concrete, detailed issues of designing the interface Iteration between physical and conceptual design Guidelines for physical design Nielsen’s heuristics Shneiderman’s eight golden rules Styles guides: commercial, corporate decide ‘look and feel’ for you widgets prescribed, e.g. icons, toolbar

32. Prototyping JTB April 200432 Physical design: getting concrete Different kinds of widget (dialog boxes, toolbars, icons, menus etc) menu design icon design screen design information display

33. Prototyping JTB April 200433 Menu design How long is the menu to be? In what order will the items appear? How is the menu to be structured, e.g. when to use sub-menus, dialog boxes? What categories will be used to group menu items?

34. Prototyping JTB April 200434 Icon design Good icon design is difficult Meaning of icons is cultural and context sensitive Some tips: always draw on existing traditions or standards concrete objects or things are easier to represent than actions From clip art, what do these mean to you?

35. Prototyping JTB April 200435 Screen design Two aspects: How to split across screens moving around within and between screens how much interaction per screen? serial or workbench style? Individual screen design white space: balance between enough information/interaction and clarity grouping items together: separation with boxes? lines? colors?

36. Prototyping JTB April 200436 Screen design: splitting functions across screens Task analysis as a starting point Each screen contains a single simple step? Frustration if too many simple screens Keep information available: multiple screens open at once

37. Prototyping JTB April 200437 Screen design: individual screen design Draw user attention to salient point, e.g. colour, motion, boxing Animation is very powerful but can be distracting Good organization helps: grouping, physical proximity Trade off between sparse population and overcrowding

38. Prototyping JTB April 200438 Information display Relevant information available at all times Different types of information imply different kinds of display Consistency between paper display and screen data entry

39. Prototyping JTB April 200439 Software prototyping tools Facades and Requirements Animators e.g., Demo II interfaces demonstrated through “slide shows” useful only for throw away prototyping Screen generators e.g., Protogen GUIs built rapidly by “screen-painting” then hooked into application code RAD tools e.g., Visual Basic, Delphi can be used for building full apps.

40. Prototyping JTB April 200440 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

41. Prototyping JTB April 200441 Summary Different kinds of prototyping are used for different purposes and at different stages Prototypes answer questions, so prototype appropriately Conceptual design (the first step of design) Physical design: e.g. menus, icons, screen design, information display Prototypes and scenarios are used throughout design