Your SlideShare is downloading. ×
Prototyping
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Prototyping

2,170
views

Published on

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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