At the next visit, you share your ideas with your clients: an app drawn on paper, built from what they told you. Two things get you ready: your paper prototype and your missions.
Your paper prototype
SUMMARY
Here’s a quick example of how paper prototyping can be done:
The only difference in what we’ll do is that rather than use sticky notes to show how the user interacts with the app, you’ll create a numbered storyboard that you can tap through to show users a “happy path” through your app.
- One very large sheet of graph paper. Your whole prototype is a storyboard drawn on it.
- One numbered frame per screen. Number the frames in the order your clients will meet them.
- Follow one or two happy paths from what your clients told you, from opening the app to finishing.
- Do not make it pretty. Clarity matters. Neat does not.
Paper is fast to change, and a child will happily say “this part is boring” about a pencil sketch. Keep Designing for Young Users open while you draw.
Your missions
Plan two missions for your clients, taken from what they told you. We’ll use this handout on Wednesday to take notes:
Write them the way you would say them to a nine-year-old, and do not mention buttons or screens.
| Instead of… | Try… |
|---|---|
| ”Tap the slider and move it to 10." | "Can you find a dinosaur that’s longer than a school bus?" |
| "Press the Start Round button." | "Show me how you’d practise your sevens.” |
If a mission tells them what to tap, it is testing whether they can follow instructions, not whether your app makes sense.
Before the visit
- Every screen on your happy paths is drawn as a numbered frame.
- Every tap on a happy path leads to a frame you have drawn.
- Buttons are big, with space between them.
- Your clients would need to read very few words.
- You have written two missions.
- You have run it once, out loud, with someone playing a client: a family member, a friend or a classmate.
At the visit
Your job is to watch and listen, not to explain. Where a child gets stuck when you say nothing shows you what to change.
Start by saying:
- “I drew my app on paper. Each numbered box is one screen. Pretend it’s a real iPad. When it’s your turn, tap with your finger.”
- “I’m testing the app, not you. If something is confusing, that’s my mistake, and it helps me to find it.”
- “Can you talk out loud while you go? Tell me what you’re looking at and what you’re thinking.”
Be the computer. When a child taps, you point to the frame that comes next, and you say nothing about the app. If a child taps something off your happy path, say that part is not drawn yet, and note where it happened.
Take turns. One child tries a mission at a time while the others watch. Watchers often want to help: “Hold that thought. You’ll get your turn.” The first try at each mission is the most honest one.
Don’t rescue. When a child gets stuck, wait, and count to ten in your head. If they are still stuck, ask “What do you think you should do?” Help only if they are really unhappy, and write down exactly where it happened. Never say “no, the other button”.
Take notes on the feedback sheet I provide: one side for each mission, one row for each child’s turn. First names only, never a last name. No photos.
Finish with three questions, and let each child answer in turn:
- “What was your favourite part?”
- “Was anything confusing?”
- “If you could change one thing, what would it be?”
Before we leave, take five minutes to fill in anything you remember that is not yet on the sheet. Keep your storyboard.
Curriculum connection
CRD-1.A
Explain how computing innovations are improved through collaboration.
CRD-1.A.1 A computing innovation includes a program as an integral part of its function.
CRD-1.A.2 A computing innovation can be physical (e.g., self-driving car), nonphysical computing software (e.g., picture editing software), or a nonphysical computing concept (e.g., e-commerce).
CRD-1.A.3 Effective collaboration produces a computing innovation that reflects the diversity of talents and perspectives of those who designed it.
CRD-1.A.4 Collaboration that includes diverse perspectives helps avoid bias in the development of computing innovations.
CRD-1.A.5 Consultation and communication with users are important aspects of the development of computing innovations.
CRD-1.A.6 Information gathered from potential users can be used to understand the purpose of a program from diverse perspectives and to develop a program that fully incorporates these perspectives.
Link to originalCRD-2.E
Develop a program using a development process.
CRD-2.E.1 A development process can be ordered and intentional, or exploratory in nature.
CRD-2.E.2 There are multiple development processes. The following phases are commonly used when developing a program:
- investigating and reflecting
- designing
- prototyping
- testing
CRD-2.E.3 A development process that is iterative requires refinement and revision based on feedback, testing, or reflection throughout the process. This may require revisiting earlier phases of the process.
CRD-2.E.4 A development process that is incremental is one that breaks the problem into smaller pieces and makes sure each piece works before adding it to the whole.
Link to originalCRD-2.F
Design a program and its user interface.
CRD-2.F.1 The design of a program incorporates investigation to determine its requirements.
CRD-2.F.2 Investigation in a development process is useful for understanding and identifying the program constraints, as well as the concerns and interests of the people who will use the program.
CRD-2.F.3 Some ways investigation can be performed are as follows:
- collecting data through surveys
- user testing
- interviews
- direct observations
CRD-2.F.4 Program requirements describe how a program functions and may include a description of user interactions that a program must provide.
CRD-2.F.5 A program’s specification defines the requirements for the program.
CRD-2.F.6 In a development process, the design phase outlines how to accomplish a given program specification.
CRD-2.F.7 The design phase of a program may include:
Link to original
- brainstorming
- planning and storyboarding
- organizing the program into modules and functional components
- creation of diagrams that represent the layouts of the user interface
- development of a testing strategy for the program