Download icon
Index
Download icon
Tweet
Download icon
Download Chapter
Download icon
Method
Download Single
Chapter

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
Physical requirements
Space (in context or in the studio), pens, scissors, glue, UI templates, sticky notes, prototyping apps
Energy level
Low
Researchers/Facilitators
1 or more
Participants
4–8 is a good group size
Research techniques
Use-it-yourself, participant observation
Expected output
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.
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

  1. 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.
  2. 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? 
  3. 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. 
  4. 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.
  5. 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

  1. 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. 
  2. 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. 
  3. 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?
  4. 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. 
End of
Method
Interactive click modeling
Taken from #TiSDD
Chapter
7
Prototyping
Our BACKGROUND