Computer Science · Class 12

Active learning ideas

User Interface (UI) / User Experience (UX) Design Principles

Active learning works because UI/UX design is inherently hands-on. Students must experience firsthand how poor design choices create friction, while good principles make interactions seamless. By critiquing, prototyping, and testing, they internalise concepts better than through lectures alone.

• CBSE Learning Outcomes
• CBSE: Project Work - System Design - Class 12

• 25–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Project-Based Learning
• 30 min · Pairs

Pairs: App Interface Critique

Pair students to choose an Indian app like Aadhaar or IRCTC. They list three strengths and three weaknesses using UI principles such as feedback and navigation. Pairs share critiques with the class for group discussion.

Explain the core principles of good User Interface (UI) and User Experience (UX) design.

Facilitation Tip

During the App Interface Critique activity, provide two contrasting interfaces so students can compare layout and interaction patterns side by side.

What to look for

Provide students with screenshots of two different app interfaces (e.g., a school portal vs. a social media app). Ask them to write down one UI principle that is well-applied in each and one UX principle that could be improved, with a brief explanation.

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

Activity 02

• Project-Based Learning
• 45 min · Small Groups

Small Groups: Wireframe Prototype Build

In small groups, students sketch paper wireframes for a DBMS login and query screen. Groups exchange prototypes for 5-minute peer tests, noting issues. They refine designs based on feedback.

Design a user interface prototype for a specific feature of your project.

Facilitation Tip

For the Wireframe Prototype Build, give students a simple data task (e.g., 'Add a new student record') to keep their focus narrow and practical.

What to look for

Students present their UI prototype sketches for a database feature. Peers provide feedback using a checklist: Is the navigation clear? Is there visual hierarchy? Is it easy to understand the purpose of each element? Peers initial the sketch if it meets the criteria or offer one specific suggestion for improvement.

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

Activity 03

• Project-Based Learning
• 40 min · Whole Class

Whole Class: Accessibility Role-Play

Assign roles simulating impairments: use blindfolds for screen readers or one hand for navigation. Class tests a projected sample interface. Discuss adaptations like keyboard shortcuts and high contrast.

Critique existing software interfaces based on UX best practices.

Facilitation Tip

In the Accessibility Role-Play, have students use only screen readers or keyboard navigation to experience barriers directly.

What to look for

Facilitate a class discussion using the prompt: 'Consider a common government service website or app in India. What is one aspect of its UI/UX that makes it difficult to use, and what specific change would you suggest to improve the user experience for citizens?'

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

Activity 04

• Project-Based Learning
• 25 min · Individual

Individual: Principle Application Sketch

Each student selects a project feature and sketches a UI applying five principles. They self-assess against a rubric. Share one sketch in a class gallery walk.

Explain the core principles of good User Interface (UI) and User Experience (UX) design.

Facilitation Tip

For the Principle Application Sketch, ensure students label each design choice with the principle it follows.

What to look for

Provide students with screenshots of two different app interfaces (e.g., a school portal vs. a social media app). Ask them to write down one UI principle that is well-applied in each and one UX principle that could be improved, with a brief explanation.

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

A few notes on teaching this unit

Teach this topic by grounding principles in real-world examples students use daily, like school portals or banking apps. Avoid abstract definitions; instead, have students analyse why a design succeeds or fails. Research shows that when students create artefacts they care about, retention improves significantly.

Successful learning looks like students confidently identifying design flaws, proposing clear improvements, and building prototypes that demonstrate user-centered thinking. They should articulate why certain choices work or fail based on principles like consistency and accessibility.

---

Watch Out for These Misconceptions

• During the App Interface Critique activity, watch for students focusing only on colours or images as the primary design elements.

  Prompt them to look at layout, button placement, and feedback mechanisms like error messages. Ask: 'Does this design help a user complete a task efficiently, even if it isn’t visually striking?'

• During the Wireframe Prototype Build activity, watch for students dismissing UX as unnecessary for database projects.

  Use their prototypes to show how unclear labels or disorganised forms slow down data entry. Ask: 'How would you feel using this if you were a clerk entering 50 records daily?'

• During the Accessibility Role-Play activity, watch for students assuming accessibility features add complexity.

  Have them experience how alt text or high-contrast modes make the interface usable for all. Ask: 'How does a simple change like this improve the experience for someone using a screen reader?'

---

Methods used in this brief

• Project-Based Learning