1. PROTOTYPING
Eman Abed AlWahhab
1

2. OUTLINE
 What is a prototype?
 Goals of prototyping
 How to Prototype?
 Why prototype?
 What to prototype?
 General Features of Prototyping
 Benefits of Prototyping
 Disadvantages of Prototyping
 Prototyping Approaches and Techniques
 References 2

3. PROTOTYPING
 A limited representation of a design that allows users to
interact with it and to explore its suitability
 Allows stakeholders to interact with the envisioned
product, gain some experience of using and explore imagined
uses
 Production of an intermediary product to be used as a basis
for testing
 Aim is to save on time and money
 Aim is to have something that can be tested with real users
3

4. PROTOTYPING
 You never get it right first time
 If at first you don‟t succeed …
prototype evaluatedesign
re-design
done!
OK?
4

5. 5

6. WHAT IS A PROTOTYPE
 In interaction design it can be any of the following
(and more):
 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 piece of software with limited functionality written in the
target language or in another language
6

7. 7

8. PITFALLS OF PROTOTYPING
 Moving little by little … but to where
1. need a good start point
2. need to understand what is wrong
8

9. GOALS OF PROTOTYPING
Prototyping enables evaluation, happens throughout
 Exploring requirements
 Market analysis, participatory design
 Choosing among alternatives
 Risky or critical features, go/no-go decisions
 Empirical usability testing
 As early as possible, try out ideas with target users
 Evolutionary development
 May deliberately choose a malleable software platform, building software in
incremental, iterative fashion
9

10. 10

11. HOW TO PROTOTYPE?
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
Prototyping is
 a major tool for improving usability
 Heavily used in industry 11

12. JOURNEY OF THE PROTOTYPING PROCESS
Goals
Functionality
Evaluate
Develop
12

13. PROTOTYPING PROCESS
13

14. 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
14

15. 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
15

16. WHAT IS PROTOTYPED ?
 Technical issues
 Work flow, task design
 Screen layouts and information display
 Difficult, critical areas
16

17. 17

18. 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
18

19. PROTOTYPING FOR USABILITY
 Usability = ease of use of an application
 Design typical user task scenarios
 Identify tasks based on the scenarios
 Use “Real Users” to test
 Watch user performing task
 Iterate design based on test
19

20. COST OF PROTOTYPING
 Cheaper than not doing it......
 Cost of repairing an error made in analysis and design phase can
cost up to 100 times the original cost
 Usability work should amount for 5-10% of a project‟s budget
 Testing early, iterating often makes the product cheaper.
 Prototyping offers a cheap means of testing usability early in
the lifecycle
20

21. USERS & PROTOTYPES
 The only way to really test the interface of a prototype is with
real users
 The lifecycles give us a way to feed what we discover back
into the development process
 The question remains of the best way of involving the users
21

22.  Early prototyping
 Used to evaluate function and interface
 Late prototyping
 Used to evaluate performance
22
EARLY PROTOTYPING VS. LATE PROTOTYPING

23. BENEFITS OF PROTOTYPING
 Can be used to test every detail of the final product
before the product is built
 Results in higher user satisfaction
 Users are better at evaluating an existing (vs described)
system
 It brings the users into the process early
23

24. DISADVANTAGES OF PROTOTYPING
 Users may be unfamiliar with the technique.
 Management may think that the project is nearly finished
if the prototype is “too good,”
or that the prototype can be converted into the final
product.
24

25. 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
25

26. PROTOTYPE REPRESENTATION
 How to represent the prototype?
 Mockup
 Storyboard
 Sketches
 Scenarios
 Screenshots
 Functional interface
26

27. EXAMPLE USE TAGLINES / CAPTIONS
 Keep it short: show as much as necessary but not more
27

28. MOCKUPS / WIREFRAMES
 Good for brainstorming
 Focuses people on high-level design notions
 Not so good for illustrating flow and the details
28

29. PROTOTYPING APPROACHES AND TECHNIQUES
 Approaches:
 Throwaway vs Evolutionary vs Incremental
 Horizontal vs Vertical
 Low vs High fidelity
 Different techniques including:
 Storyboards
 Paper prototypes
 Wizard of Oz
 Software prototypes
29

30. PROTOTYPING TECHNIQUES
 The three major kinds of prototyping are
 “Throw away” prototyping ( “rapid prototyping”)
 used exclusively in requirements gathering
 Incremental prototyping
 not actually prototyping at all, but the delivery of prioritized functions
incrementally to a single, overall design
 Evolutionary prototyping (“Rapid Application
Development, RAD)
 as for incremental prototyping but with evolving design
30

31. THROWAWAY-EVOLUTIONARY-INCREMENTAL
 Throwaway (or revolutionary) prototypes
 are built, tested and thrown away (useful in early stages)
 knowledge gained contributes to final system / next prototype
 can be expensive
 The prototype is used to get the specs right, then discarded!!
 Incremental prototypes
 final system built as separate components which are released
separately and gradually integrated
 Evolutionary prototypes
 are not discarded but serve as basis for next iteration of the design
 danger of initially bad designs persisting
 The prototype eventually becomes the product 31

32. THROW-AWAY PROTOTYPING
32

33. INCREMENTAL DEVELOPMENT PROCESS
33

34. EVOLUTIONARY PROTOTYPING
34

