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.

• 12th Grade
• Computer Science
• 4 activities
• 35 min–65 min

Learning Objectives

1. Critique existing user interfaces for common usability flaws, citing specific examples of poor user experience.
2. Design wireframes and mockups for a new application, demonstrating adherence to established UI design principles.
3. Develop a usability testing plan, including participant recruitment strategies and task scenarios.
4. Analyze user testing data to identify key areas for interface improvement and iterate on design solutions.
5. Synthesize principles of design thinking and user-centered design to justify design choices in a project proposal.

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.

Prepare & details

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.

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

⏱ 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.

Prepare & details

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.

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

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.

Prepare & details

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.

Setup: Standard classroom seating; students turn to a neighbor

Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs

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

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.

Prepare & details

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.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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.

Assessment Ideas

Peer Assessment

After the Low-Fidelity Prototype activity, have students present their wireframes to peers. 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, and the presenting team records feedback to refine their design.

Exit Ticket

After the Interface Critique Workshop, 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, referencing at least one heuristic they learned in class.

Quick Check

During the Gallery Walk, 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 in 3–4 sentences.

Extensions & Scaffolding

• Challenge: Ask students to redesign one of the interfaces they critiqued in the Interface Critique Workshop using AI prototyping tools like Figma’s AI wireframe generator, then compare the AI-generated solution to their manual designs.
• Scaffolding: Provide a partially completed accessibility checklist for students to use during the Accessibility Audit, with some items already filled in to model expectations.
• Deeper exploration: Invite a local UX designer to review student prototypes and provide professional feedback in a follow-up discussion.

Key Vocabulary

User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a product, system, or service. It encompasses usability, accessibility, and desirability.
User Interface (UI)	The visual elements and interactive components through which a user communicates with a digital product. This includes buttons, icons, typography, and layout.
Usability Testing	A research method where representative users attempt to complete tasks using a product or prototype to identify usability problems and collect qualitative and quantitative data.
Affordance	A visual cue in an object's design that suggests how it can be used. For example, a button that looks raised suggests it can be pressed.
Information Architecture	The structural design of shared information environments. It is the art and science of organizing and labeling websites, intranets, online communities, and software to support usability and findability.