Computer Science · 12th Grade · Social Impacts and Professional Ethics · Weeks 37-45

User Experience (UX) and Interface (UI) Design

Students apply design thinking principles to create intuitive user interfaces, conducting usability testing.

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

About This Topic

User Experience (UX) and User Interface (UI) design are where computing meets human psychology, and 12th-grade students are well-positioned to engage with both the design thinking process and the research methods that validate it. Under CSTA 3B-AP-19 and CCSS.ELA-LITERACY.RST.11-12.7, students read technical design documentation, apply design principles, and communicate findings to audiences.

UX design focuses on the overall experience of using a product: task flow, navigation logic, information architecture, error recovery, and accessibility. UI design focuses on the visual and interactive layer: typography, color, layout, affordances, and feedback. The two disciplines overlap substantially, and professionals who understand both are able to make design decisions that are simultaneously functional and visually coherent.

Usability testing is the empirical backbone of this topic: students design a test, recruit participants, observe them attempting tasks, identify failure points, and revise their designs. This is active learning by definition , students cannot understand usability testing by reading about it, only by running one. The iteration between design, test, and redesign mirrors professional UX practice and produces genuinely better interfaces.

Key Questions

1. How does the user interface influence the way people interact with data?
2. What are the signs of a poorly designed user experience?
3. How do we balance aesthetic appeal with functional efficiency in UI design?

Learning Objectives

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

Before You Start

Introduction to Programming Concepts

Why: Students need a foundational understanding of how software is built to appreciate the practical constraints and possibilities in UI/UX design.

Problem Solving and Algorithmic Thinking

Why: The design thinking process, central to UX, relies heavily on structured problem-solving and breaking down complex tasks into manageable steps.

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.

Watch Out for These Misconceptions

Common Misconception

Good UI design is mostly about making things look attractive.

What to Teach Instead

Aesthetic appeal is one component of UI design, but it is subordinate to usability. A visually beautiful interface that users cannot navigate efficiently fails at its primary function. Usability testing reveals that interfaces users describe as 'clean' or 'modern' often score poorly on task completion time and error rates.

Common Misconception

If users say they like an interface in a survey, it means the UX is good.

What to Teach Instead

Self-reported satisfaction diverges significantly from observed behavior. Users often rate interfaces highly after completing tasks with difficulty, partly due to familiarity and partly due to the social dynamics of feedback. Behavioral observation during task-based usability testing provides more reliable data than user satisfaction surveys.

Common Misconception

Accessibility is a niche concern for a small percentage of users.

What to Teach Instead

Accessibility improvements benefit a far larger population than people with permanent disabilities. Captions help users in noisy environments; high-contrast modes help users in direct sunlight; keyboard navigation helps power users who prefer not to reach for a mouse. Designing for accessibility typically improves usability for everyone.

Active Learning Ideas

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.

50 min·Pairs

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.

65 min·Small Groups

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.

35 min·Pairs

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.

40 min·Whole Class

Real-World Connections

• Product designers at Google meticulously test new features for Google Maps, observing how users navigate complex interfaces to ensure intuitive route planning and information discovery.
• UX researchers at a startup like Duolingo conduct A/B testing on new language learning modules, analyzing user engagement metrics to refine lesson flow and gamification elements for maximum retention.
• Video game developers employ UI artists and UX designers to create immersive interfaces for games like 'Cyberpunk 2077', balancing intricate control schemes with clear visual feedback for players.

Assessment Ideas

Peer Assessment

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.

Exit Ticket

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.

Quick Check

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.

Frequently Asked Questions

What is the difference between UX design and UI design

UX (User Experience) design addresses the overall quality of a user's interaction with a product: task flow, information architecture, navigation logic, error recovery, and accessibility. UI (User Interface) design focuses on the visual and interactive layer: layout, typography, color, icons, and interactive elements. UX defines the structure and flow; UI defines what the user sees and touches.

What is usability testing and how do you run one

Usability testing involves observing real users attempting to complete defined tasks with a product, without assistance. The moderator watches where users struggle, hesitate, or make errors , not where they succeed. Even a test with five participants reliably surfaces the most significant usability problems. Results drive design revisions, and the cycle repeats until task success rates meet the target.

What are Nielsen's usability heuristics and why do designers use them

Nielsen's 10 usability heuristics are general principles for evaluating interface design: visibility of system status, match between system and real world, user control and freedom, consistency and standards, error prevention, recognition over recall, flexibility, aesthetic minimalism, error recovery, and help/documentation. They provide a structured framework for expert review without requiring user testing.

How does active learning help students develop UX and UI design skills

UX and UI skills are built through observation and iteration, not through reading design principles. Paper prototyping, usability testing, and heuristic evaluation workshops give students direct experience with the gap between what designers intend and what users actually do. Each round of testing and redesign builds the judgment that makes a strong UX practitioner.