0% found this document useful (0 votes)
14 views126 pages

Prototyping Techniques and Benefits

The document discusses the concept of prototyping in interaction design, outlining its goals, methods, benefits, and disadvantages. It emphasizes the importance of user involvement and iterative testing to improve usability and reduce costs in the development process. Various prototyping techniques, including low-fidelity and high-fidelity approaches, are also explored to illustrate their applications and effectiveness in design evaluation.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views126 pages

Prototyping Techniques and Benefits

The document discusses the concept of prototyping in interaction design, outlining its goals, methods, benefits, and disadvantages. It emphasizes the importance of user involvement and iterative testing to improve usability and reduce costs in the development process. Various prototyping techniques, including low-fidelity and high-fidelity approaches, are also explored to illustrate their applications and effectiveness in design evaluation.
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd


64 of 64

Prototyping
17,360 views

   ...

Eman Abed AlWahhab


, Microsoft Dynamics CRM Consultant at Engineering Design & Manufacturing
Follow

Published on May 12, 2014

Published in: Technology


 2 Comments
 27 Likes
 Statistics
 Notes

Candace Conner

Earn $500 for taking a 1 hour paid survey! read more... ●●●
[Link]

1 month ago

Leola Bright

I went from getting $3 surveys to $500 surveys every day!! learn more... ◆◆◆
[Link]

3 months ago

Prototyping

1. 1. PROTOTYPING Eman Abed AlWahhab 1


2. 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. 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. 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. 5
6. 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. 7
8. 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. 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. 10
11. 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. 12. JOURNEY OF THE PROTOTYPING PROCESS Goals Functionality Evaluate
Develop 12
13. 13. PROTOTYPING PROCESS 13
14. 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. 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. 16. WHAT IS PROTOTYPED ?  Technical issues  Work flow, task design  Screen
layouts and information display  Difficult, critical areas 16
17. 17. 17
18. 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. 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. 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. 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. 22.  Early prototyping  Used to evaluate function and interface  Late prototyping 
Used to evaluate performance 22 EARLY PROTOTYPING VS. LATE PROTOTYPING
23. 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. 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. 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. 26. PROTOTYPE REPRESENTATION  How to represent the prototype?  Mockup 
Storyboard  Sketches  Scenarios  Screenshots  Functional interface 26
27. 27. EXAMPLE USE TAGLINES / CAPTIONS  Keep it short: show as much as
necessary but not more 27
28. 28. MOCKUPS / WIREFRAMES  Good for brainstorming  Focuses people on high-
level design notions  Not so good for illustrating flow and the details 28
29. 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. 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. 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. 32. THROW-AWAY PROTOTYPING 32
33. 33. INCREMENTAL DEVELOPMENT PROCESS 33
34. 34. EVOLUTIONARY PROTOTYPING 34
35. 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. 36. Different Features Scenario VerticalPrototype Horizontal Prototype Full System
Functionality 36
37. 37. HORIZONTAL PROTOTYPING  Broad and shallow  Overview with limited
underlying functionality  Simulation of entire interface 37
38. 38. HORIZONTAL PROTOTYPE: BROAD BUT ONLY TOP- LEVEL 38
39. 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. 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. 41. VERTICAL PROTOTYPE: DEEP, BUT ONLY SOME FUNCTIONS 41
42. 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. 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. 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. 45. EXAMPLES OF LOW-FIDELITY PROTOTYPING  Storyboards  Sketching 
Index cards  „Wizard of Oz‟ 45
46. 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. 47. Scan the stroller -> Change the color -> Place the order -> Initial screen 47
48. 48. Scan the shirt -> Touch previous item -> Delete that item-> Alternate path… 48
49. 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. 50
51. 51. 51
52. 52. • Index cards (3 X 5 inches) • Each card represents one screen • Often used in website
development USING INDEX CARDS 52
53. 53. INDEX CARD EXAMPLE (SCREEN1) 53
54. 54. INDEX CARD EXAMPLE (SCREEN2) 54
55. 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. 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. 57. EXAMPLE  HCI Prototype - iPod iCalendar. Android used to build high-fidelity
prototype for HCI adjustments 57
58. 58. LO-FI VS HI-FI PROTOTYPING LO-Fi Hi-Fi 58
59. 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. 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. 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. 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. 63. REFERENCES  Paper Prototyping: the fast and easy way to design and refine user
interfaces  [Link]  Models, Prototypes, and Evaluations for HCI
Design: Making the Structured Approach Practical George Casaday, Cynthia Rainis 
[Link] 
[Link]/chi95/proceedings/tutors/gc_bdy.htm 
[Link] 
[Link] 
[Link]
63
64. 64. 64

Recommended


PowerPoint 2016: Tips and Tricks

Online Course - LinkedIn Learning


Betsy Corcoran on Choosing the Right Technology for Your School

Online Course - LinkedIn Learning


Teaching Techniques: Classroom Management

Online Course - LinkedIn Learning


Scenario-Based Design
Hans Põldoja

