7

Prototyping

Prototyping digital artifacts and software

Interactive click modeling

Interactive click modeling is a popular lo-fi method to create a first working digital prototype.

01 See for example marvelapp.com.

Over the years a variety of apps have been published that allow you to create digital click-models from simple paper prototypes. The flow of your prototyping session is the same as in paper prototyping, but now using a mixture of paper sketches and app magic. [01]

In a first step, you create hand-sketched versions of all the screens your users will deal with while using the interface. Using a prototyping app, you then take photos of all those screens, define buttons, and link them to matching other screens. After you have finished linking all the screens, you now have an interactive click-model of your interface that you can use for testing or storytelling.

Some of the prototyping apps are amazingly simple to use. Even people with no prior technical knowledge are able to pick them up within 20–30 minutes. Teaching the use of prototyping apps instead of only relying on written requirements can make a huge difference in the way your subject matter experts talk to developers.

Duration

Preparation: 1–2 hours to a couple of days, depending on the ­complexity of the prototype // Testing: Approximately 1–2 hours per user/group

Research data (specifically bugs, insights, and new ideas), raw ­video footage and photos, documentation of the tested ­variants, and the click-models themselves

Special prototyping apps allow anyone (even without prior knowledge) to ­create ­interactive click-models of an interface by taking photos of hand-sketched screens, and then defining buttons and linking them to other screens. They can be shown to ­potential users for testing or storytelling to gather valuable feedback.

Special prototyping apps allow anyone (even without prior knowledge) to ­create ­interactive click-models of an interface by taking photos of hand-sketched screens, and then defining buttons and linking them to other screens. They can be shown to ­potential users for testing or storytelling to gather valuable feedback.

Special prototyping apps allow anyone (even without prior knowledge) to ­create ­interactive click-models of an interface by taking photos of hand-sketched screens, and then defining buttons and linking them to other screens. They can be shown to ­potential users for testing or storytelling to gather valuable feedback.

Special prototyping apps allow anyone (even without prior knowledge) to ­create ­interactive click-models of an interface by taking photos of hand-sketched screens, and then defining buttons and linking them to other screens. They can be shown to ­potential users for testing or storytelling to gather valuable feedback.

Step-by-step guide
PREPARATION

‍Choose a persona or user type: What user are you going to test this paper prototype with? Choose a persona or a specific user type.

Review scope and prototyping questions: Review the scope and the prototyping questions for this prototyping activity. What do you want to learn? Do you want to test the whole or just a part of the interface? What are the tasks that you expect the chosen user to do? How detailed do you need or want to get? Make a list of the tasks you want to test for later. Also think about who you want or need to involve. Is it just for within the project team, or are you planning to involve potential users or other stakeholders?

Sketch necessary parts: Create hand-sketched versions of everything the user will deal with while using the interface. Make sure this includes not only windows, menus, dialog boxes, pages, pop-up windows, and the like but also actual key content and/or plausible data.

Import into prototyping app: Set up the prototyping app. Take photos of your hand-sketched interfaces and import them into the prototyping app. In the app you can now define click-areas that link between sketches – effectively creating a working interface.

Assign roles and prepare: Split your team to take on the roles of users and observers. Give them some time to prepare and practice their roles for the test and subsequent steps.

Step-by-step guide
USE/RESEARCH

Test the prototype: Now conduct your test. Introduce the project and the context of your prototype and ask the user to perform a certain task from your list. Briefly explain how she can interact with the click-model and observe how she reacts to the interface. Iterate until the user has completed the task or failed horribly.

Keep a list of bugs, insights, and ideas, and review issues: During the whole test the observers will record their observations and create a list of the issues that they discover. After each testing session take a few moments to reflect on what worked, what didn’t work, what you would like to change or try next. Briefly discuss the issues you discovered and prioritize them.

Revise your prototype (optional): Changes to your prototypes can still be made very easily and quickly. So, are there any changes you should make right now?

Decide on the next task and iterate: Check off the task that has just been simulated and quickly decide which you want to try next. Then go again.

Method notes

Speak out loud: Encourage users to think out loud while they go through these tasks.

Discuss if necessary: You can consciously decide to enable a team discussion if this becomes necessary during the process – for example, over a roadblock that cannot be solved right away.

Show and tell: Instead of letting the users operate the click-model themselves, an operator might show them how the app works. This can be useful to elicit feedback without having to create all the otherwise necessary variants.

Film it: Filming the use of the click-model while speaking out loud what you are doing with the app is a great way to communicate the intent of your design.