Computer Science · 12th Grade

Active learning ideas

User Experience (UX) and Interface (UI) Design

Active learning works because UX/UI design demands iterative testing and refinement. Students must see how design decisions affect real users, not just hear about them. Through hands-on activities, they practice evaluating interfaces, prototyping solutions, and defending design choices with evidence.

• Common Core State Standards
• CSTA: 3B-AP-19
• CCSS.ELA-LITERACY.RST.11-12.7

• 35–65 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Museum Exhibit
• 50 min · Pairs

Heuristic Evaluation: Interface Critique Workshop

Provide pairs with a set of Nielsen's 10 Usability Heuristics and screenshots or live access to an interface (a school system portal works well). Each pair evaluates the interface against each heuristic, documenting specific violations and their severity. Pairs then present their two most critical findings, and the class discusses whether design constraints (time, budget, legacy code) might explain the issues.

How does the user interface influence the way people interact with data?

Facilitation Tip

During the Interface Critique Workshop, remind students to use the 10 Nielsen heuristics as a lens for every observation they make.

What to look for

Students present their wireframes for a chosen application. Peers use a checklist to evaluate: Are interactive elements clearly identifiable? Is navigation logical? Is the visual hierarchy apparent? Peers provide one specific suggestion for improvement.

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

Activity 02

• Museum Exhibit
• 65 min · Small Groups

Design Sprint: Low-Fidelity Prototype

Small groups receive a user need statement and produce a paper prototype in 20 minutes , no digital tools. Groups then conduct a 5-minute usability test with someone outside their group who attempts to complete a defined task with the paper prototype. Groups revise based on what they observed (not what users said), then conduct a second round of testing.

What are the signs of a poorly designed user experience?

Facilitation Tip

When guiding the Low-Fidelity Prototype activity, circulate with a timer to keep teams on track and prevent over-polishing early designs.

What to look for

Ask students to write down the three most common usability issues they observed during their own or a peer's usability testing. For each issue, they should suggest one specific design change to address it.

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

Activity 03

• Think-Pair-Share
• 35 min · Pairs

Think-Pair-Share: Accessibility Audit

Students individually examine a web page using a screen reader or color contrast checker, listing three accessibility barriers they find. Pairs compare findings and categorize each by the WCAG guideline it violates. The class debrief connects accessibility not just to disability but to situational limitations , bright sunlight, one hand occupied, slow internet , that affect all users.

How do we balance aesthetic appeal with functional efficiency in UI design?

Facilitation Tip

For the Accessibility Audit, provide screen readers and high-contrast mode toggles so students experience the interface as users with disabilities would.

What to look for

Present students with screenshots of two different app interfaces for the same function (e.g., two different music player interfaces). Ask them to identify one strength and one weakness of each interface based on UI design principles and explain their reasoning.

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Activity 04

• Gallery Walk
• 40 min · Whole Class

Gallery Walk: UI Design Principles in the Wild

Post 8-10 printed screenshots of real interfaces (some good, some poor) around the room. Students rotate with sticky notes, annotating each with specific observations about visual hierarchy, affordances, feedback mechanisms, and consistency. The debrief synthesizes recurring patterns into a class-generated list of UI principles, which students then apply to their capstone interface designs.

How does the user interface influence the way people interact with data?

Facilitation Tip

During the Gallery Walk, assign each student a specific role (e.g., navigator, notetaker, timekeeper) to ensure equitable participation.

What to look for

Students present their wireframes for a chosen application. Peers use a checklist to evaluate: Are interactive elements clearly identifiable? Is navigation logical? Is the visual hierarchy apparent? Peers provide one specific suggestion for improvement.

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

A few notes on teaching this unit

Teach UX/UI as a cycle of observation, ideation, and validation. Avoid presenting design principles as abstract rules; instead, ground them in real user pain points. Research shows that students learn UX best when they see the consequences of poor design firsthand, so prioritize empathy-building exercises over lectures. Model how to give actionable feedback by framing critiques around specific heuristics rather than personal preference.

Students will develop the ability to justify design decisions using established principles and user data. They will also practice giving and receiving constructive feedback on interface designs. Success looks like students referencing usability heuristics, accessibility standards, and user testing results in their critiques and proposals.

---

Watch Out for These Misconceptions

• During the Interface Critique Workshop, some students may assume that a visually attractive interface is automatically usable.

  During the Interface Critique Workshop, have students record both aesthetic observations and usability metrics for each interface they review. Use a two-column note format where one side tracks visual appeal and the other tracks task completion time and error rates, forcing students to compare these dimensions directly.

• During the Low-Fidelity Prototype activity, students might think that user surveys alone validate a good UX.

  During the Low-Fidelity Prototype activity, require teams to conduct at least three task-based usability tests with classmates before finalizing their designs. Provide a scripted scenario (e.g., ‘Add a song to a playlist’) to ensure consistent testing conditions and guide students to prioritize behavioral data over survey responses.

• During the Accessibility Audit, students may believe that accessibility is only for a small group of users with permanent disabilities.

  During the Accessibility Audit, prepare a scenario for each team that simulates temporary or situational disabilities (e.g., using a screen glare simulator or one-handed navigation). Require students to document how their proposed changes improve usability for these broader contexts, not just permanent disabilities.

---

Methods used in this brief

• Museum Exhibit
• Think-Pair-Share
• Gallery Walk