Paper Prototyping Interactive Elements

Active learning works because students must physically manipulate materials to simulate digital interactions, making abstract concepts concrete. Testing prototypes by hand reveals usability issues that static diagrams cannot, building confidence in early design decisions.

• Year 4
• Technologies
• 4 activities
• 25 min–40 min

Learning Objectives

1. Construct a paper prototype that simulates a button click interaction.
2. Analyze the advantages of using paper prototypes for identifying usability issues before digital development.
3. Justify the inclusion of paper prototyping within the iterative design process.
4. Compare the effectiveness of different paper folding or cutting techniques for simulating interactive elements.
5. Demonstrate how a paper prototype can communicate user flow to a peer.

Museum Exhibit

⏱ 25 min·Pairs

Pairs: Button Flip Challenge

Students work in pairs to sketch two app screens on cardstock and connect them with a brass fastener to simulate a button click. One student 'presses' the button by flipping the page while the other observes and notes usability. Pairs swap roles and refine based on feedback.

Prepare & details

Construct a paper prototype that simulates a button click.

Facilitation Tip: During the Button Flip Challenge, circulate with a timer to ensure pairs switch roles promptly, reinforcing the importance of testing navigation from different user perspectives.

Setup: Tables or desks arranged as exhibit stations around room

Materials: Exhibit planning template, Art supplies for artifact creation, Label/placard cards, Visitor feedback form

• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Museum Exhibit

⏱ 35 min·Small Groups

Small Groups: Slider Navigation Stations

Divide materials into stations for sliders, tabs, and pop-ups. Groups rotate, building one interactive element per station using tape and straws for sliders. At each, they test with group members and record what works or fails.

Prepare & details

Analyze what can be learned from a paper prototype before coding.

Facilitation Tip: For Slider Navigation Stations, provide a range of materials like brads or paper clips to demonstrate how different fasteners affect slider movement.

Setup: Tables or desks arranged as exhibit stations around room

Materials: Exhibit planning template, Art supplies for artifact creation, Label/placard cards, Visitor feedback form

• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Museum Exhibit

⏱ 40 min·Whole Class

Whole Class: Prototype Share and Critique

Each student or pair displays their prototype on desks. Class walks around, testing interactions and providing sticky note feedback on clarity and flow. Teacher facilitates a debrief to discuss common improvements.

Prepare & details

Justify the use of paper prototypes in the design process.

Facilitation Tip: When facilitating Prototype Share and Critique, model how to give feedback by first restating what the prototype does before suggesting changes.

Setup: Tables or desks arranged as exhibit stations around room

Materials: Exhibit planning template, Art supplies for artifact creation, Label/placard cards, Visitor feedback form

• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Museum Exhibit

⏱ 30 min·Individual

Individual: Personal App Prototype

Students independently design a three-screen prototype for a simple app idea, like a game menu. They add interactive elements, test solo by simulating user paths, then pair share for one round of tweaks.

Prepare & details

Construct a paper prototype that simulates a button click.

Facilitation Tip: During the Personal App Prototype, remind students to include a simple user flow diagram on the back of their prototype to guide their testing.

Setup: Tables or desks arranged as exhibit stations around room

Materials: Exhibit planning template, Art supplies for artifact creation, Label/placard cards, Visitor feedback form

• Apply
• Analyze
• Create
• Self-Management
• Relationship Skills

Teaching This Topic

Start by modeling how to test a prototype yourself, narrating your thought process aloud as you click or slide elements. Avoid stepping in to fix issues immediately; instead, ask students to identify the problem and brainstorm solutions together. Research shows that early, low-stakes prototyping reduces fear of failure and builds iterative problem-solving skills.

What to Expect

Successful learning looks like students confidently explaining how their paper prototype simulates digital interactions and revising based on peer feedback. They should prioritize functionality over aesthetics and articulate improvements clearly.

Watch Out for These Misconceptions

Common Misconception

During Button Flip Challenge, watch for students spending too much time drawing precise digital screens.

What to Teach Instead

Encourage them to sketch rough buttons first and test with a partner immediately; remind them that rough sketches reveal usability issues faster than polished drawings.

Common Misconception

During Slider Navigation Stations, watch for students assuming sliders must look like digital controls.

What to Teach Instead

Have them test sliders made from different materials, like cardboard strips or paper clips, to see which moves most smoothly and communicates function clearly.

Common Misconception

During Prototype Share and Critique, watch for students dismissing feedback if their prototype feels 'good enough.'

What to Teach Instead

Guide them to ask peers to walk through their prototype step by step, which often reveals overlooked confusion in the interaction flow.

Assessment Ideas

Quick Check

After Button Flip Challenge, ask students to hold up their prototype and point to the part that simulates a button click. Have them explain in one sentence how it works.

Discussion Prompt

During Prototype Share and Critique, facilitate a discussion with the prompt: 'Imagine you built this digital app with code first, then tested it. What problems might you have discovered too late that the paper prototype helped you find now?'

Peer Assessment

After Slider Navigation Stations, have students pair up and demonstrate their prototype to each other. Instruct each student to provide one specific piece of feedback about the clarity of the interaction or suggest one improvement.

Extensions & Scaffolding

• Challenge students who finish early to add a second interactive element, like a menu that folds open, to their Personal App Prototype.
• For students who struggle, provide pre-cut templates for buttons or sliders to reduce frustration and keep focus on interaction design.
• Deeper exploration: Have students document their prototyping process in a short reflection, comparing their first idea to their final version and explaining changes.

Key Vocabulary

Paper Prototype	A low-fidelity, hand-drawn or cut-out model of a digital interface, used to test design ideas before coding.
Interactive Element	A part of a digital interface, like a button or slider, that a user can manipulate to trigger an action or change.
User Flow	The path a user takes through a digital product or service to complete a task, often visualized as a series of connected screens or actions.
Low-Fidelity	A design representation that is basic and simple, focusing on core concepts and functionality rather than detailed visual appearance.