1. Prototyping JTB October 2004
HCI - Prototyping
Mc Cracken Chapter 7
Also Preece Chapter 8
Acknowledgements Several slides used from Mc Cracken
Prototyping JTB October 2004

2. Prototyping JTB October 2004
Objectives of Lecture
Overview of Prototyping
What is prototyping
Aims of prototyping
Prototyping techniques
Prototyping tools
Prototyping JTB October 2004

3. Prototyping JTB October 2004
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
Prototyping JTB October 2004

4. Prototyping JTB October 2004
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
Prototyping JTB October 2004

5. Prototyping JTB October 2004
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
Prototyping JTB October 2004

6. Prototyping JTB October 2004
7.2 Why Prototype?
Traditional software development: you can’t test until you implement
Implementation is expensive, and there is nothing to test until you have made that expenditure of effort and schedule time
Result: any design errors are built in to the first thing you can test, and it is very expensive to make changes
Result: design errors, unless they are really bad, are left in the product
Prototyping JTB October 2004

7. Breaking this implementation paradox
Build a prototype of the basic functionality, especially the interface
Test the prototype, which will uncover design errors
Correct the errors
Repeat until you have a clean design
A major tool for improving usability
Heavily used in industry
Prototyping JTB October 2004

8. Prototyping JTB October 2004
What to prototype?
Work flow, task design
Screen layouts and information display
Difficult, controversial, critical areas
Prototyping JTB October 2004

9. 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’
Prototyping JTB October 2004

10. Prototyping JTB October 2004
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
Prototyping JTB October 2004

11. Prototyping JTB October 2004
Sketching
Sketching is important to low-fidelity prototyping
Don’t be inhibited about drawing ability. Practice simple symbols
Prototyping JTB October 2004

12. Prototyping JTB October 2004
Using index cards
Index cards (3 X 5 inches)
Each card represents one screen
Often used in website development
Prototyping JTB October 2004

13. Elements of a paper prototype
Menu Bar
Scroll Bar
Opening Contents
Secondary Menu
Prototyping JTB October 2004

14. Some examples from Mc Crackens Students!!
Prototyping JTB October 2004

15. Prototyping JTB October 2004
Their home page
I put in the ruler only to show the scale, of course.
Prototyping JTB October 2004

16. User “clicks on” (points to) Clubs button
Prototyping JTB October 2004

17. Prototyping JTB October 2004
The Music page
Prototyping JTB October 2004

18. A few pages from another student group
Written permissions are on file, from each student. Another group of good students with whom I enjoyed working.
Prototyping JTB October 2004

19. Prototyping JTB October 2004
The home page
Pulldown menu
This is a paper prototype, but the students used the computer to create a few elements of it. What looks like glare in the title graphic is actually their choice of a kind of gradient effect.
Prototyping JTB October 2004

20. Prototyping JTB October 2004
A second-level page
Prototyping JTB October 2004

21. Another second-level page
Prototyping JTB October 2004

22. Prototyping JTB October 2004
After prototyping and user testing, this is what their home page looked like
The intended message: prototyping pays off, in sites that work. And look good. All ten teams did work at this level. I can’t believe how hard they worked, and how effective the results were. If I had demanded this kind of effort there would have been delegations to the dean: “We’re being asked to do six hours work for three credits!” As it was, they simply got caught up in the excitement of doing good projects, and poured on the effort. Seeing early prototypes fostered just a bit of competition, which never hurts. (If not overdone.)
And it was a total delight to hear, in their presentations, what they learned in prototyping and in user testing. Validated the course, in their own words. Courses should always go so well.
Prototyping JTB October 2004

23. Materials for building a paper prototype
White, unlined heavy paper or card stock; 11 x 14 or 12 x 18 inches are good sizes
Regular 8.5 x 11 unlined paper
5x8 index cards, for taking notes
Colored paper if you wish
Prototyping JTB October 2004

24. Prototyping JTB October 2004
Materials, continued
Adhesives: rubber cement, Scotch® tape, glue sticks
Markers of various colors
Sticky note pads, in various colors and sizes
Acetate sheets—a few
Scissors
Prototyping JTB October 2004

25. ‘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
User
>Blurb blurb
>Do this
>Why?
Prototyping JTB October 2004

26. 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
Prototyping JTB October 2004

27. 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
Prototyping JTB October 2004

28. 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
Prototyping JTB October 2004

29. Prototyping JTB October 2004
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
Prototyping JTB October 2004

30. Prototyping JTB October 2004
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
Prototyping JTB October 2004

31. 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
Prototyping JTB October 2004

32. Prototyping JTB October 2004
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
Prototyping JTB October 2004

33. 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
Prototyping JTB October 2004

34. Prototyping JTB October 2004
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
Prototyping JTB October 2004

35. 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
Prototyping JTB October 2004

36. 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
Prototyping JTB October 2004

37. 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
Prototyping JTB October 2004

38. 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
Prototyping JTB October 2004

39. 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
Prototyping JTB October 2004

40. 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
Prototyping JTB October 2004

41. 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
Prototyping JTB October 2004

42. 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!
Prototyping JTB October 2004

43. 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
Prototyping JTB October 2004

44. Horizontal prototype: broad but only top-level
Prototyping JTB October 2004

45. Vertical prototype: deep, but only some functions
Prototyping JTB October 2004

46. 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
Prototyping JTB October 2004

47. Prototyping JTB October 2004
Evaluation
It is no good building a prototype if you do not evaluate it!!
Evaluation is another key feature of user centred design
Evaluation will be covered later in the module
Prototyping JTB October 2004

48. Prototyping JTB October 2004
Summary
Different kinds of prototyping are used for different purposes and at different stages
Prototypes answer questions, so prototype appropriately
Prototypes and scenarios are used throughout design
Evaluation of the prototype is essential
Prototyping JTB October 2004