Experi

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