Computer Science · 11th Grade

Active learning ideas

User Interface (UI) Prototyping

Active learning works for UI prototyping because students must experience the gap between their mental model and the user’s response. When they test a paper sketch or wireframe, they see immediately how users interpret their design choices, which builds empathy and sharpens their ability to ask the right design questions early.

• Common Core State Standards
• CSTA: 3B-AP-19
• CSTA: 3B-AP-21

• 25–50 min
• Pairs → Whole Class
• 3 activities

Activity 01

• Project-Based Learning
• 35 min · Small Groups

Paper Prototype Sprint

Groups have 15 minutes to sketch a complete low-fidelity paper prototype for a simple app concept (provided by the teacher). They then run a two-minute user test with a classmate who was not involved in the sketching. Groups revise based on what they observed and present their before and after sketches.

Design low-fidelity and high-fidelity prototypes for a software application.

Facilitation Tip

During the Paper Prototype Sprint, insist students use only black markers and plain paper; this removes visual distractions so peers focus entirely on layout and flow.

What to look for

Present students with three images: a paper sketch, a grayscale digital layout, and a fully designed interactive screen. Ask them to label each as a wireframe, mockup, or interactive prototype and briefly explain why.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Project-Based Learning
• 50 min · Pairs

Figma Wireframe Workshop

Students create a wireframe for their capstone project's main user flow using Figma. Pairs swap laptops and attempt to complete a specific task using only the wireframe. The observer notes every moment of confusion without giving hints, and designers get a prioritized list of structural issues to fix.

Differentiate between wireframes, mockups, and interactive prototypes.

Facilitation Tip

In the Figma Wireframe Workshop, demonstrate the ‘present mode’ feature so students can simulate user interactions without coding.

What to look for

Students share their low-fidelity wireframes. In pairs, they discuss: 'Does the layout clearly communicate the purpose of this screen?' and 'What is one change that would improve the navigation?' Each student records one piece of feedback to incorporate.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 03

• Project-Based Learning
• 25 min · Small Groups

Prototype Fidelity Gallery: Same App, Three Ways

Post three versions of the same app concept at different fidelity levels: a hand sketch, a digital wireframe, and a high-fidelity Figma mockup. Groups identify what questions each version can and cannot answer for a designer, then present their analysis to establish a shared vocabulary for discussing prototyping choices.

Evaluate the effectiveness of different prototyping tools and techniques.

Facilitation Tip

For the Fidelity Gallery, assign each group a 3-minute rotation to prevent over-explaining and keep the focus on comparing structure, not aesthetics.

What to look for

Ask students to write down one UI prototyping tool they learned about today. Then, have them list one specific scenario where a low-fidelity prototype would be more appropriate than a high-fidelity one.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

A few notes on teaching this unit

Teachers approach this topic by framing prototyping as a conversation, not a deliverable. Students learn to treat each prototype as a script for a usability test, where the audience’s confusion or delight becomes the data. Avoid letting students spend time on visual polish in early rounds; research shows aesthetics bias feedback toward surface-level comments rather than structural issues.

Successful learning looks like students confidently selecting the right prototype fidelity for their question, running quick tests, and using feedback to refine their interface without over-investing in polished details. They should articulate why a rough prototype was more effective than a high-fidelity one during the Fidelity Gallery activity.

---

Watch Out for These Misconceptions

• During the Paper Prototype Sprint, watch for students hesitating to test rough sketches because they believe prototypes need to look finished.

  Remind students that the goal is to test the layout and flow, not the drawing quality. Encourage them to label buttons with text and use arrows to simulate interactions so peers can focus on the design logic.

• During the Figma Wireframe Workshop, watch for students assuming they must create a high-fidelity mockup before gathering feedback.

  Pause the class to demonstrate how a low-fidelity wireframe in Figma can be tested just like a paper prototype. Ask students to hide the color palette and focus on structure only.

• During the Fidelity Gallery, watch for students believing that the most visually polished prototype must be the best design.

  Prompt students to compare prototypes side-by-side and ask which one revealed the most user pain points. Use this moment to reinforce that clarity beats polish in early testing.

---

Methods used in this brief

• Project-Based Learning