The document discusses different prototyping techniques including paper prototypes, wireframes, and state transition diagrams. It notes that paper prototypes are quick drafts that show essential details for initial user testing. Examples are also provided of paper prototypes and wireframes, and testing sessions are described where a facilitator, observer and participant provide feedback on early designs.

1. Prototyping & Testing
Valeria Gasik, Zahhar Kirillov, Daria Tokranova

2. To do
• Decide the platform for your work
• Make sketches (+ state transition diagrams)
• Create a paper prototype or
a clickable mock-up
• Prepare a testing session + test!

3. Paper prototypes
• Quick, disposable drafts
• Show only essential details which are
needed for the first testing
• Tools: e.g. paper, pen, post-it, scissors...

4. Paper-prototypes
Examples

5. Wireframes
• Basic representation of the structure;
• Lacks graphical treatment
• Views can be edited and connected with
online tools such as Mockingbird, iPhone-
mockup, Balsamiq, JustProto, PopApp etc.

6. Wireframes
Examples

7. State transitional diagrams
Tap the Back button
Tap the Camera button
Tap the lecture name
Start
Tap the Scan button
Ilya Shmorgun

8. Testing
• Purpose – testing scenarios against draft prototypes and
getting feedback on the interaction with the first designs
• In the test session
• Facilitator
• Observer
• “Human computer”
• Participant

9. Example