35. 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 Ex. Database link
 Vertical prototype
 full functionality and performance of a “slice” or small part of
the system
35

36. Different Features
Scenario
VerticalPrototype
Horizontal Prototype
Full System
Functionality
36

37. HORIZONTAL PROTOTYPING
 Broad and shallow
 Overview with limited underlying functionality
 Simulation of entire interface
37

38. HORIZONTAL PROTOTYPE: BROAD BUT ONLY TOP-
LEVEL
38

39. HORIZONTAL PROTOTYPING
 Disadvantages
 Not possible to perform real work
 Users cannot interact with real data
 Often possible to create a wish list interface
 Advantages
 Can be created quickly
 Gives an idea of how the whole interface will hang together
 Identifies top level functionality
39

40. VERTICAL PROTOTYPING
 Reduction of number of features
 In-depth functionality for a few selected features
 Tests part of system
 Tests in depth under realistic circumstances with real
user tasks
 Main limitation: users cannot move freely through the
system
40

41. VERTICAL PROTOTYPE: DEEP, BUT ONLY SOME
FUNCTIONS
41

42. FIDELITY
 Degree to which prototype accurately represents the
appearance and interaction of the product
 Judged by how it appears to the person viewing it
 Not similarity to actual application
 Not the degree to which the code and other attributes
invisible to the user are accurate
42

43. FIDELITY SPECTRUM
 High Fidelity
 Close to final product
 Electronically faithful
 Uses similar media
 Low Fidelity
 Basis for final product
 Proof of concept
 Use of low cost, non-electronic media
43

44. LOW-FIDELITY PROTOTYPING
 Does not look very much like the final product
 Uses materials that are very different from the intended final version,
such as paper and cardboard rather than electronic screens and
metal
 Used during early stages of development
 Cheap and easy to modify so they support the exploration of
alternative designs and ideas
 It is never intended to be integrated into the final system. They are
for exploration only
44

45. EXAMPLES OF LOW-FIDELITY PROTOTYPING
 Storyboards
 Sketching
 Index cards
 „Wizard of Oz‟
45

46. STORYBOARDING
 A series of key frames as sketches
 Originally from film; used to get the idea of a scene
 Snapshots of the interface at particular points in the interaction
 Users can evaluate quickly the direction the interface is
heading
46

47. Scan the
stroller ->
Change the
color ->
Place the
order ->
Initial
screen
47

48. Scan the
shirt ->
Touch
previous
item ->
Delete
that item->
Alternate
path…
48

49. SKETCHES
 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
Computer Telephone
Last Name:
First Name:
Phone:
Place Call Help
49

50. 50

51. 51

52. • Index cards (3 X 5 inches)
• Each card represents one screen
• Often used in website development
USING INDEX CARDS
52

53. INDEX CARD EXAMPLE (SCREEN1)
53

54. INDEX CARD EXAMPLE (SCREEN2)
54

55. „WIZARD-OF-OZ‟ PROTOTYPING
55
• The user thinks they are interacting with a computer, but a
developer is responding to output rather than the system.
• It is the „wizard‟ (a person from the design team) who is
responding rather than the system
• Usually done early in design to understand users‟
expectations
>Blurb blurb
>Do this
>Why?
User

56. HIGH-FIDELITY PROTOTYPING
 Choice of materials and methods
 Similar or identical to the ones in the final product
 Looks more like the final system
 Appearance, not functionality
 Common development environments
 Macromedia Director, PowerPoint, Visual BasicWeb
development tools
 Misled user expectations
 Users may think they have a full system
56

57. EXAMPLE
 HCI Prototype - iPod iCalendar. Android used to build
high-fidelity prototype for HCI adjustments
57

58. LO-FI VS HI-FI PROTOTYPING
LO-Fi Hi-Fi
58

59. ADVANTAGES/DISADVANTAGES
59
Prototype Advantages Disadvantages
Low-fidelity
prototype
- low developmental cost
- evaluate multiple design
concepts
- limited error checking
- navigational and flow
limitations
High-fidelity
prototype
- fully interactive
- look and feel of final
product
- clearly defines
navigational scheme
- more expensive to
develop
- time consuming to
build
- developers are
reluctant to change
something they have
crafted for hours

60. COMPROMISES IN PROTOTYPING
 All prototypes involve compromises
 Compromises in low-fidelity prototypes:
 device doesn't actually work
 Compromises in high-fidelity prototypes:
 slow response
 sketchy icons
 limited functionality available
 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
60

61. CONSTRUCTION
61
• Taking the prototypes (or learning from them) and creating a
whole
• Quality must be attended to: usability , reliability, robustness,
maintainability, integrity, portability, efficiency, etc..
• Product must be engineered
• Evolutionary prototyping
• „Throw-away‟ prototyping

62. CONCLUSION
 Prototyping is used to evaluate, iterate and improve
 Different kinds of prototyping are used for different
purposes and at different stages
 Construction: avoid temptation to build the final product
from Hi-Fi prototypes
62

63. REFERENCES
 Paper Prototyping: the fast and easy way to design and refine user interfaces
 http://paperprototyping.com/
 Models, Prototypes, and Evaluations for HCI Design: Making the Structured Approach
Practical George Casaday, Cynthia Rainis
 http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
 www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm
 http://hci.stanford.edu/research/prototyping/
 http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html
 http://hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf
63

64. 64