Prototyping & TestingValeria Gasik, Zahhar Kirillov, Daria Tokranova

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!

Paper prototypes

• Quick, disposable drafts

• Show only essential details which are needed for the first testing

• Tools: e.g. paper, pen, post-it, scissors...

Paper-prototypesExamples

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.

ExamplesWireframes

State transitional diagrams

Tap the Camera button

Tap the Scan button

Tap the lecture name

Tap the Back button

Start

Ilya Shmorgun

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

Example