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...
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.
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