Prototype model

shuisharma

Prototyping

Eman Abed AlWahhab

Object Recognition

Eman Abed AlWahhab


IT Management

Eman Abed AlWahhab

Team leadership

Eman Abed AlWahhab

 English
 Español
 Português
 Français
 Deutsch

 About
 Dev & API
 Blog
 Terms
 Privacy
 Copyright
 Support





LinkedIn Corporation © 2019


VVVV
31 of 64

Prototyping
17,360 views

   ...

Eman Abed AlWahhab


, Microsoft Dynamics CRM Consultant at Engineering Design & Manufacturing
Follow

Published on May 12, 2014

Published in: Technology


 2 Comments
 27 Likes
 Statistics
 Notes

Candace Conner

Earn $500 for taking a 1 hour paid survey! read more... ●●●
[Link]

1 month ago

Leola Bright

I went from getting $3 surveys to $500 surveys every day!! learn more... ◆◆◆
[Link]

3 months ago

Prototyping

1. 1. PROTOTYPING Eman Abed AlWahhab 1


2. 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. 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. 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. 5
6. 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. 7
8. 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. 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. 10
11. 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. 12. JOURNEY OF THE PROTOTYPING PROCESS Goals Functionality Evaluate
Develop 12
13. 13. PROTOTYPING PROCESS 13
14. 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. 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. 16. WHAT IS PROTOTYPED ?  Technical issues  Work flow, task design  Screen
layouts and information display  Difficult, critical areas 16
17. 17. 17
18. 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. 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. 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. 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. 22.  Early prototyping  Used to evaluate function and interface  Late prototyping 
Used to evaluate performance 22 EARLY PROTOTYPING VS. LATE PROTOTYPING
23. 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. 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. 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. 26. PROTOTYPE REPRESENTATION  How to represent the prototype?  Mockup 
Storyboard  Sketches  Scenarios  Screenshots  Functional interface 26
27. 27. EXAMPLE USE TAGLINES / CAPTIONS  Keep it short: show as much as
necessary but not more 27
28. 28. MOCKUPS / WIREFRAMES  Good for brainstorming  Focuses people on high-
level design notions  Not so good for illustrating flow and the details 28
29. 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. 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. 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. 32. THROW-AWAY PROTOTYPING 32
33. 33. INCREMENTAL DEVELOPMENT PROCESS 33
34. 34. EVOLUTIONARY PROTOTYPING 34
35. 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. 36. Different Features Scenario VerticalPrototype Horizontal Prototype Full System
Functionality 36
37. 37. HORIZONTAL PROTOTYPING  Broad and shallow  Overview with limited
underlying functionality  Simulation of entire interface 37
38. 38. HORIZONTAL PROTOTYPE: BROAD BUT ONLY TOP- LEVEL 38
39. 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. 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. 41. VERTICAL PROTOTYPE: DEEP, BUT ONLY SOME FUNCTIONS 41
42. 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. 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. 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. 45. EXAMPLES OF LOW-FIDELITY PROTOTYPING  Storyboards  Sketching 
Index cards  „Wizard of Oz‟ 45
46. 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. 47. Scan the stroller -> Change the color -> Place the order -> Initial screen 47
48. 48. Scan the shirt -> Touch previous item -> Delete that item-> Alternate path… 48
49. 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. 50
51. 51. 51
52. 52. • Index cards (3 X 5 inches) • Each card represents one screen • Often used in website
development USING INDEX CARDS 52
53. 53. INDEX CARD EXAMPLE (SCREEN1) 53
54. 54. INDEX CARD EXAMPLE (SCREEN2) 54
55. 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. 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. 57. EXAMPLE  HCI Prototype - iPod iCalendar. Android used to build high-fidelity
prototype for HCI adjustments 57
58. 58. LO-FI VS HI-FI PROTOTYPING LO-Fi Hi-Fi 58
59. 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. 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. 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. 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. 63. REFERENCES  Paper Prototyping: the fast and easy way to design and refine user
interfaces  [Link]  Models, Prototypes, and Evaluations for HCI
Design: Making the Structured Approach Practical George Casaday, Cynthia Rainis 
[Link] 
[Link]/chi95/proceedings/tutors/gc_bdy.htm 
[Link] 
[Link] 
[Link]
63
64. 64. 64

Recommended


PowerPoint 2016: Tips and Tricks

Online Course - LinkedIn Learning


Betsy Corcoran on Choosing the Right Technology for Your School

Online Course - LinkedIn Learning


Teaching Techniques: Classroom Management

Online Course - LinkedIn Learning

Scenario-based Design
Hans Põldoja

Scenario-Based Design

Hans Põldoja

Prototype model

shuisharma

Prototyping

Eman Abed AlWahhab


Object Recognition

Eman Abed AlWahhab

IT Management

Eman Abed AlWahhab

Team leadership

Eman Abed AlWahhab

 English
 Español
 Português
 Français
 Deutsch

VVVVVVVVVVVVVVV

You might also like