UI vs UX Design Principles

Active learning works for this topic because accessibility and inclusive design are best understood through direct experience. Students need to feel the frustration of poor design and the satisfaction of inclusive solutions to truly grasp why these principles matter in real interfaces.

• Year 10
• Technologies
• 3 activities
• 30 min–45 min

Learning Objectives

1. Compare and contrast the core principles of UI design with those of UX design, identifying at least three distinct differences.
2. Analyze the impact of specific UI design choices on user satisfaction and task completion rates in a given digital product.
3. Evaluate the effectiveness of a digital interface based on established UX heuristics, providing specific examples of strengths and weaknesses.
4. Design a simple wireframe for a mobile application feature, justifying design decisions based on user-centered principles.
5. Explain how accessibility considerations directly influence both UI and UX design strategies for diverse user groups.

Simulation Game

⏱ 40 min·Pairs

Simulation Game: The Screen Reader Challenge

Students close their eyes and try to navigate a popular website using only a screen reader or a partner's verbal description. They must identify three barriers that make the site difficult to use without sight.

Prepare & details

How does a poorly designed interface affect a user's emotional state?

Facilitation Tip: For the Screen Reader Challenge, provide headphones and short passages to read aloud so students experience how visual content is interpreted without sight.

Setup: Flexible space for group stations

Materials: Role cards with goals/resources, Game currency or tokens, Round tracker

• Apply
• Analyze
• Evaluate
• Create
• Social Awareness
• Decision-Making

Inquiry Circle

⏱ 45 min·Small Groups

Inquiry Circle: The Curb-Cut Effect

Groups research 'The Curb-Cut Effect' and find three examples of digital tools originally designed for people with disabilities that are now used by everyone (e.g., voice-to-text, captions, or dark mode).

Prepare & details

What are the key differences between designing for a mobile device versus a desktop?

Facilitation Tip: During the Curb-Cut Effect investigation, assign each group a different disability scenario to research and share back with the class.

Setup: Groups at tables with access to source materials

Materials: Source material collection, Inquiry cycle worksheet, Question generation protocol, Findings presentation template

• Analyze
• Evaluate
• Create
• Self-Management
• Self-Awareness

Gallery Walk

⏱ 30 min·Small Groups

Gallery Walk: Inclusive Design Audit

Students bring in a screenshot of an app they use. They move around the room and use a checklist to 'audit' each other's apps for accessibility features like font size, color contrast, and button spacing.

Prepare & details

How can we measure the usability of a digital product?

Facilitation Tip: In the Inclusive Design Audit, assign each pair a different app or website to evaluate so the gallery walk showcases diverse perspectives.

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

Experienced teachers approach this topic by grounding abstract principles in concrete experiences. Start with empathy-building activities before introducing technical guidelines, as research shows students retain accessibility concepts better when they are emotionally engaged. Avoid diving straight into WCAG guidelines. Instead, let students discover the need for these rules through their own frustrations during simulations.

What to Expect

Successful learning looks like students confidently identifying accessibility barriers, proposing inclusive design fixes, and justifying their choices with evidence from simulations and real-world examples. They should move from seeing accessibility as an add-on to recognizing it as essential design practice.

Watch Out for These Misconceptions

Common Misconception

During the Screen Reader Challenge, watch for students assuming accessibility only affects blind users.

What to Teach Instead

Use the activity’s reflection questions to guide students to consider situational disabilities, like holding a phone in bright sunlight or needing captions in a noisy room.

Common Misconception

During the Inclusive Design Audit, watch for students dismissing accessibility as a cost issue.

What to Teach Instead

Have students use the audit checklist to calculate how many accessibility fixes are simple text additions or color adjustments, showing that early inclusion adds minimal cost.

Assessment Ideas

Quick Check

After the Screen Reader Challenge, present two screenshots of similar apps, one with clear UI labels and another without. Ask students to write down two specific UI elements that make one app’s interface more accessible and two UX principles that are better applied in the other.

Discussion Prompt

After the Curb-Cut Effect investigation, facilitate a class discussion using the prompt: 'If accessibility features benefit everyone, why are they often considered optional?' Encourage students to share specific examples from their research.

Peer Assessment

During the Inclusive Design Audit, have students present their findings to a partner, who must identify one UI element they like and one UX aspect that could be improved, justifying each with evidence from the app they evaluated.

Extensions & Scaffolding

• Challenge: Ask students to redesign a poorly accessible website they use daily, documenting their process and choices.
• Scaffolding: Provide a checklist of common accessibility features for students to reference during their evaluations.
• Deeper: Have students research a historical example of exclusionary design (like early automatic doors) and present how inclusive design evolved in response.

Key Vocabulary

User Interface (UI)	The visual elements and interactive components of a digital product that a user directly interacts with, such as buttons, icons, and layout.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a digital product, encompassing usability, accessibility, and emotional response.
Usability	The ease with which users can learn and use a product to achieve their goals effectively, efficiently, and with satisfaction.
Heuristics	General principles or rules of thumb used to evaluate the usability of an interface, such as Nielsen's 10 Usability Heuristics.
Wireframe	A basic visual guide representing the skeletal framework of a digital product's interface, focusing on layout and content placement.