1. Lesson 2
Prototyping

2. Outlines What is prototyping Hi-fi prototype vs. Lo-fi prototype
Types of prototypes
Advantages vs. Disadvantages
Tools

3. Prototyping Information-gathering technique
User reactions, suggestions, innovations, and revision plans
Designer & user

4. Prototyping Partial representation of a system design
Demonstrate a concept
Prototypes are always interactive

5. Hi-Fi Prototype Similar look and feel to the final product
Not have the functionality
Example: purchase functionality, but have a effect

6. Hi-Fi Prototype Useful for an evaluation of the main design elements:
Content
Visuals
Interactivity
Functionality
Media
Can measured how fast a person can learn the system

7. Hi-Fi Prototype
Beware: it looks so realistic that the client will regard it as real. Any typos will be treated seriously and will distract from the main purpose.
Beware: It is possible to prototype systems that cannot be produced using today's technology.

8. Lo-Fi Prototype Usually made of card and post-it notes
Can use acetate and wipe-off pens
Example:
Figure 2.1:
Student Information System

9. Lo-Fi Prototype Different screens on different pages of the binder
Simulated pop-up keyboard
Acetate panel for adding comments

10. Lo-Fi Prototype Robustness: It needs to be strong enough for use
Scope: Keep it simple so users can follow the story
Instructions: Too little and they get lost. Too much and they obey without thinking
Flexibility: Invite users to redesign the mock-up so as to sidestep problems encountered

11. Prototyping: Initial user reactions
Three types:
User suggestions
Innovations
Revision plans

12. Types of Prototyping Patched-up prototype.
Non-operational scale model.
First-of-a-series.
Prototype that contains only some of the essential system features

13. Patched-up prototype Working with all the features but is inefficient.
Users can interact with the system.
Storage and retrieval of data may be inefficient.
May contain only basic features

14. Non-operational scale model
A nonoperational scale mode is one that is not operational, except for certain features to be tested
Prototype input and output

15. First-of-a-series Pilot system is created.
Prototype is an operation model.
Useful when many installations of the same information system are planned.
An example is a system to be installed in one location, tested and modified as necessary, and later implemented in other locations.

16. Selected Feature Prototype
An operational model includes some, but not all, of the final system features.
With the acceptance of these features, later essential features are added.
Some menu items are available.
System is built in modules.
These are part of the actual system.

17. Prototype Dev. Guidlines
Work in manageable modules.
Build the prototype rapidly.
Modify the prototype in successive iterations.
Stress the user interface.

18. Disadvantages of Prototype
Managing the prototyping process is difficult because of its rapid, iterative nature.
Incomplete prototypes may be regarded as complete systems.

19. Advantages of Prototype
Potential for changing the system early in its development
Opportunity to stop development on an unworkable system
Possibility of developing a system that closely addresses users needs and expectations

20. Prototype Evaluation The user’s role is honest involvement.
Three ways the user is involved:
Experimenting with the prototype.
Giving open reactions to the prototype.
Suggesting additions to and/or deletions from the prototype.

21. Prototype Tools
InVision
Framer
Marvel
Origami

22. Tools: InVision
Create highly interactive mockups for web & mobile projects

23. Tools: Framer
Screen design tool
Require coding

24. Tools: Marvel Great mobile & web based prototyping
Ability to simplify the prototyping process

25. Tools: Origami
Used to create mockups for several apps such as instagram, messenger & paper